[agent-pipeline] pipe-20260309055714-23ry round-2

frontend/components/screen/InteractiveDataTable.tsx

@@ -261,11 +261,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       label: component.title || "데이터 테이블",
       tableName: component.tableName,
       columns: component.columns.map((col) => ({
-        columnName: col.field,
+        columnName: col.columnName,
         columnLabel: col.label,
-        inputType: col.inputType || "text",
+        inputType: col.widgetType || "text",
         visible: col.visible !== false,
-        width: col.width || 150,
+        width: (col as any).width || 150,
         sortable: col.sortable,
         filterable: col.filterable !== false,
       })),
@@ -583,6 +583,15 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  // 추가/수정 모달 상태
+  const [showAddModal, setShowAddModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [addFormData, setAddFormData] = useState<Record<string, any>>({});
+  const [editFormData, setEditFormData] = useState<Record<string, any>>({});
+  const [editingRowData, setEditingRowData] = useState<Record<string, any> | null>(null);
+  const [isAdding, setIsAdding] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+
   // 현재 사용자 정보
   const [currentUser, setCurrentUser] = useState<UserInfo | null>(null);
 
@@ -696,12 +705,12 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         const sampleData = Array.from({ length: 3 }, (_, i) => {
           const sample: Record<string, any> = { id: i + 1 };
           component.columns.forEach((col) => {
-            if (col.type === "number") {
-              sample[col.key] = Math.floor(Math.random() * 1000);
-            } else if (col.type === "boolean") {
-              sample[col.key] = i % 2 === 0 ? "Y" : "N";
+            if (col.widgetType === "number") {
+              sample[col.columnName] = Math.floor(Math.random() * 1000);
+            } else if (col.widgetType === "boolean") {
+              sample[col.columnName] = i % 2 === 0 ? "Y" : "N";
             } else {
-              sample[col.key] = `샘플 ${col.label} ${i + 1}`;
+              sample[col.columnName] = `샘플 ${col.label} ${i + 1}`;
             }
           });
           return sample;
@@ -1240,6 +1249,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     }));
   }, []);
 
+  const handleAddFormChange = useCallback((columnName: string, value: any) => {
+    setAddFormData((prev) => ({
+      ...prev,
+      [columnName]: value,
+    }));
+  }, []);
+
   // 파일 업로드 핸들러
   const handleFileUpload = useCallback(
     async (columnName: string, files: FileList | null, isEdit: boolean = false) => {

frontend/components/screen/toolbar/SlimToolbar.tsx

@@ -35,7 +35,8 @@ import {
   Keyboard,
   Equal,
 } from "lucide-react";
-import { ScreenResolution, SCREEN_RESOLUTIONS } from "@/types/screen";
+import { ScreenResolution } from "@/types/screen";
+import { SCREEN_RESOLUTIONS } from "@/types/screen-management";
 import {
   DropdownMenu,
   DropdownMenuContent,

frontend/components/screen/widgets/FileUpload.tsx

@@ -1,14 +1,65 @@
 import React, { useState, useCallback, useRef, useEffect } from "react";
 import { Upload, X, File, Image, Eye, Download, AlertCircle, CheckCircle, Loader2 } from "lucide-react";
-import { FileComponent, AttachedFileInfo } from "@/types/screen";
+import { FileComponent } from "@/types/screen-management";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
 
+// 첨부파일 정보 (attach_file_info 테이블 기반, UI 확장 속성 포함)
+export interface AttachedFileInfo {
+  objid: string;
+  savedFileName: string;
+  realFileName: string;
+  fileSize: number;
+  fileExt: string;
+  filePath: string;
+  docType: string;
+  docTypeName: string;
+  targetObjid: string;
+  parentTargetObjid?: string;
+  companyCode: string;
+  writer: string;
+  regdate: string;
+  status: string;
+  uploadProgress?: number;
+  isUploading?: boolean;
+  hasError?: boolean;
+  errorMessage?: string;
+}
+
+// FileTypeConfig 확장 (FileComponent에서 사용하는 추가 속성 포함)
+interface ExtendedFileTypeConfig {
+  accept?: string[];
+  multiple?: boolean;
+  maxSize?: number;
+  maxFiles?: number;
+  showPreview?: boolean;
+  showProgress?: boolean;
+  docType?: string;
+  docTypeName?: string;
+  dragDropText?: string;
+  uploadButtonText?: string;
+  autoUpload?: boolean;
+  chunkedUpload?: boolean;
+  linkedTable?: string;
+  linkedField?: string;
+  autoLink?: boolean;
+  companyCode?: string;
+  recordId?: string;
+  isVirtualFileColumn?: boolean;
+  columnName?: string;
+}
+
+// FileComponent를 AttachedFileInfo 기반으로 확장한 컴포넌트 타입
+interface FileComponentWithAttached extends Omit<FileComponent, "uploadedFiles" | "fileConfig"> {
+  uploadedFiles?: AttachedFileInfo[];
+  fileConfig: ExtendedFileTypeConfig;
+}
+
 interface FileUploadProps {
-  component: FileComponent;
-  onUpdateComponent?: (updates: Partial<FileComponent>) => void;
+  component: FileComponentWithAttached;
+  onUpdateComponent?: (updates: Partial<FileComponentWithAttached>) => void;
   onFileUpload?: (files: AttachedFileInfo[]) => void; // 파일 업로드 완료 콜백
   userInfo?: any; // 사용자 정보 (선택적)
 }