feat: 밈 꾸미기 기능 추가

- MemeDetailPage의 액션 버튼에서 '밈 꾸미기' 기능을 구현하여, 사용자가 선택한 밈의 제목과 이미지를 기반으로 커스텀 밈을 생성할 수 있도록 함
- 새로운 COMMAND_TYPE인 CUSTOM_MEME을 추가하고, 관련 데이터 타입을 정의하여 코드의 가독성을 향상시킴

Author: Cllaude99

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

@@ -64,7 +64,10 @@ const MemeDetailPage = () => {
         </S.ActionButton>
         <S.ActionButton
           onClick={() => {
-            alert('밈 꾸미기');
+            nativeBridge.customMeme({
+              title: memeDetail?.success.title ?? '',
+              image: memeDetail?.success.imgUrl ?? '',
+            });
           }}
         >
           <MemeDesignPenIcon />

apps/web/src/types/bridge.ts

@@ -1,5 +1,6 @@
 export const COMMAND_TYPE = {
   SHARE_MEME: 'SHARE_MEME',
+  CUSTOM_MEME: 'CUSTOM_MEME',
 } as const;
 
 export type CommandType = (typeof COMMAND_TYPE)[keyof typeof COMMAND_TYPE];
@@ -9,8 +10,14 @@ export interface ShareMemeData {
   image: string;
 }
 
+export interface CustomMemeData {
+  title: string;
+  image: string;
+}
+
 export type CommandDataMap = {
   [COMMAND_TYPE.SHARE_MEME]: ShareMemeData;
+  [COMMAND_TYPE.CUSTOM_MEME]: CustomMemeData;
 };
 
 export interface BridgeCommand<T extends CommandType> {

apps/web/src/utils/bridge.ts

@@ -3,6 +3,7 @@ import {
   COMMAND_TYPE,
   CommandDataMap,
   CommandType,
+  CustomMemeData,
   ShareMemeData,
 } from '../types/bridge';
 
@@ -91,6 +92,11 @@ class NativeBridge {
   shareMeme(data: ShareMemeData) {
     this.sendCommand(COMMAND_TYPE.SHARE_MEME, data);
   }
+
+  // 밈 꾸미기
+  customMeme(data: CustomMemeData) {
+    this.sendCommand(COMMAND_TYPE.CUSTOM_MEME, data);
+  }
 }
 
 export const nativeBridge = NativeBridge.getInstance();