[SSD-151] 링크 공유하기 버튼 (#89)

devyejin · web-flow · commit 69a40d9d2e0c · 2025-03-06T11:25:32.000+09:00
* [SSD-151] feat: 타임페이퍼 링크 공유하기 기능

* [SSD-151] chore: 컴포넌트 추가

* [SSD-151] fix: 환경변수 복사 누락

* [SSD-151] fix: Dockerfile 환경 변수

* [SSD-151] fix: docker-compose 환경 변수

* [SSD-151] fix: timepapaerId 전달

* [SSD-151] chore: 이벤트 브랜치 제거
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -4,9 +4,7 @@ on:
   push:
     branches:
       - main
-      - deploy
       - deploy/*
-      - feat/SSD-133-포스트잇-예외-처리
 
 jobs:
   deploy:
@@ -49,6 +47,7 @@ jobs:
           echo "MAIL_PASSWORD=${{ secrets.MAIL_PASSWORD }}" >> .env
           echo "TIME_PAPER_URL=${{ secrets.TIME_PAPER_URL }}" >> .env
           echo "ORIGIN=${{ secrets.ORIGIN }}" >> .env
+          echo "VITE_KAKAO_API_KEY=${{ secrets.VITE_KAKAO_API_KEY }}" >> .env
 
       - name: Add ssh-agent
         uses: webfactory/ssh-agent@v0.9.0
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -63,6 +63,7 @@ services:
         - type=local,src=/tmp/.build-cache/client
       args:
         VITE_API_URL: ${VITE_API_URL}
+        VITE_KAKAO_API_KEY: ${VITE_KAKAO_API_KEY}
     image: yejinoh58/timepaper-client-image:latest
     env_file:
       - .env
diff --git a/frontend/Dockerfile.local b/frontend/Dockerfile.local
@@ -1,8 +1,10 @@
 # 빌드 단계
 FROM node:23-alpine AS build
 
-ARG VITE_API_URL
+ARG VITE_API_URL 
+ARG VITE_KAKAO_API_KEY
 ENV VITE_API_URL=$VITE_API_URL
+ENV VITE_KAKAO_API_KEY=$VITE_KAKAO_API_KEY
 
 WORKDIR /app
 
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Timepaper</title>
+    <script
+      src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.4/kakao.min.js"
+      integrity="sha384-DKYJZ8NLiK8MN4/C5P2dtSmLQ4KwPaoqAfyA/DfmEc1VDxu4yyC7wy6K1Hs90nka"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/src/components/share-link/ShareLink.jsx b/frontend/src/components/share-link/ShareLink.jsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from 'react';
+import BottomButton from '../BottomButton/BottomButton';
+
+export default function ShareLink({ timepaperId }) {
+  const KAKAO_API_KEY = import.meta.env.VITE_KAKAO_API_KEY;
+  const realUrl = `https://43.201.24.13.sslip.io/timepaper/${timepaperId}`;
+
+  useEffect(() => {
+    if (!window.Kakao) {
+      console.error('Kakao SDK 로드 안됨');
+      return;
+    }
+    if (!window.Kakao.isInitialized()) {
+      window.Kakao.init(KAKAO_API_KEY);
+      console.log('Kakao 초기화:', window.Kakao.isInitialized());
+    }
+  }, []);
+
+  const shareKakao = () => {
+    if (!window.Kakao) {
+      console.error('Kakao SDK 로드 안됨');
+      return;
+    }
+
+    window.Kakao.Share.sendDefault({
+      objectType: 'feed',
+      content: {
+        title: '친구에게서 타임페이퍼가 왔어요💕',
+        description: '',
+        imageUrl: `https://43.201.24.13.sslip.io/assets/timepaperLogo-0WzOUFBd.png`,
+        link: {
+          mobileWebUrl: realUrl,
+          webUrl: realUrl,
+        },
+      },
+      buttons: [
+        {
+          title: '친구가 전달한 타임페이퍼로 🚀',
+          link: {
+            mobileWebUrl: realUrl,
+            webUrl: realUrl,
+          },
+        },
+      ],
+    });
+  };
+  return (
+    <>
+      <BottomButton onClick={shareKakao} title={`공유하기`} isEnable={true}></BottomButton>
+    </>
+  );
+}
diff --git a/frontend/src/pages/time-paper-detail/TimePaperDetail.jsx b/frontend/src/pages/time-paper-detail/TimePaperDetail.jsx
@@ -9,6 +9,7 @@ import ConfirmModal from '../../components/confirmmodal/ConfirmModal';
 import Modal from '../../components/Modal/Modal';
 import { finishLoading, startLoading } from '../../store/slices/loadingSlice';
 import Alert from '../../components/Alert/Alert';
+import ShareLink from '../../components/share-link/ShareLink';
 
 export default function TimePaperDetail() {
   const { timepaperId } = useParams();
@@ -45,7 +46,7 @@ export default function TimePaperDetail() {
         if (timePaperResponse && timePaperResponse.data && timePaperResponse.data.data) {
           const timePaperData = timePaperResponse.data.data;
           if (timePaperData.locked) {
-            navigate(`/timepaper/${timepaperId}/lock`, { replace: true});
+            navigate(`/timepaper/${timepaperId}/lock`, { replace: true });
             return;
           }
 
@@ -234,12 +235,15 @@ export default function TimePaperDetail() {
                 )}
               </div>
             )}
-            <BottomButton
-              title="포스트잇 작성"
-              onClick={handlePostItCreateClick}
-              isEnable={true}
-              className={styles.postitCreate}
-            />
+            <div className={styles.buttonGroup}>
+              <ShareLink timepaperId={timepaperId}></ShareLink>
+              <BottomButton
+                title="포스트잇 작성"
+                onClick={handlePostItCreateClick}
+                isEnable={true}
+                className={styles.postitCreate}
+              />
+            </div>
           </div>
         </div>
       </div>
