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] =?UTF-8?q?[#24]=20=EC=84=A0=ED=83=9D=ED=95=9C=20=ED=95=AD?= =?UTF-8?q?=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() {
검증 지표

계산 결과지입니다.

-

전체 이용자 수 : {totalinputValue}

- - {selectedItem.map((item) => ( - -

선택한 아이템 이름: {item.name}

-

선택한 아이템 점수: {item.score}

-

최종 점수: {item.score && item.score * totalinputValue}

-
- ))} +

선택한 아이템 이름: {selectedItem?.name}

+

선택한 아이템 점수: {selectedItem?.score}

+

+ 최종 점수: + {selectedItem?.score && selectedItem?.score * totalinputValue} +

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( 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 -// 시온 그는 신이야... -// 고오급 타입 스크립트,,, + +export const selectedItemAtom = atom({ + key: 'selectedItemAtom', + default: null, +}) export const totalinputValueAtom = atom({ key: 'totalinputValueAtom',