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 = ({ const [isDragging, setIsDragging] = useState(false); const [draggedRowIndex, setDraggedRowIndex] = useState(null); const [columnWidths, setColumnWidths] = useState>({}); + const columnRefs = useRef>({}); const [isAllSelected, setIsAllSelected] = useState(false); // 필터 설정 관련 상태 @@ -1026,6 +1027,7 @@ export const TableListComponent: React.FC = ({ return ( (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 = ({ 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 })); } // 텍스트 선택 복원