-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
@@ -118,33 +118,33 @@ const ReceiptEditPage = () => {
))}
-
-
- {Object.values(focusState).some((isFocus) => isFocus) ? (
-
-
+
);
};
diff --git a/src/pages/ReceiptInputPage/ReceiptInputPage.tsx b/src/pages/ReceiptInputPage/ReceiptInputPage.tsx
index 539a363..15127c3 100644
--- a/src/pages/ReceiptInputPage/ReceiptInputPage.tsx
+++ b/src/pages/ReceiptInputPage/ReceiptInputPage.tsx
@@ -1,6 +1,6 @@
import { useState, useEffect } from "react";
-import Navbar from "@/components/common/Navbar/Navbar";
+import Navbar from "@/components/Navbar/Navbar";
import Button from "@/components/ui/Button/Button";
import Icon from "@/components/ui/Icon/Icon";
import Input from "@/components/ui/Input/Input";
diff --git a/src/pages/RecognitionFailPage.tsx b/src/pages/RecognitionFailPage.tsx
deleted file mode 100644
index d06120b..0000000
--- a/src/pages/RecognitionFailPage.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import Navbar from "@/components/common/Navbar/Navbar";
-import RecognitionFail from "@/components/RecognitionFail/RecognitionFail";
-import Icon from "@/components/ui/Icon/Icon";
-
-import { useRoute } from "@/hooks/common/useRoute";
-
-import { useScanDataStore } from "@/store/useScanDataStore";
-
-const RecognitionFailPage = () => {
- const { navigateToHome } = useRoute();
-
- const { resetScanData } = useScanDataStore();
-
- const handleNavigateToHome = () => {
- resetScanData();
- navigateToHome();
- };
-
- return (
- <>
-
-
-
-
-
-
-
-
- );
-};
-
-export default RecognitionFailPage;
diff --git a/src/components/RecognitionFail/RecognitionFail.module.scss b/src/pages/RecognitionFailPage/RecognitionFailPage.module.scss
similarity index 100%
rename from src/components/RecognitionFail/RecognitionFail.module.scss
rename to src/pages/RecognitionFailPage/RecognitionFailPage.module.scss
diff --git a/src/pages/RecognitionFailPage/RecognitionFailPage.tsx b/src/pages/RecognitionFailPage/RecognitionFailPage.tsx
new file mode 100644
index 0000000..8dfe170
--- /dev/null
+++ b/src/pages/RecognitionFailPage/RecognitionFailPage.tsx
@@ -0,0 +1,59 @@
+import Navbar from "@/components/Navbar/Navbar";
+import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
+import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
+import Button from "@/components/ui/Button/Button";
+import Icon from "@/components/ui/Icon/Icon";
+import Text from "@/components/ui/Text/Text";
+
+import { useRoute } from "@/hooks/common/useRoute";
+
+import styles from "@/pages/RecognitionFailPage/RecognitionFailPage.module.scss";
+
+import { useScanDataStore } from "@/store/useScanDataStore";
+
+const RecognitionFailPage = () => {
+ const { send } = useAppBridge();
+
+ const { navigateToHome, navgateToReceiptInput } = useRoute();
+
+ const { resetScanData } = useScanDataStore();
+
+ const handleNavigateToHome = () => {
+ resetScanData();
+ navigateToHome();
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ 영수증 인식에 실패했어요
+
+
+ {`깨끗한 배경에 영수증을 놓고\n전체가 잘 나오도록 촬영해 주세요`}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default RecognitionFailPage;
diff --git a/src/pages/SelectStylePage.tsx b/src/pages/SelectStylePage.tsx
deleted file mode 100644
index 542a805..0000000
--- a/src/pages/SelectStylePage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Navbar from "@/components/common/Navbar/Navbar";
-import SelectStyle from "@/components/SelectStyle/SelectStyle";
-import Icon from "@/components/ui/Icon/Icon";
-
-import { useRoute } from "@/hooks/common/useRoute";
-
-const SelectStylePage = () => {
- const { navigateToBack } = useRoute();
-
- return (
- <>
-
-
-
-
-
-
-
- );
-};
-
-export default SelectStylePage;
diff --git a/src/components/SelectStyle/SelectStyle.module.scss b/src/pages/SelectStylePage/SelectStylePage.module.scss
similarity index 100%
rename from src/components/SelectStyle/SelectStyle.module.scss
rename to src/pages/SelectStylePage/SelectStylePage.module.scss
diff --git a/src/pages/SelectStylePage/SelectStylePage.tsx b/src/pages/SelectStylePage/SelectStylePage.tsx
new file mode 100644
index 0000000..7e71b4e
--- /dev/null
+++ b/src/pages/SelectStylePage/SelectStylePage.tsx
@@ -0,0 +1,130 @@
+import { useState } from "react";
+
+import classNames from "classnames";
+
+import Navbar from "@/components/Navbar/Navbar";
+import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
+import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
+import StyleExampleModal from "@/components/StyleExampleModal/StyleExampleModal";
+import Button from "@/components/ui/Button/Button";
+import Icon from "@/components/ui/Icon/Icon";
+import Text from "@/components/ui/Text/Text";
+
+import { useOverlay } from "@/hooks/common/useOverlay";
+import { useRoute } from "@/hooks/common/useRoute";
+
+import styles from "@/pages/SelectStylePage/SelectStylePage.module.scss";
+
+import { useCreateReviewStore } from "@/store/useReviewStore";
+
+interface StyleProps {
+ name: string;
+ image: string;
+}
+
+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" },
+];
+
+const STYLE_NAME_MAPPING: { [key: string]: string } = {
+ "친근한 말투": "FRIENDLY",
+ "믿음직한 말투": "PROFESSIONAL",
+ "귀여운 말투": "CUTE",
+};
+
+const SelectStylePage = () => {
+ const { navigateToBack, navigateToLoading } = useRoute();
+
+ const { send } = useAppBridge();
+
+ const { createReviewData, setReviewStyle } = useCreateReviewStore();
+
+ const { isOpen, handleClose, handleOpen } = useOverlay();
+
+ const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]);
+
+ const { ocrText, hashTag } = createReviewData;
+
+ const handleStyleClick = (style: StyleProps) => {
+ setSelectedStyle((prevStyle) => (prevStyle.name === style.name ? IMG_STYLE_DATA[0] : style));
+ };
+
+ const handleCreateReview = () => {
+ const mappedStyle = STYLE_NAME_MAPPING[selectedStyle.name];
+
+ if (mappedStyle) {
+ setReviewStyle(mappedStyle);
+ }
+
+ send({
+ type: AppBridgeMessageType.CREATE_REVIEW,
+ payload: { ocrText, hashTag, reviewStyle: mappedStyle },
+ });
+
+ navigateToLoading();
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ 어떤 말투로 작성할까요?
+
+
+ 선택지에 따라 리뷰 말투가 달라져요
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {IMG_STYLE_DATA.map((style) => (
+
handleStyleClick(style)}
+ >
+
+ {style.name}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SelectStylePage;
diff --git a/src/pages/SelectTagPage.tsx b/src/pages/SelectTagPage.tsx
deleted file mode 100644
index 152e20f..0000000
--- a/src/pages/SelectTagPage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Navbar from "@/components/common/Navbar/Navbar";
-import SelectTag from "@/components/SelectTag/SelectTag";
-import Icon from "@/components/ui/Icon/Icon";
-
-import { useRoute } from "@/hooks/common/useRoute";
-
-const SelectTagPage = () => {
- const { navigateToBack } = useRoute();
-
- return (
- <>
-
-
-
-
-
-
-
- );
-};
-
-export default SelectTagPage;
diff --git a/src/components/SelectTag/SelectTag.module.scss b/src/pages/SelectTagPage/SelectTagPage.module.scss
similarity index 100%
rename from src/components/SelectTag/SelectTag.module.scss
rename to src/pages/SelectTagPage/SelectTagPage.module.scss
diff --git a/src/pages/SelectTagPage/SelectTagPage.tsx b/src/pages/SelectTagPage/SelectTagPage.tsx
new file mode 100644
index 0000000..4c1eb27
--- /dev/null
+++ b/src/pages/SelectTagPage/SelectTagPage.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+
+import Navbar from "@/components/Navbar/Navbar";
+import TagSheet from "@/components/TagSheet/TagSheet";
+import Button from "@/components/ui/Button/Button";
+import Icon from "@/components/ui/Icon/Icon";
+import Tag from "@/components/ui/Tag/Tag";
+import Text from "@/components/ui/Text/Text";
+
+import { useRoute } from "@/hooks/common/useRoute";
+
+import styles from "@/pages/SelectTagPage/SelectTagPage.module.scss";
+
+import { useCreateReviewStore } from "@/store/useReviewStore";
+
+const SelectTagPage = () => {
+ const { navigateToSelectStyle, navigateToBack } = useRoute();
+
+ const { createReviewData, setHashTag, setTagList } = useCreateReviewStore();
+
+ const { tagList, hashTag } = createReviewData;
+
+ const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
+
+ useEffect(() => {
+ setHashTag(hashTag);
+ }, [hashTag, setHashTag]);
+
+ const handleTagClick = (tag: string) => {
+ const newSelectedTags = hashTag.includes(tag)
+ ? hashTag.filter((selectedTag) => selectedTag !== tag)
+ : [...hashTag, tag];
+
+ setHashTag(newSelectedTags);
+ };
+
+ const handleTagAdd = (newTag: string) => {
+ setIsBottomSheetOpen(false);
+ setTagList([...tagList, newTag]);
+ setHashTag([...hashTag, newTag]);
+ };
+
+ const handleSheetClose = () => {
+ setIsBottomSheetOpen(false);
+ };
+
+ const handleNextClick = () => {
+ navigateToSelectStyle();
+ };
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ 어떠셨나요?
+
+
+ 복수 가능
+
+
+
+ {tagList.map((tag) => (
+ handleTagClick(tag)}
+ isSelect={hashTag.includes(tag)}
+ />
+ ))}
+ setIsBottomSheetOpen(true)} />
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SelectTagPage;
diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx
index 772e41a..ab97d7e 100644
--- a/src/router/AppRouter.tsx
+++ b/src/router/AppRouter.tsx
@@ -5,14 +5,14 @@ import App from "@/App";
import { PATH } from "@/constants/path";
import CreateReviewFailPage from "@/pages/CreateReviewFailPage/CreateReviewFailPage";
-import HomePage from "@/pages/HomePage";
+import HomePage from "@/pages/HomePage/HomePage";
import LoadingPage from "@/pages/LoadingPage/LoadingPage";
import ReceiptEditPage from "@/pages/ReceiptEditPage/ReceiptEditPage";
import ReceiptInputPage from "@/pages/ReceiptInputPage/ReceiptInputPage";
-import RecognitionFailPage from "@/pages/RecognitionFailPage";
+import RecognitionFailPage from "@/pages/RecognitionFailPage/RecognitionFailPage";
import ReviewResultPage from "@/pages/ReviewResultPage/ReviewResultPage";
-import SelectStylePage from "@/pages/SelectStylePage";
-import SelectTagPage from "@/pages/SelectTagPage";
+import SelectStylePage from "@/pages/SelectStylePage/SelectStylePage";
+import SelectTagPage from "@/pages/SelectTagPage/SelectTagPage";
const AppRouter = () => {
const router = createBrowserRouter([
- 
+