[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) => {