From b40e3d4b8b85c95427e9d3272ba09ab1ff5a162b Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:46:17 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20InteractiveDataTable=20=EC=BB=AC?=
 =?UTF-8?q?=EB=9F=BC=20=EB=84=88=EB=B9=84=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?=
 =?UTF-8?q?=EC=A1=B0=EC=A0=88=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 각 컬럼 헤더 오른쪽에 리사이즈 핸들 추가
- 드래그로 컬럼 너비를 자유롭게 조절 가능
- 최소 너비 80px 보장
- 마지막 컬럼 제외하고 모든 컬럼에 리사이즈 핸들 표시
- hover 시 파란색으로 강조되어 UX 개선
---
 .../screen/InteractiveDataTable.tsx           | 52 +++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

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<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>