105 lines
3.3 KiB
TypeScript
105 lines
3.3 KiB
TypeScript
"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";
|
|
|
|
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;
|
|
|
|
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">
|
|
{/* 발송 계정 상태 */}
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<User className="h-3 w-3 text-gray-400" />
|
|
<span className="text-gray-600">
|
|
{hasAccount ? (
|
|
<span className="flex items-center gap-1 text-green-600">
|
|
<CheckCircle className="h-3 w-3" />
|
|
계정 선택됨
|
|
</span>
|
|
) : (
|
|
<span className="text-orange-500">발송 계정 선택 필요</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";
|
|
|