feat: 카카오 공유 기능 추가

- MemeShareSheet 컴포넌트에 카카오 공유 기능을 추가하여 사용자 경험을 개선함
- bridge.ts에 SHARE_KAKAO 명령어와 관련 데이터 타입을 정의함
- nativeBridge에 카카오 공유 메서드를 구현하여 공유 기능을 통합함

Author: Cllaude99

apps/web/src/pages/MemeDetailPage/components/MemeShareSheet.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { AnimatePresence } from 'motion/react';
 import { KakaoIcon, MoreInfo, LinkCopyIcon } from '@/assets/icons';
 import * as S from './MemeShareSheet.styles';
+import { nativeBridge } from '@/utils/bridge';
 
 interface MemeShareSheetProps {
   isOpen: boolean;
@@ -35,8 +36,12 @@ const MemeShareSheet = ({
 
   const handleKakaoShare = () => {
     if (isWebview) {
-      const kakaoShareUrl = `kakaolink://send?text=${encodeURIComponent(title)}&image=${encodeURIComponent(imageUrl)}&url=${encodeURIComponent(window.location.href)}`;
-      window.location.href = kakaoShareUrl;
+      nativeBridge.shareKakao({
+        title,
+        image: imageUrl,
+      });
+      // const kakaoShareUrl = `kakaolink://send?text=${encodeURIComponent(title)}&image=${encodeURIComponent(imageUrl)}&url=${encodeURIComponent(window.location.href)}`;
+      // window.location.href = kakaoShareUrl;
       return;
     }
 

apps/web/src/types/bridge.ts

@@ -4,6 +4,7 @@ export const COMMAND_TYPE = {
   WEB_ENTERED: 'WEB_ENTERED',
   APP_ENTERED: 'APP_ENTERED',
   SHOW_MORE_MEMES: 'SHOW_MORE_MEMES',
+  SHARE_KAKAO: 'SHARE_KAKAO',
 } as const;
 
 export type CommandType = (typeof COMMAND_TYPE)[keyof typeof COMMAND_TYPE];
@@ -18,12 +19,18 @@ export interface CustomMemeData {
   image: string;
 }
 
+export interface ShareKakaoData {
+  title: string;
+  image: string;
+}
+
 export type CommandDataMap = {
   [COMMAND_TYPE.SHARE_MEME]: ShareMemeData;
   [COMMAND_TYPE.CUSTOM_MEME]: CustomMemeData;
   [COMMAND_TYPE.WEB_ENTERED]: null;
   [COMMAND_TYPE.APP_ENTERED]: null;
   [COMMAND_TYPE.SHOW_MORE_MEMES]: null;
+  [COMMAND_TYPE.SHARE_KAKAO]: ShareKakaoData;
 };
 
 export interface BridgeCommand<T extends CommandType> {

apps/web/src/utils/bridge.ts

@@ -4,6 +4,7 @@ import {
   CommandDataMap,
   CommandType,
   CustomMemeData,
+  ShareKakaoData,
   ShareMemeData,
 } from '../types/bridge';
 
@@ -80,6 +81,11 @@ class NativeBridge {
   showMoreMemes() {
     this.sendCommand(COMMAND_TYPE.SHOW_MORE_MEMES);
   }
+
+  // 카카오 공유
+  shareKakao(data: ShareKakaoData) {
+    this.sendCommand(COMMAND_TYPE.SHARE_KAKAO, data);
+  }
 }
 
 export const nativeBridge = NativeBridge.getInstance();