diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css new file mode 100644 index 0000000..a419c59 --- /dev/null +++ b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.module.css @@ -0,0 +1,44 @@ +.item_container { + display: flex; + /* justify-content: space-between; */ + justify-content: center; + margin-bottom: 8px; +} +.item_input_wrapper { + display: flex; +} +.input { + all: unset; + font-size: 12px; + padding: 8px; + border: 1px solid #CDCDCD; + border-radius: 4px; +} +.item_name_input { + width: 100px; + margin-right: 16px; +} +.score_container { + margin-right: 16px; +} +.score_container > span { + font-size: 14px; + font-weight: bold; +} +.item_score_input { + width: 40px; + margin-right: 4px; +} +.delete_btn { + padding: 4px 8px; + background-color: rgb(248, 64, 64); + color: #ffffff; + font-size: 12px; + border-radius: 8px; +} + +.input::-webkit-outer-spin-button, +.input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} \ No newline at end of file diff --git a/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx new file mode 100644 index 0000000..1bd9e2b --- /dev/null +++ b/app/(route)/verification/ibulsin/_components/ActiveInvestmentItem/index.tsx @@ -0,0 +1,86 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +'use client' + +import React, { useState } from 'react' +import S from './index.module.css' +import cn from 'classnames' +import { useRecoilState } from 'recoil' +import investmentItemAtom, { ActiveInvestmentItemType } from '@/app/_store/atom' + +interface ActiveInvestmentItemProps { + item: ActiveInvestmentItemType +} + +function ActiveInvestmentItem({ item }: ActiveInvestmentItemProps) { + const [investmentItem, setInvestmentItem] = useRecoilState(investmentItemAtom) + const [itemName, setItemName] = useState(item?.name ?? '') + const [itemScore, setItemScore] = useState(item?.score ?? 0) + + const handleDeleteItem = () => { + if (investmentItem.length <= 1) { + return + } + + setInvestmentItem((prev) => { + const next = prev.filter( + (investmentItem) => investmentItem.id !== item.id, + ) + console.log(next) + + return next + }) + } + + const handleChangeNameInput = (e: any) => { + const { value } = e.target + setItemName(value) + + setInvestmentItem((prev) => + prev.map((investmentItem) => + investmentItem.id === item.id + ? { ...item, name: value } + : investmentItem, + ), + ) + } + const handleChangeScoreInput = (e: any) => { + const { value } = e.target + setItemScore(value) + + setInvestmentItem((prev) => + prev.map((investmentItem) => + investmentItem.id === item.id + ? { ...item, name: value } + : investmentItem, + ), + ) + } + + return ( +
+
+ handleChangeNameInput(e)} + /> +
+ handleChangeScoreInput(e)} + /> + +
+
+ +
+ ) +} + +export default ActiveInvestmentItem