From 40efb391ea124a122b670e5fbf632d3230ae0c75 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:33:13 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?-=20=EA=B7=B8=EB=9D=BC=EB=8D=B0=EC=9D=B4=EC=85=98=20=EB=B0=B0?=
 =?UTF-8?q?=EA=B2=BD,=20=EA=B5=B5=EC=9D=80=20=ED=85=8C=EB=91=90=EB=A6=AC,?=
 =?UTF-8?q?=20=ED=98=B8=EB=B2=84=20=ED=9A=A8=EA=B3=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/screen/InteractiveDataTable.tsx       | 4 ++--
 .../registry/components/table-list/TableListComponent.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 54c4be4b..ca6facb6 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1954,7 +1954,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             <>
               <div className="overflow-hidden rounded-lg border border-gray-200/60 bg-white shadow-sm">
                 <Table style={{ tableLayout: 'fixed' }}>
-                  <TableHeader>
+                  <TableHeader className="bg-gradient-to-b from-muted/50 to-muted border-b-2 border-primary/20">
                     <TableRow>
                       {/* 체크박스 컬럼 (삭제 기능이 활성화된 경우) */}
                       {component.enableDelete && (
@@ -1975,7 +1975,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           <TableHead
                             key={column.id}
                             ref={(el) => (columnRefs.current[column.id] = el)}
-                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none text-center"
+                            className="relative px-4 font-bold text-foreground/90 select-none text-center hover:bg-muted/70 transition-colors"
                             style={{ 
                               width: columnWidth ? `${columnWidth}px` : undefined,
                               userSelect: 'none'
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index a1254d18..598e8017 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1052,9 +1052,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             >
               {/* 헤더 (sticky) */}
               <thead
-                className="sticky top-0 z-10 bg-background"
+                className="sticky top-0 z-10"
               >
-                <tr className="h-10 border-b border-border sm:h-12">
+                <tr className="h-10 border-b-2 border-primary/20 bg-gradient-to-b from-muted/50 to-muted sm:h-12">
                   {visibleColumns.map((column, columnIndex) => {
                     const columnWidth = columnWidths[column.columnName];
                     
@@ -1063,9 +1063,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         key={column.columnName}
                         ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
-                          "relative h-10 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
+                          "relative h-10 text-xs font-bold text-foreground/90 overflow-hidden text-ellipsis select-none sm:h-12 sm:text-sm sm:whitespace-nowrap",
                           column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3",
-                          column.sortable && "cursor-pointer"
+                          column.sortable && "cursor-pointer hover:bg-muted/70 transition-colors"
                         )}
                         style={{
                           textAlign: column.columnName === "__checkbox__" ? "center" : "center",