Merge pull request #357 from Team-Lecue/Mypage/#354-Query-parameter

[ Mypage ] 내기록보기 selectOption query parameter로 받아오기
Team-Lecue · Jan 20, 2025 · c498a69 · c498a69
2 parents 594994b + 6cf7e3b
commit c498a69
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 28 deletions.
diff --git a/src/Enter/page/index.tsx b/src/Enter/page/index.tsx
@@ -36,9 +36,13 @@ function Enter() {
     }
   };
 
+  const handleHeaderBackBtn = () => {
+    navigate('/');
+  };
+
   return (
     <React.Fragment>
-      <Header headerTitle="마이페이지" />
+      <Header headerTitle="마이페이지" handleFn={handleHeaderBackBtn} />
       {isLogin ? (
         <S.MypageBodyWrapper>
           <S.NicknameWrapper>

diff --git a/src/History/components/SelectModal/index.tsx b/src/History/components/SelectModal/index.tsx
@@ -1,15 +1,17 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { IcMypageArrowRight, IcMypageTouchbar } from '../../../assets';
 import { optionList } from '../../constants/optionList';
+import { HistorySection } from '../../types/historyType';
 import SelectModalPortal from '../SelectModalPortal';
 import * as S from './SelectModal.style';
 
 interface SelectModalProps {
   modalOn: boolean;
   closeModal: () => void;
-  selectOption: (option: number) => void;
-  selectedModalOptionList: Array<number>;
+  selectOption: (section: HistorySection) => void;
+  selectedModalOptionList: Array<HistorySection>;
 }
 
 function SelectModal({
@@ -19,6 +21,7 @@ function SelectModal({
   selectedModalOptionList,
 }: SelectModalProps) {
   const [animationDirection, setAnimationDirection] = useState('slideUp');
+  const navigate = useNavigate();
 
   const handleCloseModal = () => {
     setAnimationDirection('slideDown');
@@ -46,6 +49,7 @@ function SelectModal({
                 onClick={() => {
                   selectOption(item);
                   handleCloseModal();
+                  navigate(`/mypage/history/${item}`);
                 }}
               >
                 <S.OptionListItemText>{optionList[item]}</S.OptionListItemText>

diff --git a/src/History/constants/optionList.ts b/src/History/constants/optionList.ts
@@ -1,5 +1,5 @@
 export const optionList: Record<string, string> = {
-  1: '즐겨찾기한 레큐북',
-  2: '내가 만든 레큐북',
-  3: '내가 남긴 레터',
+  favorite: '즐겨찾기한 레큐북',
+  mybook: '내가 만든 레큐북',
+  myletter: '내가 남긴 레터',
 };
diff --git a/src/History/page/index.tsx b/src/History/page/index.tsx
@@ -1,37 +1,44 @@
 import React, { useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 import { IcArrowDownBlack } from '../../assets';
 import Header from '../../components/common/Header';
-import MyFavoriteBookList from '../components/MyFavoriteBookList';
-import MyLecueBookList from '../components/MyLecueBookList';
-import MyLetterList from '../components/MyLetterList';
 import SelectModal from '../components/SelectModal';
 import { optionList } from '../constants/optionList';
+import { HistorySection } from '../types/historyType';
 import * as S from './History.style';
 
 function History() {
-  const location = useLocation();
+  const SECTION_LIST: HistorySection[] = ['favorite', 'mybook', 'myletter'];
+
+  const navigate = useNavigate();
+  const url = useLocation().pathname.split('/');
+  const section = url[url.length - 1];
 
   const [modalOn, setModalOn] = useState(false);
-  const [selectedOption, setSelectedOption] = useState<number>(location.state);
+  const [selectedOption, setSelectedOption] = useState<string>(section);
+
   const handleClickHistorySelectButton = () => {
     setModalOn(true);
   };
 
+  const handleHeaderBackBtn = () => {
+    navigate('/mypage/select-history');
+  };
+
   return (
     <React.Fragment>
       {modalOn && (
         <SelectModal
           modalOn={modalOn}
           closeModal={() => setModalOn(false)}
-          selectOption={(option: number) => setSelectedOption(option)}
-          selectedModalOptionList={[1, 2, 3].filter(
-            (num) => num !== selectedOption,
+          selectOption={(section: HistorySection) => setSelectedOption(section)}
+          selectedModalOptionList={SECTION_LIST.filter(
+            (item) => item !== selectedOption,
           )}
         />
       )}
-      <Header headerTitle="내 기록보기" />
+      <Header headerTitle="내 기록보기" handleFn={handleHeaderBackBtn} />
       <S.HistoryPageBodyWrapper>
         <S.HistorySelectButton
           type="button"
@@ -42,13 +49,7 @@ function History() {
           </S.CurrentHistoryOption>
           <IcArrowDownBlack />
         </S.HistorySelectButton>
-        {
-          {
-            1: <MyFavoriteBookList />,
-            2: <MyLecueBookList />,
-            3: <MyLetterList />,
-          }[selectedOption]
-        }
+        <Outlet />
       </S.HistoryPageBodyWrapper>
     </React.Fragment>
   );

diff --git a/src/History/types/historyType.ts b/src/History/types/historyType.ts
@@ -38,3 +38,5 @@ export interface HistoryEmptyViewProps {
   topLineText: string;
   bottomLineText: string;
 }
+
+export type HistorySection = 'favorite' | 'mybook' | 'myletter';
diff --git a/src/HistoryEnter/page/index.tsx b/src/HistoryEnter/page/index.tsx
@@ -12,33 +12,37 @@ import * as S from './HistoryEnter.style';
 function HistoryEnter() {
   const navigate = useNavigate();
 
+  const handleHeaderBackBtn = () => {
+    navigate('/mypage');
+  };
+
   const HistoryEnterList = useMemo(
     () => [
       {
         title: '즐겨찾기한 레큐북',
         variant: 'book',
         image: <ImgMypageFavoriteLecueBook />,
-        handleClickTab: () => navigate('/mypage/history', { state: 1 }),
+        handleClickTab: () => navigate('/mypage/history/favorite'),
       },
       {
         title: '내가 만든 레큐북',
         variant: 'book',
         image: <ImgMypageMakeLecueBook />,
-        handleClickTab: () => navigate('/mypage/history', { state: 2 }),
+        handleClickTab: () => navigate('/mypage/history/mybook'),
       },
       {
         title: '내가 남긴 레터',
         variant: 'letter',
         image: <ImgMypageLetter />,
-        handleClickTab: () => navigate('/mypage/history', { state: 3 }),
+        handleClickTab: () => navigate('/mypage/history/myletter'),
       },
     ],
     [],
   );
 
   return (
     <React.Fragment>
-      <Header headerTitle="내 기록보기" />
+      <Header headerTitle="내 기록보기" handleFn={handleHeaderBackBtn} />
       <S.HistoryEnterPageBodyWrapper>
         {HistoryEnterList.map((element) => {
           return (

diff --git a/src/Router.tsx b/src/Router.tsx
@@ -4,6 +4,9 @@ import { lazy, Suspense } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import LoadingPage from './components/common/LoadingPage';
+import MyFavoriteBookList from './History/components/MyFavoriteBookList';
+import MyLecueBookList from './History/components/MyLecueBookList';
+import MyLetterList from './History/components/MyLetterList';
 import Login from './Login/page';
 
 const BoundaryErrorPage = lazy(
@@ -63,7 +66,11 @@ function Router() {
               <Route path="" element={<Enter />} />
               <Route path="edit-nickname" element={<EditNickname />} />
               <Route path="select-history" element={<HistoryEnter />} />
-              <Route path="history" element={<History />} />
+              <Route path="history" element={<History />}>
+                <Route path="favorite" element={<MyFavoriteBookList />} />
+                <Route path="mybook" element={<MyLecueBookList />} />
+                <Route path="myletter" element={<MyLetterList />} />
+              </Route>
             </Route>
             <Route path="/lecue-book/:bookUuid" element={<DetailPage />} />
             <Route path="/target" element={<TargetPage />} />