4f10b5e42d
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
31 lines
991 B
TypeScript
31 lines
991 B
TypeScript
"use client";
|
|
|
|
/**
|
|
* 주석 노드 - 플로우 설명용
|
|
*/
|
|
|
|
import { memo } from "react";
|
|
import { NodeProps } from "reactflow";
|
|
import { MessageSquare } from "lucide-react";
|
|
import type { CommentNodeData } from "@/types/node-editor";
|
|
|
|
export const CommentNode = memo(({ data, selected }: NodeProps<CommentNodeData>) => {
|
|
return (
|
|
<div
|
|
className={`max-w-[350px] min-w-[200px] rounded-lg border-2 border-dashed bg-amber-50 shadow-sm transition-all ${
|
|
selected ? "border-yellow-500 shadow-md" : "border-amber-300"
|
|
}`}
|
|
>
|
|
<div className="p-3">
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<MessageSquare className="h-4 w-4 text-amber-600" />
|
|
<span className="text-xs font-semibold text-yellow-800">메모</span>
|
|
</div>
|
|
<div className="text-sm whitespace-pre-wrap text-foreground">{data.content || "메모를 입력하세요..."}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
CommentNode.displayName = "CommentNode";
|