From 36d51913119c94263f07246b1d037303634e7473 Mon Sep 17 00:00:00 2001
From: Daseul Kim <seul@interplug.co.kr>
Date: Fri, 23 May 2025 10:45:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=A7=80=EB=B6=95=EC=9E=AC=EC=A0=81?=
 =?UTF-8?q?=ED=95=A9=EC=84=B1=20=EB=A9=94=EC=9D=B8=20=EC=B2=B4=ED=81=AC=20?=
 =?UTF-8?q?=EC=8B=9C=20=ED=95=98=EC=9C=84=20=EC=A0=84=EC=B2=B4=EC=B2=B4?=
 =?UTF-8?q?=ED=81=AC=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/suitable/SuitableList.tsx | 13 +++++++++----
 src/hooks/useSuitable.ts                 | 11 ++++++++++-
 src/store/useSuitableStore.ts            |  6 +++---
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/suitable/SuitableList.tsx b/src/components/suitable/SuitableList.tsx
index d3086a5..f55fa67 100644
--- a/src/components/suitable/SuitableList.tsx
+++ b/src/components/suitable/SuitableList.tsx
@@ -9,7 +9,7 @@ import { useSuitableStore } from '@/store/useSuitableStore'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
 
 export default function SuitableList() {
-  const { toCodeName, toSuitableDetail, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
+  const { toCodeName, toSuitableDetail, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
   const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
   const [openItems, setOpenItems] = useState<Set<number>>(new Set())
   const observerTarget = useRef<HTMLDivElement>(null)
@@ -37,8 +37,8 @@ export default function SuitableList() {
 
   // 아이템 클릭
   const handleItemClick = useCallback(
-    (mainId: number, detailId?: number): void => {
-      isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId)
+    (mainId: number, detailId?: number, detailIds?: Set<number>): void => {
+      isItemSelected(mainId, detailId) ? removeSelectedItem(mainId, detailId) : addSelectedItem(mainId, detailId, detailIds)
     },
     [isItemSelected, addSelectedItem, removeSelectedItem],
   )
@@ -73,7 +73,12 @@ export default function SuitableList() {
         <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
           <div className="check-name-wrap">
             <div className={`check-form-box ${isMainIndeterminate(item.id, item.detailCnt) ? 'space' : ''}`}>
-              <input type="checkbox" id={`ch${item.id}`} checked={isItemSelected(item.id)} onChange={() => handleItemClick(item.id)} />
+              <input
+                type="checkbox"
+                id={`ch${item.id}`}
+                checked={isItemSelected(item.id)}
+                onChange={() => handleItemClick(item.id, undefined, toSuitableDetailIds(item.detail))}
+              />
               <label htmlFor={`ch${item.id}`}>{item.productName}</label>
             </div>
             <div className="check-name-btn">
diff --git a/src/hooks/useSuitable.ts b/src/hooks/useSuitable.ts
index 57ff7b5..f651b4d 100644
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@@ -9,7 +9,6 @@ export function useSuitable() {
   const { axiosInstance } = useAxios()
   const { getCommCode } = useCommCode()
   const { itemPerPage, selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
-  
 
   const getSuitables = async ({
     pageNumber,
@@ -66,6 +65,15 @@ export function useSuitable() {
     }
   }
 
+  const toSuitableDetailIds = (suitableDetailString: string): Set<number> => {
+    try {
+      return new Set<number>(JSON.parse(suitableDetailString).map(({ id }: { id: number }) => id))
+    } catch (error) {
+      console.error('지붕재 데이터 파싱 실패:', error)
+      return new Set()
+    }
+  }
+
   const {
     data: suitables,
     fetchNextPage,
@@ -97,6 +105,7 @@ export function useSuitable() {
     getSuitableCommCode,
     toCodeName,
     toSuitableDetail,
+    toSuitableDetailIds,
     suitables,
     fetchNextPage,
     hasNextPage,
diff --git a/src/store/useSuitableStore.ts b/src/store/useSuitableStore.ts
index 74fb115..74f4d0b 100644
--- a/src/store/useSuitableStore.ts
+++ b/src/store/useSuitableStore.ts
@@ -28,7 +28,7 @@ interface SuitableState {
   /* 선택된 아이템 리스트 */
   selectedItems: Map<number, Set<number>>
   /* 선택된 아이템 추가 */
-  addSelectedItem: (mainId: number, detailId?: number) => void
+  addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => void
   /* 선택된 아이템 제거 */
   removeSelectedItem: (mainId: number, detailId?: number) => void
   /* 선택된 아이템 모두 제거 */
@@ -59,7 +59,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
   setSearchValue: (value: string) => set({ searchValue: value }),
 
   /* 선택된 아이템 추가 */
-  addSelectedItem: (mainId: number, detailId?: number) => {
+  addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
     if (detailId) {
       // 디테일(하위) 아이템 추가
       set((state) => {
@@ -71,7 +71,7 @@ export const useSuitableStore = create<SuitableState>((set) => ({
     } else {
       // 메인(상위) 아이템 추가
       set((state) => {
-        state.selectedItems.set(mainId, new Set())
+        state.selectedItems.set(mainId, detailIds || new Set())
         return { selectedItems: state.selectedItems }
       })
     }