야드 레이아웃 이름 변경 구현

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 (
     <div className="flex h-full flex-col bg-white">
       {/* 상단 툴바 */}
@@ -275,9 +307,14 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
             <ArrowLeft className="mr-2 h-4 w-4" />
             목록으로
           </Button>
-          <div>
+          <div className="flex items-center gap-2">
-            <h2 className="text-lg font-semibold">{layout.name}</h2>
+            <div>
-            {layout.description && <p className="text-sm text-gray-500">{layout.description}</p>}
+              <h2 className="text-lg font-semibold">{layout.name}</h2>
+              {layout.description && <p className="text-sm text-gray-500">{layout.description}</p>}
+            </div>
+            <Button variant="ghost" size="sm" onClick={handleEditLayout} className="h-8 w-8 p-0">
+              <Edit2 className="h-4 w-4 text-gray-500" />
+            </Button>
           </div>
         </div>
 
@@ -479,6 +516,40 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* 레이아웃 편집 Dialog */}
+      <Dialog
+        open={editLayoutDialog.open}
+        onOpenChange={(open) => !open && setEditLayoutDialog({ open: false, name: "" })}
+      >
+        <DialogContent onPointerDown={(e) => e.stopPropagation()}>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Edit2 className="h-5 w-5 text-blue-600" />
+              야드 레이아웃 정보 수정
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="layout-name">레이아웃 이름</Label>
+              <Input
+                id="layout-name"
+                value={editLayoutDialog.name}
+                onChange={(e) => setEditLayoutDialog((prev) => ({ ...prev, name: e.target.value }))}
+                placeholder="레이아웃 이름을 입력하세요"
+              />
+            </div>
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setEditLayoutDialog({ open: false, name: "" })}>
+              취소
+            </Button>
+            <Button onClick={handleSaveLayoutInfo} disabled={!editLayoutDialog.name.trim()}>
+              저장
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }