From 6aa25fa852824de2755373bc89c71a8d18b06b10 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:24:28 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20TableListComponent=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=BB=AC=EB=9F=BC=2048px=20=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 체크박스 컬럼(__checkbox__)을 48px 고정 너비로 설정
- width, minWidth, maxWidth 모두 48px 적용
- 체크박스 컬럼에서 리사이즈 핸들 제거
- 초기 너비 측정 시 체크박스 컬럼 제외
- 테이블 헤더와 본문 셀 모두 적용
- InteractiveDataTable과 일관된 체크박스 컬럼 스타일
---
 .../components/table-list/TableListComponent.tsx  | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 10e17fa5..dccbce67 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -804,6 +804,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         let hasAnyWidth = false;
 
         visibleColumns.forEach((column) => {
+          // 체크박스 컬럼은 제외 (고정 48px)
+          if (column.columnName === "__checkbox__") return;
+          
           const thElement = columnRefs.current[column.columnName];
           if (thElement) {
             const measuredWidth = thElement.offsetWidth;
@@ -1064,7 +1067,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         )}
                         style={{
                           textAlign: column.align || "left",
-                          width: columnWidth ? `${columnWidth}px` : undefined,
+                          width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
+                          minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
+                          maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                           userSelect: 'none'
                         }}
                         onClick={() => column.sortable && handleSort(column.columnName)}
@@ -1079,8 +1084,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             )}
                           </div>
                         )}
-                        {/* 리사이즈 핸들 */}
-                        {columnIndex < visibleColumns.length - 1 && (
+                        {/* 리사이즈 핸들 (체크박스 제외) */}
+                        {columnIndex < visibleColumns.length - 1 && column.columnName !== "__checkbox__" && (
                           <div
                             className="absolute right-0 top-0 h-full w-2 cursor-col-resize hover:bg-blue-500 z-20"
                             style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
@@ -1193,7 +1198,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             )}
                             style={{
                               textAlign: column.align || "left",
-                              width: `${100 / visibleColumns.length}%`, // 컬럼 수에 따라 균등 분배
+                              width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
+                              minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
+                              maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                             }}
                           >
                             {column.columnName === "__checkbox__"