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:
parent
cbf8576897
commit
e0e7bc387e
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue