78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
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 { ArrowLeft } from "lucide-react";
|
|
|
|
type Step = "list" | "editor";
|
|
|
|
export default function DataFlowPage() {
|
|
const { user } = useAuth();
|
|
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);
|
|
};
|
|
|
|
if (currentStep === "editor") {
|
|
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 px-5 py-3">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={handleBackToList}
|
|
className="text-muted-foreground hover:text-foreground flex items-center gap-2 text-sm"
|
|
>
|
|
<ArrowLeft className="h-4 w-4" />
|
|
목록으로
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-hidden">
|
|
<FlowEditor
|
|
key={loadingFlowId || "new"}
|
|
initialFlowId={loadingFlowId}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full overflow-y-auto">
|
|
<div className="mx-auto w-full max-w-[1400px] space-y-6 p-4 sm:p-6 pb-20">
|
|
<DataFlowList onLoadFlow={handleLoadFlow} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|