[#42] kakao 공유하기 개발

.eslintrc.json

@@ -51,6 +51,7 @@
       }
     ],
     "no-unused-vars": "warn",
-    "operator-linebreak": "off"
+    "operator-linebreak": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }

app/(route)/indicators/_components/button/KakaoShareButton.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { resultAtom, selectedItemAtom } from '@/app/_store/atom'
+import { useEffect } from 'react'
+import { useRecoilValue } from 'recoil'
+
+const id = 'kakao-sdk'
+
+function KakaoShareButton() {
+  const selectedItem = useRecoilValue(selectedItemAtom)
+  const resultItem = useRecoilValue(resultAtom)
+
+  useEffect(() => {
+    if (document.getElementById(id) == null) {
+      const script = document.createElement('script')
+      script.id = id
+      script.src = 'https://developers.kakao.com/sdk/js/kakao.js'
+      script.onload = () => {
+        window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_SHARE_KEY)
+        window.Kakao.isInitialized()
+      }
+      document.body.appendChild(script)
+    }
+  }, [])
+
+  const kakaoShare = () => {
+    window.Kakao.Share.sendCustom({
+      installTalk: true,
+      templateId: 106777,
+      templateArgs: {
+        name: `${selectedItem?.name}`,
+        result: `${resultItem}`,
+      },
+    })
+  }
+
+  return <button onClick={kakaoShare}>카카오톡 공유</button>
+}
+
+export default KakaoShareButton

app/(route)/indicators/_components/result/index.tsx

@@ -1,7 +1,12 @@
 import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
-import { selectedItemAtom, totalinputValueAtom } from '@/app/_store/atom'
-import { useRecoilValue } from 'recoil'
+import {
+  resultAtom,
+  selectedItemAtom,
+  totalinputValueAtom,
+} from '@/app/_store/atom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import KakaoShareButton from '../button/KakaoShareButton'
 import Pyramid from './Pyramid'
 import S from './result.module.css'
 import ResultItem from './resultItem'
@@ -12,7 +17,9 @@ function Result() {
   const selectedItem = useRecoilValue(selectedItemAtom)
   const totalinputValue = parseInt(useRecoilValue(totalinputValueAtom))
 
-  const result =
+  const [result, setResult] = useRecoilState(resultAtom)
+
+  const resultValue =
     selectedItem?.score &&
     selectedItem?.people &&
     Math.floor(
@@ -21,16 +28,19 @@ function Result() {
         100,
     )
 
+  setResult(resultValue!)
+  console.log(resultValue)
+
   let resultAmount = ''
-  if (result! >= 90) {
+  if (resultValue! >= 90) {
     resultAmount += '매우 높음'
-  } else if (result! >= 70) {
+  } else if (resultValue! >= 70) {
     resultAmount += '높음'
-  } else if (result! >= 50) {
+  } else if (resultValue! >= 50) {
     resultAmount += '보통'
-  } else if (result! >= 30) {
+  } else if (resultValue! >= 30) {
     resultAmount += '낮음'
-  } else if (result! >= 10) {
+  } else if (30 > resultValue! && resultValue! >= 0) {
     resultAmount += '매우 낮음'
   }
 
@@ -85,7 +95,9 @@ function Result() {
         </div>
       </div>
       <div className={S.bottomWrapper}>
-        <button className={S.submitBtnWrapper}>공유하기</button>
+        <div className={S.submitBtnWrapper}>
+          <KakaoShareButton />
+        </div>
       </div>
     </>
   )

app/(route)/indicators/_components/result/result.module.css

@@ -121,9 +121,9 @@
 
   color: white;
   font-weight: 700;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   text-align: center;
-  width: 100px;
+  width: 160px;
   height: auto;
   padding: 10px 20px;
   border-radius: 9px;

app/_store/atom.ts

@@ -9,6 +9,11 @@ export interface ActiveInvestmentItemType {
 
 // type ActiveType = Omit<ActiveInvestmentItemType, 'id'>
 
+export const resultAtom = atom<number>({
+  key: 'resultAtom',
+  default: 0,
+})
+
 export const selectedItemAtom = atom<ActiveInvestmentItemType | null>({
   key: 'selectedItemAtom',
   default: null,

app/_types/global.d.ts

@@ -1,3 +1,7 @@
 declare module '*.css'
 
 declare module '*.sass'
+
+interface Window {
+  Kakao: any
+}