Merge pull request #29 from primus-teoSprint/feat/#24

[#24] 투자 지표 페이지 및 계산 로직

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

@@ -1,17 +1,39 @@
 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'
 
+//* 결과페이지 입니다.
 //TODO: 사용자가 클릭한 아이디어 이름과 해당 툴을 사용한 사용자 수가 보여집니다.
 function Result() {
+  const selectedItem = useRecoilValue(investmentItemAtom)
+  const totalinputValue = parseInt(useRecoilValue(totalinputValueAtom))
+
   return (
     <div className={S.wrapper}>
       <Nav />
       <div>
         <Title title="검증 결과" />
+
         <div>
-          <Title title="아이디어 이름" />
-          <span>전체 사용자 162명</span>
+          <span className={S.title}>아이디어 이름</span>
+          <p className={S.subTitle}>전체 사용자 162명</p>
+        </div>
+
+        <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>

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

@@ -4,3 +4,13 @@
   padding-bottom: 50px;
   padding: 0 18px;
 }
+
+.title {
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.subTitle {
+  font-size: 0.9rem;
+  font-weight: 400;
+}

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 {

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>
     </>
   )

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

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