119 lines
4.2 KiB
TypeScript
119 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* 스크립트 실행 액션 노드
|
|
* Python, Shell, PowerShell 등 외부 스크립트를 실행하는 노드
|
|
*/
|
|
|
|
import { memo } from "react";
|
|
import { Handle, Position, NodeProps } from "reactflow";
|
|
import { Terminal, FileCode, Play } from "lucide-react";
|
|
import type { ScriptActionNodeData } from "@/types/node-editor";
|
|
|
|
// 스크립트 타입별 아이콘 색상
|
|
const SCRIPT_TYPE_COLORS: Record<string, { bg: string; text: string; label: string }> = {
|
|
python: { bg: "bg-yellow-100", text: "text-yellow-700", label: "Python" },
|
|
shell: { bg: "bg-green-100", text: "text-green-700", label: "Shell" },
|
|
powershell: { bg: "bg-blue-100", text: "text-blue-700", label: "PowerShell" },
|
|
node: { bg: "bg-emerald-100", text: "text-emerald-700", label: "Node.js" },
|
|
executable: { bg: "bg-gray-100", text: "text-gray-700", label: "실행파일" },
|
|
};
|
|
|
|
export const ScriptActionNode = memo(({ data, selected }: NodeProps<ScriptActionNodeData>) => {
|
|
const scriptTypeInfo = SCRIPT_TYPE_COLORS[data.scriptType] || SCRIPT_TYPE_COLORS.executable;
|
|
const hasScript = data.executionMode === "inline" ? !!data.inlineScript : !!data.scriptPath;
|
|
|
|
return (
|
|
<div
|
|
className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
|
|
selected ? "border-emerald-500 shadow-lg" : "border-gray-200"
|
|
}`}
|
|
>
|
|
{/* 입력 핸들 */}
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
className="!h-3 !w-3 !border-2 !border-white !bg-emerald-500"
|
|
/>
|
|
|
|
{/* 헤더 */}
|
|
<div className="flex items-center gap-2 rounded-t-lg bg-emerald-500 px-3 py-2 text-white">
|
|
<Terminal 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">
|
|
<span className={`rounded px-2 py-0.5 text-xs font-medium ${scriptTypeInfo.bg} ${scriptTypeInfo.text}`}>
|
|
{scriptTypeInfo.label}
|
|
</span>
|
|
<span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
|
|
{data.executionMode === "inline" ? "인라인" : "파일"}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 스크립트 정보 */}
|
|
<div className="flex items-center gap-2 text-xs">
|
|
{data.executionMode === "inline" ? (
|
|
<>
|
|
<FileCode className="h-3 w-3 text-gray-400" />
|
|
<span className="text-gray-600">
|
|
{hasScript ? (
|
|
<span className="text-green-600">
|
|
{data.inlineScript!.split("\n").length}줄 스크립트
|
|
</span>
|
|
) : (
|
|
<span className="text-orange-500">스크립트 입력 필요</span>
|
|
)}
|
|
</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<Play className="h-3 w-3 text-gray-400" />
|
|
<span className="text-gray-600">
|
|
{hasScript ? (
|
|
<span className="truncate text-green-600">{data.scriptPath}</span>
|
|
) : (
|
|
<span className="text-orange-500">파일 경로 필요</span>
|
|
)}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* 입력 방식 */}
|
|
<div className="text-xs">
|
|
<span className="text-gray-500">입력: </span>
|
|
<span className="text-gray-700">
|
|
{data.inputMethod === "stdin" && "표준입력 (stdin)"}
|
|
{data.inputMethod === "args" && "명령줄 인자"}
|
|
{data.inputMethod === "env" && "환경변수"}
|
|
{data.inputMethod === "file" && "파일"}
|
|
</span>
|
|
</div>
|
|
|
|
{/* 타임아웃 */}
|
|
{data.options?.timeout && (
|
|
<div className="text-xs text-gray-500">
|
|
타임아웃: {Math.round(data.options.timeout / 1000)}초
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 출력 핸들 */}
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
className="!h-3 !w-3 !border-2 !border-white !bg-emerald-500"
|
|
/>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
ScriptActionNode.displayName = "ScriptActionNode";
|
|
|