[Refactor/#116] 디자인 2차 수정

src/components/SelectStyle/SelectStyle.module.scss

@@ -54,8 +54,8 @@
   z-index: 1;
 
   & > img {
-    width: 17.5rem;
-    height: 17.5rem;
+    width: 13.75rem;
+    height: 13.75rem;
   }
 }
 

src/components/SelectStyle/SelectStyle.tsx

@@ -21,9 +21,9 @@ interface StyleProps {
 }
 
 const IMG_STYLE_DATA = [
-  { name: "친근한 말투", image: "/assets/img/img-style-friendly.webp" },
-  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.webp" },
-  { name: "귀여운 말투", image: "/assets/img/img-style-cute.webp" },
+  { name: "친근한 말투", image: "/assets/img/img-style-friendly.png" },
+  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.png" },
+  { name: "귀여운 말투", image: "/assets/img/img-style-cute.png" },
 ];
 
 const STYLE_NAME_MAPPING: { [key: string]: string } = {

src/components/common/Navbar/Navbar.tsx

@@ -4,8 +4,12 @@ import classNames from "classnames";
 
 import styles from "@/components/common/Navbar/Navbar.module.scss";
 
-const Navbar = ({ children }: PropsWithChildren) => {
-  return <div className={styles.Navbar}>{children}</div>;
+interface NavbarProps extends PropsWithChildren {
+  className?: string;
+}
+
+const Navbar = ({ children, className }: NavbarProps) => {
+  return <div className={classNames(styles.Navbar, className)}>{children}</div>;
 };
 
 Navbar.LeftButton = ({

src/components/ReceiptEdit/ReceiptEdit.module.scss → src/pages/ReceiptEditPage/ReceiptEditPage.module.scss

@@ -1,7 +1,7 @@
 .ReceiptEdit {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
-  padding-bottom: 2.5rem;
+  padding-bottom: 9rem;
   height: calc(100vh - 2.75rem);
   overflow: hidden;
   position: relative;
@@ -31,6 +31,15 @@
   }
 }
 
+.Navbar {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.Container {
+  z-index: 1;
+}
+
 .Top {
   z-index: 1;
 

src/components/ReceiptEdit/ReceiptEdit.tsx → src/pages/ReceiptEditPage/ReceiptEditPage.tsx

@@ -1,21 +1,24 @@
 import { useEffect, useState } from "react";
 
-import styles from "@/components/ReceiptEdit/ReceiptEdit.module.scss";
+import Navbar from "@/components/common/Navbar/Navbar";
 import Button from "@/components/ui/Button/Button";
+import Icon from "@/components/ui/Icon/Icon";
 import Input from "@/components/ui/Input/Input";
 import Text from "@/components/ui/Text/Text";
 
 import { useRoute } from "@/hooks/common/useRoute";
 
+import styles from "@/pages/ReceiptEditPage/ReceiptEditPage.module.scss";
+
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
-const ReceiptEdit = () => {
+const ReceiptEditPage = () => {
   const { navigateToHome, navigateToSelectTag } = useRoute();
 
   const { scanData, resetScanData } = useScanDataStore();
 
-  const { setOcrText } = useCreateReviewStore();
+  const { setOcrText, resetCreateReviewData } = useCreateReviewStore();
 
   const [formData, setFormData] = useState<{ key: string; value: string }[]>([]);
   const [focusState, setFocusState] = useState<{ [key: string]: boolean }>({});
@@ -69,42 +72,51 @@ const ReceiptEdit = () => {
     navigateToSelectTag();
   };
 
-  const handleReScanClick = () => {
+  const handleNavigateToHome = () => {
     resetScanData();
+    resetCreateReviewData();
     navigateToHome();
   };
 
   return (
     <div className={styles.ReceiptEdit}>
-      <div className={styles.Top}>
-        <div className={styles.TitleBox}>
-          <Text variant="titleM" color="primary" as="h1" truncated>
-            {formData.length > 0 && Object.keys(formData[0]).length > 0 && formData[0].value}
-          </Text>
-          <Text variant="titleM" color="primary" as="h1">
-            에
+      <div className={styles.Container}>
+        <Navbar className={styles.Navbar}>
+          <Navbar.LeftButton onClick={handleNavigateToHome}>
+            <Icon name="leftArrow" />
+          </Navbar.LeftButton>
+        </Navbar>
+
+        <div className={styles.Top}>
+          <div className={styles.TitleBox}>
+            <Text variant="titleM" color="primary" as="h1" truncated>
+              {formData.length > 0 && Object.keys(formData[0]).length > 0 && formData[0].value}
+            </Text>
+            <Text variant="titleM" color="primary" as="h1">
+              에
+            </Text>
+          </div>
+          <Text variant="titleM" color="primary" as="h1" align="center">
+            다녀오셨네요!
           </Text>
-        </div>
-        <Text variant="titleM" color="primary" as="h1" align="center">
-          다녀오셨네요!
-        </Text>
-
-        <div className={styles.InfoList}>
-          {formData.map((data, index) => (
-            <div key={index} className={styles.InfoItem}>
-              <Text variant="bodyXsm" color="secondary">
-                {data.key}
-              </Text>
-              <Input
-                placeholder={`${data.key} 입력`}
-                value={data.value}
-                onFocus={() => handleFocus(index.toString())}
-                onBlur={() => handleBlur(index.toString())}
-                isFocus={focusState[index.toString()] || false}
-                onChange={(e) => handleInputChange(index, e.target.value)}
-              />
-            </div>
-          ))}
+
+          <div className={styles.InfoList}>
+            {formData.map((data, index) => (
+              <div key={index} className={styles.InfoItem}>
+                <Text variant="bodyXsm" color="secondary">
+                  {data.key}
+                </Text>
+                <Input
+                  placeholder={`${data.key} 입력`}
+                  value={data.value}
+                  onFocus={() => handleFocus(index.toString())}
+                  onBlur={() => handleBlur(index.toString())}
+                  isFocus={focusState[index.toString()] || false}
+                  onChange={(e) => handleInputChange(index, e.target.value)}
+                />
+              </div>
+            ))}
+          </div>
         </div>
       </div>
 
@@ -121,7 +133,7 @@ const ReceiptEdit = () => {
               key="scan"
               text="다시 스캔하기"
               variant="secondary"
-              onClick={handleReScanClick}
+              onClick={handleNavigateToHome}
             />
             <Button
               key="confirm"
@@ -136,4 +148,4 @@ const ReceiptEdit = () => {
   );
 };
 
-export default ReceiptEdit;
+export default ReceiptEditPage;

src/router/AppRouter.tsx

@@ -7,7 +7,7 @@ import { PATH } from "@/constants/path";
 import CreateReviewFailPage from "@/pages/CreateReviewFailPage/CreateReviewFailPage";
 import HomePage from "@/pages/HomePage";
 import LoadingPage from "@/pages/LoadingPage/LoadingPage";
-import ReceiptEditPage from "@/pages/ReceiptEditPage";
+import ReceiptEditPage from "@/pages/ReceiptEditPage/ReceiptEditPage";
 import ReceiptInputPage from "@/pages/ReceiptInputPage/ReceiptInputPage";
 import RecognitionFailPage from "@/pages/RecognitionFailPage";
 import ReviewResultPage from "@/pages/ReviewResultPage/ReviewResultPage";