[#24] 투자 지표 사람 및 결과 도출

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

@@ -1,15 +1,24 @@
 import Nav from '@/app/_common/nav'
 import Title from '@/app/_common/text/title'
-import { investmentItemAtom, totalinputValueAtom } from '@/app/_store/atom'
+import { selectedItemAtom, totalinputValueAtom } from '@/app/_store/atom'
 import { useRecoilValue } from 'recoil'
 import S from './result.module.css'
 
 //* 결과페이지 입니다.
 //TODO: 사용자가 클릭한 아이디어 이름과 해당 툴을 사용한 사용자 수가 보여집니다.
 function Result() {
-  const selectedItem = useRecoilValue(investmentItemAtom)
+  const selectedItem = useRecoilValue(selectedItemAtom)
   const totalinputValue = parseInt(useRecoilValue(totalinputValueAtom))
 
+  const result =
+    selectedItem?.score &&
+    selectedItem?.people &&
+    Math.floor(
+      ((selectedItem.people * selectedItem.score) /
+        (selectedItem.score * totalinputValue)) *
+        100,
+    )
+
   return (
     <div className={S.wrapper}>
       <Nav />
@@ -24,16 +33,11 @@ function Result() {
         <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>
-          ))}
+          <p>선택한 아이템 이름: {selectedItem?.name}</p>
+          <p>선택한 아이템 점수: {selectedItem?.score}</p>
+          <p>선택한 아이템 사람 수: {selectedItem?.people}</p>
+          <p>최종 점수: {result}</p>
         </div>
       </div>
     </div>

app/(route)/indicators/page.tsx

@@ -12,7 +12,6 @@ import FormS from './_components/form/form.module.css'
 import S from './indicators.module.css'
 
 //* 투자 지표 입력 페이지입니다.
-//TODO: title에 사용자가 입력했던 요소들이 보여지게 됩니다.
 function Indicators() {
   const router = useRouter()
   const [inputValue, setInputValue] = useRecoilState(totalinputValueAtom)

app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css

@@ -20,17 +20,20 @@
 
 .item_name_input {
   width: 200px;
-  margin-right: 16px;
+  margin-right: 12px;
 }
 .score_container {
-  margin-right: 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .score_container > span {
   font-size: 14px;
-  font-weight: bold;
+  font-weight: 700;
+  margin-right: 4px;
 }
 .item_score_input {
-  width: 40px;
+  width: 35px;
   margin-right: 4px;
 }
 .delete_btn {
@@ -45,10 +48,18 @@
   text-align: center;
 }
 
-.columnWrapper {
+.btnWrapper {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  margin: 15px 0;
+}
 
+.rowWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: auto;
   gap: 3px;
 }
 
@@ -60,5 +71,5 @@
 
 .checkbox {
   accent-color: var(--purple-700);
-  margin-bottom: 20px;
+  margin-right: 10px;
 }

app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx

@@ -1,7 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 
-import { ActiveInvestmentItemType, investmentItemAtom } from '@/app/_store/atom'
+import {
+  ActiveInvestmentItemType,
+  investmentItemAtom,
+  selectedItemAtom,
+} from '@/app/_store/atom'
 import cn from 'classnames'
 import { ChangeEvent, useState } from 'react'
 import { useRecoilState } from 'recoil'
@@ -22,10 +26,14 @@ function ActiveInvestmentItem({
   onSelect,
 }: ActiveInvestmentItemProps) {
   const [investmentItem, setInvestmentItem] = useRecoilState(investmentItemAtom)
+  const [, setSelectedItem] = useRecoilState(selectedItemAtom)
   const [itemName, setItemName] = useState(item?.name ?? '')
   const [itemScore, setItemScore] = useState<number | undefined>(
     item?.score ?? undefined,
   )
+  const [itemPeople, setItemPeople] = useState<number | undefined>(
+    item?.people ?? undefined,
+  )
 
   const isChecked = selectedIndex === index
 
@@ -34,6 +42,12 @@ function ActiveInvestmentItem({
     const selectedInvestmentItem = investmentItem[index]
     setItemName(selectedInvestmentItem.name)
     setItemScore(selectedInvestmentItem?.score ?? undefined)
+
+    setSelectedItem({
+      name: selectedInvestmentItem.name,
+      score: selectedInvestmentItem.score,
+      people: selectedInvestmentItem.people,
+    })
   }
 
   const handleDeleteItem = () => {
@@ -75,6 +89,18 @@ function ActiveInvestmentItem({
     )
   }
 
+  const handleChangePeopleInput = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value)
+    setItemPeople(isNaN(value) ? undefined : value)
+    setInvestmentItem((prev) =>
+      prev.map((investmentItem) =>
+        investmentItem.id === item.id
+          ? { ...item, people: value }
+          : investmentItem,
+      ),
+    )
+  }
+
   return (
     <>
       <div className={S.item_container}>
@@ -93,9 +119,24 @@ function ActiveInvestmentItem({
               onChange={(e) => handleChangeScoreInput(e)}
             />
             <span>점</span>
+            <input
+              className={cn(S.item_score_input, S.input)}
+              type="number"
+              value={itemPeople ?? ''}
+              onChange={(e) => handleChangePeopleInput(e)}
+            />
+            <span>명</span>
           </div>
         </div>
-        <div className={S.columnWrapper}>
+      </div>
+      <div className={S.btnWrapper}>
+        <input
+          type="checkbox"
+          className={S.checkbox}
+          checked={isChecked}
+          onChange={handleCheckboxChange}
+        />
+        <div className={S.rowWrapper}>
           <button
             type="button"
             className={S.delete_btn}
@@ -106,12 +147,6 @@ function ActiveInvestmentItem({
           <ItemAddBtn />
         </div>
       </div>
-      <input
-        type="checkbox"
-        className={S.checkbox}
-        checked={isChecked}
-        onChange={handleCheckboxChange}
-      />
     </>
   )
 }

app/(route)/verification/ibulsin/_components/ItemAddBtn/index.tsx

@@ -12,6 +12,7 @@ function ItemAddBtn() {
       id: new Date().toISOString(),
       name: '',
       score: null,
+      people: null,
     }
     setInvestmentItem((prev) => [...prev, newItem])
   }

app/_store/atom.ts

@@ -1,14 +1,18 @@
 import { atom } from 'recoil'
 
 export interface ActiveInvestmentItemType {
-  id: string
+  id?: string
   name: string
   score: number | null
+  people: number | null
 }
 
 // type ActiveType = Omit<ActiveInvestmentItemType, 'id'>
-// 시온 그는 신이야...
-// 고오급 타입 스크립트,,,
+
+export const selectedItemAtom = atom<ActiveInvestmentItemType | null>({
+  key: 'selectedItemAtom',
+  default: null,
+})
 
 export const totalinputValueAtom = atom({
   key: 'totalinputValueAtom',
@@ -22,6 +26,7 @@ export const investmentItemAtom = atom<ActiveInvestmentItemType[]>({
       id: new Date().toISOString(),
       name: '',
       score: null,
+      people: null,
     },
   ],
 })