diff --git a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss index a89d74a..26b50a8 100644 --- a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss +++ b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss @@ -12,7 +12,7 @@ .ButtonWrapper { display: flex; align-items: center; - gap: 0.25rem; + gap: 0.625rem; margin-top: 1.5rem; & > button { diff --git a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx index e02ad19..6a7fd47 100644 --- a/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx +++ b/src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx @@ -5,7 +5,7 @@ import Text from "@/components/ui/Text/Text"; import { useRoute } from "@/hooks/common/useRoute"; -import { useGenerateReviewStore } from "@/store/useGenerateReviewStore"; +import { useGenerateReviewStore } from "@/store/useCreateReviewStore"; import { useCreateReviewStore } from "@/store/useReviewStore"; import { useScanDataStore } from "@/store/useScanDataStore"; diff --git a/src/components/ReceiptEdit/ReceiptEdit.module.scss b/src/components/ReceiptEdit/ReceiptEdit.module.scss index 4749200..65529de 100644 --- a/src/components/ReceiptEdit/ReceiptEdit.module.scss +++ b/src/components/ReceiptEdit/ReceiptEdit.module.scss @@ -55,9 +55,25 @@ } .Bottom { + z-index: 2; + position: fixed; display: flex; align-items: center; + justify-content: center; + width: 100%; + height: 7rem; + left: 0; + bottom: 0; gap: 0.875rem; - z-index: 1; - margin-top: 2.5rem; + background: linear-gradient( + 180deg, + rgba(220, 220, 232, 0) 0%, + rgba(220, 220, 232, 1) 20%, + rgba(220, 220, 232, 1) 100% + ); + + & > button { + margin-top: 1.25rem; + width: calc(50% - 1.25rem); + } } diff --git a/src/components/SelectTag/TagSheet/TagSheet.module.scss b/src/components/SelectTag/TagSheet/TagSheet.module.scss index 1e67aeb..7767a45 100644 --- a/src/components/SelectTag/TagSheet/TagSheet.module.scss +++ b/src/components/SelectTag/TagSheet/TagSheet.module.scss @@ -12,7 +12,7 @@ bottom: 0; width: 100%; max-width: 37.5rem; - height: 80%; + height: 90%; background: var(--color-white); border-radius: 1.25rem 1.25rem 0 0; padding: 1.25rem; diff --git a/src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx b/src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx index de18a88..dcdde63 100644 --- a/src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx +++ b/src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx @@ -8,7 +8,7 @@ import { } from "@/components/provider/AppBridgeProvider/convertToNativeMessage"; import { useUserAgent } from "@/components/provider/UserAgentProvider"; -import { useGenerateReviewStore } from "@/store/useGenerateReviewStore"; +import { useGenerateReviewStore } from "@/store/useCreateReviewStore"; import { useScanDataStore } from "@/store/useScanDataStore"; interface AppBridgeProviderProps { diff --git a/src/components/ui/Button/Button.module.scss b/src/components/ui/Button/Button.module.scss index 703099c..d222b87 100644 --- a/src/components/ui/Button/Button.module.scss +++ b/src/components/ui/Button/Button.module.scss @@ -15,11 +15,11 @@ &.style-tertiary { background-color: var(--color-gray200); - color: var(--color-text-secondary); + color: var(--color-text-tertiary); } &:disabled { - background-color: var(--color-gray350); + background-color: var(--color-disabled); color: var(--color-text-tertiary); cursor: not-allowed; } diff --git a/src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx b/src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx index 7c62ca3..10ff9f5 100644 --- a/src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx +++ b/src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx @@ -5,7 +5,7 @@ import { useRoute } from "@/hooks/common/useRoute"; import styles from "@/pages/CreateReviewFailPage/CreateReviewFailPage.module.scss"; -import { useGenerateReviewStore } from "@/store/useGenerateReviewStore"; +import { useGenerateReviewStore } from "@/store/useCreateReviewStore"; import { useCreateReviewStore } from "@/store/useReviewStore"; import { useScanDataStore } from "@/store/useScanDataStore"; diff --git a/src/pages/LoadingPage/LoadingPage.module.scss b/src/pages/LoadingPage/LoadingPage.module.scss index ecc0349..cbe5caf 100644 --- a/src/pages/LoadingPage/LoadingPage.module.scss +++ b/src/pages/LoadingPage/LoadingPage.module.scss @@ -1,8 +1,6 @@ .CreateReviewLoading { - padding-left: 1.25rem; - padding-right: 1.25rem; - padding-bottom: 2.5rem; - height: 100vh; + padding: 0 1.25rem 2.5rem; + height: calc(100vh - 2.75rem); overflow: hidden; background: var(--color-bg-gradient); display: flex; diff --git a/src/pages/LoadingPage/LoadingPage.tsx b/src/pages/LoadingPage/LoadingPage.tsx index bb17bf3..85edbfc 100644 --- a/src/pages/LoadingPage/LoadingPage.tsx +++ b/src/pages/LoadingPage/LoadingPage.tsx @@ -1,21 +1,34 @@ import { useEffect } from "react"; +import Navbar from "@/components/common/Navbar/Navbar"; import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types"; import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider"; +import Icon from "@/components/ui/Icon/Icon"; import Text from "@/components/ui/Text/Text"; import { useRoute } from "@/hooks/common/useRoute"; import styles from "@/pages/LoadingPage/LoadingPage.module.scss"; -import { useGenerateReviewStore } from "@/store/useGenerateReviewStore"; +import { useGenerateReviewStore } from "@/store/useCreateReviewStore"; +import { useCreateReviewStore } from "@/store/useReviewStore"; +import { useScanDataStore } from "@/store/useScanDataStore"; const LoadingPage = () => { const { send } = useAppBridge(); - const { navigateToReviewResult } = useRoute(); + const { navigateToReviewResult, navigateToHome } = useRoute(); - const { generateReviewData } = useGenerateReviewStore(); + const { generateReviewData, resetGenerateReviewData } = useGenerateReviewStore(); + const { resetCreateReviewData } = useCreateReviewStore(); + const { resetScanData } = useScanDataStore(); + + const handleNavigateToHome = () => { + resetGenerateReviewData(); + resetCreateReviewData(); + resetScanData(); + navigateToHome(); + }; useEffect(() => { send({ @@ -29,19 +42,26 @@ const LoadingPage = () => { }, [generateReviewData]); return ( -
-
- - 리뷰를 만들고 있어요 - - - 최대 30초까지 소요될 수 있어요 - -
-
- createReviewImg + <> + + + + + +
+
+ + 리뷰를 만들고 있어요 + + + 최대 30초까지 소요될 수 있어요 + +
+
+ createReviewImg +
-
+ ); }; diff --git a/src/pages/ReceiptInputPage/ReceiptInputPage.tsx b/src/pages/ReceiptInputPage/ReceiptInputPage.tsx index b14cd1d..539a363 100644 --- a/src/pages/ReceiptInputPage/ReceiptInputPage.tsx +++ b/src/pages/ReceiptInputPage/ReceiptInputPage.tsx @@ -82,12 +82,10 @@ const ReceiptInputPage = () => { {formData.find((item) => item.key === "place")?.value ? `${formData.find((item) => item.key === "place")?.value}에` - : "영수증 정보를"} + : "가게명과 메뉴명을"} - {formData.find((item) => item.key === "place")?.value - ? "다녀오셨네요!" - : "입력해주세요!"} + {formData.find((item) => item.key === "place")?.value ? "다녀오셨네요!" : "알려주세요!"}
@@ -110,7 +108,7 @@ const ReceiptInputPage = () => {
{Object.values(focusState).some((isFocus) => isFocus) ? ( -
- {isToast && } -
-
+
diff --git a/src/store/useGenerateReviewStore.ts b/src/store/useCreateReviewStore.ts similarity index 100% rename from src/store/useGenerateReviewStore.ts rename to src/store/useCreateReviewStore.ts diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index d0c9898..d62c4e6 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -18,6 +18,7 @@ --color-text-secondary: #68696e; --color-text-tertiary: #a6a6ad; --color-text-quarternary: #e0e0e0; + --color-disabled: #ebecf0; --color-text-gradient: linear-gradient( 90deg, var(--color-primary-pink), @@ -35,7 +36,6 @@ --color-gray100: #f8f8f8; --color-gray200: #ebecf0; --color-gray300: #e1e2e8; - --color-gray350: #dcdde3; --color-gray400: #00000026; --color-gray500: #00000040; --color-gray600: #363642;