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.

frontend/components/dataflow/node-editor/nodes/ProcedureCallActionNode.tsx

@@ -1,121 +1,24 @@
 "use client";
 
-/**
- * 프로시저/함수 호출 액션 노드
- * 내부 또는 외부 DB의 프로시저/함수를 호출하는 노드
- */
-
 import { memo } from "react";
-import { Handle, Position, NodeProps } from "reactflow";
-import { Database, Workflow } from "lucide-react";
-import type { ProcedureCallActionNodeData } from "@/types/node-editor";
+import { NodeProps } from "reactflow";
+import { Database } from "lucide-react";
+import { CompactNodeShell } from "./CompactNodeShell";
 
-export const ProcedureCallActionNode = memo(
-  ({ data, selected }: NodeProps<ProcedureCallActionNodeData>) => {
-    const hasProcedure = !!data.procedureName;
-    const inParams = data.parameters?.filter((p) => p.mode === "IN" || p.mode === "INOUT") ?? [];
-    const outParams = data.parameters?.filter((p) => p.mode === "OUT" || p.mode === "INOUT") ?? [];
+export const ProcedureCallActionNode = memo(({ data, selected }: NodeProps<any>) => {
+  const summary = data.procedureName
+    ? `${data.procedureName}()`
+    : "프로시저를 선택해 주세요";
 
-    return (
-      <div
-        className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-          selected ? "border-violet-500 shadow-lg" : "border-border"
-        }`}
-      >
-        {/* 입력 핸들 */}
-        <Handle
-          type="target"
-          position={Position.Left}
-          className="!h-3 !w-3 !border-2 !border-white !bg-violet-500"
-        />
-
-        {/* 헤더 */}
-        <div className="flex items-center gap-2 rounded-t-lg bg-violet-500 px-3 py-2 text-white">
-          <Workflow className="h-4 w-4" />
-          <div className="flex-1">
-            <div className="text-sm font-semibold">
-              {data.displayName || "프로시저 호출"}
-            </div>
-          </div>
-        </div>
-
-        {/* 본문 */}
-        <div className="space-y-2 p-3">
-          {/* DB 소스 */}
-          <div className="flex items-center gap-2">
-            <Database className="h-3 w-3 text-muted-foreground/70" />
-            <span className="text-xs text-muted-foreground">
-              {data.dbSource === "external" ? (
-                <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-700">
-                  {data.connectionName || "외부 DB"}
-                </span>
-              ) : (
-                <span className="rounded bg-primary/10 px-2 py-0.5 text-primary">
-                  내부 DB
-                </span>
-              )}
-            </span>
-            <span
-              className={`ml-auto rounded px-2 py-0.5 text-xs font-medium ${
-                data.callType === "function"
-                  ? "bg-cyan-100 text-cyan-700"
-                  : "bg-violet-100 text-violet-700"
-              }`}
-            >
-              {data.callType === "function" ? "FUNCTION" : "PROCEDURE"}
-            </span>
-          </div>
-
-          {/* 프로시저명 */}
-          <div className="flex items-center gap-2 text-xs">
-            <Workflow className="h-3 w-3 text-muted-foreground/70" />
-            {hasProcedure ? (
-              <span className="font-mono text-emerald-600 truncate">
-                {data.procedureSchema && data.procedureSchema !== "public"
-                  ? `${data.procedureSchema}.`
-                  : ""}
-                {data.procedureName}()
-              </span>
-            ) : (
-              <span className="text-amber-500">프로시저 선택 필요</span>
-            )}
-          </div>
-
-          {/* 파라미터 수 */}
-          {hasProcedure && inParams.length > 0 && (
-            <div className="text-xs text-muted-foreground">
-              입력 파라미터: {inParams.length}개
-            </div>
-          )}
-
-          {/* 반환 필드 */}
-          {hasProcedure && outParams.length > 0 && (
-            <div className="mt-1 space-y-1 border-t border-border pt-1">
-              <div className="text-[10px] font-medium text-emerald-600">
-                반환 필드:
-              </div>
-              {outParams.map((p) => (
-                <div
-                  key={p.name}
-                  className="flex items-center justify-between rounded bg-emerald-50 px-2 py-0.5 text-[10px]"
-                >
-                  <span className="font-mono text-emerald-700">{p.name}</span>
-                  <span className="text-muted-foreground/70">{p.dataType}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* 출력 핸들 */}
-        <Handle
-          type="source"
-          position={Position.Right}
-          className="!h-3 !w-3 !border-2 !border-white !bg-violet-500"
-        />
-      </div>
-    );
-  }
-);
+  return (
+    <CompactNodeShell
+      color="#8B5CF6"
+      label={data.displayName || "프로시저 호출"}
+      summary={summary}
+      icon={<Database className="h-3.5 w-3.5" />}
+      selected={selected}
+    />
+  );
+});
 
 ProcedureCallActionNode.displayName = "ProcedureCallActionNode";