외부호출 노드들

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

@@ -0,0 +1,103 @@
+"use client";
+
+/**
+ * 메일 발송 액션 노드
+ * SMTP를 통해 이메일을 발송하는 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Mail, Server } from "lucide-react";
+import type { EmailActionNodeData } from "@/types/node-editor";
+
+export const EmailActionNode = memo(({ data, selected }: NodeProps<EmailActionNodeData>) => {
+  const hasSmtpConfig = data.smtpConfig?.host && data.smtpConfig?.port;
+  const hasRecipient = data.to && data.to.trim().length > 0;
+  const hasSubject = data.subject && data.subject.trim().length > 0;
+
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-pink-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 입력 핸들 */}
+      <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>
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="space-y-2 p-3">
+        {/* SMTP 설정 상태 */}
+        <div className="flex items-center gap-2 text-xs">
+          <Server className="h-3 w-3 text-gray-400" />
+          <span className="text-gray-600">
+            {hasSmtpConfig ? (
+              <span className="text-green-600">
+                {data.smtpConfig.host}:{data.smtpConfig.port}
+              </span>
+            ) : (
+              <span className="text-orange-500">SMTP 설정 필요</span>
+            )}
+          </span>
+        </div>
+
+        {/* 수신자 */}
+        <div className="text-xs">
+          <span className="text-gray-500">수신자: </span>
+          {hasRecipient ? (
+            <span className="text-gray-700">{data.to}</span>
+          ) : (
+            <span className="text-orange-500">미설정</span>
+          )}
+        </div>
+
+        {/* 제목 */}
+        <div className="text-xs">
+          <span className="text-gray-500">제목: </span>
+          {hasSubject ? (
+            <span className="truncate text-gray-700">{data.subject}</span>
+          ) : (
+            <span className="text-orange-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-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"
+            }`}
+          >
+            {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>
+  );
+});
+
+EmailActionNode.displayName = "EmailActionNode";
+