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/EmailActionNode.tsx

@@ -1,104 +1,30 @@
 "use client";
 
-/**
- * 메일 발송 액션 노드
- * 등록된 메일 계정을 선택하여 이메일을 발송하는 노드
- */
-
 import { memo } from "react";
-import { Handle, Position, NodeProps } from "reactflow";
-import { Mail, User, CheckCircle } from "lucide-react";
-import type { EmailActionNodeData } from "@/types/node-editor";
+import { NodeProps } from "reactflow";
+import { Mail } from "lucide-react";
+import { CompactNodeShell } from "./CompactNodeShell";
 
-export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNodeData>) => {
-  const hasAccount = !!data.accountId;
-  const hasRecipient = data.to && data.to.trim().length > 0;
-  const hasSubject = data.subject && data.subject.trim().length > 0;
+export const EmailActionNode = memo(({ data, selected }: NodeProps<any>) => {
+  const summary = data.to
+    ? `To: ${data.to}`
+    : "수신자를 설정해 주세요";
 
   return (
-    <div
-      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
-        selected ? "border-pink-500 shadow-lg" : "border-border"
-      }`}
+    <CompactNodeShell
+      color="#EC4899"
+      label={data.displayName || "메일 발송"}
+      summary={summary}
+      icon={<Mail className="h-3.5 w-3.5" />}
+      selected={selected}
     >
-      {/* 입력 핸들 */}
-      <Handle
-        type="target"
-        position={Position.Left}
-        className="!h-3 !w-3 !border-2 !border-white !bg-pink-500"
-      />
-
-      {/* 헤더 */}
-      <div className="flex items-center gap-2 rounded-t-lg bg-pink-500 px-3 py-2 text-white">
-        <Mail className="h-4 w-4" />
-        <div className="flex-1">
-          <div className="text-sm font-semibold">{data.displayName || "메일 발송"}</div>
+      {data.subject && (
+        <div className="line-clamp-2">
+          제목: {data.subject}
         </div>
-      </div>
-
-      {/* 본문 */}
-      <div className="space-y-2 p-3">
-        {/* 발송 계정 상태 */}
-        <div className="flex items-center gap-2 text-xs">
-          <User className="h-3 w-3 text-muted-foreground/70" />
-          <span className="text-muted-foreground">
-            {hasAccount ? (
-              <span className="flex items-center gap-1 text-emerald-600">
-                <CheckCircle className="h-3 w-3" />
-                계정 선택됨
-              </span>
-            ) : (
-              <span className="text-amber-500">발송 계정 선택 필요</span>
-            )}
-          </span>
-        </div>
-
-        {/* 수신자 */}
-        <div className="text-xs">
-          <span className="text-muted-foreground">수신자: </span>
-          {hasRecipient ? (
-            <span className="text-foreground">{data.to}</span>
-          ) : (
-            <span className="text-amber-500">미설정</span>
-          )}
-        </div>
-
-        {/* 제목 */}
-        <div className="text-xs">
-          <span className="text-muted-foreground">제목: </span>
-          {hasSubject ? (
-            <span className="truncate text-foreground">{data.subject}</span>
-          ) : (
-            <span className="text-amber-500">미설정</span>
-          )}
-        </div>
-
-        {/* 본문 형식 */}
-        <div className="flex items-center gap-2">
-          <span
-            className={`rounded px-1.5 py-0.5 text-xs ${
-              data.bodyType === "html" ? "bg-primary/10 text-primary" : "bg-muted text-foreground"
-            }`}
-          >
-            {data.bodyType === "html" ? "HTML" : "TEXT"}
-          </span>
-          {data.attachments && data.attachments.length > 0 && (
-            <span className="rounded bg-purple-100 px-1.5 py-0.5 text-xs text-purple-700">
-              첨부 {data.attachments.length}개
-            </span>
-          )}
-        </div>
-      </div>
-
-      {/* 출력 핸들 */}
-      <Handle
-        type="source"
-        position={Position.Right}
-        className="!h-3 !w-3 !border-2 !border-white !bg-pink-500"
-      />
-    </div>
+      )}
+    </CompactNodeShell>
   );
 });
 
 EmailActionNode.displayName = "EmailActionNode";
-