f04d224b09
- Replaced existing toast error messages with the new `showErrorToast` utility across multiple components, improving consistency in error reporting. - Updated error messages to provide more specific guidance for users, enhancing the overall user experience during error scenarios. - Ensured that all relevant error handling in batch management, external call configurations, cascading management, and screen management components now utilizes the new utility for better maintainability.
98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import DataFlowList from "@/components/dataflow/DataFlowList";
|
|
import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { toast } from "sonner";
|
|
import { showErrorToast } from "@/lib/utils/toastUtils";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
|
import { ArrowLeft } from "lucide-react";
|
|
|
|
type Step = "list" | "editor";
|
|
|
|
export default function DataFlowPage() {
|
|
const { user } = useAuth();
|
|
const router = useRouter();
|
|
const [currentStep, setCurrentStep] = useState<Step>("list");
|
|
const [loadingFlowId, setLoadingFlowId] = useState<number | null>(null);
|
|
|
|
// 플로우 불러오기 핸들러
|
|
const handleLoadFlow = async (flowId: number | null) => {
|
|
if (flowId === null) {
|
|
// 새 플로우 생성
|
|
setLoadingFlowId(null);
|
|
setCurrentStep("editor");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 기존 플로우 불러오기
|
|
setLoadingFlowId(flowId);
|
|
setCurrentStep("editor");
|
|
|
|
toast.success("플로우를 불러왔습니다.");
|
|
} catch (error: any) {
|
|
console.error("❌ 플로우 불러오기 실패:", error);
|
|
showErrorToast("플로우 목록을 불러오는 데 실패했습니다", error, { guidance: "네트워크 연결을 확인해 주세요." });
|
|
}
|
|
};
|
|
|
|
// 목록으로 돌아가기
|
|
const handleBackToList = () => {
|
|
setCurrentStep("list");
|
|
setLoadingFlowId(null);
|
|
};
|
|
|
|
// 에디터 모드일 때는 전체 화면 사용
|
|
const isEditorMode = currentStep === "editor";
|
|
|
|
// 에디터 모드일 때는 레이아웃 없이 전체 화면 사용
|
|
if (isEditorMode) {
|
|
return (
|
|
<div className="bg-background fixed inset-0 z-50">
|
|
<div className="flex h-full flex-col">
|
|
{/* 에디터 헤더 */}
|
|
<div className="bg-background flex items-center gap-4 border-b p-4">
|
|
<Button variant="outline" size="sm" onClick={handleBackToList} className="flex items-center gap-2">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
목록으로
|
|
</Button>
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight">노드 플로우 에디터</h1>
|
|
<p className="text-muted-foreground mt-1 text-sm">
|
|
드래그 앤 드롭으로 데이터 제어 플로우를 시각적으로 설계합니다
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 플로우 에디터 */}
|
|
<div className="flex-1 overflow-hidden">
|
|
<FlowEditor key={loadingFlowId || "new"} initialFlowId={loadingFlowId} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-background flex min-h-screen flex-col">
|
|
<div className="space-y-6 p-4 sm:p-6">
|
|
{/* 페이지 헤더 */}
|
|
<div className="space-y-2 border-b pb-4">
|
|
<h1 className="text-3xl font-bold tracking-tight">제어 관리</h1>
|
|
<p className="text-muted-foreground text-sm">노드 기반 데이터 플로우를 시각적으로 설계하고 관리합니다</p>
|
|
</div>
|
|
|
|
{/* 플로우 목록 */}
|
|
<DataFlowList onLoadFlow={handleLoadFlow} />
|
|
</div>
|
|
|
|
{/* Scroll to Top 버튼 */}
|
|
<ScrollToTop />
|
|
</div>
|
|
);
|
|
}
|