Feat : 카카오 공유하기 기능 추가

ssafy-mate · Feb 10, 2022 · da6fb40 · da6fb40
1 parent 7689474
commit da6fb40
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 16 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,3 @@
 REACT_APP_LOCALHOST_URL=http://localhost:3000
-REACT_APP_SERVER_URL=https://i6a402.p.ssafy.io:8443
+REACT_APP_SERVER_URL=https://i6a402.p.ssafy.io:8443
+REACT_APP_KAKAO_KEY=721908531b332d7ad10efbf0e03fb086
diff --git a/public/index.html b/public/index.html
@@ -47,6 +47,8 @@
     <script src="https://unpkg.com/splitting/dist/splitting.js"></script>
     <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
 
+    <!-- 카카오 SDK 등록 -->
+    <script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
     <title>싸피 메이트</title>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { Switch, Route } from 'react-router-dom';
 import { ConnectedRouter as Router } from 'connected-react-router';
 
@@ -34,6 +36,10 @@ import NotFoundPage from './pages/NotFoundPage';
 import ChattingPage from './pages/ChattingPage';
 
 const App: React.FC = () => {
+  useEffect(() => {
+    window.Kakao.init(process.env.REACT_APP_KAKAO_KEY);
+  }, []);
+
   return (
     <ErrorBoundary FallbackComponent={ErrorPage}>
       <Global styles={resetStyles} />

diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -67,7 +67,7 @@ const Footer: React.FC<FooterProps> = ({ offMarginTop }) => {
           </SubMenuList>
           <SnsList>
             <SnsItem
-              href="https://github.com/ssafy-mate"
+              href="https://github.com/ssafy-mate/ssafy-mate_service"
               target="_blank"
               rel="noopener noreferrer"
             >

diff --git a/src/components/team/TeamInfoSection.tsx b/src/components/team/TeamInfoSection.tsx
@@ -121,6 +121,34 @@ const TeamInfoSection: React.FC = () => {
     [dispatch],
   );
 
+  const sendKakaoSharingMessage = () => {
+    window.Kakao.Link.sendDefault({
+      objectType: 'feed',
+      content: {
+        title: '싸피 메이트(SSAFY MATE)',
+        description: `${
+          teamData !== undefined ? teamData.teamName : ''
+        } 팀 상세 정보`,
+        imageUrl: 'https://avatars.githubusercontent.com/u/97279195?s=200&v=4',
+        link: {
+          webUrl: `https://www.ssafymate.site${
+            teamData !== undefined ? `/teams/${teamData.teamId}` : ''
+          }`,
+        },
+      },
+      buttons: [
+        {
+          title: '팀 상세 정보 보러가기',
+          link: {
+            webUrl: `https://www.ssafymate.site${
+              teamData !== undefined ? `/teams/${teamData.teamId}` : ''
+            }`,
+          },
+        },
+      ],
+    });
+  };
+
   const handleOpenApplicationDialog = () => {
     setOpenApplicationDialog(true);
   };
@@ -235,10 +263,9 @@ const TeamInfoSection: React.FC = () => {
               {isTotalSufficient && role === 'outsider'
                 ? null
                 : renderingOptionButton(role)}
-              <SharingButton>
+              <SharingButton onClick={sendKakaoSharingMessage}>
                 <ShareIcon />
                 <span>공유하기</span>
-                <ArrowDropDownIcon />
               </SharingButton>
             </ButtonBox>
           </HeadContainer>
@@ -650,12 +677,8 @@ const SharingButton = styled.button`
   }
 
   & svg {
-    font-size: 22px;
     margin-right: 8px;
-
-    &:last-of-type {
-      margin-right: 0;
-    }
+    font-size: 22px;
   }
 
   @media (max-width: 1199px) {

diff --git a/src/components/user/UserInfoSection.tsx b/src/components/user/UserInfoSection.tsx
@@ -91,6 +91,34 @@ const UserInfoSection: React.FC = () => {
     [dispatch],
   );
 
+  const sendKakaoSharingMessage = () => {
+    window.Kakao.Link.sendDefault({
+      objectType: 'feed',
+      content: {
+        title: '싸피 메이트(SSAFY MATE)',
+        description: `${
+          userData !== undefined ? userData.userName : ''
+        } 교육생 상세 정보`,
+        imageUrl: 'https://avatars.githubusercontent.com/u/97279195?s=200&v=4',
+        link: {
+          webUrl: `https://www.ssafymate.site${
+            userData !== undefined ? `/users/${userData.userId}` : ''
+          }`,
+        },
+      },
+      buttons: [
+        {
+          title: '교육생 상세 정보 보러가기',
+          link: {
+            webUrl: `https://www.ssafymate.site${
+              userData !== undefined ? `/users/${userData.userId}` : ''
+            }`,
+          },
+        },
+      ],
+    });
+  };
+
   const handleOpenOfferDialog = () => {
     setOpenOfferDialog(true);
   };
@@ -187,10 +215,9 @@ const UserInfoSection: React.FC = () => {
                 <VolunteerActivismIcon />
                 <span>팀 합류 요청하기</span>
               </RequestButton>
-              <SharingButton>
+              <SharingButton onClick={sendKakaoSharingMessage}>
                 <ShareIcon />
                 <span>공유하기</span>
-                <ArrowDropDownIcon />
               </SharingButton>
             </ButtonBox>
           </HeadContainer>
@@ -642,12 +669,8 @@ const SharingButton = styled.button`
   }
 
   & svg {
-    font-size: 22px;
     margin-right: 8px;
-
-    &:last-of-type {
-      margin-right: 0;
-    }
+    font-size: 22px;
   }
 
   @media (max-width: 1199px) {

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -0,0 +1,3 @@
+interface Window {
+  Kakao: any;
+}