#4 [Feat] Kakao Share function

카카오 공유 기능 실시간 곰돌이 이미지 및 날씨 공유
issue: #4

src/pages/Main/BearOptions/Share/index.jsx

@@ -1,17 +1,40 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable import/no-unresolved */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Kakao, Twitter, Link, Local } from 'assets';
 import { ShareModal } from 'components';
-import { PngBear, copyUrl, shareTwit } from 'utils';
+import { PngBear, copyUrl, shareTwit, shareKakao } from 'utils';
+import { useRecoilValueLoadable } from 'recoil';
+import { GetCurrent } from 'state/weather';
 import { Title, Content, ShareBtn } from './style';
 
 function Share({ handle }) {
+  const {
+    contents: { CurrentWeather },
+  } = useRecoilValueLoadable(GetCurrent);
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.src = 'https://developers.kakao.com/sdk/js/kakao.js';
+    script.async = true;
+
+    document.body.appendChild(script);
+
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, []);
   return (
     <ShareModal handle={handle}>
       <Title>오늘의 이화 날씨 공유하기</Title>
       <Content>
-        <ShareBtn>
+        <ShareBtn
+          onClick={() => {
+            shareKakao(
+              CurrentWeather.currentTemperature,
+              CurrentWeather.rainfallPercentage,
+            );
+          }}
+        >
           <img src={Kakao} alt="Kakao" />
           <span>카카오톡에 공유</span>
         </ShareBtn>

src/utils/index.js

@@ -2,5 +2,6 @@ export { default as PngBear } from './PngBear';
 export { default as IsEwha } from './isEwha';
 export { default as goOAuthServer } from './OAuth';
 export { default as shareTwit } from './shareTwit';
+export { default as shareKakao } from './shareKakao';
 export { default as getUrl } from './getUrl';
 export { default as copyUrl } from './copyUrl';

src/utils/shareKakao.js

@@ -0,0 +1,58 @@
+/* eslint-disable */
+import html2canvas from 'html2canvas';
+
+const dataURLtoFile = (dataurl, fileName) => {
+  var arr = dataurl.split(','),
+    mime = arr[0].match(/:(.*?);/)[1],
+    bstr = atob(arr[1]),
+    n = bstr.length,
+    u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new File([u8arr], fileName, { type: mime });
+};
+
+export default async function shareKakao(tem, rain) {
+  window.scrollTo(0, 0);
+  const file = await html2canvas(document.getElementById('BearAvater')).then(
+    canvas => {
+      const file = dataURLtoFile(canvas.toDataURL('image/png'), 'image.png');
+      return file;
+    },
+  );
+  const kakao = window.Kakao;
+  if (!kakao.isInitialized()) {
+    kakao.init(process.env.REACT_APP_KAKAO_TOKEN);
+  }
+  const imageUrl = await kakao.Share.uploadImage({
+    file: [file],
+  }).then(function (res) {
+    const imageUrl = res.infos.original.url;
+    return imageUrl;
+  });
+  return kakao.Share.sendDefault({
+    objectType: 'feed',
+    content: {
+      title: '이상청',
+      description: `지금 이화는 ${tem}°C, 강수확률은 ${rain}%입니다. 지금 이화인들의 추천 옷차림은?`,
+      imageUrl: imageUrl,
+      link: {
+        webUrl: process.env.REACT_APP_GOOGLE_OAUTH_REDIRECT_URL,
+        mobileWebUrl: process.env.REACT_APP_GOOGLE_OAUTH_REDIRECT_URL,
+        androidExecParams: 'test',
+      },
+    },
+    buttons: [
+      {
+        title: '웹으로 이동',
+        link: {
+          webUrl: process.env.REACT_APP_GOOGLE_OAUTH_REDIRECT_URL,
+          mobileWebUrl: process.env.REACT_APP_GOOGLE_OAUTH_REDIRECT_URL,
+        },
+      },
+    ],
+  });
+}