From a3a4664bb0f07e0c4074a8e20de22755c26f8f0c Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:49:09 +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=A4=91=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 컬럼 헤더에 select-none, userSelect: 'none' 추가
- 드래그 중 document.body.userSelect = 'none'으로 전역 텍스트 선택 차단
- 드래그 완료 후 userSelect 복원
- 드래그 중 cursor를 col-resize로 고정하여 UX 개선
---
 .../components/screen/InteractiveDataTable.tsx     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 354b5a90..3b6299f9 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1940,10 +1940,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                         return (
                           <TableHead
                             key={column.id}
-                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700"
+                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
                             style={{ 
                               width: columnWidth ? `${columnWidth}px` : defaultWidth,
-                              minWidth: '80px'
+                              minWidth: '80px',
+                              userSelect: 'none'
                             }}
                           >
                             {column.label}
@@ -1956,13 +1957,22 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                                   const startX = e.clientX;
                                   const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
                                   
+                                  // 드래그 중 텍스트 선택 방지
+                                  document.body.style.userSelect = 'none';
+                                  document.body.style.cursor = 'col-resize';
+                                  
                                   const handleMouseMove = (moveEvent: MouseEvent) => {
+                                    moveEvent.preventDefault();
                                     const diff = moveEvent.clientX - startX;
                                     const newWidth = Math.max(80, startWidth + diff);
                                     setColumnWidths(prev => ({ ...prev, [column.id]: newWidth }));
                                   };
                                   
                                   const handleMouseUp = () => {
+                                    // 텍스트 선택 복원
+                                    document.body.style.userSelect = '';
+                                    document.body.style.cursor = '';
+                                    
                                     document.removeEventListener('mousemove', handleMouseMove);
                                     document.removeEventListener('mouseup', handleMouseUp);
                                   };