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/SlideOverSheet.tsx
+++ b/frontend/components/dataflow/node-editor/SlideOverSheet.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { X, Info } from "lucide-react";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { PropertiesPanel } from "./panels/PropertiesPanel";
+import { getNodePaletteItem } from "./sidebar/nodePaletteConfig";
+
+const TOSS_NODE_HINTS: Record<string, string> = {
+  tableSource: "어떤 테이블에서 데이터를 가져올지 선택해 주세요",
+  externalDBSource: "외부 데이터베이스 연결 정보를 입력해 주세요",
+  restAPISource: "호출할 API의 URL과 방식을 설정해 주세요",
+  condition: "어떤 조건으로 데이터를 분기할지 설정해 주세요",
+  dataTransform: "데이터를 어떻게 변환할지 규칙을 정해 주세요",
+  aggregate: "어떤 기준으로 집계할지 설정해 주세요",
+  formulaTransform: "계산에 사용할 수식을 입력해 주세요",
+  insertAction: "데이터를 저장할 테이블과 필드를 매핑해 주세요",
+  updateAction: "수정할 조건과 필드를 설정해 주세요",
+  deleteAction: "삭제 조건을 설정해 주세요",
+  upsertAction: "저장/수정 조건과 필드를 설정해 주세요",
+  emailAction: "메일 서버와 발송 정보를 설정해 주세요",
+  scriptAction: "실행할 스크립트 내용을 입력해 주세요",
+  httpRequestAction: "요청 URL과 방식을 설정해 주세요",
+  procedureCallAction: "호출할 프로시저 정보를 입력해 주세요",
+  comment: "메모 내용을 자유롭게 작성해 주세요",
+};
+
+interface SlideOverSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function SlideOverSheet({ isOpen, onClose }: SlideOverSheetProps) {
+  const { nodes, selectedNodes } = useFlowEditorStore();
+
+  const selectedNode =
+    selectedNodes.length === 1
+      ? nodes.find((n) => n.id === selectedNodes[0])
+      : null;
+
+  const nodeInfo = selectedNode
+    ? getNodePaletteItem(selectedNode.type as string)
+    : null;
+
+  const hint = selectedNode
+    ? TOSS_NODE_HINTS[(selectedNode.type as string)] || "이 노드의 속성을 설정해 주세요"
+    : "";
+
+  return (
+    <div
+      className={`absolute right-0 top-0 z-40 flex h-full w-[380px] flex-col border-l border-zinc-700 bg-zinc-900 shadow-2xl shadow-black/40 transition-transform duration-300 ease-out ${
+        isOpen ? "translate-x-0" : "translate-x-full"
+      }`}
+    >
+      {/* 헤더 */}
+      <div className="flex flex-shrink-0 items-center justify-between border-b border-zinc-800 px-4 py-3">
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            {nodeInfo && (
+              <span
+                className="inline-block h-2.5 w-2.5 rounded-full"
+                style={{ backgroundColor: nodeInfo.color }}
+              />
+            )}
+            <h3 className="truncate text-sm font-semibold text-zinc-200">
+              {nodeInfo?.label || "속성"}
+            </h3>
+          </div>
+          {selectedNode && (
+            <p className="mt-0.5 truncate text-[11px] text-zinc-500">
+              {(selectedNode.data as any)?.displayName || "이름 없음"}
+            </p>
+          )}
+        </div>
+        <button
+          onClick={onClose}
+          className="ml-2 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-300"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+
+      {/* 힌트 배너 */}
+      {hint && (
+        <div className="flex items-start gap-2 border-b border-zinc-800 bg-violet-500/[0.06] px-4 py-2.5">
+          <Info className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-violet-400" />
+          <p className="text-[11px] leading-relaxed text-violet-300/80">{hint}</p>
+        </div>
+      )}
+
+      {/* 속성 패널 내용 (라이트 배경으로 폼 가독성 유지) */}
+      <div className="min-h-0 flex-1 overflow-y-auto bg-white dark:bg-zinc-800">
+        <PropertiesPanel />
+      </div>
+    </div>
+  );
+}