diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
index 77712ae..1671e58 100644
--- a/app/(route)/indicators/_components/result/index.tsx
+++ b/app/(route)/indicators/_components/result/index.tsx
@@ -1,6 +1,6 @@
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'
import Pyramid from './Pyramid'
@@ -8,9 +8,18 @@ import Pyramid from './Pyramid'
//* 결과페이지 입니다.
//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 (
@@ -32,16 +41,11 @@ function Result() {
검증 지표
계산 결과지입니다.
-
전체 이용자 수 : {totalinputValue}
-
- {selectedItem.map((item) => (
-
- 선택한 아이템 이름: {item.name}
- 선택한 아이템 점수: {item.score}
- 최종 점수: {item.score && item.score * totalinputValue}
-
- ))}
+
선택한 아이템 이름: {selectedItem?.name}
+
선택한 아이템 점수: {selectedItem?.score}
+
선택한 아이템 사람 수: {selectedItem?.people}
+
최종 점수: {result}
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.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..4d408fd 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,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(
item?.score ?? undefined,
)
+ const [itemPeople, setItemPeople] = useState(
+ 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) => {
+ 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 (
<>
@@ -93,9 +119,24 @@ function ActiveInvestmentItem({
onChange={(e) => handleChangeScoreInput(e)}
/>
점
+ handleChangePeopleInput(e)}
+ />
+ 명
-
+
+
-
>
)
}
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])
}
diff --git a/app/_store/atom.ts b/app/_store/atom.ts
index a7664b0..6950802 100644
--- a/app/_store/atom.ts
+++ b/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
-// 시온 그는 신이야...
-// 고오급 타입 스크립트,,,
+
+export const selectedItemAtom = atom({
+ key: 'selectedItemAtom',
+ default: null,
+})
export const totalinputValueAtom = atom({
key: 'totalinputValueAtom',
@@ -22,6 +26,7 @@ export const investmentItemAtom = atom({
id: new Date().toISOString(),
name: '',
score: null,
+ people: null,
},
],
})