diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx index 1a6b4991..354b5a90 100644 --- a/frontend/components/screen/InteractiveDataTable.tsx +++ b/frontend/components/screen/InteractiveDataTable.tsx @@ -106,6 +106,7 @@ export const InteractiveDataTable: React.FC = ({ const [totalPages, setTotalPages] = useState(1); const [total, setTotal] = useState(0); const [selectedRows, setSelectedRows] = useState>(new Set()); + const [columnWidths, setColumnWidths] = useState>({}); // SaveModal 상태 (등록/수정 통합) const [showSaveModal, setShowSaveModal] = useState(false); @@ -1932,15 +1933,48 @@ export const InteractiveDataTable: React.FC = ({ /> )} - {visibleColumns.map((column: DataTableColumn) => ( - - {column.label} - - ))} + {visibleColumns.map((column: DataTableColumn, columnIndex) => { + const columnWidth = columnWidths[column.id]; + const defaultWidth = `${((column.gridColumns || 2) / totalGridColumns) * 100}%`; + + return ( + + {column.label} + {/* 리사이즈 핸들 */} + {columnIndex < visibleColumns.length - 1 && ( +
{ + e.preventDefault(); + const startX = e.clientX; + const startWidth = columnWidth || (e.currentTarget.parentElement?.offsetWidth || 100); + + const handleMouseMove = (moveEvent: MouseEvent) => { + const diff = moveEvent.clientX - startX; + const newWidth = Math.max(80, startWidth + diff); + setColumnWidths(prev => ({ ...prev, [column.id]: newWidth })); + }; + + const handleMouseUp = () => { + document.removeEventListener('mousemove', handleMouseMove); + document.removeEventListener('mouseup', handleMouseUp); + }; + + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mouseup', handleMouseUp); + }} + /> + )} + + ); + })} {/* 자동 파일 컬럼 표시 제거됨 - 명시적으로 추가된 파일 컬럼만 표시 */}