From bfbbdc01b8dce44375f7516cf9ed6ff358e5b63f Mon Sep 17 00:00:00 2001
From: Daseul Kim <seul@interplug.co.kr>
Date: Tue, 29 Apr 2025 10:49:58 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EB=B6=95=EC=9E=AC=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=84=A0=ED=83=9D=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Suitable.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Suitable.tsx b/src/components/Suitable.tsx
index 1af6d86..eb725a2 100644
--- a/src/components/Suitable.tsx
+++ b/src/components/Suitable.tsx
@@ -1,16 +1,25 @@
 'use client'
 
 import { useSuitableStore } from '@/store/useSuitableStore'
-import { useQuery } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'next/navigation'
 import type { Suitable as SuitableType } from '@/api/suitable'
 
 export default function Suitable() {
   const router = useRouter()
-  const { selectedItems, addSelectedItem } = useSuitableStore()
+  const queryClient = useQueryClient()
+  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
+  const handleItemClick = (item: SuitableType) => {
+    if (!item.id) return // 초기 데이터 import 때문에 Suitable.id가 optional 타입이라서 방어 처리 추가
+    selectedItems.some((selected) => selected.id === item.id) ? removeSelectedItem(item.id) : addSelectedItem(item)
+  }
 
   const { data: suitableList, isLoading } = useQuery<SuitableType[]>({
     queryKey: ['suitables', 'search'],
+    queryFn: async () => {
+      const data = queryClient.getQueryData(['suitables', 'search']) as SuitableType[]
+      return data ?? []
+    },
     enabled: false,
   })
 
@@ -31,14 +40,22 @@ export default function Suitable() {
       </button>
       <div>
         <h2 className="text-lg font-semibold mb-2">선택된 아이템</h2>
-        {selectedItems.length > 0 ? selectedItems.map((item) => <div key={item.id}>{item.product_name}</div>) : <div>선택된 아이템이 없습니다.</div>}
+        {selectedItems.length > 0 ? (
+          selectedItems.map((item) => (
+            <div key={item.id} onClick={() => handleItemClick(item)}>
+              {item.product_name}
+            </div>
+          ))
+        ) : (
+          <div>선택된 아이템이 없습니다.</div>
+        )}
       </div>
       <br />
       <div>
         <h2 className="text-lg font-semibold mb-2">데이터 목록</h2>
         {suitableList ? (
           suitableList.map((item: SuitableType) => (
-            <div key={item.id} className="p-2 border rounded cursor-pointer hover:bg-gray-100" onClick={() => addSelectedItem(item)}>
+            <div key={item.id} className="p-2 border rounded cursor-pointer hover:bg-gray-100" onClick={() => handleItemClick(item)}>
               {item.product_name}
             </div>
           ))