diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx index 473ae3b8..41c68af5 100644 --- a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx +++ b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx @@ -2,13 +2,15 @@ import { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; -import { ArrowLeft, Save, Loader2, Plus, Settings, Trash2 } from "lucide-react"; +import { ArrowLeft, Save, Loader2, Plus, Settings, Trash2, Edit2 } from "lucide-react"; import { yardLayoutApi } from "@/lib/api/yardLayoutApi"; import dynamic from "next/dynamic"; import { YardLayout, YardPlacement } from "./types"; import { Alert, AlertDescription } from "@/components/ui/alert"; import { AlertCircle, CheckCircle } from "lucide-react"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), { ssr: false, @@ -49,6 +51,10 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { open: boolean; placementId: number | null; }>({ open: false, placementId: null }); + const [editLayoutDialog, setEditLayoutDialog] = useState<{ + open: boolean; + name: string; + }>({ open: false, name: "" }); // 배치 목록 로드 useEffect(() => { @@ -266,6 +272,32 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { return !!(placement.material_name && placement.quantity && placement.unit); }; + // 레이아웃 편집 Dialog 열기 + const handleEditLayout = () => { + setEditLayoutDialog({ + open: true, + name: layout.name, + }); + }; + + // 레이아웃 정보 저장 + const handleSaveLayoutInfo = async () => { + try { + const response = await yardLayoutApi.updateLayout(layout.id, { + name: editLayoutDialog.name, + }); + + if (response.success) { + // 레이아웃 정보 업데이트 + layout.name = editLayoutDialog.name; + setEditLayoutDialog({ open: false, name: "" }); + } + } catch (error) { + console.error("레이아웃 정보 수정 실패:", error); + setError("레이아웃 정보 수정에 실패했습니다."); + } + }; + return (
{/* 상단 툴바 */} @@ -275,9 +307,14 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) { 목록으로 -
-

{layout.name}

- {layout.description &&

{layout.description}

} +
+
+

{layout.name}

+ {layout.description &&

{layout.description}

} +
+
@@ -479,6 +516,40 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
+ + {/* 레이아웃 편집 Dialog */} + !open && setEditLayoutDialog({ open: false, name: "" })} + > + e.stopPropagation()}> + + + + 야드 레이아웃 정보 수정 + + +
+
+ + setEditLayoutDialog((prev) => ({ ...prev, name: e.target.value }))} + placeholder="레이아웃 이름을 입력하세요" + /> +
+
+
+ + +
+
+
); }