데이터 테이블 첨부파일 연계

frontend/components/screen/panels/DataTableConfigPanel.tsx

@@ -1061,6 +1061,71 @@ export const DataTableConfigPanel: React.FC<DataTableConfigPanelProps> = ({
     [selectedTable, component.columns, component.filters, onUpdateComponent],
   );
 
+  // 가상 파일 컬럼 추가
+  const addVirtualFileColumn = useCallback(() => {
+    const fileColumnCount = component.columns.filter((col) => col.isVirtualFileColumn).length;
+    const newColumnName = `file_column_${fileColumnCount + 1}`; // 순차적 번호 사용
+
+    const newColumn: DataTableColumn = {
+      id: generateComponentId(),
+      columnName: newColumnName,
+      label: `파일 컬럼 ${fileColumnCount + 1}`,
+      widgetType: "file",
+      gridColumns: 2,
+      visible: true,
+      filterable: false, // 파일 컬럼은 필터링 불가
+      sortable: false, // 파일 컬럼은 정렬 불가
+      searchable: false, // 파일 컬럼은 검색 불가
+      isVirtualFileColumn: true, // 가상 파일 컬럼 표시
+      fileColumnConfig: {
+        docType: "DOCUMENT",
+        docTypeName: "일반 문서",
+        maxFiles: 5,
+        accept: ["*/*"],
+      },
+    };
+
+    console.log("📁 가상 파일 컬럼 추가:", {
+      columnName: newColumn.columnName,
+      label: newColumn.label,
+      isVirtualFileColumn: newColumn.isVirtualFileColumn,
+    });
+
+    // 로컬 상태에 새 컬럼 입력값 추가
+    setLocalColumnInputs((prev) => ({
+      ...prev,
+      [newColumn.id]: newColumn.label,
+    }));
+
+    // 로컬 체크박스 상태에 새 컬럼 추가
+    setLocalColumnCheckboxes((prev) => ({
+      ...prev,
+      [newColumn.id]: {
+        visible: newColumn.visible,
+        sortable: newColumn.sortable,
+        searchable: newColumn.searchable,
+      },
+    }));
+
+    // 로컬 그리드 컬럼 상태에 새 컬럼 추가
+    setLocalColumnGridColumns((prev) => ({
+      ...prev,
+      [newColumn.id]: newColumn.gridColumns,
+    }));
+
+    // 컬럼 업데이트
+    const updates: Partial<DataTableComponent> = {
+      columns: [...component.columns, newColumn],
+    };
+
+    onUpdateComponent(updates);
+
+    // 컬럼 추가 후 컬럼 탭으로 자동 이동
+    setActiveTab("columns");
+
+    console.log("✅ 가상 파일 컬럼 추가 완료");
+  }, [component.columns, onUpdateComponent]);
+
   return (
     <div className="max-h-[80vh] p-4">
       <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
@@ -1459,6 +1524,14 @@ export const DataTableConfigPanel: React.FC<DataTableConfigPanelProps> = ({
                 <h3 className="text-sm font-medium">테이블 컬럼 설정</h3>
                 <div className="flex items-center space-x-2">
                   <Badge variant="secondary">{component.columns.length}개</Badge>
+
+                  {/* 파일 컬럼 추가 버튼 */}
+                  <Button size="sm" variant="outline" onClick={addVirtualFileColumn} className="h-8 text-xs">
+                    <Plus className="h-4 w-4" />
+                    <span className="ml-1">파일 컬럼</span>
+                  </Button>
+
+                  {/* 기존 DB 컬럼 추가 */}
                   {selectedTable &&
                     (() => {
                       const availableColumns = selectedTable.columns.filter(
@@ -1468,7 +1541,7 @@ export const DataTableConfigPanel: React.FC<DataTableConfigPanelProps> = ({
                       return availableColumns.length > 0 ? (
                         <Select onValueChange={(value) => addColumn(value)}>
                           <SelectTrigger className="h-8 w-32 text-xs">
-                            <SelectValue placeholder="컬럼 추가" />
+                            <SelectValue placeholder="DB 컬럼" />
                           </SelectTrigger>
                           <SelectContent>
                             {availableColumns.map((col) => (
@@ -1481,7 +1554,7 @@ export const DataTableConfigPanel: React.FC<DataTableConfigPanelProps> = ({
                       ) : (
                         <Button size="sm" disabled>
                           <Plus className="h-4 w-4" />
-                          <span className="ml-1 text-xs">모든 컬럼 추가됨</span>
+                          <span className="ml-1 text-xs">모든 DB 컬럼 추가됨</span>
                         </Button>
                       );
                     })()}