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;