[Feat/#44] 페이지 라우팅 연결

src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.tsx → src/components/CreateReviewLoading/CreateReviewLoading.tsx

@@ -1,8 +1,7 @@
+import styles from "@/components/CreateReviewLoading/CreateReviewLoading.module.scss";
 import Text from "@/components/ui/Text/Text";
 
-import styles from "@/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss";
-
-const CreateReviewLoadingPage = () => {
+const CreateReviewLoading = () => {
   return (
     <div className={styles.CreateReviewLoading}>
       <div className={styles.Title}>
@@ -21,4 +20,4 @@ const CreateReviewLoadingPage = () => {
   );
 };
 
-export default CreateReviewLoadingPage;
+export default CreateReviewLoading;

src/components/Home/Home.tsx

@@ -2,7 +2,12 @@ import styles from "@/components/Home/Home.module.scss";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const Home = () => {
+  // 이후 네이티브 라우팅으로 변경
+  const { navigateToReceiptEdit, navigateToRecognitionFail } = useRoute();
+
   return (
     <div className={styles.Home}>
       <div className={styles.HomeTitle}>
@@ -17,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" />
+        <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,13 +8,15 @@ import Icon from "@/components/ui/Icon/Icon";
 import Modal from "@/components/ui/Modal/Modal";
 import Text from "@/components/ui/Text/Text";
 
+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);
@@ -26,7 +27,7 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
 
   const handleNavigateHome = () => {
     handleClose();
-    navigate("/");
+    navigateToHome();
   };
 
   return (

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -6,8 +6,11 @@ import Input from "@/components/ui/Input/Input";
 import Text from "@/components/ui/Text/Text";
 
 import { useFocus } from "@/hooks/common/useFocus";
+import { useRoute } from "@/hooks/common/useRoute";
 
 const ReceiptEdit = () => {
+  const { navigateToSelectTag } = useRoute();
+
   const [placeName, setPlaceName] = useState("청담커피 앤 토스트");
   const [foodName, setFoodName] = useState("카야토스트+음료세트");
 
@@ -69,7 +72,11 @@ const ReceiptEdit = () => {
         ) : (
           <>
             <Button text="다시 스캔하기" variant="secondary" />
-            <Button text="정보가 맞아요" disabled={!placeName || !foodName} />
+            <Button
+              text="정보가 맞아요"
+              disabled={!placeName || !foodName}
+              onClick={navigateToSelectTag}
+            />
           </>
         )}
       </div>

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/ReceiptResult/ReceiptResult.module.scss → src/components/ReviewResult/ReviewResult.module.scss

@@ -1,4 +1,4 @@
-.ReceiptResult {
+.ReviewResult {
   padding: 1.25rem;
   padding-bottom: 2.5rem;
   height: calc(100vh - 2.75rem);

src/components/ReceiptResult/ReceiptResult.tsx → src/components/ReviewResult/ReviewResult.tsx

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import confetti from "canvas-confetti";
 
 import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal";
-import styles from "@/components/ReceiptResult/ReceiptResult.module.scss";
+import styles from "@/components/ReviewResult/ReviewResult.module.scss";
 import Button from "@/components/ui/Button/Button";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
@@ -12,7 +12,7 @@ import { useOverlay } from "@/hooks/common/useOverlay";
 
 import type { Options as ConfettiOptions } from "canvas-confetti";
 
-const ReceiptResult = () => {
+const ReviewResult = () => {
   const { isOpen, handleClose, handleOpen } = useOverlay();
 
   const handleConfetti = () => {
@@ -34,7 +34,7 @@ const ReceiptResult = () => {
   }, []);
 
   return (
-    <div className={styles.ReceiptResult}>
+    <div className={styles.ReviewResult}>
       <div className={styles.Top}>
         <div className={styles.ReceiptImage}>
           <img src="/assets/img/img-style-cute-circle.png" alt="mainLogo" />
@@ -64,4 +64,4 @@ const ReceiptResult = () => {
   );
 };
 
-export default ReceiptResult;
+export default ReviewResult;

src/components/SelectStyle/SelectStyle.tsx

@@ -7,6 +7,8 @@ import Button from "@/components/ui/Button/Button";
 import Icon from "@/components/ui/Icon/Icon";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 interface StyleProps {
   name: string;
   image: string;
@@ -20,6 +22,8 @@ const IMG_STYLE_DATA = [
 ];
 
 const SelectStyle = () => {
+  const { navigateToReviewResult } = useRoute();
+
   const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
 
   const handleStyleClick = (style: StyleProps) => {
@@ -59,7 +63,7 @@ const SelectStyle = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="리뷰 만들기" />
+        <Button text="리뷰 만들기" onClick={navigateToReviewResult} />
       </div>
     </div>
   );

src/components/SelectTag/SelectTag.tsx

@@ -6,6 +6,8 @@ import Button from "@/components/ui/Button/Button";
 import Tag from "@/components/ui/Tag/Tag";
 import Text from "@/components/ui/Text/Text";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 // 임시 데이터
 const TAG_LIST = [
   "음식이 맛있어요",
@@ -22,6 +24,8 @@ const TAG_LIST = [
 ];
 
 const SelectTag = () => {
+  const { navigateToSelectStyle } = useRoute();
+
   const [selectedTagList, setSelectedTagList] = useState<string[]>([]);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
 
@@ -64,7 +68,7 @@ const SelectTag = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="다음" />
+        <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/constants/path.ts

@@ -0,0 +1,8 @@
+export const PATH = {
+  HOME: "/",
+  RECOGNITION_FAIL: "/recognition-fail",
+  RECEIPT_EDIT: "/receipt-edit",
+  SELECT_TAG: "/select-tag",
+  SELECT_STYLE: "/select-style",
+  REVIEW_RESULT: "/review-result",
+};

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>

src/pages/RecognitionFailPage.tsx

@@ -2,11 +2,15 @@ import Navbar from "@/components/common/Navbar/Navbar";
 import RecognitionFail from "@/components/RecognitionFail/RecognitionFail";
 import Icon from "@/components/ui/Icon/Icon";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const RecognitionFailPage = () => {
+  const { navigateToHome } = useRoute();
+
   return (
     <>
       <Navbar>
-        <Navbar.RightButton>
+        <Navbar.RightButton onClick={navigateToHome}>
           <Icon name="close" />
         </Navbar.RightButton>
       </Navbar>

src/pages/ReviewResultPage.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+
+import Navbar from "@/components/common/Navbar/Navbar";
+import CreateReviewLoading from "@/components/CreateReviewLoading/CreateReviewLoading";
+import ReviewResult from "@/components/ReviewResult/ReviewResult";
+import Icon from "@/components/ui/Icon/Icon";
+
+import { useRoute } from "@/hooks/common/useRoute";
+
+// 로딩 코드 api 연결 후 삭제
+export default function ReviewResultPage() {
+  const { navigateToBack } = useRoute();
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (isLoading) {
+    return <CreateReviewLoading />;
+  }
+
+  return (
+    <>
+      {!isLoading && (
+        <>
+          <Navbar>
+            <Navbar.LeftButton onClick={navigateToBack}>
+              <Icon name="leftArrow" />
+            </Navbar.LeftButton>
+          </Navbar>
+          <ReviewResult />
+        </>
+      )}
+    </>
+  );
+}

src/pages/SelectStylePage.tsx

@@ -2,11 +2,15 @@ import Navbar from "@/components/common/Navbar/Navbar";
 import SelectStyle from "@/components/SelectStyle/SelectStyle";
 import Icon from "@/components/ui/Icon/Icon";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const SelectStylePage = () => {
+  const { navigateToBack } = useRoute();
+
   return (
     <>
       <Navbar>
-        <Navbar.LeftButton>
+        <Navbar.LeftButton onClick={navigateToBack}>
           <Icon name="leftArrow" />
         </Navbar.LeftButton>
       </Navbar>