Skip to content

Commit 0511abd

Browse files
sikkzzsikkzz
committed
feat: test
1 parent 20a5d76 commit 0511abd

File tree

2 files changed

+111
-39
lines changed

2 files changed

+111
-39
lines changed

‎src/components/Home/Home.tsx‎

Lines changed: 63 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { useEffect, useState } from "react";
1+
import { useEffect } from "react";
22

33
import styles from "@/components/Home/Home.module.scss";
44
import { AppBridgeMessageType } from "@/components/provider/AppBridgeProvider/AppBridgeMessage.types";
55
import { useAppBridge } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
6+
import { WebBridgeMessageType } from "@/components/provider/WebBridgeProvider/WebBridgeProvider";
7+
import { useWebBridge } from "@/components/provider/WebBridgeProvider/WebBridgeProvider";
68
import IconButton from "@/components/ui/IconButton/IconButton";
79
import Text from "@/components/ui/Text/Text";
810

@@ -15,33 +17,35 @@ export interface ScanResult {
1517
}
1618

1719
const Home = () => {
18-
const [abc, setAbc] = useState(false);
1920
const { send } = useAppBridge();
21+
const { receive } = useWebBridge();
2022

2123
const { scanData, setScanData } = useScanDataStore();
2224

2325
const { navigateToReceiptEdit } = useRoute();
2426

27+
// receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData });
28+
2529
useEffect(() => {
26-
window.response = {
27-
receiveScanResult: (jsonData: string) => {
28-
try {
29-
const data: ScanResult[] = JSON.parse(jsonData);
30-
setAbc(true);
31-
setScanData(data);
32-
// navigateToReceiptEdit();
33-
} catch (error) {
34-
console.error("Error parsing scan result JSON:", error);
35-
}
36-
},
37-
};
38-
}, [scanData, setScanData, navigateToReceiptEdit]);
30+
// receive({ type: WebBridgeMessageType.RECEIVE_SCAN_RESULT, payload: scanData });
31+
// window.response = {
32+
// receiveScanResult: (jsonData: string) => {
33+
// try {
34+
// const data: ScanResult[] = JSON.parse(jsonData);
35+
// setAbc(true);
36+
// setScanData(data);
37+
// // navigateToReceiptEdit();
38+
// } catch (error) {
39+
// console.error("Error parsing scan result JSON:", error);
40+
// }
41+
// },
42+
// };
43+
}, []);
3944

