feat: 공유하기(링크, 카카오) 기능 구현

index.html

@@ -13,5 +13,6 @@
       type="text/javascript"
       src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_MAP_API_KEY%&libraries=services,clusterer&autoload=true"
     ></script>
+    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
   </body>
 </html>

src/features/event-manage/event-create/ui/ShareEventModal.tsx

@@ -1,13 +1,65 @@
 import profile from '../../../../../public/assets/banners/1.png';
 import link from '../../../../../public/assets/event-manage/details/Link.svg';
 import kakao from '../../../../../public/assets/event-manage/details/KaKao.svg';
+import { shareToKakao } from '../../../../shared/lib/kakaoShare';
 
-interface ShareEventModalProp {
+interface ShareEventModalProps {
   closeModal: () => void;
   eventName: string;
+  eventDescription?: string;
+  eventImageUrl?: string;
+  eventUrl?: string;
 }
 
-const ShareEventModal = ({ closeModal, eventName }: ShareEventModalProp) => {
+const ShareEventModal = ({
+  closeModal,
+  eventName,
+  eventDescription = '',
+  eventImageUrl = '',
+  eventUrl = window.location.href,
+}: ShareEventModalProps) => {
+  const handleKakaoShare = async () => {
+    try {
+      await shareToKakao(eventName, eventDescription, eventImageUrl, eventUrl);
+    } catch (error) {
+      console.error('카카오 공유 실패:', error);
+      alert('카카오 공유하기에 실패했습니다.');
+    }
+  };
+
+  /* navigator.clipboard가 HTTPS, localhosts 에서만 작동하므로 배포 후 코드 변경해야함
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(eventUrl);
+      alert('링크가 복사되었습니다!');
+    } catch (error) {
+      console.error('링크 복사 실패:', error);
+      alert('링크 복사에 실패했습니다.');
+    }
+  }; 
+  */
+
+  const handleCopyLink = () => {
+    if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+      navigator.clipboard
+        .writeText(eventUrl)
+        .then(() => alert('링크가 복사되었습니다!'))
+        .catch(err => {
+          console.error('복사 실패:', err);
+          alert('링크 복사에 실패했습니다.');
+        });
+    } else {
+      // Fallback (입력창 생성해서 수동 복사 유도)
+      const textArea = document.createElement('textarea');
+      textArea.value = eventUrl;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+      alert('링크가 복사되었습니다!');
+    }
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex items-end justify-center">
       <div className="absolute inset-0 mx-auto w-full max-w-lg bg-black bg-opacity-30" onClick={closeModal}></div>
@@ -21,12 +73,12 @@ const ShareEventModal = ({ closeModal, eventName }: ShareEventModalProp) => {
           <span className="font-semibold text-lg">{eventName}</span>
         </div>
         <div className="flex flex-col gap-4 py-3">
-          <div className="flex items-center gap-4">
+          <div onClick={handleCopyLink} className="flex items-center gap-4 cursor-pointer">
             <img src={link} alt="링크" className="w-6 h-6" />
             <h2 className="text-base">링크 복사하기</h2>
           </div>
           <hr />
-          <div className="flex items-center gap-4">
+          <div onClick={handleKakaoShare} className="flex items-center gap-4 cursor-pointer">
             <img src={kakao} alt="카카오" className="w-6 h-6" />
             <h2 className="text-base">카카오톡 공유하기</h2>
           </div>

src/pages/event/ui/EventDetailsPage.tsx

@@ -131,7 +131,15 @@ const EventDetailsPage = () => {
       ) : (
         <div className="flex justify-center items-center h-screen">로딩 중...</div>
       )}
-      {isModalOpen && <ShareEventModal closeModal={closeModal} eventName={title} />}
+      {isModalOpen && (
+        <ShareEventModal
+          closeModal={closeModal}
+          eventName={title}
+          eventDescription={event?.result.description}
+          eventImageUrl={event?.result.bannerImageUrl}
+          eventUrl={window.location.href}
+        />
+      )}
     </>
   );
 };

src/shared/lib/kakaoShare.ts

@@ -0,0 +1,50 @@
+export const initializeKakao = () => {
+  return new Promise<void>(resolve => {
+    if (window.Kakao && window.Kakao.Link) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = `https://developers.kakao.com/sdk/js/kakao.js`;
+    script.async = true;
+    document.head.appendChild(script);
+
+    script.onload = () => {
+      if (window.Kakao) {
+        window.Kakao.init(import.meta.env.VITE_KAKAO_MAP_API_KEY);
+      }
+      resolve();
+    };
+  });
+};
+
+export const shareToKakao = async (title: string, description: string, imageUrl: string, linkUrl: string) => {
+  await initializeKakao();
+
+  if (!window.Kakao?.Link?.sendDefault) {
+    throw new Error('카카오 SDK가 초기화되지 않았습니다.');
+  }
+
+  window.Kakao.Link.sendDefault({
+    objectType: 'feed',
+    content: {
+      title,
+      description,
+      imageUrl,
+      link: {
+        mobileWebUrl: linkUrl,
+        webUrl: linkUrl,
+      },
+    },
+    buttons: [
+      {
+        title: '자세히 보기',
+        link: {
+          mobileWebUrl: linkUrl,
+          webUrl: linkUrl,
+        },
+      },
+    ],
+  });
+};

src/shared/types/kakaoType.ts

@@ -0,0 +1,30 @@
+export interface KakaoLinkOptions {
+  objectType: 'feed';
+  content: {
+    title: string;
+    description: string;
+    imageUrl: string;
+    link: {
+      mobileWebUrl: string;
+      webUrl: string;
+    };
+  };
+  buttons: Array<{
+    title: string;
+    link: {
+      mobileWebUrl: string;
+      webUrl: string;
+    };
+  }>;
+}
+
+declare global {
+  interface Window {
+    Kakao: {
+      init: (key: string) => void;
+      Link: {
+        sendDefault: (options: KakaoLinkOptions) => void;
+      };
+    };
+  }
+}