From 97ce6d36913e9358ee5e505bf1b080f2fa89c18d Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 11:57:01 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20useRef=EB=A1=9C=20=EC=BB=AC=EB=9F=BC=20?=
 =?UTF-8?q?=EB=A6=AC=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=84=B1=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B7=BC=EB=B3=B8=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- columnRefs로 DOM 요소 직접 참조
- 드래그 중에는 DOM 스타일만 변경 (리렌더링 없음)
- 드래그 완료 시에만 state 업데이트
- 불필요한 컴포넌트 재초기화 완전 제거
- 부드러운 리사이즈 경험 제공
---
 .../table-list/TableListComponent.tsx         | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 18d3340c..6b9f1a8f 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -245,6 +245,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [isDragging, setIsDragging] = useState(false);
   const [draggedRowIndex, setDraggedRowIndex] = useState<number | null>(null);
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const columnRefs = useRef<Record<string, HTMLTableCellElement | null>>({});
   const [isAllSelected, setIsAllSelected] = useState(false);
 
   // 필터 설정 관련 상태
@@ -1026,6 +1027,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                     return (
                       <th
                         key={column.columnName}
+                        ref={(el) => (columnRefs.current[column.columnName] = el)}
                         className={cn(
                           "relative h-10 px-2 py-2 text-xs font-semibold text-foreground overflow-hidden text-ellipsis bg-background select-none sm:h-12 sm:px-6 sm:py-3 sm:text-sm sm:whitespace-nowrap",
                           column.sortable && "cursor-pointer"
@@ -1059,36 +1061,36 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               e.preventDefault();
                               e.stopPropagation();
                               
+                              const thElement = columnRefs.current[column.columnName];
+                              if (!thElement) return;
+                              
                               const startX = e.clientX;
-                              const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100);
+                              const startWidth = columnWidth || thElement.offsetWidth;
                               console.log('시작 너비:', startWidth);
                               
                               // 드래그 중 텍스트 선택 방지
                               document.body.style.userSelect = 'none';
                               document.body.style.cursor = 'col-resize';
                               
-                              let rafId: number | null = null;
-                              
                               const handleMouseMove = (moveEvent: MouseEvent) => {
                                 moveEvent.preventDefault();
                                 
-                                if (rafId) {
-                                  cancelAnimationFrame(rafId);
-                                }
+                                const diff = moveEvent.clientX - startX;
+                                const newWidth = Math.max(80, startWidth + diff);
                                 
-                                rafId = requestAnimationFrame(() => {
-                                  const diff = moveEvent.clientX - startX;
-                                  const newWidth = Math.max(80, startWidth + diff);
-                                  console.log('드래그 중:', { diff, newWidth });
-                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
-                                });
+                                // 직접 DOM 스타일 변경 (리렌더링 없음)
+                                if (thElement) {
+                                  thElement.style.width = `${newWidth}px`;
+                                }
                               };
                               
                               const handleMouseUp = () => {
                                 console.log('마우스 업!');
                                 
-                                if (rafId) {
-                                  cancelAnimationFrame(rafId);
+                                // 최종 너비를 state에 저장
+                                if (thElement) {
+                                  const finalWidth = thElement.offsetWidth;
+                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
                                 }
                                 
                                 // 텍스트 선택 복원