From 9d50bf661d68927941464e85df450a46910a69ae Mon Sep 17 00:00:00 2001
From: jun <68260093+jee-eun-k@users.noreply.github.com>
Date: Sat, 6 Jul 2024 14:01:01 +0900
Subject: [PATCH] =?UTF-8?q?FAQ=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#54)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add. fix style

* Add. FAQ 페이지 추가
---
 src/App.tsx                         |   2 +
 src/pages/settings/FAQPage.tsx      | 104 ++++++++++++++++++++++++++++
 src/pages/settings/SettingsPage.tsx |   3 +-
 3 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/settings/FAQPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index adeab4d..deb8d32 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,6 +21,7 @@ import { theme } from '@/styles';
 import ResetPWMode from './pages/auth/resetPW/ResetPWMode';
 import ResetPWStep from './pages/auth/resetPW/ResetPWSteps';
 import AccountSetting from './pages/settings/AccountSetting';
+import FAQPage from './pages/settings/FAQPage';
 import PopupMessage from './components/common/PopupMessage';
 import LoginRedirect from './pages/auth/login/LoginRedirect';
 
@@ -75,6 +76,7 @@ function App() {
                 }
               />
               <Route path="/settings/account" element={<AccountSetting />} />
+              <Route path="/settings/faq" element={<FAQPage />} />
               <Route path="/record/edit" element={<EditRecordPage />} />
               <Route path="/category" element={<CategoryPage />} />
               <Route path="/category/edit" element={<EditCategoryPage />} />
diff --git a/src/pages/settings/FAQPage.tsx b/src/pages/settings/FAQPage.tsx
new file mode 100644
index 0000000..e0cb164
--- /dev/null
+++ b/src/pages/settings/FAQPage.tsx
@@ -0,0 +1,104 @@
+/* eslint-disable import/order */
+import {
+  Box, Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useEffect } from 'react';
+
+import { bottomNavigation, stepIndex } from '@/store/common';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState, useSetRecoilState } from 'recoil';
+import { modalState } from '@/store/modal';
+import Wrapper from '../auth/common/Wrapper';
+import CommonHeader from '@/components/layout/CommonHeader';
+
+const FAQPage = () => {
+  const navigation = useNavigate();
+  const setNavPage = useSetRecoilState(bottomNavigation);
+
+  const setStepIndex = useSetRecoilState(stepIndex);
+
+  const [modalInfo, setModalInfo] = useRecoilState(modalState);
+
+  const faqTexts = [
+    {
+      title: '모드가 무엇인가요?',
+      content:
+        '현재 모드는 일반인, 직장인, 학생 3가지 모드가 있습니다.<br/><br/>일반인을 제외한 모드별 특정 카테고리가 있으며, 아래와 같습니다. 직장인 : 직장 - 업무, 야근, 출장, 회식 학생 : 학생 - 00, 00, 00',
+    },
+    {
+      title: '시작하는 시간을 변경할 수 있나요?',
+      content:
+        '현재 모드는 일반인, 직장인, 학생 3가지 모드가 있습니다.<br/><br/>일반인을 제외한 모드별 특정 카테고리가 있으며, 아래와 같습니다. 직장인 : 직장 - 업무, 야근, 출장, 회식 학생 : 학생 - 00, 00, 00',
+    },
+  ];
+
+  /**
+   * get faq accordion item
+   * @param param
+   * @returns accordion item
+   */
+  const getAccordionItem = ({
+    title,
+    content,
+  }: {
+    title: string;
+    content: string;
+  }) => {
+    return (
+      <Accordion>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon sx={{color: 'grey.500'}}/>}
+        >
+          <Typography sx={{
+            color: '#FF7184',
+            fontSize: '16px',
+            fontWeight: '800'
+          }}>Q. {title}</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>{content}</Typography>
+        </AccordionDetails>
+      </Accordion>
+    );
+  };
+
+  /**
+   * get faq accordion
+   */
+  const getAccordion = () => {
+    return (
+      <Box sx={{
+        // flexDirection: 'row',
+        // justifyContent: 'flex-start',
+        // alignItems: 'flex-start',
+        // outline: '1px solid red',
+        // paddingTop: 0,
+        height: '100vh'
+      }}>
+        {faqTexts.map((faq) => 
+          getAccordionItem({ title: faq.title, content: faq.content })
+        )}
+      </Box>
+    );
+  };
+
+  useEffect(() => {
+    setNavPage(2);
+    setStepIndex(0);
+  });
+
+  return (
+    <Wrapper
+      headerComp={<CommonHeader title={'FAQ'} isShowPrevButton={true} />}
+      handlePrevBtn={() => navigation('/settings')}
+    >
+      {getAccordion()}
+    </Wrapper>
+  );
+};
+
+export default FAQPage;
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index 267d82d..bf06374 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -174,8 +174,7 @@ const SettingPage = () => {
           })}
 
           {getListSubHeader('고객 센터')}
-          {getListItem({ text: '도움말' })}
-          {getListItem({ text: '문의하기' })}
+          {getListItem({ text: 'FAQ', handler: () => navigation('/settings/faq') })}
 
           {getListSubHeader('계정')}
           {getListItem({