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 (
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, }, ], })