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 1/2] =?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
+}

From b93551ec95d13032b7ad58f6a0dfa4ab93e3e725 Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Mon, 8 Apr 2024 03:44:12 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[#42]=20=EB=A9=94=ED=83=80=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8,=20=EB=A6=AC=EB=93=9C=EB=AF=B8=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md      | 38 ++++++++++++++++++++++++++++++++++++--
 app/layout.tsx | 13 +++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index d3e4713..3a4a9a8 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,37 @@
-# 프리무스
+# 프리무스<img src="https://github.com/primus-teoSprint/FE/assets/63100352/92d0b17a-e08d-4b9e-bd7d-a502def93e07" align=left width=100>
 
-아이디어 검증 툴 서비스
+> 💡 아이디어 검증 툴 서비스
+
+<div align="center">
+  <h3>
+
+[`https://primus.today`](https://primus-chi.vercel.app)
+
+</h3>
+</div>
+
+## 🪐 Main Service
+
+#### `아이디어 툴`
+
+(자료 추가 예정)
+
+#### `아이디어 검증`
+
+#### `적극적 투자 지표`
+
+#### `결과 도출`
+
+<br />
+
+## 🌝 Project
+
+#### `팀원`
+
+> 테오의 스프린트 17기
+
+|                         [FE 스리](https://github.com/hanseulhee)                          |                          [BE 최롱](https://github.com/Choirong)                           |                           [FE 피기](https://github.com/03hoho03)                           |                          [FE 환두](https://github.com/chaduhwan)                           |
+| :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: |
+| <img src="https://avatars.githubusercontent.com/u/63100352?v=4" width="150" height="160"> | <img src="https://avatars.githubusercontent.com/u/89922415?v=4" width="150" height="160"> | <img src="https://avatars.githubusercontent.com/u/122659293?v=4" width="150" height="160"> | <img src="https://avatars.githubusercontent.com/u/137901354?v=4" width="150" height="160"> |
+
+#### `기술 스택`
diff --git a/app/layout.tsx b/app/layout.tsx
index a4e9c63..4e840fe 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,9 +1,22 @@
+import type { Metadata } from 'next'
+import logo from '../app/_assets/_images/logo.png'
 import Layout from './_components/layout'
 import Recoil from './_store/recoil'
 import './_style/globals.css'
 import './_style/variables.css'
 import Providers from './_utils/provider'
 
+export const metadata: Metadata = {
+  title: '프리무스',
+  description: '아이디어 검증 툴 서비스',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    userScalable: false,
+  },
+  icons: { icon: logo.src },
+}
+
 function RootLayout({
   children,
 }: Readonly<{