refactor: 영수증 정보 수정 navbar 수정

Author: sikkzz

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/pages/ReceiptEditPage.tsx

@@ -31,6 +31,15 @@
   }
 }
 
+.Navbar {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.Container {
+  z-index: 1;
+}
+
 .Top {
   z-index: 1;
 

…ents/ReceiptEdit/ReceiptEdit.module.scss …eiptEditPage/ReceiptEditPage.module.scsssrc/components/ReceiptEdit/ReceiptEdit.module.scss renamed to src/pages/ReceiptEditPage/ReceiptEditPage.module.scss src/components/ReceiptEdit/ReceiptEdit.module.scss renamed to src/pages/ReceiptEditPage/ReceiptEditPage.module.scss

@@ -1,16 +1,19 @@
 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();
@@ -74,37 +77,50 @@ const ReceiptEdit = () => {
     navigateToHome();
   };
 
+  const handleNavigateToHome = () => {
+    resetScanData();
+    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>
 
@@ -136,4 +152,4 @@ const ReceiptEdit = () => {
   );
 };
 
-export default ReceiptEdit;
+export default ReceiptEditPage;

…c/components/ReceiptEdit/ReceiptEdit.tsx …ages/ReceiptEditPage/ReceiptEditPage.tsxsrc/components/ReceiptEdit/ReceiptEdit.tsx renamed to src/pages/ReceiptEditPage/ReceiptEditPage.tsx src/components/ReceiptEdit/ReceiptEdit.tsx renamed to src/pages/ReceiptEditPage/ReceiptEditPage.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";