feat: InteractiveDataTable 컬럼 너비 드래그 조절 기능 추가

- 각 컬럼 헤더 오른쪽에 리사이즈 핸들 추가
- 드래그로 컬럼 너비를 자유롭게 조절 가능
- 최소 너비 80px 보장
- 마지막 컬럼 제외하고 모든 컬럼에 리사이즈 핸들 표시
- hover 시 파란색으로 강조되어 UX 개선

frontend/components/screen/InteractiveDataTable.tsx

@@ -106,6 +106,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [totalPages, setTotalPages] = useState(1);
   const [total, setTotal] = useState(0);
   const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
 
   // SaveModal 상태 (등록/수정 통합)
   const [showSaveModal, setShowSaveModal] = useState(false);
@@ -1932,15 +1933,48 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           />
                         </TableHead>
                       )}
-                      {visibleColumns.map((column: DataTableColumn) => (
-                        <TableHead
-                          key={column.id}
-                          className="bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700"
-                          style={{ width: `${((column.gridColumns || 2) / totalGridColumns) * 100}%` }}
-                        >
-                          {column.label}
-                        </TableHead>
-                      ))}
+                      {visibleColumns.map((column: DataTableColumn, columnIndex) => {
+                        const columnWidth = columnWidths[column.id];
+                        const defaultWidth = `${((column.gridColumns || 2) / totalGridColumns) * 100}%`;
+                        
+                        return (
+                          <TableHead
+                            key={column.id}
+                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700"
+                            style={{ 
+                              width: columnWidth ? `${columnWidth}px` : defaultWidth,
+                              minWidth: '80px'
+                            }}
+                          >
+                            {column.label}
+                            {/* 리사이즈 핸들 */}
+                            {columnIndex < visibleColumns.length - 1 && (
+                              <div
+                                className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500"
+                                onMouseDown={(e) => {
+                                  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);
+                                }}
+                              />
+                            )}
+                          </TableHead>
+                        );
+                      })}
                       {/* 자동 파일 컬럼 표시 제거됨 - 명시적으로 추가된 파일 컬럼만 표시 */}
                     </TableRow>
                   </TableHeader>