feat: 전체 라우팅 useRoute 커스텀 훅으로 변경

Author: sikkzz

src/components/Home/Home.tsx

@@ -1,17 +1,12 @@
-import { useNavigate } from "react-router-dom";
-
 import styles from "@/components/Home/Home.module.scss";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
-import { PATH } from "@/constants/path";
+import { useRoute } from "@/hooks/common/useRoute";
 
 const Home = () => {
-  const navigate = useNavigate();
-
-  const handleCameraButtonClick = () => {
-    navigate(PATH.RECEIPT_EDIT);
-  };
+  // 이후 네이티브 라우팅으로 변경
+  const { navigateToReceiptEdit, navigateToRecognitionFail } = useRoute();
 
   return (
     <div className={styles.Home}>
@@ -27,8 +22,8 @@ const Home = () => {
         <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
       </div>
       <div className={styles.HomeBottom}>
-        <IconButton text="갤러리" iconName="gallery" />
-        <IconButton text="카메라" iconName="camera" onClick={handleCameraButtonClick} />
+        <IconButton text="갤러리" iconName="gallery" onClick={navigateToRecognitionFail} />
+        <IconButton text="카메라" iconName="camera" onClick={navigateToReceiptEdit} />
       </div>
     </div>
   );

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 import classNames from "classnames";
 
@@ -9,15 +8,15 @@ import Icon from "@/components/ui/Icon/Icon";
 import Modal from "@/components/ui/Modal/Modal";
 import Text from "@/components/ui/Text/Text";
 
-import { PATH } from "@/constants/path";
+import { useRoute } from "@/hooks/common/useRoute";
 
 interface HomeNavigateConfirmModalProps {
   isOpen: boolean;
   handleClose: () => void;
 }
 
 const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmModalProps) => {
-  const navigate = useNavigate();
+  const { navigateToHome } = useRoute();
 
   // 이후 상태 초기값 재설정
   const [isShowButtonChecked, setIsShowButtonChecked] = useState(false);
@@ -28,7 +27,7 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
 
   const handleNavigateHome = () => {
     handleClose();
-    navigate(PATH.HOME);
+    navigateToHome();
   };
 
   return (

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -1,17 +1,15 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 import styles from "@/components/ReceiptEdit/ReceiptEdit.module.scss";
 import Button from "@/components/ui/Button/Button";
 import Input from "@/components/ui/Input/Input";
 import Text from "@/components/ui/Text/Text";
 
-import { PATH } from "@/constants/path";
-
 import { useFocus } from "@/hooks/common/useFocus";
+import { useRoute } from "@/hooks/common/useRoute";
 
 const ReceiptEdit = () => {
-  const navigate = useNavigate();
+  const { navigateToSelectTag } = useRoute();
 
   const [placeName, setPlaceName] = useState("청담커피 앤 토스트");
   const [foodName, setFoodName] = useState("카야토스트+음료세트");
@@ -23,10 +21,6 @@ const ReceiptEdit = () => {
   } = useFocus({});
   const { isFocus: isFoodFocus, onFocus: handleFoodFocus, onBlur: handleFoodBlur } = useFocus({});
 
-  const handleInfoRightButtonClick = () => {
-    navigate(PATH.SELECT_TAG);
-  };
-
   return (
     <div className={styles.ReceiptEdit}>
       <div className={styles.Top}>
@@ -81,7 +75,7 @@ const ReceiptEdit = () => {
             <Button
               text="정보가 맞아요"
               disabled={!placeName || !foodName}
-              onClick={handleInfoRightButtonClick}
+              onClick={navigateToSelectTag}
             />
           </>
         )}

src/components/RecognitionFail/RecognitionFail.tsx

@@ -2,7 +2,11 @@ import styles from "@/components/RecognitionFail/RecognitionFail.module.scss";
 import Button from "@/components/ui/Button/Button";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const RecognitionFail = () => {
+  const { navigateToHome, navigateToReceiptEdit } = useRoute();
+
   return (
     <div className={styles.RecognitionFail}>
       <div className={styles.Title}>
@@ -17,8 +21,8 @@ const RecognitionFail = () => {
         <img src="/assets/img/img-recognition-fail.png" alt="recognitionFailImg" />
       </div>
       <div className={styles.Bottom}>
-        <Button text="직접 입력하기" variant="secondary" />
-        <Button text="다시 촬영하기" variant="secondary" />
+        <Button text="직접 입력하기" variant="secondary" onClick={navigateToReceiptEdit} />
+        <Button text="다시 촬영하기" variant="secondary" onClick={navigateToHome} />
       </div>
     </div>
   );

src/components/SelectStyle/SelectStyle.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 import classNames from "classnames";
 
@@ -8,7 +7,7 @@ import Button from "@/components/ui/Button/Button";
 import Icon from "@/components/ui/Icon/Icon";
 import Text from "@/components/ui/Text/Text";
 
-import { PATH } from "@/constants/path";
+import { useRoute } from "@/hooks/common/useRoute";
 
 interface StyleProps {
   name: string;
@@ -23,18 +22,14 @@ const IMG_STYLE_DATA = [
 ];
 
 const SelectStyle = () => {
-  const navigate = useNavigate();
+  const { navigateToReviewResult } = useRoute();
 
   const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
 
   const handleStyleClick = (style: StyleProps) => {
     setSelectedStyle((prevStyle) => (prevStyle.name === style.name ? IMG_STYLE_DATA[0] : style));
   };
 
-  const handleCreateReviewButtonClick = () => {
-    navigate(PATH.REVIEW_RESULT);
-  };
-
   return (
     <div className={styles.SelectStyle}>
       <div className={styles.Title}>
@@ -68,7 +63,7 @@ const SelectStyle = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="리뷰 만들기" onClick={handleCreateReviewButtonClick} />
+        <Button text="리뷰 만들기" onClick={navigateToReviewResult} />
       </div>
     </div>
   );

src/components/SelectTag/SelectTag.tsx

@@ -1,13 +1,12 @@
 import { useState } from "react";
-import { useNavigate } from "react-router-dom";
 
 import styles from "@/components/SelectTag/SelectTag.module.scss";
 import TagSheet from "@/components/SelectTag/TagSheet/TagSheet";
 import Button from "@/components/ui/Button/Button";
 import Tag from "@/components/ui/Tag/Tag";
 import Text from "@/components/ui/Text/Text";
 
-import { PATH } from "@/constants/path";
+import { useRoute } from "@/hooks/common/useRoute";
 
 // 임시 데이터
 const TAG_LIST = [
@@ -25,7 +24,7 @@ const TAG_LIST = [
 ];
 
 const SelectTag = () => {
-  const navigate = useNavigate();
+  const { navigateToSelectStyle } = useRoute();
 
   const [selectedTagList, setSelectedTagList] = useState<string[]>([]);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
@@ -44,10 +43,6 @@ const SelectTag = () => {
     setIsBottomSheetOpen(false);
   };
 
-  const handleNextButtonClick = () => {
-    navigate(PATH.SELECT_STYLE);
-  };
-
   return (
     <div className={styles.SelectTag}>
       <div className={styles.Top}>
@@ -73,7 +68,7 @@ const SelectTag = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="다음" onClick={handleNextButtonClick} />
+        <Button text="다음" onClick={navigateToSelectStyle} />
       </div>
 
       <TagSheet isOpen={isBottomSheetOpen} handleClose={handleSheetClose} />

src/components/common/Navbar/Navbar.module.scss

@@ -6,6 +6,8 @@
   height: 2.75rem;
   padding: 0.75rem 1.25rem;
   background-color: var(--color-white);
+  z-index: 1;
+  position: relative;
 
   button {
     display: flex;

src/hooks/common/useRoute.ts

@@ -0,0 +1,19 @@
+import { useNavigate } from "react-router-dom";
+
+import { PATH } from "@/constants/path";
+
+export const useRoute = () => {
+  const navigate = useNavigate();
+
+  const routes = {
+    navigateToHome: () => navigate(PATH.HOME),
+    navigateToBack: () => navigate(-1),
+    navigateToReceiptEdit: () => navigate(PATH.RECEIPT_EDIT),
+    navigateToRecognitionFail: () => navigate(PATH.RECOGNITION_FAIL),
+    navigateToReviewResult: () => navigate(PATH.REVIEW_RESULT),
+    navigateToSelectStyle: () => navigate(PATH.SELECT_STYLE),
+    navigateToSelectTag: () => navigate(PATH.SELECT_TAG),
+  };
+
+  return routes;
+};

src/pages/HomePage.tsx

@@ -1,21 +1,17 @@
-import { useNavigate } from "react-router-dom";
-
 import Navbar from "@/components/common/Navbar/Navbar";
 import Home from "@/components/Home/Home";
 import Icon from "@/components/ui/Icon/Icon";
 import Text from "@/components/ui/Text/Text";
 
-const HomePage = () => {
-  const navigate = useNavigate();
+import { useRoute } from "@/hooks/common/useRoute";
 
-  const handleLogoClick = () => {
-    navigate("/");
-  };
+const HomePage = () => {
+  const { navigateToHome } = useRoute();
 
   return (
     <>
       <Navbar>
-        <Navbar.LeftButton onClick={handleLogoClick}>
+        <Navbar.LeftButton onClick={navigateToHome}>
           <Icon name="logo" />
         </Navbar.LeftButton>
         <Navbar.RightButton>

src/pages/ReceiptEditPage.tsx

@@ -2,11 +2,16 @@ import Navbar from "@/components/common/Navbar/Navbar";
 import ReceiptEdit from "@/components/ReceiptEdit/ReceiptEdit";
 import Icon from "@/components/ui/Icon/Icon";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const ReceiptEditPage = () => {
+  // 이후 영수증 인식 네이티브 라우팅으로 변경
+  const { navigateToHome } = useRoute();
+
   return (
     <>
       <Navbar>
-        <Navbar.LeftButton>
+        <Navbar.LeftButton onClick={navigateToHome}>
           <Icon name="leftArrow" />
         </Navbar.LeftButton>
       </Navbar>