refactor: 네이티브 핸들러 타입 수정

Nexters · Feb 14, 2025 · f3a44d1 · f3a44d1
1 parent ba939de
commit f3a44d1
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 45 deletions.
diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx
@@ -10,10 +10,6 @@ import { useRoute } from "@/hooks/common/useRoute";
 
 import { useScanDataStore } from "@/store/useScanDataStore";
 
-export interface ScanResult {
-  [key: string]: string;
-}
-
 const Home = () => {
   const { send } = useAppBridge();
 
@@ -22,7 +18,7 @@ const Home = () => {
   const { navigateToReceiptEdit } = useRoute();
 
   useEffect(() => {
-    if (scanData.length > 0) {
+    if (scanData.parsed && scanData.parsed.length > 0) {
       navigateToReceiptEdit();
     }
   }, [scanData]);

diff --git a/src/components/ReceiptEdit/ReceiptEdit.tsx b/src/components/ReceiptEdit/ReceiptEdit.tsx
@@ -24,11 +24,12 @@ const ReceiptEdit = () => {
   const [focusState, setFocusState] = useState<{ [key: string]: boolean }>({});
 
   useEffect(() => {
-    if (Array.isArray(scanData) && scanData.length > 0) {
-      setFormData(scanData);
+    if (Array.isArray(scanData.parsed) && scanData.parsed.length > 0) {
+      setFormData(scanData.parsed);
 
-      const initialFocusState = scanData.reduce(
-        (acc, data) => {
+      const initialFocusState = scanData.parsed.reduce(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (acc: any, data: any) => {
           const keys = Object.keys(data);
           keys.forEach((key) => (acc[key] = false));
           return acc;
@@ -49,7 +50,12 @@ const ReceiptEdit = () => {
 
   const handleInputChange = (index: number, key: string, value: string) => {
     setFormData((prevData) =>
-      prevData.map((item, idx) => (idx === index ? { ...item, [key]: value } : item)),
+      prevData.map((item, idx) => {
+        if (idx === index) {
+          return { ...item, [key]: value };
+        }
+        return item;
+      }),
     );
   };
 
@@ -79,9 +85,7 @@ const ReceiptEdit = () => {
       <div className={styles.Top}>
         <div className={styles.TitleBox}>
           <Text variant="titleM" color="primary" as="h1" truncated>
-            {formData.length > 0 &&
-              Object.keys(formData[0]).length > 0 &&
-              formData[0][Object.keys(formData[0])[0]]}
+            {formData.length > 0 && Object.keys(formData[0]).length > 0 && formData[0].value}
           </Text>
           <Text variant="titleM" color="primary" as="h1">
             에
@@ -94,21 +98,19 @@ const ReceiptEdit = () => {
         <div className={styles.InfoList}>
           {formData.map((data, index) => (
             <div key={index} className={styles.InfoItem}>
-              {Object.keys(data).map((key) => (
-                <div key={key} className={styles.InfoItem}>
-                  <Text variant="bodyXsm" color="secondary">
-                    {key}
-                  </Text>
-                  <Input
-                    placeholder={`${key} 입력`}
-                    value={data[key]}
-                    onFocus={() => handleFocus(key)}
-                    onBlur={() => handleBlur(key)}
-                    isFocus={focusState[key] || false}
-                    onChange={(e) => handleInputChange(index, key, e.target.value)}
-                  />
-                </div>
-              ))}
+              <div className={styles.InfoItem}>
+                <Text variant="bodyXsm" color="secondary">
+                  {data.key}
+                </Text>
+                <Input
+                  placeholder={`${data.key} 입력`}
+                  value={data.value}
+                  onFocus={() => handleFocus(data.key)}
+                  onBlur={() => handleBlur(data.key)}
+                  isFocus={focusState[data.key] || false}
+                  onChange={(e) => handleInputChange(index, data.key, e.target.value)}
+                />
+              </div>
             </div>
           ))}
         </div>

diff --git a/src/components/provider/AppBridgeProvider/AppBridgeMessage.types.ts b/src/components/provider/AppBridgeProvider/AppBridgeMessage.types.ts
@@ -50,7 +50,9 @@ export interface CopyMessage {
 
 export interface ReceiveScanResultMessage {
   type: AppBridgeMessageType.RECEIVE_SCAN_RESULT;
-  payload: Array<{ [key: string]: string }>;
+  // payload: Array<{ [key: string]: string }>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload: any;
 }
 
 export interface ReceiveGeneratedReviewMessage {

diff --git a/src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx b/src/components/provider/AppBridgeProvider/AppBridgeProvider.tsx
@@ -41,10 +41,11 @@ export function AppBridgeProvider({ children }: AppBridgeProviderProps) {
   useEffect(() => {
     if (typeof window !== "undefined") {
       window.response = {
-        receiveScanResult: (jsonData: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        receiveScanResult: (jsonData: any) => {
           try {
-            const data = JSON.parse(jsonData);
-            setScanData(data);
+            // alert("Scan Result: " + jsonData);
+            setScanData(JSON.parse(jsonData));
           } catch (error) {
             console.error("Invalid JSON data for scan result:", error);
           }

diff --git a/src/components/provider/AppBridgeProvider/convertToNativeMessage.ts b/src/components/provider/AppBridgeProvider/convertToNativeMessage.ts
@@ -13,7 +13,8 @@ const iosHandlers = {
   }) => window.webkit?.messageHandlers.createReview.postMessage(message.payload),
   [AppBridgeMessageType.COPY]: (message: { payload: { review: string } }) =>
     window.webkit?.messageHandlers.copy.postMessage(message.payload),
-  [AppBridgeMessageType.RECEIVE_SCAN_RESULT]: (message: { payload: { result: string } }) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [AppBridgeMessageType.RECEIVE_SCAN_RESULT]: (message: { payload: { result: any } }) =>
     window.response?.receiveScanResult(message.payload.result),
   [AppBridgeMessageType.RECEIVE_GENERATED_REVIEW]: (message: { payload: { result: string } }) =>
     window.response?.receiveGeneratedReview(message.payload.result),
@@ -25,10 +26,11 @@ const androidHandlers = {
   [AppBridgeMessageType.SHARE]: () => window.AndroidBridge?.share(),
   [AppBridgeMessageType.CREATE_REVIEW]: (message: {
     payload: { ocrText: string; hashTag: string[]; reviewStyle: string };
-  }) => window.AndroidBridge?.createReview(message.payload),
+  }) => window.AndroidBridge?.createReview(JSON.stringify(message.payload)),
   [AppBridgeMessageType.COPY]: (message: { payload: { review: string } }) =>
-    window.AndroidBridge?.copy(message.payload),
-  [AppBridgeMessageType.RECEIVE_SCAN_RESULT]: (message: { payload: { result: string } }) =>
+    window.AndroidBridge?.copy(JSON.stringify(message.payload)),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [AppBridgeMessageType.RECEIVE_SCAN_RESULT]: (message: { payload: { result: any } }) =>
     window.response?.receiveScanResult(message.payload.result),
   [AppBridgeMessageType.RECEIVE_GENERATED_REVIEW]: (message: { payload: { result: string } }) =>
     window.response?.receiveGeneratedReview(message.payload.result),

diff --git a/src/pages/ReceiptEditPage.tsx b/src/pages/ReceiptEditPage.tsx
@@ -4,13 +4,22 @@ import Icon from "@/components/ui/Icon/Icon";
 
 import { useRoute } from "@/hooks/common/useRoute";
 
+import { useScanDataStore } from "@/store/useScanDataStore";
+
 const ReceiptEditPage = () => {
   const { navigateToHome } = useRoute();
 
+  const { resetScanData } = useScanDataStore();
+
+  const handleNavigateToHome = () => {
+    resetScanData();
+    navigateToHome();
+  };
+
   return (
     <>
       <Navbar>
-        <Navbar.LeftButton onClick={navigateToHome}>
+        <Navbar.LeftButton onClick={handleNavigateToHome}>
           <Icon name="leftArrow" />
         </Navbar.LeftButton>
       </Navbar>

diff --git a/src/store/useScanDataStore.ts b/src/store/useScanDataStore.ts
@@ -1,15 +1,16 @@
 import { create } from "zustand";
 
-import type { ScanResult } from "@/components/Home/Home";
-
 interface ScanDataStoreProps {
-  scanData: ScanResult[];
-  setScanData: (scanData: ScanResult[]) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  scanData: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setScanData: (scanData: any[]) => void;
   resetScanData: () => void;
 }
 
 export const useScanDataStore = create<ScanDataStoreProps>((set) => ({
   scanData: [],
-  setScanData: (scanData: ScanResult[]) => set({ scanData }),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  setScanData: (scanData: any[]) => set({ scanData }),
   resetScanData: () => set({ scanData: [] }),
 }));
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -21,7 +21,8 @@ declare global {
   }
   interface Window {
     response?: {
-      receiveScanResult: (jsonData: string) => void;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      receiveScanResult: (jsonData: any) => void;
       receiveGeneratedReview: (jsonData: string) => void;
     };
     webkit?: {
@@ -37,8 +38,8 @@ declare global {
       openCamera: () => void;
       openGallery: () => void;
       share: () => void;
-      createReview: (json: CreateReviewPayload) => void;
-      copy: (json: CopyMessagePayload) => void;
+      createReview: (json: string) => void;
+      copy: (json: string) => void;
     };
   }
 }