[#23] 적극적 투자지표 아이템 컴포넌트

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;
+}

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 (
+    <div className={S.item_container}>
+      <div className={S.item_input_wrapper}>
+        <input
+          className={cn(S.item_name_input, S.input)}
+          placeholder="아이템1"
+          value={itemName}
+          onChange={(e) => handleChangeNameInput(e)}
+        />
+        <div className={S.score_container}>
+          <input
+            className={cn(S.item_score_input, S.input)}
+            type="number"
+            placeholder="2"
+            value={itemScore}
+            onChange={(e) => handleChangeScoreInput(e)}
+          />
+          <span>점</span>
+        </div>
+      </div>
+      <button className={S.delete_btn} onClick={handleDeleteItem}>
+        삭제
+      </button>
+    </div>
+  )
+}
+
+export default ActiveInvestmentItem