From 462b1bf3c893734cb5629964b946f89ecd914bd3 Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Mon, 8 Apr 2024 03:43:34 +0900
Subject: [PATCH] =?UTF-8?q?[#42]=20kakao=20=EA=B3=B5=EC=9C=A0=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json                                |  3 +-
 .../_components/button/KakaoShareButton.tsx   | 40 +++++++++++++++++++
 .../indicators/_components/result/index.tsx   | 30 +++++++++-----
 .../_components/result/result.module.css      |  4 +-
 app/_store/atom.ts                            |  5 +++
 app/_types/global.d.ts                        |  4 ++
 6 files changed, 74 insertions(+), 12 deletions(-)
 create mode 100644 app/(route)/indicators/_components/button/KakaoShareButton.tsx

diff --git a/.eslintrc.json b/.eslintrc.json
index 1384054..0469b97 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -51,6 +51,7 @@
       }
     ],
     "no-unused-vars": "warn",
-    "operator-linebreak": "off"
+    "operator-linebreak": "off",
+    "@typescript-eslint/no-explicit-any": "off"
   }
 }
diff --git a/app/(route)/indicators/_components/button/KakaoShareButton.tsx b/app/(route)/indicators/_components/button/KakaoShareButton.tsx
new file mode 100644
index 0000000..e551347
--- /dev/null
+++ b/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
diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
index 904e871..b46335b 100644
--- a/app/(route)/indicators/_components/result/index.tsx
+++ b/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>
     </>
   )
diff --git a/app/(route)/indicators/_components/result/result.module.css b/app/(route)/indicators/_components/result/result.module.css
index ed4d0a0..beadec2 100644
--- a/app/(route)/indicators/_components/result/result.module.css
+++ b/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;
diff --git a/app/_store/atom.ts b/app/_store/atom.ts
index 6950802..d15fdef 100644
--- a/app/_store/atom.ts
+++ b/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,
diff --git a/app/_types/global.d.ts b/app/_types/global.d.ts
index f2da8b4..b91039c 100644
--- a/app/_types/global.d.ts
+++ b/app/_types/global.d.ts
@@ -1,3 +1,7 @@
 declare module '*.css'
 
 declare module '*.sass'
+
+interface Window {
+  Kakao: any
+}