[#24] 선택한 항목 atom 관리

primus-teoSprint · Apr 7, 2024 · d0aef96 · d0aef96
1 parent e9780a5
commit d0aef96
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',