diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index 3cb9852..2eb8e59 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -3,8 +3,6 @@ import { useEffect } from "react"; import styles from "@/components/Home/Home.module.scss"; import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types"; import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider"; -import { WebBridgeMessageType } from "@/components/provider/WebBridgeProvider/WebBridgeProvider"; -import { useWebBridge } from "@/components/provider/WebBridgeProvider/WebBridgeProvider"; import IconButton from "@/components/ui/IconButton/IconButton"; import Text from "@/components/ui/Text/Text"; @@ -16,159 +14,44 @@ export interface ScanResult { [key: string]: string; } -// const Home = () => { -// const { send } = useAppBridge(); -// const { receive } = useWebBridge(); - -// const { scanData, setScanData } = useScanDataStore(); - -// const { navigateToReceiptEdit } = useRoute(); - -// // receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData }); - -// useEffect(() => { -// // receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData }); -// // window.response = { -// // receiveScanResult: (jsonData: string) => { -// // try { -// // const data: ScanResult[] = JSON.parse(jsonData); -// // setAbc(true); -// // setScanData(data); -// // // navigateToReceiptEdit(); -// // } catch (error) { -// // console.error("Error parsing scan result JSON:", error); -// // } -// // }, -// // }; -// }, []); - -// return ( -//
-//
-// -// {`영수증으로\nAI 음식 리뷰 남겨요`} -// -// -// {scanData.length > 0 && -// scanData.map((data) => ( -// <> -// {Object.keys(data).map((key) => ( -//
-// -// {key} -// -// -// {data[key]} -// -//
-// ))} -// -// ))} -// 손쉬운 음식 리뷰 작성 -//
-//
-//
-// mainLogo -//
-//
-// send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" })} -// /> -// { -// send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" }); - -// // 네이티브 데이터 수신 핸들러 등록 -// window.response = { -// receiveScanResult: (jsonData: string) => { -// try { -// const data: ScanResult[] = JSON.parse(jsonData); -// receive({ -// type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, -// payload: data, -// }); - -// // 데이터 저장 및 페이지 이동 -// setScanData(data); -// setTimeout(() => { -// navigateToReceiptEdit(); -// }, 0); -// // navigateToReceiptEdit(); -// } catch (error) { -// console.error("Error parsing scan result JSON:", error); -// } -// }, -// }; -// }} -// /> - -// {/* */} +const Home = () => { + const { send } = useAppBridge(); -// -//
-//
-// ); -// }; + const { navigateToReceiptEdit } = useRoute(); -// export default Home; + const testNavigate = () => { + if (window.response) { + window.response.receiveScanResult( + JSON.stringify([ + { 가게명: "청담커피 앤 토스트" }, + { 품명: "카야토스트+음료세트" }, + { 가격: 3000 }, + ]), + ); + } + setTimeout(() => { + navigateToReceiptEdit(); + }, 3000); + }; -const Home = () => { - const { send } = useAppBridge(); - const { receive } = useWebBridge(); const { scanData, setScanData } = useScanDataStore(); - const { navigateToReceiptEdit } = useRoute(); useEffect(() => { - // receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData }); - if (typeof window !== "undefined" && !window.response) { - window.response = { - receiveScanResult: (jsonData: string) => { - try { - const data: ScanResult[] = JSON.parse(jsonData); - receive({ - type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, - payload: data, - }); - - // 데이터 저장 및 페이지 이동 - setScanData(data); - setTimeout(() => { - navigateToReceiptEdit(); - }, 0); - } catch (error) { - console.error("Error parsing scan result JSON:", error); - } - }, + if (typeof window !== "undefined") { + window.response = + window.response || ({} as { receiveScanResult: (jsonData: string) => void }); + + window.response.receiveScanResult = (jsonData: string) => { + try { + const data: ScanResult[] = JSON.parse(jsonData); + setScanData(data); + // navigateToReceiptEdit(); + } catch (error) { + console.error("Error parsing scan result JSON:", error); + } }; } - }, [receive, navigateToReceiptEdit, setScanData]); + }, [scanData, setScanData, navigateToReceiptEdit]); return (
@@ -177,21 +60,6 @@ const Home = () => { {`영수증으로\nAI 음식 리뷰 남겨요`} - {scanData.length > 0 && - scanData.map((data) => ( - <> - {Object.keys(data).map((key) => ( -
- - {key} - - - {data[key]} - -
- ))} - - ))} 손쉬운 음식 리뷰 작성
@@ -202,48 +70,19 @@ const Home = () => { send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" })} + onClick={() => { + send({ type: AppBridgeMessageType.OPEN_GALLERY, payload: "" }); + testNavigate(); + }} /> { send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" }); - // 네이티브에서 데이터를 수신하는 핸들러 설정 - if (typeof window !== "undefined" && !window.response) { - window.response = { - receiveScanResult: (jsonData: string) => { - try { - const data: ScanResult[] = JSON.parse(jsonData); - receive({ - type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, - payload: data, - }); - - // 데이터 저장 및 페이지 이동 - setScanData(data); - setTimeout(() => { - navigateToReceiptEdit(); - }, 0); - } catch (error) { - console.error("Error parsing scan result JSON:", error); - } - }, - }; - } + testNavigate(); }} /> - {/* 테스트용 버튼 */} - ); diff --git a/src/components/ReviewResult/ReviewResult.tsx b/src/components/ReviewResult/ReviewResult.tsx index 39a7fb8..c9098e5 100644 --- a/src/components/ReviewResult/ReviewResult.tsx +++ b/src/components/ReviewResult/ReviewResult.tsx @@ -6,6 +6,7 @@ import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/Home import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types"; import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider"; import styles from "@/components/ReviewResult/ReviewResult.module.scss"; +import { IMG_STYLE_DATA } from "@/components/SelectStyle/SelectStyle"; import Button from "@/components/ui/Button/Button"; import IconButton from "@/components/ui/IconButton/IconButton"; import Text from "@/components/ui/Text/Text"; @@ -14,6 +15,8 @@ import Toast from "@/components/ui/Toast/Toast"; import { useOverlay } from "@/hooks/common/useOverlay"; import useToast from "@/hooks/common/useToast"; +import { useCreateReviewStore } from "@/store/useReviewStore"; + import type { Options as ConfettiOptions } from "canvas-confetti"; const ReviewResult = () => { @@ -22,8 +25,22 @@ const ReviewResult = () => { const { isOpen, handleClose, handleOpen } = useOverlay(); const { isToast } = useToast(1000); - const reviewText = `오늘 처음으로 청담커피 앤 토스트에서 주문했어요.. 매장도 깔끔하고 직원들도 친절해요! - 음료랑 토스트 세트 시켰는데 가성비가 좋네요… 맛도 좋고 양도 많아요!! 다음에도 또 시켜먹을 거예요.`; + const { createReviewData } = useCreateReviewStore(); + + const { reviewStyle } = createReviewData; + const dummyDataMap: Record = { + [IMG_STYLE_DATA[1].name]: + "여기 토스트 맛집이네요..! 특히 카야토스트랑 음료 세트 가성비 좋아요… 특별한 메뉴로는 100% 리얼 토마토 생과일 주스 추천해요!! 가격 대비 신선하고 맛있어요 … 매장도 깔끔하고 직원들도 친절하네요 자주 들릴 것 같아요 .", + [IMG_STYLE_DATA[2].name]: + "카야토스트와 음료 세트인 특별한 메뉴가 있는 청담커피 앤 토스트에서 맛있는 간식을 먹었습니다. 신선한 재료로 만든 100% 리얼 토마토 생과일 주스도 함께 주문했는데, 정말 맛있었어요! 매장 분위기도 좋고 직원분들도 친절하셔서 더욱 즐거운 시간을 보낼 수 있었습니다.", + [IMG_STYLE_DATA[3].name]: + "🤗 청담커피 앤 토스트에서 먹은 카야토스트랑 음료 세트 너무 맛있었어용! 특히 100% 리얼 토마토 생과일 주스는 정말 신선했어요😊 가격도 저렴하고 특별한 메뉴들이 있어서 자주 들릴 것 같아용!! 사장님도 친절하시고 매장 분위기도 좋았어용ᄒᄒ 추천드려용👍🏻", + }; + + const getDummyText = (reviewStyle: string): string => { + return dummyDataMap[reviewStyle]; + }; + const reviewText = getDummyText(reviewStyle.name); const handleConfetti = () => { const setting: ConfettiOptions = { @@ -45,7 +62,10 @@ const ReviewResult = () => {
- mainLogo + {`${reviewStyle.name}-img`}
diff --git a/src/components/SelectStyle/SelectStyle.tsx b/src/components/SelectStyle/SelectStyle.tsx index be18f3f..f03fef5 100644 --- a/src/components/SelectStyle/SelectStyle.tsx +++ b/src/components/SelectStyle/SelectStyle.tsx @@ -9,6 +9,8 @@ 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 { useCreateReviewStore } from "@/store/useReviewStore"; interface StyleProps { @@ -16,16 +18,16 @@ interface StyleProps { image: string; } -const IMG_STYLE_DATA = [ - { name: "default", image: "/assets/img/img-graphic-logo.png" }, - { name: "친절한 미식가", image: "/assets/img/img-style-friendly.png" }, - { name: "믿음직한 미식가", image: "/assets/img/img-style-trust.png" }, - { name: "귀여운 미식가", image: "/assets/img/img-style-cute.png" }, +export const IMG_STYLE_DATA = [ + { name: "default", image: "graphic-logo" }, + { name: "친절한 미식가", image: "style-friendly" }, + { name: "믿음직한 미식가", image: "style-trust" }, + { name: "귀여운 미식가", image: "style-cute" }, ]; const SelectStyle = () => { const { send } = useAppBridge(); - + const { navigateToReviewResult } = useRoute(); const { createReviewData, setReviewStyle } = useCreateReviewStore(); const [selectedStyle, setSelectedStyle] = useState(IMG_STYLE_DATA[0]); @@ -38,12 +40,12 @@ const SelectStyle = () => { const handleCreateReview = () => { if (selectedStyle.name !== "default") { - setReviewStyle(selectedStyle.name); + setReviewStyle(selectedStyle); + navigateToReviewResult(); } - send({ type: AppBridgeMessageType.CREATE_REVIEW, - payload: { ocrText, hashTag, reviewStyle }, + payload: { ocrText, hashTag, reviewStyle: reviewStyle.name }, }); }; @@ -59,7 +61,7 @@ const SelectStyle = () => {
- {`${selectedStyle.name}-img`} + {`${selectedStyle.name}-img`}
diff --git a/src/hooks/common/useRoute.ts b/src/hooks/common/useRoute.ts index 62ebe02..c5e6044 100644 --- a/src/hooks/common/useRoute.ts +++ b/src/hooks/common/useRoute.ts @@ -11,6 +11,7 @@ export const useRoute = () => { navigateToReceiptEdit: () => navigate(PATH.RECEIPT_EDIT), navigateToSelectStyle: () => navigate(PATH.SELECT_STYLE), navigateToSelectTag: () => navigate(PATH.SELECT_TAG), + navigateToReviewResult: () => navigate(PATH.REVIEW_RESULT), }; return routes; diff --git a/src/store/useReviewStore.ts b/src/store/useReviewStore.ts index 82197e9..65086a4 100644 --- a/src/store/useReviewStore.ts +++ b/src/store/useReviewStore.ts @@ -1,22 +1,30 @@ import { create } from "zustand"; +interface ReviewStyle { + name: string; + image: string; +} + interface CreateReviewData { ocrText: string; hashTag: string[]; - reviewStyle: string; + reviewStyle: ReviewStyle; } interface CreateReviewDataStore { createReviewData: CreateReviewData; setOcrText: (ocrText: string) => void; setHashTag: (hashTag: string[]) => void; - setReviewStyle: (reviewStyle: string) => void; + setReviewStyle: (reviewStyle: ReviewStyle) => void; } export const CREATE_REVIEW_DATA = { ocrText: "", hashTag: [], - reviewStyle: "", + reviewStyle: { + name: "", + image: "", + }, }; export const useCreateReviewStore = create((set) => ({ @@ -29,7 +37,7 @@ export const useCreateReviewStore = create((set) => ({ set((state) => ({ createReviewData: { ...state.createReviewData, hashTag }, })), - setReviewStyle: (reviewStyle: string) => + setReviewStyle: (reviewStyle: ReviewStyle) => set((state) => ({ createReviewData: { ...state.createReviewData, reviewStyle }, })),