[Refactor/#112] 디자인 사항 수정

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss

@@ -12,7 +12,7 @@
 .ButtonWrapper {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.625rem;
   margin-top: 1.5rem;
 
   & > button {

src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx

@@ -5,7 +5,7 @@ import Text from "@/components/ui/Text/Text";
 
 import { useRoute } from "@/hooks/common/useRoute";
 
-import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 

src/components/ReceiptEdit/ReceiptEdit.module.scss

@@ -55,9 +55,25 @@
 }
 
 .Bottom {
+  z-index: 2;
+  position: fixed;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 7rem;
+  left: 0;
+  bottom: 0;
   gap: 0.875rem;
-  z-index: 1;
-  margin-top: 2.5rem;
+  background: linear-gradient(
+    180deg,
+    rgba(220, 220, 232, 0) 0%,
+    rgba(220, 220, 232, 1) 20%,
+    rgba(220, 220, 232, 1) 100%
+  );
+
+  & > button {
+    margin-top: 1.25rem;
+    width: calc(50% - 1.25rem);
+  }
 }

src/components/SelectTag/TagSheet/TagSheet.module.scss

@@ -12,7 +12,7 @@
   bottom: 0;
   width: 100%;
   max-width: 37.5rem;
-  height: 80%;
+  height: 90%;
   background: var(--color-white);
   border-radius: 1.25rem 1.25rem 0 0;
   padding: 1.25rem;

src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/provider/AppBridgeProvider/convertToNativeMessage";
 import { useUserAgent } from "@/components/provider/UserAgentProvider";
 
-import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
 interface AppBridgeProviderProps {

src/components/ui/Button/Button.module.scss

@@ -15,11 +15,11 @@
 
   &.style-tertiary {
     background-color: var(--color-gray200);
-    color: var(--color-text-secondary);
+    color: var(--color-text-tertiary);
   }
 
   &:disabled {
-    background-color: var(--color-gray350);
+    background-color: var(--color-disabled);
     color: var(--color-text-tertiary);
     cursor: not-allowed;
   }

src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx

@@ -5,7 +5,7 @@ import { useRoute } from "@/hooks/common/useRoute";
 
 import styles from "@/pages/CreateReviewFailPage/CreateReviewFailPage.module.scss";
 
-import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 

src/pages/LoadingPage/LoadingPage.module.scss

@@ -1,8 +1,6 @@
 .CreateReviewLoading {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-  padding-bottom: 2.5rem;
-  height: 100vh;
+  padding: 0 1.25rem 2.5rem;
+  height: calc(100vh - 2.75rem);
   overflow: hidden;
   background: var(--color-bg-gradient);
   display: flex;

src/pages/LoadingPage/LoadingPage.tsx

@@ -1,21 +1,34 @@
 import { useEffect } from "react";
 
+import Navbar from "@/components/common/Navbar/Navbar";
 import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
 import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
+import Icon from "@/components/ui/Icon/Icon";
 import Text from "@/components/ui/Text/Text";
 
 import { useRoute } from "@/hooks/common/useRoute";
 
 import styles from "@/pages/LoadingPage/LoadingPage.module.scss";
 
-import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
+import { useCreateReviewStore } from "@/store/useReviewStore";
+import { useScanDataStore } from "@/store/useScanDataStore";
 
 const LoadingPage = () => {
   const { send } = useAppBridge();
 
-  const { navigateToReviewResult } = useRoute();
+  const { navigateToReviewResult, navigateToHome } = useRoute();
 
-  const { generateReviewData } = useGenerateReviewStore();
+  const { generateReviewData, resetGenerateReviewData } = useGenerateReviewStore();
+  const { resetCreateReviewData } = useCreateReviewStore();
+  const { resetScanData } = useScanDataStore();
+
+  const handleNavigateToHome = () => {
+    resetGenerateReviewData();
+    resetCreateReviewData();
+    resetScanData();
+    navigateToHome();
+  };
 
   useEffect(() => {
     send({
@@ -29,19 +42,26 @@ const LoadingPage = () => {
   }, [generateReviewData]);
 
   return (
-    <div className={styles.CreateReviewLoading}>
-      <div className={styles.Title}>
-        <Text variant="titleM" color="gradient" align="center" as="h1">
-          리뷰를 만들고 있어요
-        </Text>
-        <Text variant="bodyLg" color="secondary" align="center" as="h2">
-          최대 30초까지 소요될 수 있어요
-        </Text>
-      </div>
-      <div className={styles.Image}>
-        <img src="/assets/img/img-loading.webp" alt="createReviewImg" />
+    <>
+      <Navbar>
+        <Navbar.RightButton onClick={handleNavigateToHome}>
+          <Icon name="close" />
+        </Navbar.RightButton>
+      </Navbar>
+      <div className={styles.CreateReviewLoading}>
+        <div className={styles.Title}>
+          <Text variant="titleM" color="gradient" align="center" as="h1">
+            리뷰를 만들고 있어요
+          </Text>
+          <Text variant="bodyLg" color="secondary" align="center" as="h2">
+            최대 30초까지 소요될 수 있어요
+          </Text>
+        </div>
+        <div className={styles.Image}>
+          <img src="/assets/img/img-loading.webp" alt="createReviewImg" />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/pages/ReceiptInputPage/ReceiptInputPage.tsx

@@ -82,12 +82,10 @@ const ReceiptInputPage = () => {
           <Text variant="titleM" color="primary" align="center" as="h1">
             {formData.find((item) => item.key === "place")?.value
               ? `${formData.find((item) => item.key === "place")?.value}에`
-              : "영수증 정보를"}
+              : "가게명과 메뉴명을"}
           </Text>
           <Text variant="titleM" color="primary" as="h1" align="center">
-            {formData.find((item) => item.key === "place")?.value
-              ? "다녀오셨네요!"
-              : "입력해주세요!"}
+            {formData.find((item) => item.key === "place")?.value ? "다녀오셨네요!" : "알려주세요!"}
           </Text>
 
           <div className={styles.InfoList}>
@@ -110,7 +108,7 @@ const ReceiptInputPage = () => {
 
         <div className={styles.Bottom}>
           {Object.values(focusState).some((isFocus) => isFocus) ? (
-            <Button key="edit" text="수정하기" />
+            <Button key="edit" text="다음" />
           ) : (
             <Button
               key="confirm"

src/pages/ReviewResultPage/ReviewResultPage.module.scss

@@ -1,5 +1,6 @@
 .ReviewResult {
   padding: 2.5rem 1.25rem;
+  padding-bottom: 9rem;
   height: 100vh;
   overflow: hidden;
   position: relative;
@@ -40,18 +41,34 @@
 }
 
 .Bottom {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.ButtonBox {
-  align-items: center;
-  gap: 0.875rem;
-  z-index: 1;
+  z-index: 2;
+  position: fixed;
+  width: 100%;
+  height: 7rem;
+  left: 0;
+  bottom: 0;
   display: grid;
   grid-template-columns: 30% 1fr;
-  margin-top: 1.25rem;
+  gap: 0.875rem;
+  background: linear-gradient(
+    180deg,
+    rgba(220, 220, 232, 0) 0%,
+    rgba(220, 220, 232, 1) 20%,
+    rgba(220, 220, 232, 1) 100%
+  );
+
+  & > button {
+    margin-top: 1.25rem;
+
+    &:first-of-type {
+      width: calc(100% - 1.25rem);
+      margin-left: 1.25rem;
+    }
+
+    &:last-of-type {
+      width: calc(100% - 1.25rem);
+    }
+  }
 }
 
 .Image {

src/pages/ReviewResultPage/ReviewResultPage.tsx

@@ -8,15 +8,13 @@ import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeP
 import Button from "@/components/ui/Button/Button";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
-import Toast from "@/components/ui/Toast/Toast";
 
 import { useOverlay } from "@/hooks/common/useOverlay";
 import { useRoute } from "@/hooks/common/useRoute";
-import useToast from "@/hooks/common/useToast";
 
 import styles from "@/pages/ReviewResultPage/ReviewResultPage.module.scss";
 
-import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+import { useGenerateReviewStore } from "@/store/useCreateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 
 import type { Options as ConfettiOptions } from "canvas-confetti";
@@ -30,7 +28,6 @@ export default function ReviewResultPage() {
   const { navigateToCreateReviewFail, navigateToLoading } = useRoute();
 
   const { isOpen, handleClose, handleOpen } = useOverlay();
-  const { isToast, showToast } = useToast(1000);
 
   const { ocrText, hashTag, reviewStyle } = createReviewData;
 
@@ -89,19 +86,14 @@ export default function ReviewResultPage() {
             size="sm"
             onClick={() => {
               send({ type: AppBridgeMessageType.COPY, payload: { review: generateReviewData } });
-
-              showToast();
             }}
           />
         </div>
       </div>
 
       <div className={styles.Bottom}>
-        {isToast && <Toast text="리뷰가 복사되었어요." />}
-        <div className={styles.ButtonBox}>
-          <Button text="다시생성" variant="secondary" onClick={handleRetryCreateReview} />
-          <Button text="홈으로 가기" onClick={handleOpen} />
-        </div>
+        <Button text="다시생성" variant="secondary" onClick={handleRetryCreateReview} />
+        <Button text="홈으로 가기" onClick={handleOpen} />
       </div>
 
       <HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />

src/styles/_variables.scss

@@ -18,6 +18,7 @@
   --color-text-secondary: #68696e;
   --color-text-tertiary: #a6a6ad;
   --color-text-quarternary: #e0e0e0;
+  --color-disabled: #ebecf0;
   --color-text-gradient: linear-gradient(
     90deg,
     var(--color-primary-pink),
@@ -35,7 +36,6 @@
   --color-gray100: #f8f8f8;
   --color-gray200: #ebecf0;
   --color-gray300: #e1e2e8;
-  --color-gray350: #dcdde3;
   --color-gray400: #00000026;
   --color-gray500: #00000040;
   --color-gray600: #363642;