diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index 53a2150..f5c3c58 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -1,12 +1,43 @@ +import { useEffect, useState } 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 IconButton from "@/components/ui/IconButton/IconButton"; import Text from "@/components/ui/Text/Text"; +import { useRoute } from "@/hooks/common/useRoute"; + const Home = () => { const { send } = useAppBridge(); + interface ScanResult { + [key: string]: string; + } + + // const [results, setResults] = useState([]); + const [isSuccess, setIsSuccess] = useState(false); + const { navigateToReceiptEdit } = useRoute(); + + useEffect(() => { + 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); + // setResults(data); + console.log(data); + setIsSuccess(true); + navigateToReceiptEdit(); + } catch (error) { + console.error("Error parsing scan result JSON:", error); + } + }; + } + }, []); + return (
@@ -20,6 +51,7 @@ const Home = () => {
mainLogo
+ {isSuccess &&
성공
}
window.AndroidBridge?.openCamera(), - [AppBridgeMessageType.OPEN_GALLERY]: () => window.AndroidBridge?.openGallery(), - [AppBridgeMessageType.SHARE]: () => window.AndroidBridge?.share(), + [AppBridgeMessageType.OPEN_CAMERA]: (message: string) => + window.AndroidBridge?.openCamera(message), + [AppBridgeMessageType.OPEN_GALLERY]: (message: string) => + window.AndroidBridge?.openGallery(message), + [AppBridgeMessageType.SHARE]: (message: string) => window.AndroidBridge?.share(message), [AppBridgeMessageType.CREATE_REVIEW]: (message: { payload: { json: string } }) => window.AndroidBridge?.createReview(message.payload.json), [AppBridgeMessageType.COPY]: (message: { payload: { json: string } }) => diff --git a/src/components/provider/WebBridgeProvider/WebBridgeMessage.types.ts b/src/components/provider/WebBridgeProvider/WebBridgeMessage.types.ts new file mode 100644 index 0000000..1bed8c0 --- /dev/null +++ b/src/components/provider/WebBridgeProvider/WebBridgeMessage.types.ts @@ -0,0 +1,9 @@ +export enum WebBridgeMessageType { + RECEIVE_SCAN_RESULT = "RECEIVE_SCAN_RESULT", +} + +export type WebBridgeMessage = ReceiveScanResultMessage; + +export interface ReceiveScanResultMessage { + type: WebBridgeMessageType.RECEIVE_SCAN_RESULT; +} diff --git a/src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx b/src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx new file mode 100644 index 0000000..c56c34a --- /dev/null +++ b/src/components/provider/WebBridgeProvider/WebBridgeProvider.tsx @@ -0,0 +1,58 @@ +import type { ReactNode } from "react"; +import { createContext, useContext, useEffect } from "react"; + +declare global { + interface Window { + response: { + receiveScanResult: (jsonData: string) => void; + }; + } +} +// window.response = window.response || {}; + +interface WebBridgeMessage { + type: string; + payload?: unknown; +} + +interface WebBridge { + receive: (message: WebBridgeMessage) => void; +} + +interface WebBridgeProviderProps { + children: ReactNode; +} + +export const WebBridgeContext = createContext(null); + +export function WebBridgeProvider({ children }: WebBridgeProviderProps) { + 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(() => { + window.response = window.response || {}; + }, []); + + return {children}; +} + +export function useWebBridge() { + const webBridge = useContext(WebBridgeContext); + + if (webBridge == null) { + throw new Error("Wrap Web Bridge Provider"); + } + + return webBridge; +} diff --git a/src/main.tsx b/src/main.tsx index 3a49d45..92ac95a 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -8,6 +8,7 @@ import AppRouter from "@/router/AppRouter"; import { AppBridgeProvider } from "@/components/provider/AppBridgeProvider/AppBridgeProvider"; import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider"; import { UserAgentProvider } from "@/components/provider/UserAgentProvider"; +import { WebBridgeProvider } from "@/components/provider/WebBridgeProvider/WebBridgeProvider"; import "@/styles/reset.scss"; import "@/styles/global.scss"; @@ -17,8 +18,10 @@ ReactDom.createRoot(document.getElementById("root")!).render( - - + + + + diff --git a/src/types/global.d.ts b/src/types/global.d.ts index 50a9c74..c11e47b 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -21,9 +21,9 @@ declare global { }; }; AndroidBridge?: { - openCamera: () => void; - openGallery: () => void; - share: () => void; + openCamera: (request: string) => void; + openGallery: (request: string) => void; + share: (request: string) => void; createReview: (json: string) => void; copy: (json: string) => void; };