diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 7ac521af..5f3f7c8d 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -2250,9 +2250,9 @@ export const TableListComponent: React.FC = ({ // 🆕 편집 모드 진입 placeholder (실제 구현은 visibleColumns 정의 후) const startEditingRef = useRef<() => void>(() => {}); - // 🆕 각 컬럼의 고유값 목록 계산 + // 🆕 각 컬럼의 고유값 목록 계산 (라벨 포함) const columnUniqueValues = useMemo(() => { - const result: Record = {}; + const result: Record> = {}; if (data.length === 0) return result; @@ -2260,16 +2260,34 @@ export const TableListComponent: React.FC = ({ if (column.columnName === "__checkbox__") return; const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName; - const values = new Set(); + // 라벨 컬럼 후보들 (백엔드에서 _name, _label, _value_label 등으로 반환할 수 있음) + const labelColumnCandidates = [ + `${column.columnName}_name`, // 예: division_name + `${column.columnName}_label`, // 예: division_label + `${column.columnName}_value_label`, // 예: division_value_label + ]; + const valuesMap = new Map(); // value -> label data.forEach((row) => { const val = row[mappedColumnName]; if (val !== null && val !== undefined && val !== "") { - values.add(String(val)); + const valueStr = String(val); + // 라벨 컬럼 후보들 중 값이 있는 것 사용, 없으면 원본 값 사용 + let label = valueStr; + for (const labelCol of labelColumnCandidates) { + if (row[labelCol] && row[labelCol] !== "") { + label = String(row[labelCol]); + break; + } + } + valuesMap.set(valueStr, label); } }); - result[column.columnName] = Array.from(values).sort(); + // value-label 쌍으로 저장하고 라벨 기준 정렬 + result[column.columnName] = Array.from(valuesMap.entries()) + .map(([value, label]) => ({ value, label })) + .sort((a, b) => a.label.localeCompare(b.label)); }); return result; @@ -5758,16 +5776,16 @@ export const TableListComponent: React.FC = ({ )}
- {columnUniqueValues[column.columnName]?.slice(0, 50).map((val) => { - const isSelected = headerFilters[column.columnName]?.has(val); + {columnUniqueValues[column.columnName]?.slice(0, 50).map((item) => { + const isSelected = headerFilters[column.columnName]?.has(item.value); return (
toggleHeaderFilter(column.columnName, val)} + onClick={() => toggleHeaderFilter(column.columnName, item.value)} >
= ({ > {isSelected && }
- {val || "(빈 값)"} + {item.label || "(빈 값)"}
); })}