diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index be44f21..1955c9b 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -1,8 +1,10 @@ -import { useEffect, useState } from "react"; +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"; @@ -15,33 +17,35 @@ export interface ScanResult { } const Home = () => { - const [abc, setAbc] = useState(false); const { send } = useAppBridge(); + const { receive } = useWebBridge(); const { scanData, setScanData } = useScanDataStore(); const { navigateToReceiptEdit } = useRoute(); + // receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData }); + useEffect(() => { - 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); - } - }, - }; - }, [scanData, setScanData, navigateToReceiptEdit]); + // 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 (
- {abc && "스캔 완료 테스트용"} {`영수증으로\nAI 음식 리뷰 남겨요`} @@ -75,19 +79,55 @@ const Home = () => { send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" })} + onClick={() => { + 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); + navigateToReceiptEdit(); + } catch (error) { + console.error("Error parsing scan result JSON:", error); + } + }, + }; + }} /> - */} + +
diff --git a/src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx b/src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx index b87b997..decf1f0 100644 --- a/src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx +++ b/src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx @@ -1,9 +1,17 @@ import type { ReactNode } from "react"; import { createContext, useContext, useEffect } from "react"; -interface WebBridgeMessage { +import { useScanDataStore } from "@/store/useScanDataStore"; + +export enum WebBridgeMessageType { + RECEIVE_SCAN_RESULT = "receiveScanResult", +} + +type WebBridgeMessage = ScanResultMessage; + +interface ScanResultMessage { type: string; - payload?: unknown; + payload: { [key: string]: string }[]; } interface WebBridge { @@ -17,25 +25,24 @@ interface WebBridgeProviderProps { export const WebBridgeContext = createContext(null); export function WebBridgeProvider({ children }: WebBridgeProviderProps) { + const { setScanData } = useScanDataStore(); + const receive = (message: WebBridgeMessage) => { - try { - if (typeof window !== "undefined" && window.response) { - if (typeof window.response.receiveScanResult === "function") { - window.response.receiveScanResult(JSON.stringify(message.payload)); - } else { - console.warn("window.response.receiveScanResult is not available."); - } - } - } catch (error) { - console.error("WebBridge API call failed:", error); + if (message.type === WebBridgeMessageType.RECEIVE_SCAN_RESULT) { + setScanData(message.payload || []); } }; useEffect(() => { - if (typeof window !== "undefined" && !window.response) { + if (typeof window !== "undefined") { window.response = { receiveScanResult: (jsonData: string) => { - console.log("Received scan result:", jsonData); + try { + const data = JSON.parse(jsonData); + setScanData(data); + } catch (error) { + console.error("Invalid JSON data:", error); + } }, }; } @@ -43,12 +50,37 @@ export function WebBridgeProvider({ children }: WebBridgeProviderProps) { return {children}; } +// const receive = (message: WebBridgeMessage) => { +// try { +// if (typeof window !== "undefined" && window.response) { +// if (typeof window.response.receiveScanResult === "function") { +// window.response.receiveScanResult(JSON.stringify(message.payload)); +// } else { +// console.warn("window.response.receiveScanResult is not available."); +// } +// } +// } catch (error) { +// console.error("WebBridge API call failed:", error); +// } +// }; + +// useEffect(() => { +// if (typeof window !== "undefined" && !window.response) { +// window.response = { +// receiveScanResult: (jsonData: string) => { +// console.log("Received scan result:", jsonData); +// }, +// }; +// } +// }, []); + +// } export function useWebBridge() { const webBridge = useContext(WebBridgeContext); - if (webBridge == null) { - throw new Error("Wrap Web Bridge Provider"); + if (!webBridge) { + throw new Error("WebBridgeProvider must be used within a WebBridgeContext"); } return webBridge;