fix: useRef로 컬럼 리사이즈 성능 근본 해결

- columnRefs로 DOM 요소 직접 참조
- 드래그 중에는 DOM 스타일만 변경 (리렌더링 없음)
- 드래그 완료 시에만 state 업데이트
- 불필요한 컴포넌트 재초기화 완전 제거
- 부드러운 리사이즈 경험 제공

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) {
+                                const diff = moveEvent.clientX - startX;
-                                  cancelAnimationFrame(rafId);
+                                const newWidth = Math.max(80, startWidth + diff);
-                                }
                                 
-                                rafId = requestAnimationFrame(() => {
+                                // 직접 DOM 스타일 변경 (리렌더링 없음)
-                                  const diff = moveEvent.clientX - startX;
+                                if (thElement) {
-                                  const newWidth = Math.max(80, startWidth + diff);
+                                  thElement.style.width = `${newWidth}px`;
-                                  console.log('드래그 중:', { diff, newWidth });
+                                }
-                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: newWidth }));
-                                });
                               };
                               
                               const handleMouseUp = () => {
                                 console.log('마우스 업!');
                                 
-                                if (rafId) {
+                                // 최종 너비를 state에 저장
-                                  cancelAnimationFrame(rafId);
+                                if (thElement) {
+                                  const finalWidth = thElement.offsetWidth;
+                                  setColumnWidths(prev => ({ ...prev, [column.columnName]: finalWidth }));
                                 }
                                 
                                 // 텍스트 선택 복원