feat: 브릿지 타입 및 인터페이스 정의 추가

- 새로운 타입 및 인터페이스를 정의하여 브릿지 통신 구조를 개선함
- SHARE_MEME 커맨드에 대한 데이터 타입 및 매핑 추가

Author: Cllaude99

apps/web/src/types/bridge.ts

@@ -0,0 +1,34 @@
+export const COMMAND_TYPE = {
+  SHARE_MEME: 'SHARE_MEME',
+} as const;
+
+export type CommandType = (typeof COMMAND_TYPE)[keyof typeof COMMAND_TYPE];
+
+export interface ShareMemeData {
+  title: string;
+  image: string;
+}
+
+export type CommandDataMap = {
+  [COMMAND_TYPE.SHARE_MEME]: ShareMemeData;
+};
+
+export interface BridgeCommand<T extends CommandType> {
+  type: T;
+  data: CommandDataMap[T];
+}
+
+declare global {
+  interface Window {
+    wiki?: {
+      postMessage(data: string): void;
+    };
+    webkit?: {
+      messageHandlers: {
+        wikiHandler: {
+          postMessage(data: string): void;
+        };
+      };
+    };
+  }
+}

apps/web/src/utils/bridge.ts

@@ -1,21 +1,10 @@
-export type CommandType = 'SHARE_MEME'; // 밈 공유하기
-
-// 각 커맨드별 데이터 타입 정의
-interface ShareMemeData {
-  title: string;
-  image: string;
-}
-
-// 커맨드별 데이터 타입 매핑
-type CommandDataMap = {
-  SHARE_MEME: ShareMemeData;
-};
-
-// 브릿지 커맨드 인터페이스
-interface BridgeCommand<T extends CommandType> {
-  command: T;
-  data: CommandDataMap[T];
-}
+import {
+  BridgeCommand,
+  COMMAND_TYPE,
+  CommandDataMap,
+  CommandType,
+  ShareMemeData,
+} from '../types/bridge';
 
 // 개발 환경용 모의 브릿지
 const mockNativeBridge = {
@@ -27,8 +16,8 @@ const mockNativeBridge = {
 const mockWebKit = {
   messageHandlers: {
     wikiHandler: {
-      postMessage(data: unknown) {
-        console.log('Mock iOS Bridge called with:', data);
+      postMessage(data: string) {
+        console.log('Mock iOS Bridge called with:', JSON.parse(data));
       },
     },
   },
@@ -75,23 +64,21 @@ class NativeBridge {
   }
 
   private sendCommand<T extends CommandType>(
-    command: T,
+    type: T,
     data: CommandDataMap[T],
   ): void {
     try {
       const bridgeCommand: BridgeCommand<T> = {
-        command,
+        type,
         data,
       };
 
-      if (this.isAndroid() && window.wiki) {
-        // Android 브릿지 호출
-        window.wiki.postMessage(JSON.stringify(bridgeCommand, null, 2));
-      } else if (this.isIOS() && window.webkit?.messageHandlers?.wikiHandler) {
-        // iOS 브릿지 호출
-        window.webkit.messageHandlers.wikiHandler.postMessage(
-          JSON.stringify(bridgeCommand, null, 2),
-        );
+      const message = JSON.stringify(bridgeCommand, null, 2);
+
+      if (this.isAndroid()) {
+        window.wiki?.postMessage(message);
+      } else if (this.isIOS()) {
+        window.webkit?.messageHandlers?.wikiHandler?.postMessage(message);
       } else {
         console.warn('Native bridge is not available');
       }
@@ -102,23 +89,8 @@ class NativeBridge {
 
   // 밈 공유하기
   shareMeme(data: ShareMemeData): void {
-    this.sendCommand('SHARE_MEME', data);
+    this.sendCommand(COMMAND_TYPE.SHARE_MEME, data);
   }
 }
 
 export const nativeBridge = NativeBridge.getInstance();
-
-declare global {
-  interface Window {
-    wiki?: {
-      postMessage(data: string): void;
-    };
-    webkit?: {
-      messageHandlers: {
-        wikiHandler: {
-          postMessage(data: string): void;
-        };
-      };
-    };
-  }
-}