117 lines
4.2 KiB
TypeScript
117 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 조건 분기 노드
|
|
*/
|
|
|
|
import { memo } from "react";
|
|
import { Handle, Position, NodeProps } from "reactflow";
|
|
import { Zap, Check, X } from "lucide-react";
|
|
import type { ConditionNodeData } from "@/types/node-editor";
|
|
|
|
const OPERATOR_LABELS: Record<string, string> = {
|
|
EQUALS: "=",
|
|
NOT_EQUALS: "≠",
|
|
GREATER_THAN: ">",
|
|
LESS_THAN: "<",
|
|
GREATER_THAN_OR_EQUAL: "≥",
|
|
LESS_THAN_OR_EQUAL: "≤",
|
|
LIKE: "포함",
|
|
NOT_LIKE: "미포함",
|
|
IN: "IN",
|
|
NOT_IN: "NOT IN",
|
|
IS_NULL: "NULL",
|
|
IS_NOT_NULL: "NOT NULL",
|
|
};
|
|
|
|
export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeData>) => {
|
|
return (
|
|
<div
|
|
className={`min-w-[280px] rounded-lg border-2 bg-white shadow-md transition-all ${
|
|
selected ? "border-yellow-500 shadow-lg" : "border-gray-200"
|
|
}`}
|
|
>
|
|
{/* 입력 핸들 */}
|
|
<Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-yellow-500 !bg-white" />
|
|
|
|
{/* 헤더 */}
|
|
<div className="flex items-center gap-2 rounded-t-lg bg-yellow-500 px-3 py-2 text-white">
|
|
<Zap className="h-4 w-4" />
|
|
<div className="flex-1">
|
|
<div className="text-sm font-semibold">조건 검사</div>
|
|
<div className="text-xs opacity-80">{data.displayName || "조건 분기"}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 본문 */}
|
|
<div className="p-3">
|
|
{data.conditions && data.conditions.length > 0 ? (
|
|
<div className="space-y-2">
|
|
<div className="text-xs font-medium text-gray-700">조건식: ({data.conditions.length}개)</div>
|
|
<div className="max-h-[150px] space-y-1.5 overflow-y-auto">
|
|
{data.conditions.slice(0, 4).map((condition, idx) => (
|
|
<div key={idx} className="rounded bg-yellow-50 px-2 py-1.5 text-xs">
|
|
{idx > 0 && (
|
|
<div className="mb-1 text-center text-xs font-semibold text-yellow-600">{data.logic}</div>
|
|
)}
|
|
<div className="flex items-center gap-1">
|
|
<span className="font-mono text-gray-700">{condition.field}</span>
|
|
<span className="rounded bg-yellow-200 px-1 py-0.5 text-yellow-800">
|
|
{OPERATOR_LABELS[condition.operator] || condition.operator}
|
|
</span>
|
|
{condition.value !== null && condition.value !== undefined && (
|
|
<span className="text-gray-600">
|
|
{typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{data.conditions.length > 4 && (
|
|
<div className="text-xs text-gray-400">... 외 {data.conditions.length - 4}개</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-center text-xs text-gray-400">조건 없음</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 분기 출력 핸들 */}
|
|
<div className="border-t">
|
|
<div className="grid grid-cols-2">
|
|
{/* TRUE 출력 */}
|
|
<div className="relative border-r p-2">
|
|
<div className="flex items-center justify-center gap-1 text-xs">
|
|
<Check className="h-3 w-3 text-green-600" />
|
|
<span className="font-medium text-green-600">TRUE</span>
|
|
</div>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
id="true"
|
|
className="!-right-1.5 !h-3 !w-3 !border-2 !border-green-500 !bg-white"
|
|
/>
|
|
</div>
|
|
|
|
{/* FALSE 출력 */}
|
|
<div className="relative p-2">
|
|
<div className="flex items-center justify-center gap-1 text-xs">
|
|
<X className="h-3 w-3 text-red-600" />
|
|
<span className="font-medium text-red-600">FALSE</span>
|
|
</div>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
id="false"
|
|
className="!-right-1.5 !h-3 !w-3 !border-2 !border-red-500 !bg-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
ConditionNode.displayName = "ConditionNode";
|