Merge branch 'develop' into feat/#27

primus-teoSprint · Apr 7, 2024 · cb4fb0e · cb4fb0e
2 parents 2e573c4 + 0763ced
commit cb4fb0e
Show file tree

Hide file tree

Showing 24 changed files with 364 additions and 151 deletions.
diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
@@ -1,10 +1,16 @@
 import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
+import { investmentItemAtom, totalinputValueAtom } from '@/app/_store/atom'
+import { useRecoilValue } from 'recoil'
 import S from './result.module.css'
 import Pyramid from './Pyramid'
 
+//* 결과페이지 입니다.
 //TODO: 사용자가 클릭한 아이디어 이름과 해당 툴을 사용한 사용자 수가 보여집니다.
 function Result() {
+  const selectedItem = useRecoilValue(investmentItemAtom)
+  const totalinputValue = parseInt(useRecoilValue(totalinputValueAtom))
+
   return (
     <div className={S.wrapper}>
       <Nav />
@@ -22,6 +28,21 @@ function Result() {
           매우 높음 (~90점), 높음 (~70점), 보통(~50점),
         </span>
         <span className={S.showscore}>낮음(~30점), 매우낮음 (~10점)</span>
+
+        <div>
+          <span className={S.title}>검증 지표</span>
+          <p className={S.subTitle}>계산 결과지입니다.</p>
+
+          <p>전체 이용자 수 : {totalinputValue}</p>
+
+          {selectedItem.map((item) => (
+            <span key={item.id}>
+              <p>선택한 아이템 이름: {item.name}</p>
+              <p>선택한 아이템 점수: {item.score}</p>
+              <p>최종 점수: {item.score && item.score * totalinputValue}</p>
+            </span>
+          ))}
+        </div>
       </div>
     </div>
   )

diff --git a/app/(route)/indicators/_components/result/result.module.css b/app/(route)/indicators/_components/result/result.module.css
@@ -46,4 +46,14 @@
   font-style: normal;
   font-weight: 300;
   line-height: normal;
+
+.title {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.subTitle {
+  font-size: 0.9rem;
+  font-weight: 400;
+
 }
diff --git a/app/(route)/indicators/indicators.module.css b/app/(route)/indicators/indicators.module.css
@@ -22,7 +22,11 @@
   overflow: auto;
   height: 690px;
   width: 100%;
-  gap: 14px;
+  gap: 6px;
+}
+
+.marginWrapper {
+  margin-bottom: 50px;
 }
 
 .bottomWrapper {

diff --git a/app/(route)/indicators/page.tsx b/app/(route)/indicators/page.tsx
@@ -1,32 +1,41 @@
 'use client'
 
 import Title from '@/app/_common/text/title'
+import { totalinputValueAtom } from '@/app/_store/atom'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
+import { useRecoilState } from 'recoil'
 import Nav from '../list/_components/nav'
+import ActiveInvestmentList from '../verification/ibulsin/_components/ActiveInvestmentList'
 import FormTitle from './_components/form/FormTitle'
 import FormS from './_components/form/form.module.css'
 import S from './indicators.module.css'
 
 //* 투자 지표 입력 페이지입니다.
 //TODO: title에 사용자가 입력했던 요소들이 보여지게 됩니다.
-//TODO: recoil 사용
-//? 피기님이 하신 투자지표 툴로 변경 예정
 function Indicators() {
   const router = useRouter()
-  const [inputValue, setInputValue] = useState('')
+  const [inputValue, setInputValue] = useRecoilState(totalinputValueAtom)
   const [error, setError] = useState('')
+  const [checkError, setCheckError] = useState('')
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
     setError('')
   }
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    if (!/^\d+$/.test(inputValue)) {
+  const handleSubmit = () => {
+    if (!/^\d+$/.test(inputValue) && selectedIndex === null) {
       setError('숫자만 입력 가능합니다.')
+      setCheckError('지표 항목을 한가지 선택해야 합니다.')
+    } else if (!/^\d+$/.test(inputValue)) {
+      setError('숫자만 입력 가능합니다.')
+    } else if (selectedIndex === null) {
+      setCheckError('지표 항목을 한가지 선택해야 합니다.')
     } else {
+      setError('')
+      setCheckError('')
       router.push('/result')
     }
   }
@@ -38,33 +47,50 @@ function Indicators() {
         <div className={S.paddingWrapper}>
           <Title title="아이디어 제목" />
         </div>
-        <form className={S.formWrapper} onSubmit={handleSubmit}>
+
+        <div className={S.formWrapper}>
           <div className={S.overflowWrapper}>
-            <FormTitle
-              title="전체 이용자 수"
-              subTitle="전체 이용자 수를 가지고 총 결과 지표가 계산됩니다."
-            />
+            <div className={S.marginWrapper}>
+              <FormTitle
+                title="전체 이용자 수"
+                subTitle="전체 이용자 수를 가지고 총 결과 지표가 계산됩니다."
+              />
 
-            <div className={FormS.inputWrapper}>
-              <input
-                className={FormS.input}
-                placeholder="수치를 입력해 주세요."
-                value={inputValue}
-                onChange={handleChange}
+              <div className={FormS.inputWrapper}>
+                <input
+                  className={FormS.input}
+                  placeholder="수치를 입력해 주세요."
+                  value={inputValue}
+                  onChange={handleChange}
+                />
+              </div>
+              {error && <span className={FormS.error}>{error}</span>}
+            </div>
+            <div className={S.marginWrapper}>
+              <FormTitle
+                title="지표 항목"
+                subTitle="점수 환산의 기준이 되는 한가지의 항목을 골라주세요."
               />
+              <ActiveInvestmentList
+                selectedIndex={selectedIndex}
+                onSelect={(index: number) => {
+                  setSelectedIndex(index)
+                  setCheckError('')
+                }}
+              />
+              {checkError && <span className={FormS.error}>{checkError}</span>}
             </div>
-
-            {error && (
-              <span className={FormS.error}>숫자만 입력 가능합니다.</span>
-            )}
           </div>
-
           <div className={S.bottomWrapper}>
-            <button type="submit" className={S.submitBtnWrapper}>
+            <button
+              type="submit"
+              className={S.submitBtnWrapper}
+              onClick={handleSubmit}
+            >
               제출하기
             </button>
           </div>
-        </form>
+        </div>
       </div>
     </>
   )

diff --git a/app/(route)/oauth/callback/kakao/_components/callback/index.tsx b/app/(route)/oauth/callback/kakao/_components/callback/index.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import React, { useEffect } from 'react'
+
+function Callback() {
+  const params = useSearchParams()
+
+  useEffect(() => {
+    const codeParam = params.get('code')
+
+    if (codeParam) {
+      console.log(codeParam)
+    }
+  }, [params])
+
+  return <div>Redirecting...</div>
+}
+
+export default Callback
diff --git a/app/(route)/oauth/callback/kakao/page.tsx b/app/(route)/oauth/callback/kakao/page.tsx
@@ -0,0 +1,14 @@
+import React, { Suspense } from 'react'
+import Callback from './_components/callback'
+
+function page() {
+  return (
+    <Suspense fallback={<div>로딩중...</div>}>
+      <div>
+        <Callback />
+      </div>
+    </Suspense>
+  )
+}
+
+export default page
diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx
@@ -34,8 +34,12 @@ function Login() {
     animateDiagonal()
   }, [])
 
-  const handleClicksignin = () => {
-    router.push('/main')
+  const handleLogin = () => {
+    const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID
+    const KAKAO_REDIRECT_URL = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URL
+    const kakadoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URL}&response_type=code`
+
+    window.location.href = kakadoAuthUrl
   }
 
   return (
@@ -61,10 +65,14 @@ function Login() {
           height={400}
         />
       </motion.div>
-
-      <div className={styles.kakaologin} onClick={handleClicksignin}>
+      {/* <form method="GET" action="/api/signincheck">
+        <button className={styles.kakaologin} type="submit">
+          <RiKakaoTalkFill className={styles.icon} /> 카카오로 시작하기
+        </button>
+      </form> */}
+      <button className={styles.kakaologin} type="button" onClick={handleLogin}>
         <RiKakaoTalkFill className={styles.icon} /> 카카오로 시작하기
-      </div>
+      </button>
       <div className={styles.nonmember} onClick={handleClickNonMember}>
         비회원으로 둘러보기
       </div>

diff --git a/app/(route)/toolDetail/[toolId]/page.tsx b/app/(route)/toolDetail/[toolId]/page.tsx
@@ -4,8 +4,9 @@ import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
 import { useState } from 'react'
 import S from './toolDetail.module.css'
+import Link from 'next/link'
 
-//
+//TODO: 검증하기 누를 시 해당 아이디어 툴의 id로 이동하기
 //TODO: 주석 처리 실제 데이터로 변경하기
 function ToolDetail() {
   const [clickBtn, setClickBtn] = useState(false)
@@ -77,9 +78,9 @@ function ToolDetail() {
         )}
       </div>
 
-      {/* <Link href={`/verification/${toolId}`}>
-          <div>검증하기</div>
-        </Link> */}
+      <Link href={`/verification/ibulsin?step=1`}>
+        <div>검증하기</div>
+      </Link>
     </div>
   )
 }

diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css
@@ -1,21 +1,25 @@
 .item_container {
   display: flex;
-  /* justify-content: space-between; */
-  justify-content: center;
-  margin-bottom: 8px;
+  justify-content: space-between;
+  margin-bottom: 3px;
+  height: 50px;
 }
 .item_input_wrapper {
   display: flex;
 }
 .input {
   all: unset;
-  font-size: 12px;
+  font-size: 0.83rem;
   padding: 8px;
-  border: 1px solid #CDCDCD;
-  border-radius: 4px;
+  padding: 14px 20px;
+  border: 1px solid #efefef;
+  border-radius: 15px;
+  width: 100%;
+  height: auto;
 }
+
 .item_name_input {
-  width: 100px;
+  width: 200px;
   margin-right: 16px;
 }
 .score_container {
@@ -33,12 +37,28 @@
   padding: 4px 8px;
   background-color: rgb(248, 64, 64);
   color: #ffffff;
-  font-size: 12px;
+  font-size: 0.7rem;
+  font-weight: 600;
   border-radius: 8px;
+  width: 30px;
+  height: 20px;
+  text-align: center;
+}
+
+.columnWrapper {
+  display: flex;
+  flex-direction: column;
+
+  gap: 3px;
 }
 
 .input::-webkit-outer-spin-button,
 .input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
-}
+}
+
+.checkbox {
+  accent-color: var(--purple-700);
+  margin-bottom: 20px;
+}