Merge pull request #43 from primus-teoSprint/feat/#42

[#42] 메타태그 및 카카오 공유, 리드미

.eslintrc.json

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

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"> |
+
+#### `기술 스택`

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
+}

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<{