FAQ 구현 (#issue 274)

src/api/customerService.api.ts

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

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

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+export const SpinnerWrapper = styled.div`
+  height: 60vh;
+`;
+
+export const Container = styled.section`
+  margin-top: 2rem;
+  margin-bottom: 5rem;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`;
+
+export const Wrapper = styled.div`
+  width: 75%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+`;
+
+export const ContentBorder = styled.div`
+  width: 100%;
+  height: 0.5px;
+  background: ${({ theme }) => theme.color.placeholder};
+`;

src/components/customerService/faq/FAQ.tsx

@@ -0,0 +1,35 @@
+import { Fragment } from 'react/jsx-runtime';
+import { useGetFAQ } from '../../../hooks/useGetFAQ';
+import CustomerServiceHeader from '../../../pages/customerService/CustomerServiceHeader';
+import Spinner from '../../mypage/Spinner';
+import * as S from './FAQ.styled';
+import FAQContent from './FAQContent';
+
+export default function FAQ() {
+  const { faqData, isLoading } = useGetFAQ();
+
+  if (!faqData || faqData.length === 0) return;
+
+  if (isLoading)
+    return (
+      <S.SpinnerWrapper>
+        <Spinner />
+      </S.SpinnerWrapper>
+    );
+
+  return (
+    <>
+      <CustomerServiceHeader title='FAQ' />
+      <S.Container>
+        <S.Wrapper>
+          {faqData.map((list) => (
+            <Fragment key={list.id}>
+              <FAQContent list={list} />
+              <S.ContentBorder></S.ContentBorder>
+            </Fragment>
+          ))}
+        </S.Wrapper>
+      </S.Container>
+    </>
+  );
+}

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

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

src/components/customerService/faq/FAQContent.tsx

@@ -0,0 +1,31 @@
+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 onClick={() => setIsFAQContentOpen((prev) => !prev)}>
+        <S.ListTitle>{list.title}</S.ListTitle>
+        <S.ListPlusButton type='button' $isOpen={isFAQContentOpen}>
+          <PlusIcon />
+        </S.ListPlusButton>
+      </S.ListWrapper>
+      {isFAQContentOpen && (
+        <S.ListContentWrapper>
+          <S.ListButtonWrapper>
+            <ChevronRightIcon />
+          </S.ListButtonWrapper>
+          <S.ListContent>{list.content}</S.ListContent>
+        </S.ListContentWrapper>
+      )}
+    </S.ListContainer>
+  );
+}

src/pages/customerService/notice/Notice.tsx → src/components/customerService/notice/Notice.tsx

@@ -1,4 +1,4 @@
-import CustomerServiceHeader from '../CustomerServiceHeader';
+import CustomerServiceHeader from '../../../pages/customerService/CustomerServiceHeader';
 import * as S from './Notice.styled';
 
 export default function Notice() {

src/components/mypage/myProfile/MyProfile.styled.ts

@@ -31,8 +31,5 @@ export const Container = styled.div`
 `;
 
 export const SectionContainer = styled.section`
-  background-color: ${({ theme }) => theme.color.lightgrey};
-  border-radius: ${({ theme }) => theme.borderRadius.large} 0 0
-    ${({ theme }) => theme.borderRadius.large};
   padding: 2rem;
 `;

src/hooks/queries/keys.ts

@@ -43,3 +43,8 @@ export const ActivityLog = {
   myComments: ['MyComments'],
   myInquiries: ['MyInquiries'],
 };
+
+export const CustomerService = {
+  faq: ['faq'],
+  notice: ['notice'],
+};

src/hooks/useGetFAQ.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { getFAQ } from '../api/customerService.api';
+import { CustomerService } from './queries/keys';
+
+export const useGetFAQ = () => {
+  const { data: faqData, isLoading } = useQuery({
+    queryKey: [CustomerService.faq],
+    queryFn: () => getFAQ(),
+  });
+
+  return { faqData, isLoading };
+};

src/models/customerService.ts

@@ -0,0 +1,11 @@
+import { ApiCommonType } from './apiCommon';
+
+export interface FAQ {
+  id: number;
+  title: string;
+  content: string;
+}
+
+export interface ApiFAQ extends ApiCommonType {
+  data: FAQ[];
+}

src/routes/AppRoutes.tsx

@@ -21,9 +21,13 @@ const ChangePassword = lazy(
 const Main = lazy(() => import('../pages/main/Index'));
 const Layout = lazy(() => import('../components/common/layout/Layout'));
 const Home = lazy(() => import('../pages/home/Home'));
-const FAQ = lazy(() => import('../pages/customerService/faq/FAQ'));
-const Notice = lazy(() => import('../pages/customerService/notice/Notice'));
-const Inquiry = lazy(() => import('../pages/customerService/inquiry/Inquiry'));
+const FAQ = lazy(() => import('../components/customerService/faq/FAQ'));
+const Notice = lazy(
+  () => import('../components/customerService/notice/Notice')
+);
+const Inquiry = lazy(
+  () => import('../components/customerService/inquiry/Inquiry')
+);
 const MyPage = lazy(() => import('../pages/mypage/MyPage'));
 const UserPage = lazy(() => import('../pages/userpage/UserPage'));
 const Apply = lazy(() => import('../pages/apply/ApplyStep'));