From 8630d82a69b021c0b97ad7f2b3c02f98b450eecd Mon Sep 17 00:00:00 2001
From: DDD1542 <puget159@naver.com>
Date: Wed, 18 Mar 2026 10:16:59 +0900
Subject: [PATCH] Refactor RealtimePreviewDynamic and ResponsiveGridRenderer
 components to improve layout handling and responsiveness. Update
 SingleTableWithSticky and TableListComponent for better checkbox handling and
 styling consistency. Enhance overall user experience with refined component
 structures and styles.

---
 .../v2-table-list/TableListComponent.tsx      | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
index 3f41b185..31cabb70 100644
--- a/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/v2-table-list/TableListComponent.tsx
@@ -3072,7 +3072,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       if (state.sortDirection) setSortDirection(state.sortDirection);
       if (state.groupByColumns) setGroupByColumns(state.groupByColumns);
       if (state.frozenColumns) {
-        // 체크박스 컬럼이 항상 포함되도록 보장
+        // 체크박스 컬럼은 frozen 대상에서 제외 (배경색 이중 적용 방지)
         const restoredFrozenColumns = (state.frozenColumns || []).filter((col: string) => col !== "__checkbox__");
         setFrozenColumns(restoredFrozenColumns);
       }
@@ -6227,16 +6227,18 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                           : `${100 / visibleColumns.length}%`,
                                       minWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                       maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
-                                      ...(isFrozen && {
-                                        left: `${leftPosition}px`,
-                                        backgroundColor: "hsl(var(--background))",
-                                      }),
-                                    }}
-                                  >
+                                  ...(isFrozen && {
+                                    left: `${leftPosition}px`,
+                                    backgroundColor: index % 2 === 0
+                                      ? "hsl(var(--background))"
+                                      : "hsl(var(--muted) / 0.2)",
+                                  }),
+                                }}
+                              >
                                     {column.columnName === "__checkbox__"
                                       ? renderCheckboxCell(row, index)
                                       : formatCellValue(cellValue, column, row)}
-                                  </td>
+                              </td>
                                 );
                               })}
                             </tr>
@@ -6384,7 +6386,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   isModified && !cellValidationError && "bg-amber-100 dark:bg-amber-900/40",
                                   cellValidationError && "bg-red-50 ring-2 ring-red-500 ring-inset dark:bg-red-950/40",
                                   isSearchHighlighted && !isCellFocused && "bg-yellow-200 dark:bg-yellow-700/50",
-                                  column.editable === false && "bg-gray-50 dark:bg-gray-900/30",
+                                  column.editable === false && "bg-muted/10 dark:bg-muted/10",
                                   // 코드 컬럼: mono 폰트 + primary 색상
                                   (inputType === "code" || inputType === "category") && "font-mono text-[10px] text-primary font-medium",
                                   // 숫자 컬럼: tabular-nums 오른쪽 정렬
@@ -6405,7 +6407,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                   maxWidth: column.columnName === "__checkbox__" ? "48px" : undefined,
                                   ...(isFrozen && {
                                     left: `${leftPosition}px`,
-                                    backgroundColor: "hsl(var(--background))",
+                                    backgroundColor: index % 2 === 0
+                                      ? "hsl(var(--background))"
+                                      : "hsl(var(--muted) / 0.2)",
                                   }),
                                 }}
                                 onClick={(e) => handleCellClick(index, colIndex, e)}