모달창 올리기

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",
+      });
     }
   };
 

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

@@ -18,189 +18,178 @@ interface ValidationNotificationProps {
   onClose?: () => void;
 }
 
-export const ValidationNotification = memo(
-  ({ validations, onNodeClick, onClose }: ValidationNotificationProps) => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    const summary = summarizeValidations(validations);
+export const ValidationNotification = memo(({ validations, onNodeClick, onClose }: ValidationNotificationProps) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const summary = summarizeValidations(validations);
 
-    if (validations.length === 0) {
-      return null;
-    }
+  if (validations.length === 0) {
+    return null;
+  }
 
-    const getTypeLabel = (type: string): string => {
-      const labels: Record<string, string> = {
-        "parallel-conflict": "병렬 실행 충돌",
-        "missing-where": "WHERE 조건 누락",
-        "circular-reference": "순환 참조",
-        "data-source-mismatch": "데이터 소스 불일치",
-        "parallel-table-access": "병렬 테이블 접근",
-      };
-      return labels[type] || type;
+  const getTypeLabel = (type: string): string => {
+    const labels: Record<string, string> = {
+      "disconnected-node": "연결되지 않은 노드",
+      "parallel-conflict": "병렬 실행 충돌",
+      "missing-where": "WHERE 조건 누락",
+      "circular-reference": "순환 참조",
+      "data-source-mismatch": "데이터 소스 불일치",
+      "parallel-table-access": "병렬 테이블 접근",
     };
+    return labels[type] || type;
+  };
 
-    // 타입별로 그룹화
-    const groupedValidations = validations.reduce((acc, validation) => {
+  // 타입별로 그룹화
+  const groupedValidations = validations.reduce(
+    (acc, validation) => {
       if (!acc[validation.type]) {
         acc[validation.type] = [];
       }
       acc[validation.type].push(validation);
       return acc;
-    }, {} as Record<string, FlowValidation[]>);
+    },
+    {} as Record<string, FlowValidation[]>,
+  );
 
-    return (
-      <div className="fixed right-4 top-4 z-50 w-80 animate-in slide-in-from-right-5 duration-300">
+  return (
+    <div className="animate-in slide-in-from-right-5 fixed top-4 right-4 z-50 w-80 duration-300">
+      <div
+        className={cn(
+          "rounded-lg border-2 bg-white shadow-2xl",
+          summary.hasBlockingIssues
+            ? "border-red-500"
+            : summary.warningCount > 0
+              ? "border-yellow-500"
+              : "border-blue-500",
+        )}
+      >
+        {/* 헤더 */}
         <div
           className={cn(
-            "rounded-lg border-2 bg-white shadow-2xl",
-            summary.hasBlockingIssues
-              ? "border-red-500"
-              : summary.warningCount > 0
-                ? "border-yellow-500"
-                : "border-blue-500"
+            "flex cursor-pointer items-center justify-between p-3",
+            summary.hasBlockingIssues ? "bg-red-50" : summary.warningCount > 0 ? "bg-yellow-50" : "bg-blue-50",
           )}
+          onClick={() => setIsExpanded(!isExpanded)}
         >
-          {/* 헤더 */}
-          <div
-            className={cn(
-              "flex cursor-pointer items-center justify-between p-3",
-              summary.hasBlockingIssues
-                ? "bg-red-50"
-                : summary.warningCount > 0
-                  ? "bg-yellow-50"
-                  : "bg-blue-50"
+          <div className="flex items-center gap-2">
+            {summary.hasBlockingIssues ? (
+              <AlertCircle className="h-5 w-5 text-red-600" />
+            ) : summary.warningCount > 0 ? (
+              <AlertTriangle className="h-5 w-5 text-yellow-600" />
+            ) : (
+              <Info className="h-5 w-5 text-blue-600" />
             )}
-            onClick={() => setIsExpanded(!isExpanded)}
-          >
-            <div className="flex items-center gap-2">
-              {summary.hasBlockingIssues ? (
-                <AlertCircle className="h-5 w-5 text-red-600" />
-              ) : summary.warningCount > 0 ? (
-                <AlertTriangle className="h-5 w-5 text-yellow-600" />
-              ) : (
-                <Info className="h-5 w-5 text-blue-600" />
-              )}
-              <span className="text-sm font-semibold text-gray-900">
-                플로우 검증
-              </span>
-              <div className="flex items-center gap-1">
-                {summary.errorCount > 0 && (
-                  <Badge variant="destructive" className="h-5 text-[10px]">
-                    {summary.errorCount}
-                  </Badge>
-                )}
-                {summary.warningCount > 0 && (
-                  <Badge className="h-5 bg-yellow-500 text-[10px] hover:bg-yellow-600">
-                    {summary.warningCount}
-                  </Badge>
-                )}
-                {summary.infoCount > 0 && (
-                  <Badge variant="secondary" className="h-5 text-[10px]">
-                    {summary.infoCount}
-                  </Badge>
-                )}
-              </div>
-            </div>
+            <span className="text-sm font-semibold text-gray-900">플로우 검증</span>
             <div className="flex items-center gap-1">
-              {isExpanded ? (
-                <ChevronUp className="h-4 w-4 text-gray-400" />
-              ) : (
-                <ChevronDown className="h-4 w-4 text-gray-400" />
+              {summary.errorCount > 0 && (
+                <Badge variant="destructive" className="h-5 text-[10px]">
+                  {summary.errorCount}
+                </Badge>
               )}
-              {onClose && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onClose();
-                  }}
-                  className="h-6 w-6 p-0 hover:bg-white/50"
-                >
-                  <X className="h-3.5 w-3.5" />
-                </Button>
+              {summary.warningCount > 0 && (
+                <Badge className="h-5 bg-yellow-500 text-[10px] hover:bg-yellow-600">{summary.warningCount}</Badge>
+              )}
+              {summary.infoCount > 0 && (
+                <Badge variant="secondary" className="h-5 text-[10px]">
+                  {summary.infoCount}
+                </Badge>
               )}
             </div>
           </div>
-
-          {/* 확장된 내용 */}
-          {isExpanded && (
-            <div className="max-h-[60vh] overflow-y-auto border-t">
-              <div className="p-2 space-y-2">
-                {Object.entries(groupedValidations).map(([type, typeValidations]) => {
-                  const firstValidation = typeValidations[0];
-                  const Icon =
-                    firstValidation.severity === "error"
-                      ? AlertCircle
-                      : firstValidation.severity === "warning"
-                        ? AlertTriangle
-                        : Info;
-
-                  return (
-                    <div key={type}>
-                      {/* 타입 헤더 */}
-                      <div
-                        className={cn(
-                          "mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium",
-                          firstValidation.severity === "error"
-                            ? "bg-red-100 text-red-700"
-                            : firstValidation.severity === "warning"
-                              ? "bg-yellow-100 text-yellow-700"
-                              : "bg-blue-100 text-blue-700"
-                        )}
-                      >
-                        <Icon className="h-3 w-3" />
-                        {getTypeLabel(type)}
-                        <span className="ml-auto">
-                          {typeValidations.length}개
-                        </span>
-                      </div>
-
-                      {/* 검증 항목들 */}
-                      <div className="space-y-1 pl-5">
-                        {typeValidations.map((validation, index) => (
-                          <div
-                            key={index}
-                            className="group cursor-pointer rounded-md border border-gray-200 bg-gray-50 p-2 text-xs transition-all hover:border-gray-300 hover:bg-white hover:shadow-sm"
-                            onClick={() => onNodeClick?.(validation.nodeId)}
-                          >
-                            <p className="text-gray-700 leading-relaxed">
-                              {validation.message}
-                            </p>
-                            {validation.affectedNodes && validation.affectedNodes.length > 1 && (
-                              <div className="mt-1 text-[10px] text-gray-500">
-                                영향받는 노드: {validation.affectedNodes.length}개
-                              </div>
-                            )}
-                            <div className="mt-1 text-[10px] text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">
-                              클릭하여 노드 보기 →
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* 요약 메시지 (닫혀있을 때) */}
-          {!isExpanded && (
-            <div className="border-t px-3 py-2">
-              <p className="text-xs text-gray-600">
-                {summary.hasBlockingIssues
-                  ? "⛔ 오류를 해결해야 저장할 수 있습니다"
-                  : summary.warningCount > 0
-                    ? "⚠️ 경고 사항을 확인하세요"
-                    : "ℹ️ 정보를 확인하세요"}
-              </p>
-            </div>
-          )}
+          <div className="flex items-center gap-1">
+            {isExpanded ? (
+              <ChevronUp className="h-4 w-4 text-gray-400" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-gray-400" />
+            )}
+            {onClose && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClose();
+                }}
+                className="h-6 w-6 p-0 hover:bg-white/50"
+              >
+                <X className="h-3.5 w-3.5" />
+              </Button>
+            )}
+          </div>
         </div>
+
+        {/* 확장된 내용 */}
+        {isExpanded && (
+          <div className="max-h-[60vh] overflow-y-auto border-t">
+            <div className="space-y-2 p-2">
+              {Object.entries(groupedValidations).map(([type, typeValidations]) => {
+                const firstValidation = typeValidations[0];
+                const Icon =
+                  firstValidation.severity === "error"
+                    ? AlertCircle
+                    : firstValidation.severity === "warning"
+                      ? AlertTriangle
+                      : Info;
+
+                return (
+                  <div key={type}>
+                    {/* 타입 헤더 */}
+                    <div
+                      className={cn(
+                        "mb-1 flex items-center gap-2 rounded-md px-2 py-1 text-xs font-medium",
+                        firstValidation.severity === "error"
+                          ? "bg-red-100 text-red-700"
+                          : firstValidation.severity === "warning"
+                            ? "bg-yellow-100 text-yellow-700"
+                            : "bg-blue-100 text-blue-700",
+                      )}
+                    >
+                      <Icon className="h-3 w-3" />
+                      {getTypeLabel(type)}
+                      <span className="ml-auto">{typeValidations.length}개</span>
+                    </div>
+
+                    {/* 검증 항목들 */}
+                    <div className="space-y-1 pl-5">
+                      {typeValidations.map((validation, index) => (
+                        <div
+                          key={index}
+                          className="group cursor-pointer rounded-md border border-gray-200 bg-gray-50 p-2 text-xs transition-all hover:border-gray-300 hover:bg-white hover:shadow-sm"
+                          onClick={() => onNodeClick?.(validation.nodeId)}
+                        >
+                          <p className="leading-relaxed text-gray-700">{validation.message}</p>
+                          {validation.affectedNodes && validation.affectedNodes.length > 1 && (
+                            <div className="mt-1 text-[10px] text-gray-500">
+                              영향받는 노드: {validation.affectedNodes.length}개
+                            </div>
+                          )}
+                          <div className="mt-1 text-[10px] text-blue-600 opacity-0 transition-opacity group-hover:opacity-100">
+                            클릭하여 노드 보기 →
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* 요약 메시지 (닫혀있을 때) */}
+        {!isExpanded && (
+          <div className="border-t px-3 py-2">
+            <p className="text-xs text-gray-600">
+              {summary.hasBlockingIssues
+                ? "⛔ 오류를 해결해야 저장할 수 있습니다"
+                : summary.warningCount > 0
+                  ? "⚠️ 경고 사항을 확인하세요"
+                  : "ℹ️ 정보를 확인하세요"}
+            </p>
+          </div>
+        )}
       </div>
-    );
-  }
-);
+    </div>
+  );
+});
 
 ValidationNotification.displayName = "ValidationNotification";
-