ConnectionSetupModal 리팩터링

frontend/components/dataflow/condition/ConditionalSettings.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Plus, Zap } from "lucide-react";
+import { ConditionNode, ColumnInfo } from "@/lib/api/dataflow";
+import { ConditionRenderer } from "./ConditionRenderer";
+
+interface ConditionalSettingsProps {
+  conditions: ConditionNode[];
+  fromTableColumns: ColumnInfo[];
+  onAddCondition: () => void;
+  onAddGroupStart: () => void;
+  onAddGroupEnd: () => void;
+  onUpdateCondition: (index: number, field: keyof ConditionNode, value: string) => void;
+  onRemoveCondition: (index: number) => void;
+  getCurrentGroupLevel: (index: number) => number;
+}
+
+export const ConditionalSettings: React.FC<ConditionalSettingsProps> = ({
+  conditions,
+  fromTableColumns,
+  onAddCondition,
+  onAddGroupStart,
+  onAddGroupEnd,
+  onUpdateCondition,
+  onRemoveCondition,
+  getCurrentGroupLevel,
+}) => {
+  return (
+    <div className="rounded-lg border border-l-4 border-l-purple-500 bg-purple-50/30 p-4">
+      <div className="mb-4 flex items-center gap-2">
+        <Zap className="h-4 w-4 text-purple-500" />
+        <span className="text-sm font-medium">전체 실행 조건 (언제 이 연결이 동작할지)</span>
+      </div>
+
+      {/* 실행 조건 설정 */}
+      <div className="mb-4">
+        <div className="mb-2 flex items-center justify-between">
+          <Label className="text-sm font-medium">실행 조건</Label>
+          <div className="flex gap-1">
+            <Button size="sm" variant="outline" onClick={onAddCondition} className="h-7 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              조건 추가
+            </Button>
+            <Button size="sm" variant="outline" onClick={onAddGroupStart} className="h-7 text-xs">
+              그룹 시작 (
+            </Button>
+            <Button size="sm" variant="outline" onClick={onAddGroupEnd} className="h-7 text-xs">
+              그룹 끝 )
+            </Button>
+          </div>
+        </div>
+
+        {/* 조건 목록 */}
+        <ConditionRenderer
+          conditions={conditions}
+          fromTableColumns={fromTableColumns}
+          onUpdateCondition={onUpdateCondition}
+          onRemoveCondition={onRemoveCondition}
+          getCurrentGroupLevel={getCurrentGroupLevel}
+        />
+      </div>
+    </div>
+  );
+};