[ Mypage ] 내기록보기 selectOption query parameter로 받아오기

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>

src/History/components/SelectModal/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { IcMypageArrowRight, IcMypageTouchbar } from '../../../assets';
 import { optionList } from '../../constants/optionList';
@@ -8,8 +9,8 @@ import * as S from './SelectModal.style';
 interface SelectModalProps {
   modalOn: boolean;
   closeModal: () => void;
-  selectOption: (option: number) => void;
-  selectedModalOptionList: Array<number>;
+  selectOption: (section: string) => void;
+  selectedModalOptionList: Array<string>;
 }
 
 function SelectModal({
@@ -19,6 +20,7 @@ function SelectModal({
   selectedModalOptionList,
 }: SelectModalProps) {
   const [animationDirection, setAnimationDirection] = useState('slideUp');
+  const navigate = useNavigate();
 
   const handleCloseModal = () => {
     setAnimationDirection('slideDown');
@@ -46,6 +48,7 @@ function SelectModal({
                 onClick={() => {
                   selectOption(item);
                   handleCloseModal();
+                  navigate(`/mypage/history/${item}`);
                 }}
               >
                 <S.OptionListItemText>{optionList[item]}</S.OptionListItemText>

src/History/constants/optionList.ts

@@ -1,5 +1,5 @@
 export const optionList: Record<string, string> = {
-  1: '즐겨찾기한 레큐북',
-  2: '내가 만든 레큐북',
-  3: '내가 남긴 레터',
+  'favorite': '즐겨찾기한 레큐북',
+  'myBook': '내가 만든 레큐북',
+  'myLetter': '내가 남긴 레터',
 };

src/History/page/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { IcArrowDownBlack } from '../../assets';
 import Header from '../../components/common/Header';
@@ -11,27 +11,35 @@ import { optionList } from '../constants/optionList';
 import * as S from './History.style';
 
 function History() {
-  const location = useLocation();
+  const SECTION_LIST = ['favorite', 'myBook', 'myLetter'];
+
+  const navigate = useNavigate();
+  const { section } = useParams() as { section: string };
 
   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: string) => setSelectedOption(section)}
+          selectedModalOptionList={SECTION_LIST.filter(
+            (item) => item !== selectedOption,
           )}
         />
       )}
-      <Header headerTitle="내 기록보기" />
+      <Header headerTitle="내 기록보기" handleFn={handleHeaderBackBtn} />
       <S.HistoryPageBodyWrapper>
         <S.HistorySelectButton
           type="button"
@@ -42,13 +50,12 @@ function History() {
           </S.CurrentHistoryOption>
           <IcArrowDownBlack />
         </S.HistorySelectButton>
-        {
+        {section &&
           {
-            1: <MyFavoriteBookList />,
-            2: <MyLecueBookList />,
-            3: <MyLetterList />,
-          }[selectedOption]
-        }
+            favorite: <MyFavoriteBookList />,
+            myBook: <MyLecueBookList />,
+            myLetter: <MyLetterList />,
+          }[section]}
       </S.HistoryPageBodyWrapper>
     </React.Fragment>
   );

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 (

src/Router.tsx

@@ -63,7 +63,7 @@ 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/:section" element={<History />} />
             </Route>
             <Route path="/lecue-book/:bookUuid" element={<DetailPage />} />
             <Route path="/target" element={<TargetPage />} />