114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
|
|
import { LogNodeData } from "@/types/node-editor";
|
|
import { FileText, Info, AlertTriangle, AlertCircle } from "lucide-react";
|
|
|
|
interface LogPropertiesProps {
|
|
nodeId: string;
|
|
data: LogNodeData;
|
|
}
|
|
|
|
const LOG_LEVELS = [
|
|
{ value: "debug", label: "Debug", icon: Info, color: "text-blue-600" },
|
|
{ value: "info", label: "Info", icon: Info, color: "text-green-600" },
|
|
{ value: "warn", label: "Warning", icon: AlertTriangle, color: "text-yellow-600" },
|
|
{ value: "error", label: "Error", icon: AlertCircle, color: "text-red-600" },
|
|
];
|
|
|
|
export function LogProperties({ nodeId, data }: LogPropertiesProps) {
|
|
const { updateNode } = useFlowEditorStore();
|
|
|
|
const [level, setLevel] = useState(data.level || "info");
|
|
const [message, setMessage] = useState(data.message || "");
|
|
const [includeData, setIncludeData] = useState(data.includeData ?? false);
|
|
|
|
useEffect(() => {
|
|
setLevel(data.level || "info");
|
|
setMessage(data.message || "");
|
|
setIncludeData(data.includeData ?? false);
|
|
}, [data]);
|
|
|
|
const handleApply = () => {
|
|
updateNode(nodeId, {
|
|
level: level as any,
|
|
message,
|
|
includeData,
|
|
});
|
|
};
|
|
|
|
const selectedLevel = LOG_LEVELS.find((l) => l.value === level);
|
|
const LevelIcon = selectedLevel?.icon || Info;
|
|
|
|
return (
|
|
<div className="space-y-4 p-4 pb-8">
|
|
<div className="flex items-center gap-2 rounded-md bg-gray-50 p-2">
|
|
<FileText className="h-4 w-4 text-gray-600" />
|
|
<span className="font-semibold text-gray-600">로그</span>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs">로그 레벨</Label>
|
|
<Select value={level} onValueChange={setLevel}>
|
|
<SelectTrigger className="mt-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{LOG_LEVELS.map((lvl) => {
|
|
const Icon = lvl.icon;
|
|
return (
|
|
<SelectItem key={lvl.value} value={lvl.value}>
|
|
<div className="flex items-center gap-2">
|
|
<Icon className={`h-4 w-4 ${lvl.color}`} />
|
|
<span>{lvl.label}</span>
|
|
</div>
|
|
</SelectItem>
|
|
);
|
|
})}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="message" className="text-xs">
|
|
로그 메시지
|
|
</Label>
|
|
<Input
|
|
id="message"
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
placeholder="로그 메시지를 입력하세요"
|
|
className="mt-1 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs">데이터 포함</Label>
|
|
<p className="text-xs text-gray-500">플로우 데이터를 로그에 포함합니다</p>
|
|
</div>
|
|
<Switch checked={includeData} onCheckedChange={setIncludeData} />
|
|
</div>
|
|
|
|
<div className={`rounded-md border p-3 ${selectedLevel?.color || "text-gray-600"}`}>
|
|
<div className="mb-1 flex items-center gap-2">
|
|
<LevelIcon className="h-4 w-4" />
|
|
<span className="text-xs font-semibold uppercase">{level}</span>
|
|
</div>
|
|
<div className="text-sm">{message || "메시지가 없습니다"}</div>
|
|
{includeData && <div className="mt-1 text-xs opacity-70">+ 플로우 데이터</div>}
|
|
</div>
|
|
|
|
<Button onClick={handleApply} className="w-full">
|
|
적용
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|