ConnectionSetupModal 리팩터링

frontend/components/dataflow/connection/DataSaveSettings.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Plus, Save, Trash2 } from "lucide-react";
+import { TableInfo, ColumnInfo } from "@/lib/api/dataflow";
+import { DataSaveSettings as DataSaveSettingsType } from "@/types/connectionTypes";
+import { ActionConditionsSection } from "./ActionConditionsSection";
+import { ActionFieldMappings } from "./ActionFieldMappings";
+import { ActionSplitConfig } from "./ActionSplitConfig";
+
+interface DataSaveSettingsProps {
+  settings: DataSaveSettingsType;
+  onSettingsChange: (settings: DataSaveSettingsType) => void;
+  availableTables: TableInfo[];
+  fromTableColumns: ColumnInfo[];
+  toTableColumns: ColumnInfo[];
+  tableColumnsCache: { [tableName: string]: ColumnInfo[] };
+}
+
+export const DataSaveSettings: React.FC<DataSaveSettingsProps> = ({
+  settings,
+  onSettingsChange,
+  availableTables,
+  fromTableColumns,
+  toTableColumns,
+  tableColumnsCache,
+}) => {
+  const addAction = () => {
+    const newAction = {
+      id: `action_${settings.actions.length + 1}`,
+      name: `액션 ${settings.actions.length + 1}`,
+      actionType: "insert" as const,
+      fieldMappings: [],
+      conditions: [],
+      splitConfig: {
+        sourceField: "",
+        delimiter: "",
+        targetField: "",
+      },
+    };
+    onSettingsChange({
+      ...settings,
+      actions: [...settings.actions, newAction],
+    });
+  };
+
+  const updateAction = (actionIndex: number, field: string, value: any) => {
+    const newActions = [...settings.actions];
+    (newActions[actionIndex] as any)[field] = value;
+    onSettingsChange({ ...settings, actions: newActions });
+  };
+
+  const removeAction = (actionIndex: number) => {
+    const newActions = settings.actions.filter((_, i) => i !== actionIndex);
+    onSettingsChange({ ...settings, actions: newActions });
+  };
+
+  return (
+    <div className="rounded-lg border border-l-4 border-l-green-500 bg-green-50/30 p-4">
+      <div className="mb-3 flex items-center gap-2">
+        <Save className="h-4 w-4 text-green-500" />
+        <span className="text-sm font-medium">데이터 저장 설정</span>
+      </div>
+      <div className="space-y-4">
+        {/* 액션 목록 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <Label className="text-sm font-medium">저장 액션</Label>
+            <Button size="sm" variant="outline" onClick={addAction} className="h-7 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              액션 추가
+            </Button>
+          </div>
+
+          {settings.actions.length === 0 ? (
+            <div className="rounded-lg border border-dashed p-3 text-center text-xs text-gray-500">
+              저장 액션을 추가하여 데이터를 어떻게 저장할지 설정하세요.
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {settings.actions.map((action, actionIndex) => (
+                <div key={action.id} className="rounded border bg-white p-3">
+                  <div className="mb-3 flex items-center justify-between">
+                    <Input
+                      value={action.name}
+                      onChange={(e) => updateAction(actionIndex, "name", e.target.value)}
+                      className="h-7 flex-1 text-xs font-medium"
+                      placeholder="액션 이름"
+                    />
+                    <Button size="sm" variant="ghost" onClick={() => removeAction(actionIndex)} className="h-7 w-7 p-0">
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="grid grid-cols-1 gap-3">
+                    {/* 액션 타입 */}
+                    <div>
+                      <Label className="text-xs">액션 타입</Label>
+                      <Select
+                        value={action.actionType}
+                        onValueChange={(value: "insert" | "update" | "delete" | "upsert") =>
+                          updateAction(actionIndex, "actionType", value)
+                        }
+                      >
+                        <SelectTrigger className="h-7 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="insert">INSERT</SelectItem>
+                          <SelectItem value="update">UPDATE</SelectItem>
+                          <SelectItem value="delete">DELETE</SelectItem>
+                          <SelectItem value="upsert">UPSERT</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+
+                  {/* 액션별 개별 실행 조건 */}
+                  <ActionConditionsSection
+                    action={action}
+                    actionIndex={actionIndex}
+                    settings={settings}
+                    onSettingsChange={onSettingsChange}
+                    fromTableColumns={fromTableColumns}
+                  />
+
+                  {/* 데이터 분할 설정 */}
+                  <ActionSplitConfig
+                    action={action}
+                    actionIndex={actionIndex}
+                    settings={settings}
+                    onSettingsChange={onSettingsChange}
+                    fromTableColumns={fromTableColumns}
+                    toTableColumns={toTableColumns}
+                  />
+
+                  {/* 필드 매핑 */}
+                  <ActionFieldMappings
+                    action={action}
+                    actionIndex={actionIndex}
+                    settings={settings}
+                    onSettingsChange={onSettingsChange}
+                    availableTables={availableTables}
+                    tableColumnsCache={tableColumnsCache}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};