diff --git a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx index d8c8c8d9..6463f1b1 100644 --- a/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx +++ b/frontend/lib/registry/components/modal-repeater-table/ItemSelectionModal.tsx @@ -42,6 +42,7 @@ export function ItemSelectionModal({ // 모달 열릴 때 초기 검색 useEffect(() => { if (open) { + console.log("🚪 모달 열림 - uniqueField:", uniqueField, "multiSelect:", multiSelect); search("", 1); // 빈 검색어로 전체 목록 조회 setSelectedItems([]); } else { @@ -56,26 +57,67 @@ export function ItemSelectionModal({ }; const handleToggleItem = (item: any) => { + const itemValue = uniqueField ? item[uniqueField] : undefined; + + console.log("🖱️ 행 클릭:", { + item, + uniqueField, + itemValue, + currentSelected: selectedItems.length, + selectedValues: uniqueField ? selectedItems.map(s => s[uniqueField]) : [] + }); + if (!multiSelect) { setSelectedItems([item]); return; } - const isSelected = selectedItems.some((selected) => - uniqueField - ? selected[uniqueField] === item[uniqueField] - : selected === item - ); + // uniqueField 값이 undefined인 경우 객체 참조로 비교 + if (uniqueField && (itemValue === undefined || itemValue === null)) { + console.warn(`⚠️ uniqueField "${uniqueField}"의 값이 undefined입니다. 객체 참조로 비교합니다.`); + const itemIsSelected = selectedItems.includes(item); + + console.log("📊 선택 상태 (객체 참조):", itemIsSelected); + + if (itemIsSelected) { + const newSelected = selectedItems.filter((selected) => selected !== item); + console.log("➖ 제거 후:", newSelected.length); + setSelectedItems(newSelected); + } else { + console.log("➕ 추가"); + setSelectedItems([...selectedItems, item]); + } + return; + } - if (isSelected) { - setSelectedItems( - selectedItems.filter((selected) => - uniqueField - ? selected[uniqueField] !== item[uniqueField] - : selected !== item - ) - ); + const itemIsSelected = selectedItems.some((selected) => { + if (!uniqueField) { + return selected === item; + } + const selectedValue = selected[uniqueField]; + if (selectedValue === undefined || selectedValue === null) { + return false; + } + return selectedValue === itemValue; + }); + + console.log("📊 선택 상태:", itemIsSelected); + + if (itemIsSelected) { + const newSelected = selectedItems.filter((selected) => { + if (!uniqueField) { + return selected !== item; + } + const selectedValue = selected[uniqueField]; + if (selectedValue === undefined || selectedValue === null) { + return true; + } + return selectedValue !== itemValue; + }); + console.log("➖ 제거 후:", newSelected.length); + setSelectedItems(newSelected); } else { + console.log("➕ 추가"); setSelectedItems([...selectedItems, item]); } }; @@ -98,13 +140,46 @@ export function ItemSelectionModal({ // 선택된 항목인지 확인 const isSelected = (item: any): boolean => { - return selectedItems.some((selected) => - uniqueField - ? selected[uniqueField] === item[uniqueField] - : selected === item - ); + if (!uniqueField) { + return selectedItems.includes(item); + } + + const itemValue = item[uniqueField]; + + // uniqueField 값이 undefined인 경우 객체 참조로 비교 + if (itemValue === undefined || itemValue === null) { + console.warn(`⚠️ uniqueField "${uniqueField}"의 값이 undefined입니다. 객체 참조로 비교합니다.`); + return selectedItems.includes(item); + } + + const result = selectedItems.some((selected) => { + const selectedValue = selected[uniqueField]; + + // selectedValue도 undefined면 안전하게 처리 + if (selectedValue === undefined || selectedValue === null) { + return false; + } + + const isMatch = selectedValue === itemValue; + + if (isMatch) { + console.log("✅ 매칭 발견:", { + selectedValue, + itemValue, + uniqueField + }); + } + + return isMatch; + }); + + return result; }; + // 유효한 컬럼만 필터링 + const validColumns = sourceColumns.filter(col => col != null && col !== ""); + const totalColumns = validColumns.length + (multiSelect ? 1 : 0); + return ( @@ -147,6 +222,11 @@ export function ItemSelectionModal({ {selectedItems.length > 0 && (
{selectedItems.length}개 항목 선택됨 + {uniqueField && ( + + ({selectedItems.map(item => item[uniqueField]).join(", ")}) + + )}
)} @@ -168,7 +248,7 @@ export function ItemSelectionModal({ 선택 )} - {sourceColumns.map((col) => ( + {validColumns.map((col) => ( @@ -192,7 +272,7 @@ export function ItemSelectionModal({ ) : filteredResults.length === 0 ? ( {results.length > 0 @@ -203,10 +283,22 @@ export function ItemSelectionModal({ ) : ( filteredResults.map((item, index) => { const selected = isSelected(item); + const uniqueFieldValue = uniqueField ? item[uniqueField] : undefined; + const itemKey = (uniqueFieldValue !== undefined && uniqueFieldValue !== null) + ? uniqueFieldValue + : `item-${index}`; + + console.log("🔍 행 렌더링:", { + index, + itemKey, + selected, + uniqueFieldValue, + selectedCount: selectedItems.length + }); return ( handleToggleItem(item)} > {multiSelect && ( - - handleToggleItem(item)} - /> + { + // 체크박스 영역 클릭을 행 클릭으로 전파 + e.stopPropagation(); + handleToggleItem(item); + }} + > +
+ +
)} - {sourceColumns.map((col) => ( + {validColumns.map((col) => ( {item[col] || "-"}