Enhance batch management functionality by adding node flow execution support and improving batch configuration creation. Introduce new API endpoint for retrieving node flows and update existing batch services to handle execution types. Update frontend components to support new scheduling options and node flow selection.

2026-03-19 15:07:07 +09:00
parent 7f781b0177
commit 43cf91e748
41 changed files with 4020 additions and 3155 deletions
--- a/frontend/components/dataflow/node-editor/nodes/CompactNodeShell.tsx
+++ b/frontend/components/dataflow/node-editor/nodes/CompactNodeShell.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+/**
+ * 콤팩트 노드 공통 쉘
+ * 다크 캔버스에서 사용하는 공통 노드 래퍼
+ */
+
+import { memo, ReactNode } from "react";
+import { Handle, Position } from "reactflow";
+
+interface CompactNodeShellProps {
+  color: string;
+  label: string;
+  summary?: string;
+  icon: ReactNode;
+  selected?: boolean;
+  children?: ReactNode;
+  hasInput?: boolean;
+  hasOutput?: boolean;
+  inputHandleId?: string;
+  outputHandleId?: string;
+  /** 커스텀 출력 핸들(ConditionNode 등)을 사용할 경우 true */
+  customOutputHandles?: boolean;
+  /** 커스텀 입력 핸들을 사용할 경우 true */
+  customInputHandles?: boolean;
+  minWidth?: string;
+}
+
+export const CompactNodeShell = memo(
+  ({
+    color,
+    label,
+    summary,
+    icon,
+    selected = false,
+    children,
+    hasInput = true,
+    hasOutput = true,
+    inputHandleId,
+    outputHandleId,
+    customOutputHandles = false,
+    customInputHandles = false,
+    minWidth = "260px",
+  }: CompactNodeShellProps) => {
+    return (
+      <div
+        className={`rounded-lg border bg-zinc-900 shadow-lg transition-all ${
+          selected
+            ? "border-violet-500 shadow-violet-500/20"
+            : "border-zinc-700 hover:border-zinc-600"
+        }`}
+        style={{ minWidth, maxWidth: "320px" }}
+      >
+        {/* 기본 입력 핸들 */}
+        {hasInput && !customInputHandles && (
+          <Handle
+            type="target"
+            position={Position.Left}
+            id={inputHandleId}
+            className="!h-2.5 !w-2.5 !border-2 !bg-zinc-900"
+            style={{ borderColor: color }}
+          />
+        )}
+
+        {/* 컬러바 + 헤더 */}
+        <div className="flex items-center gap-2.5 px-3 py-2.5">
+          <div
+            className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md"
+            style={{ backgroundColor: `${color}20` }}
+          >
+            <div className="text-zinc-200" style={{ color }}>{icon}</div>
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="text-xs font-semibold text-zinc-200">{label}</div>
+            {summary && (
+              <div className="line-clamp-2 text-[10px] leading-relaxed text-zinc-500">{summary}</div>
+            )}
+          </div>
+        </div>
+
+        {/* 바디 (옵셔널) */}
+        {children && (
+          <div className="border-t border-zinc-800 px-3 py-2 text-[10px] text-zinc-400">
+            {children}
+          </div>
+        )}
+
+        {/* 기본 출력 핸들 */}
+        {hasOutput && !customOutputHandles && (
+          <Handle
+            type="source"
+            position={Position.Right}
+            id={outputHandleId}
+            className="!h-2.5 !w-2.5 !border-2 !bg-zinc-900"
+            style={{ borderColor: color }}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+CompactNodeShell.displayName = "CompactNodeShell";