FAQ 구현 (#issue 274)

src/api/customerService.api.ts

@@ -0,0 +1,13 @@
+import type { ApiFAQ, SearchKeyword } from '../models/customerService';
+import { httpClient } from './http.api';
+
+export const getFAQ = async (params: SearchKeyword) => {
+  try {
+    const response = await httpClient.get<ApiFAQ>(`/faq`, { params });
+
+    return response.data.data;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/components/common/emptyLoadingPage/EmptyLoadingPage.styled.ts → src/components/common/emptyLoading/EmptyLoading.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { EmptyLoadingPageProps } from './EmptyLoadingPage';
+import { EmptyLoadingPageProps } from './EmptyLoading';
 
 export const Container = styled.div<EmptyLoadingPageProps>`
   width: 100%;

src/components/common/emptyLoadingPage/EmptyLoadingPage.tsx → src/components/common/emptyLoading/EmptyLoading.tsx

@@ -1,12 +1,12 @@
-import * as S from './EmptyLoadingPage.styled';
+import * as S from './EmptyLoading.styled';
 
 export interface EmptyLoadingPageProps {
   height: string;
   $tHeight: string;
   $mHeight: string;
 }
 
-export default function EmptyLoadingPage({
+export default function EmptyLoading({
   height,
   $tHeight,
   $mHeight,

src/components/common/header/Header.tsx

@@ -46,10 +46,10 @@ function Header() {
       </Link>
       <S.Wrapper>
         <S.HeaderLinkContainer>
-          <Link to={ROUTES.FAQ}>
+          <Link to={`${ROUTES.customerService}/${ROUTES.FAQ}`}>
             <S.HeaderLink>FAQ</S.HeaderLink>
           </Link>
-          <Link to={ROUTES.notice}>
+          <Link to={`${ROUTES.customerService}/${ROUTES.notice}`}>
             <S.HeaderLink>공지사항</S.HeaderLink>
           </Link>
         </S.HeaderLinkContainer>

src/components/common/noResultPage/NoResultPage.styled.ts → src/components/common/noResult/NoResult.styled.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { NoResultPageProps } from './NoResultPage';
+import { NoResultPageProps } from './NoResult';
 
 export const Container = styled.div<Pick<NoResultPageProps, 'height'>>`
   width: 100%;

src/components/common/noResultPage/NoResultPage.tsx → src/components/common/noResult/NoResult.tsx

@@ -1,11 +1,11 @@
 import { FaceFrownIcon } from '@heroicons/react/24/outline';
-import * as S from './NoResultPage.styled';
+import * as S from './NoResult.styled';
 
 export interface NoResultPageProps {
   height: string;
 }
 
-export default function NoResultPage({ height }: NoResultPageProps) {
+export default function NoResult({ height }: NoResultPageProps) {
   return (
     <S.Container height={height}>
       <S.Wrapper>

src/pages/customerService/CustomerServiceHeader.styled.ts → src/components/customerService/CustomerServiceHeader.styled.ts

@@ -35,6 +35,21 @@ export const SearchBarInput = styled.input`
   font-size: 1rem;
 `;
 
+export const ButtonWrapper = styled.div`
+  display: flex;
+  gap: 0.5rem;
+`;
+
+export const UturnButton = styled.button`
+  &:hover {
+    color: ${({ theme }) => theme.color.lightnavy};
+  }
+  svg {
+    width: 20px;
+    height: 20px;
+  }
+`;
+
 export const SearchButton = styled.button`
   svg {
     width: 20px;

src/components/customerService/CustomerServiceHeader.tsx

@@ -0,0 +1,71 @@
+import {
+  ArrowUturnLeftIcon,
+  MagnifyingGlassIcon,
+} from '@heroicons/react/24/outline';
+import * as S from './CustomerServiceHeader.styled';
+import MovedInquiredLink from './MoveInquiredLink';
+import { Outlet } from 'react-router-dom';
+import { useState } from 'react';
+
+interface CustomerServiceHeaderProps {
+  title: string;
+  keyword: string;
+  onGetKeyword: (value: string) => void;
+}
+
+export default function CustomerServiceHeader({
+  title,
+  keyword,
+  onGetKeyword,
+}: CustomerServiceHeaderProps) {
+  const [inputValue, setInputValue] = useState<string>('');
+
+  const handleSubmitKeyword = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    onGetKeyword(inputValue);
+  };
+
+  const handleChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setInputValue(value);
+  };
+
+  const handleReset = () => {
+    onGetKeyword('');
+    setInputValue('');
+  };
+
+  return (
+    <S.Container>
+      <S.WrapperTitle>
+        <S.Title>DevPals {title}</S.Title>
+      </S.WrapperTitle>
+      <S.WrapperNav>
+        <S.SearchBarForm onSubmit={handleSubmitKeyword}>
+          <S.SearchBarInput
+            type='text'
+            placeholder='궁금한 내용을 검색해보세요.'
+            value={inputValue || keyword}
+            onChange={handleChangeValue}
+          />
+          <S.ButtonWrapper>
+            {keyword !== '' && (
+              <S.UturnButton
+                type='button'
+                aria-label='show all result'
+                onClick={handleReset}
+              >
+                <ArrowUturnLeftIcon />
+              </S.UturnButton>
+            )}
+            <S.SearchButton type='submit' aria-label='search'>
+              <MagnifyingGlassIcon />
+            </S.SearchButton>
+          </S.ButtonWrapper>
+        </S.SearchBarForm>
+        <MovedInquiredLink />
+      </S.WrapperNav>
+      <Outlet />
+    </S.Container>
+  );
+}

src/components/customerService/faq/FAQContent.styled.ts

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components';
+
+export const ListContainer = styled.div`
+  width: 100%;
+`;
+
+export const ListWrapper = styled.button`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 0;
+`;
+
+export const ListTitle = styled.div`
+  font-size: 1.3rem;
+  padding-left: 1.5rem;
+  font-weight: bold;
+`;
+
+export const ListPlusIcon = styled.div<{ $isOpen: boolean }>`
+  margin-right: 1.5rem;
+  transition: transform 500ms ease-in-out;
+  ${({ $isOpen }) =>
+    $isOpen &&
+    css`
+      transform: rotate(45deg);
+    `}
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+`;
+
+export const ListContentWrapper = styled.div`
+  cursor: auto;
+  background: ${({ theme }) => theme.color.lightgrey};
+  padding: 1.5rem 1rem;
+  display: flex;
+  gap: 0.5rem;
+`;
+
+export const ListButtonWrapper = styled.div`
+  svg {
+    width: 1.3rem;
+    height: 1.3rem;
+  }
+`;
+
+export const ListContent = styled.div`
+  font-size: 1.1rem;
+  padding-right: 1.5rem;
+`;

src/components/customerService/faq/FAQContent.tsx

@@ -0,0 +1,34 @@
+import { ChevronRightIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { FAQ } from '../../../models/customerService';
+import * as S from './FAQContent.styled';
+import { useState } from 'react';
+
+interface FAQContentProps {
+  list: FAQ;
+}
+
+export default function FAQContent({ list }: FAQContentProps) {
+  const [isFAQContentOpen, setIsFAQContentOpen] = useState<boolean>(false);
+
+  return (
+    <S.ListContainer>
+      <S.ListWrapper
+        type='button'
+        onClick={() => setIsFAQContentOpen((prev) => !prev)}
+      >
+        <S.ListTitle>{list.title}</S.ListTitle>
+        <S.ListPlusIcon $isOpen={isFAQContentOpen}>
+          <PlusIcon />
+        </S.ListPlusIcon>
+      </S.ListWrapper>
+      {isFAQContentOpen && (
+        <S.ListContentWrapper>
+          <S.ListButtonWrapper>
+            <ChevronRightIcon />
+          </S.ListButtonWrapper>
+          <S.ListContent>{list.content}</S.ListContent>
+        </S.ListContentWrapper>
+      )}
+    </S.ListContainer>
+  );
+}

src/components/home/projectCardLists/ProjectCardLists.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useProjectCardListData } from '../../../hooks/useProjectCardListData';
-import EmptyLoadingPage from '../../common/emptyLoadingPage/EmptyLoadingPage';
-import NoResultPage from '../../common/noResultPage/NoResultPage';
 import CardList from './cardList/CardList';
 import Pagination from './pagination/Pagination';
 import * as S from './ProjectCardLists.styled';
 import { Link } from 'react-router-dom';
 import { ROUTES } from '../../../constants/routes';
+import EmptyLoading from '../../common/emptyLoading/EmptyLoading';
+import NoResult from '../../common/noResult/NoResult';
 
 export default function ProjectCardLists() {
   const { projectListsData, isLoading } = useProjectCardListData();
@@ -22,7 +22,7 @@ export default function ProjectCardLists() {
 
   if (isLoading)
     return (
-      <EmptyLoadingPage height='115.2rem' $tHeight='142rem' $mHeight='275rem' />
+      <EmptyLoading height='115.2rem' $tHeight='142rem' $mHeight='275rem' />
     );
 
   return (
@@ -41,7 +41,7 @@ export default function ProjectCardLists() {
             </Link>
           ))
         ) : (
-          <NoResultPage height='40rem' />
+          <NoResult height='40rem' />
         )}
       </S.Wrapper>
       <Pagination />

src/components/mypage/ScrollWrapper.styled.ts

@@ -4,6 +4,7 @@ export const ScrollWrapper = styled.div<{ $height: string }>`
   width: 100%;
   height: calc(100% - ${({ $height }) => $height});
   overflow-y: auto;
+  overflow-x: hidden;
   background: ${({ theme }) => theme.color.lightgrey};
   border-radius: ${({ theme }) => theme.borderRadius.large};
 

src/components/mypage/activityLog/inquiries/Inquiries.styled.ts

@@ -2,20 +2,34 @@ import styled from 'styled-components';
 
 export const container = styled.div`
   height: 100%;
+  padding: 0 0.5rem 0 0.8rem;
 `;
 
 export const InquiriesContainer = styled.div`
-  padding: 1rem;
   width: 100%;
 `;
 
+export const InquiriesTableHeadContainer = styled.div`
+  width: 100%;
+  position: sticky;
+  padding-top: 1rem;
+  top: 0;
+  background: ${({ theme }) => theme.color.lightgrey};
+`;
+
 export const InquiriesTableHeadWrapper = styled.div`
   width: 100%;
   display: grid;
-  grid-template-columns: 8% 18% 62% 12%;
+  grid-template-columns: 8% 15% 65% 17%;
   font-size: 1.3rem;
   font-weight: 600;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
+`;
+
+export const ContentBorder = styled.div`
+  width: 100%;
+  height: 0.5px;
+  background: ${({ theme }) => theme.color.placeholder};
 `;
 
 export const InquiriesTableHeaderNo = styled.div`
@@ -36,6 +50,7 @@ export const InquiriesTableHeaderState = styled.div`
 `;
 
 export const InquiriesWrapper = styled.div`
+  margin-top: 1rem;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;

src/components/mypage/activityLog/inquiries/Inquiries.tsx

@@ -21,12 +21,17 @@ export default function Inquiries() {
   return (
     <S.container>
       <S.InquiriesContainer>
-        <S.InquiriesTableHeadWrapper>
-          <S.InquiriesTableHeaderNo>No</S.InquiriesTableHeaderNo>
-          <S.InquiriesTableHeaderCategory>구별</S.InquiriesTableHeaderCategory>
-          <S.InquiriesTableHeaderTitle>제목</S.InquiriesTableHeaderTitle>
-          <S.InquiriesTableHeaderState>상태</S.InquiriesTableHeaderState>
-        </S.InquiriesTableHeadWrapper>
+        <S.InquiriesTableHeadContainer>
+          <S.InquiriesTableHeadWrapper>
+            <S.InquiriesTableHeaderNo>No</S.InquiriesTableHeaderNo>
+            <S.InquiriesTableHeaderCategory>
+              구별
+            </S.InquiriesTableHeaderCategory>
+            <S.InquiriesTableHeaderTitle>제목</S.InquiriesTableHeaderTitle>
+            <S.InquiriesTableHeaderState>상태</S.InquiriesTableHeaderState>
+          </S.InquiriesTableHeadWrapper>
+          <S.ContentBorder></S.ContentBorder>
+        </S.InquiriesTableHeadContainer>
         <S.InquiriesWrapper>
           {myInquiriesData.map((list, index) => (
             <Inquiry

src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts

@@ -2,12 +2,14 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   width: 100%;
-  font-size: 1.1rem;
 `;
 
-export const InquiryTitleWrapper = styled.div`
+export const InquiryTitleWrapper = styled.button`
+  width: 100%;
+  text-align: start;
+  font-size: 1.1rem;
   display: grid;
-  grid-template-columns: 8% 18% 62% 12%;
+  grid-template-columns: 8% 15% 65% 17%;
   cursor: pointer;
 `;
 

src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -22,7 +22,10 @@ export default function Inquiry({ list, no }: InquiryProps) {
 
   return (
     <S.Container>
-      <S.InquiryTitleWrapper onClick={() => setIsOpen((prev) => !prev)}>
+      <S.InquiryTitleWrapper
+        type='button'
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
         <S.InquiryNumber>{no}</S.InquiryNumber>
         <S.InquiryCategory>{`[${list.category}]`}</S.InquiryCategory>
         <S.InquiryTitle>{list.title}</S.InquiryTitle>