feat: MemeDetailPage에 웹 및 앱 진입 이벤트 처리 추가

- 웹 페이지와 앱 진입 시 각각의 이벤트를 처리하는 로직을 useEffect 훅을 통해 구현하여 사용자 경험을 개선함
- 새로운 COMMAND_TYPE인 WEB_ENTERED 및 APP_ENTERED를 추가하고, 관련 데이터 타입을 정의하여 코드의 가독성을 향상시킴

Author: Cllaude99

apps/web/src/pages/MemeDetailPage/index.tsx

@@ -10,13 +10,31 @@ import * as S from './MemeDetailPage.styles';
 import { useTheme } from '@emotion/react';
 import { useParams } from 'react-router-dom';
 import { useMemeDetailQuery } from '@meme_wiki/apis';
+import { useEffect } from 'react';
+import { COMMAND_TYPE } from '@/types/bridge';
 
 const MemeDetailPage = () => {
   const { memeId } = useParams();
   const { data: memeDetail } = useMemeDetailQuery(memeId!);
 
   const theme = useTheme();
 
+  useEffect(() => {
+    window.onNativeEvent = (type: string) => {
+      if (type === COMMAND_TYPE.APP_ENTERED) {
+        alert('앱 접속!');
+      } else {
+        alert('웹 접속!');
+      }
+    };
+
+    nativeBridge.webEntered();
+
+    return () => {
+      window.onNativeEvent = undefined;
+    };
+  }, []);
+
   return (
     <Layout
       layoutStyle={{

apps/web/src/types/bridge.ts

@@ -1,6 +1,8 @@
 export const COMMAND_TYPE = {
   SHARE_MEME: 'SHARE_MEME',
   CUSTOM_MEME: 'CUSTOM_MEME',
+  WEB_ENTERED: 'WEB_ENTERED',
+  APP_ENTERED: 'APP_ENTERED',
 } as const;
 
 export type CommandType = (typeof COMMAND_TYPE)[keyof typeof COMMAND_TYPE];
@@ -18,6 +20,8 @@ export interface CustomMemeData {
 export type CommandDataMap = {
   [COMMAND_TYPE.SHARE_MEME]: ShareMemeData;
   [COMMAND_TYPE.CUSTOM_MEME]: CustomMemeData;
+  [COMMAND_TYPE.WEB_ENTERED]: null;
+  [COMMAND_TYPE.APP_ENTERED]: null;
 };
 
 export interface BridgeCommand<T extends CommandType> {
@@ -37,5 +41,6 @@ declare global {
         };
       };
     };
+    onNativeEvent?: (type: string) => void;
   }
 }

apps/web/src/utils/bridge.ts

@@ -97,6 +97,11 @@ class NativeBridge {
   customMeme(data: CustomMemeData) {
     this.sendCommand(COMMAND_TYPE.CUSTOM_MEME, data);
   }
+
+  // 웹 페이지 진입
+  webEntered() {
+    this.sendCommand(COMMAND_TYPE.WEB_ENTERED);
+  }
 }
 
 export const nativeBridge = NativeBridge.getInstance();