4045
return (
4146
<div className={styles.Home}>
4247
<div className={styles.HomeTitle}>
4348
<Text variant="titleLg" color="gradient" align="center" as="h1">
44-
{abc && "스캔 완료 테스트용"}
4549
{`영수증으로\nAI 음식 리뷰 남겨요`}
4650
</Text>
4751
<Text variant="bodyLg" color="secondary" align="center">
@@ -75,19 +79,55 @@ const Home = () => {
7579
<IconButton
7680
text="카메라"
7781
iconName="camera"
78-
onClick={() => send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" })}
82+
onClick={() => {
83+
send({ type: AppBridgeMessageType.OPEN_CAMERA, payload: "" });
84+
85+
// 네이티브 데이터 수신 핸들러 등록
86+
window.response = {
87+
receiveScanResult: (jsonData: string) => {
88+
try {
89+
const data: ScanResult[] = JSON.parse(jsonData);
90+
receive({
91+
type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
92+
payload: data,
93+
});
94+
95+
// 데이터 저장 및 페이지 이동
96+
setScanData(data);
97+
navigateToReceiptEdit();
98+
} catch (error) {
99+
console.error("Error parsing scan result JSON:", error);
100+
}
101+
},
102+
};
103+
}}
79104
/>
80105

81-
<button
106+
{/* <button
82107
onClick={() => {
83-
if (window.response) {
84-
window.response.receiveScanResult(
85-
JSON.stringify([{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }]),
86-
);
87-
}
108+
receive({
109+
type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
110+
payload: [{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }],
111+
});
112+
// if (window.response) {
113+
// window.response.receiveScanResult(
114+
// JSON.stringify([{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }]),
115+
// );
116+
// }
88117
}}
89118
>
90119
테스트 데이터 전송
120+
</button> */}
121+
122+
<button
123+
onClick={() => {
124+
receive({
125+
type: WebBridgeMessageType.RECEIVE_SCAN_RESULT,
126+
payload: [{ sampleKey: "sampleValue" }, { sampleKey2: "sampleValue2" }],
127+
});
128+
}}
129+
>
130+
테스트
91131
</button>
92132
</div>
93133
</div>

‎src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx‎

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import type { ReactNode } from "react";
22
import { createContext, useContext, useEffect } from "react";
33

4-
interface WebBridgeMessage {
4+
import { useScanDataStore } from "@/store/useScanDataStore";
5+
6+
export enum WebBridgeMessageType {
7+
RECEIVE_SCAN_RESULT = "receiveScanResult",
8+
}
9+
10+
type WebBridgeMessage = ScanResultMessage;
11+
12+
interface ScanResultMessage {
513
type: string;
6-
payload?: unknown;
14+
payload: { [key: string]: string }[];
715
}
816

917
interface WebBridge {
@@ -17,38 +25,62 @@ interface WebBridgeProviderProps {
1725
export const WebBridgeContext = createContext<null | WebBridge>(null);
1826

1927
export function WebBridgeProvider({ children }: WebBridgeProviderProps) {
28+
const { setScanData } = useScanDataStore();
29+
2030
const receive = (message: WebBridgeMessage) => {
21-
try {
22-
if (typeof window !== "undefined" && window.response) {
23-
if (typeof window.response.receiveScanResult === "function") {
24-
window.response.receiveScanResult(JSON.stringify(message.payload));
25-
} else {
26-
console.warn("window.response.receiveScanResult is not available.");
27-
}
28-
}
29-
} catch (error) {
30-
console.error("WebBridge API call failed:", error);
31+
if (message.type === WebBridgeMessageType.RECEIVE_SCAN_RESULT) {
32+
setScanData(message.payload || []);
3133
}
3234
};
3335

3436
useEffect(() => {
35-
if (typeof window !== "undefined" && !window.response) {
37+
if (typeof window !== "undefined") {
3638
window.response = {
3739
receiveScanResult: (jsonData: string) => {
38-
console.log("Received scan result:", jsonData);
40+
try {
41+
const data = JSON.parse(jsonData);
42+
setScanData(data);
43+
} catch (error) {
44+
console.error("Invalid JSON data:", error);
45+
}
3946
},
4047
};
4148
}
4249
}, []);
4350

4451
return <WebBridgeContext.Provider value={{ receive }}>{children}</WebBridgeContext.Provider>;
4552
}
53+
// const receive = (message: WebBridgeMessage) => {
54+
// try {
55+
// if (typeof window !== "undefined" && window.response) {
56+
// if (typeof window.response.receiveScanResult === "function") {
57+
// window.response.receiveScanResult(JSON.stringify(message.payload));
58+
// } else {
59+
// console.warn("window.response.receiveScanResult is not available.");
60+
// }
61+
// }
62+
// } catch (error) {
63+
// console.error("WebBridge API call failed:", error);
64+
// }
65+
// };
66+
67+
// useEffect(() => {
68+
// if (typeof window !== "undefined" && !window.response) {
69+
// window.response = {
70+
// receiveScanResult: (jsonData: string) => {
71+
// console.log("Received scan result:", jsonData);
72+
// },
73+
// };
74+
// }
75+
// }, []);
76+
77+
// }
4678

4779
export function useWebBridge() {
4880
const webBridge = useContext(WebBridgeContext);
4981

50-
if (webBridge == null) {
51-
throw new Error("Wrap Web Bridge Provider");
82+
if (!webBridge) {
83+
throw new Error("WebBridgeProvider must be used within a WebBridgeContext");
5284
}
5385

5486
return webBridge;

0 commit comments

Comments
 (0)