From e0e7bc387ef254dd52b54c7833627cb16bad2403 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:53:50 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20TableListComponent=20=ED=95=84=ED=84=B0?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

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

✅ 결과
- 필터 설정 다이얼로그가 플로우 위젯과 일관된 스타일로 표시됨
---
 .../components/table-list/TableListComponent.tsx    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 6a3cb420..7249eb6c 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -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>