fix: TableListComponent 필터 설정 다이얼로그 스타일 개선

🎨 UI 개선
- 필터 설정 다이얼로그 스타일을 플로우 위젯과 동일하게 변경
- hover:bg-gray-50으로 호버 효과 추가
- rounded-lg, p-3, space-x-3으로 간격 및 패딩 개선
- space-y-2, py-4로 리스트 아이템 간격 조정

🐛 버그 수정
- 필터 목록에 key prop 추가 (React 경고 해결)
- Label 컴포넌트 대신 label 태그 사용 (불필요한 import 제거)

📝 변경 사항
- 플로우 위젯과 동일한 체크박스 리스트 스타일 적용
- 더 명확하고 클릭하기 쉬운 UI로 개선

 결과
- 필터 설정 다이얼로그가 플로우 위젯과 일관된 스타일로 표시됨
This commit is contained in:
kjs 2025-11-03 13:53:50 +09:00
parent cbf8576897
commit e0e7bc387e
1 changed files with 8 additions and 5 deletions

View File

@ -1248,20 +1248,23 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
</DialogDescription>
</DialogHeader>
<div className="max-h-[60vh] space-y-3 overflow-y-auto sm:space-y-4">
<div className="max-h-[60vh] space-y-2 overflow-y-auto py-4">
{(tableConfig.filter?.filters || []).map((filter) => (
<div className="flex items-center gap-3 rounded p-2 hover:bg-muted">
<div
key={filter.columnName}
className="flex items-center space-x-3 rounded-lg p-3 hover:bg-gray-50"
>
<Checkbox
id={`filter-${filter.columnName}`}
checked={visibleFilterColumns.has(filter.columnName)}
onCheckedChange={() => toggleFilterVisibility(filter.columnName)}
/>
<Label
<label
htmlFor={`filter-${filter.columnName}`}
className="flex-1 cursor-pointer text-xs font-normal sm:text-sm"
className="flex-1 cursor-pointer text-sm"
>
{columnLabels[filter.columnName] || filter.label || filter.columnName}
</Label>
</label>
</div>
))}
</div>