fix(RepeaterTable): 조회 컬럼 헤더 라벨 개선 및 코드 정리

헤더에 "컬럼명 - 옵션라벨" 형식으로 전체 정보 표시
옵션 변경 시 컬럼 너비 자동 재계산
API 검색 시 정확한 일치 검색(equals) 적용
디버그 로그 제거
설정 UI 라벨 사용자 친화적으로 변경
This commit is contained in:
SeongHyun Kim
2025-12-19 13:43:26 +09:00
parent c86140fad3
commit 228fd33a2a
4 changed files with 59 additions and 63 deletions

View File

@@ -238,9 +238,17 @@ export function RepeaterTable({
return equalWidth;
}
// 헤더 텍스트 너비
const headerText = column.label || field;
const headerWidth = measureTextWidth(headerText) + 24; // padding
// 헤더 텍스트 너비 (동적 데이터 소스가 있으면 headerLabel 사용)
let headerText = column.label || field;
if (column.dynamicDataSource?.enabled && column.dynamicDataSource.options.length > 0) {
const activeOptionId = activeDataSources[field] || column.dynamicDataSource.defaultOptionId;
const activeOption = column.dynamicDataSource.options.find((opt) => opt.id === activeOptionId)
|| column.dynamicDataSource.options[0];
if (activeOption?.headerLabel) {
headerText = activeOption.headerLabel;
}
}
const headerWidth = measureTextWidth(headerText) + 32; // padding + 드롭다운 아이콘
// 헤더와 데이터 중 큰 값 사용
return Math.max(headerWidth, maxDataWidth);
@@ -554,7 +562,10 @@ export function RepeaterTable({
"-mx-1 rounded px-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
)}
>
<span>{col.label}</span>
{/* 컬럼명 - 선택된 옵션라벨 형식으로 표시 */}
<span>
{activeOption?.headerLabel || `${col.label} - ${activeOption?.label || ''}`}
</span>
<ChevronDown className="h-3 w-3 opacity-60" />
</button>
</PopoverTrigger>
@@ -569,6 +580,14 @@ export function RepeaterTable({
onClick={() => {
onDataSourceChange?.(col.field, option.id);
setOpenPopover(null);
// 옵션 변경 시 해당 컬럼 너비 재계산
if (option.headerLabel) {
const newHeaderWidth = measureTextWidth(option.headerLabel) + 32;
setColumnWidths((prev) => ({
...prev,
[col.field]: Math.max(prev[col.field] || 60, newHeaderWidth),
}));
}
}}
className={cn(
"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs",