From e9780a5fd6dfb5525b5a0e46cb026e6684d55eb6 Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Sun, 7 Apr 2024 23:04:15 +0900
Subject: [PATCH 1/4] =?UTF-8?q?[#24]=20=EC=A7=80=ED=91=9C=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=ED=8F=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ActiveInvestmentItem/index.module.css     | 25 +++++++++++++------
 .../ActiveInvestmentItem/index.tsx            | 16 ++++++------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css
index ee5d02a..8bdffdc 100644
--- a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css
+++ b/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;
 }
diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
index afc5b2d..1b731f0 100644
--- a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
+++ b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
@@ -95,7 +95,15 @@ function ActiveInvestmentItem({
             <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 +114,6 @@ function ActiveInvestmentItem({
           <ItemAddBtn />
         </div>
       </div>
-      <input
-        type="checkbox"
-        className={S.checkbox}
-        checked={isChecked}
-        onChange={handleCheckboxChange}
-      />
     </>
   )
 }

From d0aef965d6309a4d0ea6cc6649d67a8b7bbeb8f7 Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Mon, 8 Apr 2024 00:03:06 +0900
Subject: [PATCH 2/4] =?UTF-8?q?[#24]=20=EC=84=A0=ED=83=9D=ED=95=9C=20?=
 =?UTF-8?q?=ED=95=AD=EB=AA=A9=20atom=20=EA=B4=80=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indicators/_components/result/index.tsx   | 19 ++++++++-----------
 app/(route)/indicators/page.tsx               |  1 -
 .../ActiveInvestmentItem/index.tsx            | 12 +++++++++++-
 app/_store/atom.ts                            |  9 ++++++---
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
index 3352f8f..37d9688 100644
--- a/app/(route)/indicators/_components/result/index.tsx
+++ b/app/(route)/indicators/_components/result/index.tsx
@@ -1,13 +1,13 @@
 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))
 
   return (
@@ -24,16 +24,13 @@ 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?.score && selectedItem?.score * totalinputValue}
+          </p>
         </div>
       </div>
     </div>
diff --git a/app/(route)/indicators/page.tsx b/app/(route)/indicators/page.tsx
index 0b15a40..de5d424 100644
--- a/app/(route)/indicators/page.tsx
+++ b/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)
diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
index 1b731f0..4de8a81 100644
--- a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
+++ b/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,6 +26,7 @@ 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,
@@ -34,6 +39,11 @@ function ActiveInvestmentItem({
     const selectedInvestmentItem = investmentItem[index]
     setItemName(selectedInvestmentItem.name)
     setItemScore(selectedInvestmentItem?.score ?? undefined)
+
+    setSelectedItem({
+      name: selectedInvestmentItem.name,
+      score: selectedInvestmentItem.score,
+    })
   }
 
   const handleDeleteItem = () => {
diff --git a/app/_store/atom.ts b/app/_store/atom.ts
index a7664b0..06ea507 100644
--- a/app/_store/atom.ts
+++ b/app/_store/atom.ts
@@ -1,14 +1,17 @@
 import { atom } from 'recoil'
 
 export interface ActiveInvestmentItemType {
-  id: string
+  id?: string
   name: string
   score: number | null
 }
 
 // type ActiveType = Omit<ActiveInvestmentItemType, 'id'>
-// 시온 그는 신이야...
-// 고오급 타입 스크립트,,,
+
+export const selectedItemAtom = atom<ActiveInvestmentItemType | null>({
+  key: 'selectedItemAtom',
+  default: null,
+})
 
 export const totalinputValueAtom = atom({
   key: 'totalinputValueAtom',

From 7dfaa2c288495deb95e5a5b2c5c3f24ba4cd54b9 Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Mon, 8 Apr 2024 00:13:48 +0900
Subject: [PATCH 3/4] =?UTF-8?q?[#24]=20=EC=A7=80=ED=91=9C=20=EC=82=AC?=
 =?UTF-8?q?=EB=9E=8C=20=ED=95=AD=EB=AA=A9=20=EA=B0=9C=EB=B0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../indicators/_components/result/index.tsx   | 15 ++++++++----
 .../ActiveInvestmentItem/index.tsx            | 23 +++++++++++++++++++
 app/_store/atom.ts                            |  2 ++
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
index 37d9688..45c9ad7 100644
--- a/app/(route)/indicators/_components/result/index.tsx
+++ b/app/(route)/indicators/_components/result/index.tsx
@@ -10,6 +10,15 @@ function Result() {
   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 />
@@ -27,10 +36,8 @@ function Result() {
           <p>전체 이용자 수 : {totalinputValue}</p>
           <p>선택한 아이템 이름: {selectedItem?.name}</p>
           <p>선택한 아이템 점수: {selectedItem?.score}</p>
-          <p>
-            최종 점수:
-            {selectedItem?.score && selectedItem?.score * totalinputValue}
-          </p>
+          <p>선택한 아이템 사람 수: {selectedItem?.people}</p>
+          <p>최종 점수: {result}</p>
         </div>
       </div>
     </div>
diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
index 4de8a81..4d408fd 100644
--- a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
+++ b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx
@@ -31,6 +31,9 @@ function ActiveInvestmentItem({
   const [itemScore, setItemScore] = useState<number | undefined>(
     item?.score ?? undefined,
   )
+  const [itemPeople, setItemPeople] = useState<number | undefined>(
+    item?.people ?? undefined,
+  )
 
   const isChecked = selectedIndex === index
 
@@ -43,6 +46,7 @@ function ActiveInvestmentItem({
     setSelectedItem({
       name: selectedInvestmentItem.name,
       score: selectedInvestmentItem.score,
+      people: selectedInvestmentItem.people,
     })
   }
 
@@ -85,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}>
@@ -103,6 +119,13 @@ 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>
diff --git a/app/_store/atom.ts b/app/_store/atom.ts
index 06ea507..6950802 100644
--- a/app/_store/atom.ts
+++ b/app/_store/atom.ts
@@ -4,6 +4,7 @@ export interface ActiveInvestmentItemType {
   id?: string
   name: string
   score: number | null
+  people: number | null
 }
 
 // type ActiveType = Omit<ActiveInvestmentItemType, 'id'>
@@ -25,6 +26,7 @@ export const investmentItemAtom = atom<ActiveInvestmentItemType[]>({
       id: new Date().toISOString(),
       name: '',
       score: null,
+      people: null,
     },
   ],
 })

From 9cffe39f7658bf3e79a5f5bd9f7245691ebd6494 Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Mon, 8 Apr 2024 00:16:07 +0900
Subject: [PATCH 4/4] =?UTF-8?q?[#24]=20handleAddItem=20=EC=82=AC=EB=9E=8C?=
 =?UTF-8?q?=20=ED=95=AD=EB=AA=A9=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../verification/ibulsin/_components/ItemAddBtn/index.tsx        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/(route)/verification/ibulsin/_components/ItemAddBtn/index.tsx b/app/(route)/verification/ibulsin/_components/ItemAddBtn/index.tsx
index 060bc92..f11fa79 100644
--- a/app/(route)/verification/ibulsin/_components/ItemAddBtn/index.tsx
+++ b/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])
   }