모달창 올리기

frontend/components/dataflow/node-editor/FlowToolbar.tsx

@@ -13,12 +13,14 @@ import { useReactFlow } from "reactflow";
 import { SaveConfirmDialog } from "./dialogs/SaveConfirmDialog";
 import { validateFlow, summarizeValidations } from "@/lib/utils/flowValidation";
 import type { FlowValidation } from "@/lib/utils/flowValidation";
+import { useToast } from "@/hooks/use-toast";
 
 interface FlowToolbarProps {
   validations?: FlowValidation[];
 }
 
 export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
+  const { toast } = useToast();
   const { zoomIn, zoomOut, fitView } = useReactFlow();
   const {
     flowName,
@@ -56,9 +58,17 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
   const performSave = async () => {
     const result = await saveFlow();
     if (result.success) {
-      alert(`✅ ${result.message}\nFlow ID: ${result.flowId}`);
+      toast({
+        title: "✅ 플로우 저장 완료",
+        description: `${result.message}\nFlow ID: ${result.flowId}`,
+        variant: "default",
+      });
     } else {
-      alert(`❌ 저장 실패\n\n${result.message}`);
+      toast({
+        title: "❌ 저장 실패",
+        description: result.message,
+        variant: "destructive",
+      });
     }
     setShowSaveDialog(false);
   };
@@ -72,18 +82,30 @@ export function FlowToolbar({ validations = [] }: FlowToolbarProps) {
     a.download = `${flowName || "flow"}.json`;
     a.click();
     URL.revokeObjectURL(url);
-    alert("✅ JSON 파일로 내보내기 완료!");
+    toast({
+      title: "✅ 내보내기 완료",
+      description: "JSON 파일로 저장되었습니다.",
+      variant: "default",
+    });
   };
 
   const handleDelete = () => {
     if (selectedNodes.length === 0) {
-      alert("삭제할 노드를 선택해주세요.");
+      toast({
+        title: "⚠️ 선택된 노드 없음",
+        description: "삭제할 노드를 선택해주세요.",
+        variant: "default",
+      });
       return;
     }
 
     if (confirm(`선택된 ${selectedNodes.length}개 노드를 삭제하시겠습니까?`)) {
       removeNodes(selectedNodes);
-      alert(`✅ ${selectedNodes.length}개 노드가 삭제되었습니다.`);
+      toast({
+        title: "✅ 노드 삭제 완료",
+        description: `${selectedNodes.length}개 노드가 삭제되었습니다.`,
+        variant: "default",
+      });
     }
   };