feat: 전체 페이지 라우팅 연결

sikkzz · sikkzz · commit faef82be181f · 2025-02-04T22:22:34.000+09:00
diff --git a/src/components/CreateReviewLoading/CreateReviewLoading.module.scss b/src/components/CreateReviewLoading/CreateReviewLoading.module.scss
diff --git a/src/components/CreateReviewLoading/CreateReviewLoading.tsx b/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;
diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
@@ -1,8 +1,18 @@
+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";
+
 const Home = () => {
+  const navigate = useNavigate();
+
+  const handleCameraButtonClick = () => {
+    navigate(PATH.RECEIPT_EDIT);
+  };
+
   return (
     <div className={styles.Home}>
       <div className={styles.HomeTitle}>
@@ -18,7 +28,7 @@ const Home = () => {
       </div>
       <div className={styles.HomeBottom}>
         <IconButton text="갤러리" iconName="gallery" />
-        <IconButton text="카메라" iconName="camera" />
+        <IconButton text="카메라" iconName="camera" onClick={handleCameraButtonClick} />
       </div>
     </div>
   );
diff --git a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx
@@ -9,6 +9,8 @@ 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";
+
 interface HomeNavigateConfirmModalProps {
   isOpen: boolean;
   handleClose: () => void;
@@ -26,7 +28,7 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
 
   const handleNavigateHome = () => {
     handleClose();
-    navigate("/");
+    navigate(PATH.HOME);
   };
 
   return (
diff --git a/src/components/ReceiptEdit/ReceiptEdit.tsx b/src/components/ReceiptEdit/ReceiptEdit.tsx
@@ -1,13 +1,18 @@
 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";
 
 const ReceiptEdit = () => {
+  const navigate = useNavigate();
+
   const [placeName, setPlaceName] = useState("청담커피 앤 토스트");
   const [foodName, setFoodName] = useState("카야토스트+음료세트");
 
@@ -18,6 +23,10 @@ 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}>
@@ -69,7 +78,11 @@ const ReceiptEdit = () => {
         ) : (
           <>
             <Button text="다시 스캔하기" variant="secondary" />
-            <Button text="정보가 맞아요" disabled={!placeName || !foodName} />
+            <Button
+              text="정보가 맞아요"
+              disabled={!placeName || !foodName}
+              onClick={handleInfoRightButtonClick}
+            />
           </>
         )}
       </div>
diff --git a/src/components/ReviewResult/ReviewResult.module.scss b/src/components/ReviewResult/ReviewResult.module.scss
@@ -1,4 +1,4 @@
-.ReceiptResult {
+.ReviewResult {
   padding: 1.25rem;
   padding-bottom: 2.5rem;
   height: calc(100vh - 2.75rem);
diff --git a/src/components/ReviewResult/ReviewResult.tsx b/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;
diff --git a/src/components/SelectStyle/SelectStyle.tsx b/src/components/SelectStyle/SelectStyle.tsx
@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 import classNames from "classnames";
 
@@ -7,6 +8,8 @@ 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";
+
 interface StyleProps {
   name: string;
   image: string;
@@ -20,12 +23,18 @@ const IMG_STYLE_DATA = [
 ];
 
 const SelectStyle = () => {
+  const navigate = useNavigate();
+
   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}>
@@ -59,7 +68,7 @@ const SelectStyle = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="리뷰 만들기" />
+        <Button text="리뷰 만들기" onClick={handleCreateReviewButtonClick} />
       </div>
     </div>
   );
diff --git a/src/components/SelectTag/SelectTag.tsx b/src/components/SelectTag/SelectTag.tsx
@@ -1,11 +1,14 @@
 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";
+
 // 임시 데이터
 const TAG_LIST = [
   "음식이 맛있어요",
@@ -22,6 +25,8 @@ const TAG_LIST = [
 ];
 
 const SelectTag = () => {
+  const navigate = useNavigate();
+
   const [selectedTagList, setSelectedTagList] = useState<string[]>([]);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
 
@@ -39,6 +44,10 @@ const SelectTag = () => {
     setIsBottomSheetOpen(false);
   };
 
+  const handleNextButtonClick = () => {
+    navigate(PATH.SELECT_STYLE);
+  };
+
   return (
     <div className={styles.SelectTag}>
       <div className={styles.Top}>
@@ -64,7 +73,7 @@ const SelectTag = () => {
       </div>
 
       <div className={styles.Bottom}>
-        <Button text="다음" />
+        <Button text="다음" onClick={handleNextButtonClick} />
       </div>
 
       <TagSheet isOpen={isBottomSheetOpen} handleClose={handleSheetClose} />
diff --git a/src/constants/path.ts b/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",
+};
diff --git a/src/pages/ReceiptResultPage.tsx b/src/pages/ReceiptResultPage.tsx
diff --git a/src/pages/ReviewResultPage.tsx b/src/pages/ReviewResultPage.tsx
@@ -0,0 +1,38 @@
+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";
+
+// 로딩 코드 api 연결 후 삭제
+export default function ReviewResultPage() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (isLoading) {
+    return <CreateReviewLoading />;
+  }
+
+  return (
+    <>
+      {!isLoading && (
+        <>
+          <Navbar>
+            <Navbar.LeftButton>
+              <Icon name="leftArrow" />
+            </Navbar.LeftButton>
+          </Navbar>
+          <ReviewResult />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
@@ -2,47 +2,44 @@ import { RouterProvider, createBrowserRouter } from "react-router-dom";
 
 import App from "@/App";
 
-import CreateReviewLoadingPage from "@/pages/CreateReviewLoadingPage/CreateReviewLoadingPage";
+import { PATH } from "@/constants/path";
+
 import HomePage from "@/pages/HomePage";
 import ReceiptEditPage from "@/pages/ReceiptEditPage";
-import ReceiptResultPage from "@/pages/ReceiptResultPage";
 import RecognitionFailPage from "@/pages/RecognitionFailPage";
+import ReviewResultPage from "@/pages/ReviewResultPage";
 import SelectStylePage from "@/pages/SelectStylePage";
 import SelectTagPage from "@/pages/SelectTagPage";
 
 const AppRouter = () => {
   const router = createBrowserRouter([
     {
-      path: "/",
+      path: PATH.HOME,
       element: <App />,
       children: [
         {
           path: "",
           element: <HomePage />,
         },
         {
-          path: "/recognition-fail",
+          path: PATH.RECOGNITION_FAIL,
           element: <RecognitionFailPage />,
         },
         {
-          path: "/receipt-edit",
+          path: PATH.RECEIPT_EDIT,
           element: <ReceiptEditPage />,
         },
         {
-          path: "/select-tag",
+          path: PATH.SELECT_TAG,
           element: <SelectTagPage />,
         },
         {
-          path: "/select-style",
+          path: PATH.SELECT_STYLE,
           element: <SelectStylePage />,
         },
         {
-          path: "/create-review-loading",
-          element: <CreateReviewLoadingPage />,
-        },
-        {
-          path: "/receipt-result",
-          element: <ReceiptResultPage />,
+          path: PATH.REVIEW_RESULT,
+          element: <ReviewResultPage />,
         },
       ],
     },

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-.ReceiptResult {`
	`1`	`+.ReviewResult {`
`2`	`2`	`padding: 1.25rem;`
`3`	`3`	`padding-bottom: 2.5rem;`
`4`	`4`	`height: calc(100vh - 2.75rem);`