diff --git a/public/assets/img/img-style-cute.png b/public/assets/img/img-style-cute.png new file mode 100644 index 0000000..4df9df2 Binary files /dev/null and b/public/assets/img/img-style-cute.png differ diff --git a/public/assets/img/img-style-cute.webp b/public/assets/img/img-style-cute.webp deleted file mode 100644 index a76bbbf..0000000 Binary files a/public/assets/img/img-style-cute.webp and /dev/null differ diff --git a/public/assets/img/img-style-friendly.png b/public/assets/img/img-style-friendly.png new file mode 100644 index 0000000..c5d6e1b Binary files /dev/null and b/public/assets/img/img-style-friendly.png differ diff --git a/public/assets/img/img-style-friendly.webp b/public/assets/img/img-style-friendly.webp deleted file mode 100644 index 76fd469..0000000 Binary files a/public/assets/img/img-style-friendly.webp and /dev/null differ diff --git a/public/assets/img/img-style-trust.png b/public/assets/img/img-style-trust.png new file mode 100644 index 0000000..5c3afa4 Binary files /dev/null and b/public/assets/img/img-style-trust.png differ diff --git a/public/assets/img/img-style-trust.webp b/public/assets/img/img-style-trust.webp deleted file mode 100644 index 6533434..0000000 Binary files a/public/assets/img/img-style-trust.webp and /dev/null differ diff --git a/src/components/SelectStyle/SelectStyle.module.scss b/src/components/SelectStyle/SelectStyle.module.scss index d41c6fd..baa946a 100644 --- a/src/components/SelectStyle/SelectStyle.module.scss +++ b/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; } } diff --git a/src/components/SelectStyle/SelectStyle.tsx b/src/components/SelectStyle/SelectStyle.tsx index 47c50cc..16661eb 100644 --- a/src/components/SelectStyle/SelectStyle.tsx +++ b/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 } = { diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx index da5fc27..e7b62fd 100644 --- a/src/components/common/Navbar/Navbar.tsx +++ b/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
{children}
; +interface NavbarProps extends PropsWithChildren { + className?: string; +} + +const Navbar = ({ children, className }: NavbarProps) => { + return
{children}
; }; Navbar.LeftButton = ({ diff --git a/src/pages/ReceiptEditPage.tsx b/src/pages/ReceiptEditPage.tsx deleted file mode 100644 index f7d4ea3..0000000 --- a/src/pages/ReceiptEditPage.tsx +++ /dev/null @@ -1,32 +0,0 @@ -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"; - -import { useScanDataStore } from "@/store/useScanDataStore"; - -const ReceiptEditPage = () => { - const { navigateToHome } = useRoute(); - - const { resetScanData } = useScanDataStore(); - - const handleNavigateToHome = () => { - resetScanData(); - navigateToHome(); - }; - - return ( - <> - - - - - - - - - ); -}; - -export default ReceiptEditPage; diff --git a/src/components/ReceiptEdit/ReceiptEdit.module.scss b/src/pages/ReceiptEditPage/ReceiptEditPage.module.scss similarity index 92% rename from src/components/ReceiptEdit/ReceiptEdit.module.scss rename to src/pages/ReceiptEditPage/ReceiptEditPage.module.scss index 65529de..77a0cfb 100644 --- a/src/components/ReceiptEdit/ReceiptEdit.module.scss +++ b/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; diff --git a/src/components/ReceiptEdit/ReceiptEdit.tsx b/src/pages/ReceiptEditPage/ReceiptEditPage.tsx similarity index 60% rename from src/components/ReceiptEdit/ReceiptEdit.tsx rename to src/pages/ReceiptEditPage/ReceiptEditPage.tsx index 6e60fb9..fa25e62 100644 --- a/src/components/ReceiptEdit/ReceiptEdit.tsx +++ b/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 (
-
-
- - {formData.length > 0 && Object.keys(formData[0]).length > 0 && formData[0].value} - - - 에 +
+ + + + + + +
+
+ + {formData.length > 0 && Object.keys(formData[0]).length > 0 && formData[0].value} + + + 에 + +
+ + 다녀오셨네요! -
- - 다녀오셨네요! - - -
- {formData.map((data, index) => ( -
- - {data.key} - - handleFocus(index.toString())} - onBlur={() => handleBlur(index.toString())} - isFocus={focusState[index.toString()] || false} - onChange={(e) => handleInputChange(index, e.target.value)} - /> -
- ))} + +
+ {formData.map((data, index) => ( +
+ + {data.key} + + handleFocus(index.toString())} + onBlur={() => handleBlur(index.toString())} + isFocus={focusState[index.toString()] || false} + onChange={(e) => handleInputChange(index, e.target.value)} + /> +
+ ))} +
@@ -121,7 +133,7 @@ const ReceiptEdit = () => { key="scan" text="다시 스캔하기" variant="secondary" - onClick={handleReScanClick} + onClick={handleNavigateToHome} />