feat: 지붕재 데이터 선택 기능 추가

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>
           ))