59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState, useEffect } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Textarea } from "@/components/ui/textarea";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
|
||
|
|
import { CommentNodeData } from "@/types/node-editor";
|
||
|
|
import { MessageSquare } from "lucide-react";
|
||
|
|
|
||
|
|
interface CommentPropertiesProps {
|
||
|
|
nodeId: string;
|
||
|
|
data: CommentNodeData;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CommentProperties({ nodeId, data }: CommentPropertiesProps) {
|
||
|
|
const { updateNode } = useFlowEditorStore();
|
||
|
|
|
||
|
|
const [content, setContent] = useState(data.content || "");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setContent(data.content || "");
|
||
|
|
}, [data]);
|
||
|
|
|
||
|
|
const handleApply = () => {
|
||
|
|
updateNode(nodeId, {
|
||
|
|
content,
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4 p-4">
|
||
|
|
<div className="flex items-center gap-2 rounded-md bg-yellow-50 p-2">
|
||
|
|
<MessageSquare className="h-4 w-4 text-yellow-600" />
|
||
|
|
<span className="font-semibold text-yellow-600">주석</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="content" className="text-xs">
|
||
|
|
메모 내용
|
||
|
|
</Label>
|
||
|
|
<Textarea
|
||
|
|
id="content"
|
||
|
|
value={content}
|
||
|
|
onChange={(e) => setContent(e.target.value)}
|
||
|
|
placeholder="플로우 설명이나 메모를 입력하세요..."
|
||
|
|
className="mt-1 text-sm"
|
||
|
|
rows={8}
|
||
|
|
/>
|
||
|
|
<p className="mt-1 text-xs text-gray-500">이 노드는 플로우 실행에 영향을 주지 않습니다.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button onClick={handleApply} className="w-full">
|
||
|
|
적용
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|