Merge pull request #38 from BbeumbungE/feat/FRONT-315

Feat: 카카오톡 공유하기 구현 [FRONT-315]
BbeumbungE · Oct 5, 2023 · 0773bd8 · 0773bd8
2 parents d2dbc94 + 9e638a2
commit 0773bd8
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 5 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -16,6 +16,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.4.0/kakao.min.js" integrity="sha384-mXVrIX2T/Kszp6Z0aEWaA8Nm7J6/ZeWXbL8UpGRjKwWe56Srd/iyNmWMBhcItAjH" crossorigin="anonymous"></script>
 
     <title>AI Canvas</title>
   </head>

diff --git a/client/src/components/organisms/FinishDrawingModal.tsx b/client/src/components/organisms/FinishDrawingModal.tsx
@@ -2,7 +2,7 @@
 import Swal from 'sweetalert2';
 import { useNavigate } from 'react-router-dom';
 import styled, { keyframes } from 'styled-components';
-import { useRecoilValue, useRecoilState } from 'recoil';
+import { useRecoilValue, useRecoilState } from 'recoil'; // <-- 수정
 import { useEffect, useState } from 'react';
 import { UserProfileState } from '../../recoil/profile/atom';
 import { UserRupeeState } from '../../recoil/rupee/atom';
@@ -18,6 +18,12 @@ interface ModalProps {
   canvasUrl: string;
 }
 
+declare global {
+  interface Window {
+    Kakao: any;
+  }
+}
+
 const pulseAnimation = keyframes`
   0% {
     opacity: 0.4;
@@ -139,9 +145,17 @@ const ButtonWrapper = styled.div`
 `;
 
 function FinishDrawingModal({ canvasId, canvasUrl }: ModalProps) {
+  const { Kakao } = window;
   const navigate = useNavigate();
   const userProfile = useRecoilValue(UserProfileState);
   const [isSaved, setIsSaved] = useState<boolean>(false);
+  const realUrl = 'https://j9a306.p.ssafy.io/';
+
+  useEffect(() => {
+    Kakao.cleanup();
+    Kakao.init(process.env.REACT_APP_JAVASCRIPT_KEY);
+    console.log(Kakao.isInitialized());
+  }, []);
 
   const handleConfirm = async () => {
     try {
@@ -164,6 +178,28 @@ function FinishDrawingModal({ canvasId, canvasUrl }: ModalProps) {
     }
   };
 
+  const handleShare = async () => {
+    Kakao.Share.sendDefault({
+      objectType: 'feed',
+      content: {
+        title: 'AI 캔버스',
+        description: `${userProfile.nickname}의 그림 구경가실래요?`,
+        imageUrl: `${canvasUrl}`,
+        link: {
+          mobileWebUrl: realUrl,
+        },
+      },
+      buttons: [
+        {
+          title: '나도 그리러 갈래!',
+          link: {
+            mobileWebUrl: realUrl,
+          },
+        },
+      ],
+    });
+  };
+
   function handleSave() {
     if (isSaved) {
       Swal.fire({
@@ -225,7 +261,7 @@ function FinishDrawingModal({ canvasId, canvasUrl }: ModalProps) {
             color="green"
             onClick={handleConfirm}
           />
-          <Button buttonText="공유하기" color="green" onClick={handleConfirm} />
+          <Button buttonText="공유하기" color="green" onClick={handleShare} />
         </ButtonWrapper>
       </ModalWrapper>
       <CharacterImage

diff --git a/client/src/pages/StageDrawingPage.tsx b/client/src/pages/StageDrawingPage.tsx
@@ -595,8 +595,9 @@ function StageDrawingPage() {
           <ProgressTimeBar
             durationInSeconds={data.timeLimit}
             isModalOpen={isModalOpen}
-            onComplete={() => {
-              if (!isFinish) {
+            onComplete={async () => {
+              await handleChange();
+              if (!isFirstTransform && !isModalOpen) {
                 handleFinish();
               }
             }}

diff --git a/client/tsconfig.json b/client/tsconfig.json
@@ -27,5 +27,5 @@
   "include": [
     "src",
     "sound.d.ts"
-,"public/service-worker.js",  "src/serviceWorkerRegistration.ts"  ],
+,"public/service-worker.js",  "src/serviceWorkerRegistration.ts", "window.d.ts"  ],
 }