diff --git a/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss b/src/components/CreateReviewLoading/CreateReviewLoading.module.scss
similarity index 100%
rename from src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss
rename to src/components/CreateReviewLoading/CreateReviewLoading.module.scss
diff --git a/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.tsx b/src/components/CreateReviewLoading/CreateReviewLoading.tsx
similarity index 76%
rename from src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.tsx
rename to src/components/CreateReviewLoading/CreateReviewLoading.tsx
index 7b121b3..285e4b5 100644
--- a/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.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
index b0eac9e..229914d 100644
--- a/src/components/Home/Home.tsx
+++ b/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>
   );
diff --git a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx
index ea02283..f26fafb 100644
--- a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx
+++ b/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 (
diff --git a/src/components/ReceiptEdit/ReceiptEdit.tsx b/src/components/ReceiptEdit/ReceiptEdit.tsx
index a7e2404..86c4e7d 100644
--- a/src/components/ReceiptEdit/ReceiptEdit.tsx
+++ b/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>
diff --git a/src/components/RecognitionFail/RecognitionFail.tsx b/src/components/RecognitionFail/RecognitionFail.tsx
index 5e161ab..3c6ea83 100644
--- a/src/components/RecognitionFail/RecognitionFail.tsx
+++ b/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>
   );
diff --git a/src/components/ReceiptResult/ReceiptResult.module.scss b/src/components/ReviewResult/ReviewResult.module.scss
similarity index 98%
rename from src/components/ReceiptResult/ReceiptResult.module.scss
rename to src/components/ReviewResult/ReviewResult.module.scss
index bda99c2..45fa96d 100644
--- a/src/components/ReceiptResult/ReceiptResult.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/ReceiptResult/ReceiptResult.tsx b/src/components/ReviewResult/ReviewResult.tsx
similarity index 91%
rename from src/components/ReceiptResult/ReceiptResult.tsx
rename to src/components/ReviewResult/ReviewResult.tsx
index 1210d8a..14df758 100644
--- a/src/components/ReceiptResult/ReceiptResult.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
index e2965c2..c001d72 100644
--- a/src/components/SelectStyle/SelectStyle.tsx
+++ b/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>
   );
diff --git a/src/components/SelectTag/SelectTag.tsx b/src/components/SelectTag/SelectTag.tsx
index ee515ea..4203d89 100644
--- a/src/components/SelectTag/SelectTag.tsx
+++ b/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} />
diff --git a/src/components/common/Navbar/Navbar.module.scss b/src/components/common/Navbar/Navbar.module.scss
index 5038e0a..3e30025 100644
--- a/src/components/common/Navbar/Navbar.module.scss
+++ b/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;
diff --git a/src/constants/path.ts b/src/constants/path.ts
new file mode 100644
index 0000000..0ba24f1
--- /dev/null
+++ 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/hooks/common/useRoute.ts b/src/hooks/common/useRoute.ts
new file mode 100644
index 0000000..f5fea44
--- /dev/null
+++ b/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;
+};
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 79c264f..397e53d 100644
--- a/src/pages/HomePage.tsx
+++ b/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>
diff --git a/src/pages/ReceiptEditPage.tsx b/src/pages/ReceiptEditPage.tsx
index f954d41..7251cc6 100644
--- a/src/pages/ReceiptEditPage.tsx
+++ b/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>
diff --git a/src/pages/ReceiptResultPage.tsx b/src/pages/ReceiptResultPage.tsx
deleted file mode 100644
index 7a7ef5e..0000000
--- a/src/pages/ReceiptResultPage.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Navbar from "@/components/common/Navbar/Navbar";
-import ReceiptResult from "@/components/ReceiptResult/ReceiptResult";
-import Icon from "@/components/ui/Icon/Icon";
-
-export default function ReceiptResultPage() {
-  return (
-    <>
-      <Navbar>
-        <Navbar.LeftButton>
-          <Icon name="leftArrow" />
-        </Navbar.LeftButton>
-      </Navbar>
-      <ReceiptResult />
-    </>
-  );
-}
diff --git a/src/pages/RecognitionFailPage.tsx b/src/pages/RecognitionFailPage.tsx
index 96b4262..55c43ab 100644
--- a/src/pages/RecognitionFailPage.tsx
+++ b/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>
diff --git a/src/pages/ReviewResultPage.tsx b/src/pages/ReviewResultPage.tsx
new file mode 100644
index 0000000..148008c
--- /dev/null
+++ b/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 />
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/pages/SelectStylePage.tsx b/src/pages/SelectStylePage.tsx
index 5799baa..542a805 100644
--- a/src/pages/SelectStylePage.tsx
+++ b/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>
diff --git a/src/pages/SelectTagPage.tsx b/src/pages/SelectTagPage.tsx
index d0ee869..152e20f 100644
--- a/src/pages/SelectTagPage.tsx
+++ b/src/pages/SelectTagPage.tsx
@@ -2,11 +2,15 @@ import Navbar from "@/components/common/Navbar/Navbar";
 import SelectTag from "@/components/SelectTag/SelectTag";
 import Icon from "@/components/ui/Icon/Icon";
 
+import { useRoute } from "@/hooks/common/useRoute";
+
 const SelectTagPage = () => {
+  const { navigateToBack } = useRoute();
+
   return (
     <>
       <Navbar>
-        <Navbar.LeftButton>
+        <Navbar.LeftButton onClick={navigateToBack}>
           <Icon name="leftArrow" />
         </Navbar.LeftButton>
       </Navbar>
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 033029c..3988153 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -2,18 +2,19 @@ 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: [
         {
@@ -21,28 +22,24 @@ const AppRouter = () => {
           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 />,
         },
       ],
     },