데이터 흐름 설정 개선: INSERT 액션에 대한 필드 매핑 검증 로직 추가 및 새로운 InsertFieldMappingPanel 컴포넌트 구현.

frontend/components/dataflow/connection/ActionFieldMappings.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Plus, Trash2 } from "lucide-react";
 import { TableInfo, ColumnInfo } from "@/lib/api/dataflow";
 import { DataSaveSettings } from "@/types/connectionTypes";
+import { InsertFieldMappingPanel } from "./InsertFieldMappingPanel";
 
 interface ActionFieldMappingsProps {
   action: DataSaveSettings["actions"][0];
@@ -16,6 +17,10 @@ interface ActionFieldMappingsProps {
   onSettingsChange: (settings: DataSaveSettings) => void;
   availableTables: TableInfo[];
   tableColumnsCache: { [tableName: string]: ColumnInfo[] };
+  fromTableColumns?: ColumnInfo[];
+  toTableColumns?: ColumnInfo[];
+  fromTableName?: string;
+  toTableName?: string;
 }
 
 export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
@@ -25,7 +30,26 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
   onSettingsChange,
   availableTables,
   tableColumnsCache,
+  fromTableColumns = [],
+  toTableColumns = [],
+  fromTableName,
+  toTableName,
 }) => {
+  // INSERT 액션일 때는 새로운 패널 사용
+  if (action.actionType === "insert" && fromTableColumns.length > 0 && toTableColumns.length > 0) {
+    return (
+      <InsertFieldMappingPanel
+        action={action}
+        actionIndex={actionIndex}
+        settings={settings}
+        onSettingsChange={onSettingsChange}
+        fromTableColumns={fromTableColumns}
+        toTableColumns={toTableColumns}
+        fromTableName={fromTableName}
+        toTableName={toTableName}
+      />
+    );
+  }
   const addFieldMapping = () => {
     const newActions = [...settings.actions];
     newActions[actionIndex].fieldMappings.push({