From c8540b170e128ae151a32424b68ef511ba3fab63 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 12:01:47 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20table-layout=20fixed=EB=A1=9C=20?=
 =?UTF-8?q?=EC=BB=AC=EB=9F=BC=20=EB=A6=AC=EC=82=AC=EC=9D=B4=EC=A6=88=20?=
 =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- tableLayout: 'fixed' 추가로 컬럼 너비가 DOM 스타일로 제어 가능하도록 설정
- table-layout: auto(기본값)에서는 브라우저가 자동으로 너비를 재조정하여 무시됨
- fixed 모드에서는 설정한 너비가 정확하게 적용됨
---
 .../components/table-list/TableListComponent.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 6b9f1a8f..81597a83 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1013,6 +1013,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
               style={{
                 borderCollapse: "collapse",
                 width: "100%",
+                tableLayout: "fixed",
               }}
             >
               {/* 헤더 (sticky) */}
@@ -1057,26 +1058,31 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                             style={{ marginRight: '-4px', paddingLeft: '4px', paddingRight: '4px' }}
                             onClick={(e) => e.stopPropagation()} // 정렬 클릭 방지
                             onMouseDown={(e) => {
-                              console.log('🖱️ 리사이즈 핸들 마우스다운', column.columnName);
+                              console.log('🖱️ 마우스 다운!', column.columnName);
                               e.preventDefault();
                               e.stopPropagation();
                               
                               const thElement = columnRefs.current[column.columnName];
-                              if (!thElement) return;
+                              if (!thElement) {
+                                console.error('❌ thElement를 찾을 수 없음!');
+                                return;
+                              }
                               
                               const startX = e.clientX;
                               const startWidth = columnWidth || thElement.offsetWidth;
-                              console.log('시작 너비:', startWidth);
+                              console.log('✅ 시작:', { startX, startWidth });
                               
                               // 드래그 중 텍스트 선택 방지
                               document.body.style.userSelect = 'none';
                               document.body.style.cursor = 'col-resize';
                               
                               const handleMouseMove = (moveEvent: MouseEvent) => {
+                                console.log('🐭 마우스 무브!', moveEvent.clientX);
                                 moveEvent.preventDefault();
                                 
                                 const diff = moveEvent.clientX - startX;
                                 const newWidth = Math.max(80, startWidth + diff);
+                                console.log('📏 새 너비:', newWidth);
                                 
                                 // 직접 DOM 스타일 변경 (리렌더링 없음)
                                 if (thElement) {
@@ -1085,8 +1091,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               };
                               
                               const handleMouseUp = () => {
-                                console.log('마우스 업!');
-                                
+                                console.log('⬆️ 마우스 업!');
                                 // 최종 너비를 state에 저장
                                 if (thElement) {
                                   const finalWidth = thElement.offsetWidth;
@@ -1101,6 +1106,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 document.removeEventListener('mouseup', handleMouseUp);
                               };
                               
+                              console.log('👂 이벤트 리스너 등록');
                               document.addEventListener('mousemove', handleMouseMove);
                               document.addEventListener('mouseup', handleMouseUp);
                             }}