From f9bd7bbcb323b3a6c8ce36f235dced99a97f9aa1 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:30:44 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=BB=AC=EB=9F=BC=20=EB=A6=AC=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=8B=9C=20=EC=A0=95=EB=A0=AC=EC=9D=B4=20?=
 =?UTF-8?q?=ED=8A=B8=EB=A6=AC=EA=B1=B0=EB=90=98=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

문제:
- 컬럼 너비를 조절할 때 자동으로 정렬이 실행됨
- 리사이즈 핸들 클릭이 헤더의 onClick 이벤트를 트리거

해결:
- isResizing useRef 플래그 추가
- 리사이즈 시작 시 플래그를 true로 설정
- 헤더 onClick에서 isResizing.current 체크
- 리사이즈 중이면 정렬 실행 안함
- mouseup 후 100ms 지연으로 플래그 해제

적용:
- TableListComponent
- InteractiveDataTable

이제 컬럼 리사이즈가 정렬을 방해하지 않음
---
 frontend/components/screen/InteractiveDataTable.tsx |  8 ++++++++
 .../components/table-list/TableListComponent.tsx    | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 45a5e488..54c4be4b 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -109,6 +109,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
   const hasInitializedWidthsRef = useRef(false);
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
+  const isResizingRef = useRef(false);
 
   // SaveModal 상태 (등록/수정 통합)
   const [showSaveModal, setShowSaveModal] = useState(false);
@@ -1994,6 +1995,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                   const thElement = columnRefs.current[column.id];
                                   if (!thElement) return;
                                   
+                                  isResizingRef.current = true;
+                                  
                                   const startX = e.clientX;
                                   const startWidth = columnWidth || thElement.offsetWidth;
                                   
@@ -2024,6 +2027,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                     document.body.style.userSelect = '';
                                     document.body.style.cursor = '';
                                     
+                                    // 약간의 지연 후 리사이즈 플래그 해제
+                                    setTimeout(() => {
+                                      isResizingRef.current = false;
+                                    }, 100);
+                                    
                                     document.removeEventListener('mousemove', handleMouseMove);
                                     document.removeEventListener('mouseup', handleMouseUp);
                                   };
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index aa82d5b2..a1254d18 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -248,6 +248,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const [isAllSelected, setIsAllSelected] = useState(false);
   const hasInitializedWidths = useRef(false);
+  const isResizing = useRef(false);
 
   // 필터 설정 관련 상태
   const [isFilterSettingOpen, setIsFilterSettingOpen] = useState(false);
@@ -1073,7 +1074,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                           userSelect: 'none'
                         }}
-                        onClick={() => column.sortable && handleSort(column.columnName)}
+                        onClick={() => {
+                          if (isResizing.current) return;
+                          if (column.sortable) handleSort(column.columnName);
+                        }}
                       >
                         {column.columnName === "__checkbox__" ? (
                           renderCheckboxHeader()
@@ -1098,6 +1102,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               const thElement = columnRefs.current[column.columnName];
                               if (!thElement) return;
                               
+                              isResizing.current = true;
+                              
                               const startX = e.clientX;
                               const startWidth = columnWidth || thElement.offsetWidth;
                               
@@ -1128,6 +1134,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                                 document.body.style.userSelect = '';
                                 document.body.style.cursor = '';
                                 
+                                // 약간의 지연 후 리사이즈 플래그 해제 (클릭 이벤트가 먼저 처리되지 않도록)
+                                setTimeout(() => {
+                                  isResizing.current = false;
+                                }, 100);
+                                
                                 document.removeEventListener('mousemove', handleMouseMove);
                                 document.removeEventListener('mouseup', handleMouseUp);
                               };