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}
/>