fix(RepeaterTable): 조회 컬럼 헤더 라벨 개선 및 코드 정리
헤더에 "컬럼명 - 옵션라벨" 형식으로 전체 정보 표시 옵션 변경 시 컬럼 너비 자동 재계산 API 검색 시 정확한 일치 검색(equals) 적용 디버그 로그 제거 설정 UI 라벨 사용자 친화적으로 변경
This commit is contained in:
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user