97 lines
3.2 KiB
TypeScript
97 lines
3.2 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 { 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);
|
|
toast.error(error.message || "플로우를 불러오는데 실패했습니다.");
|
|
}
|
|
};
|
|
|
|
// 목록으로 돌아가기
|
|
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>
|
|
);
|
|
}
|