야드 레이아웃 삭제 기능 구현

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -163,7 +163,7 @@ export function CanvasElement({
   const handleMouseDown = useCallback(
     (e: React.MouseEvent) => {
       // 모달이나 다이얼로그가 열려있으면 드래그 무시
-      if (document.querySelector('[role="dialog"]')) {
+      if (document.querySelector('[role="dialog"]') || document.querySelector('[role="alertdialog"]')) {
         return;
       }
 
@@ -198,7 +198,7 @@ export function CanvasElement({
   const handleResizeMouseDown = useCallback(
     (e: React.MouseEvent, handle: string) => {
       // 모달이나 다이얼로그가 열려있으면 리사이즈 무시
-      if (document.querySelector('[role="dialog"]')) {
+      if (document.querySelector('[role="dialog"]') || document.querySelector('[role="alertdialog"]')) {
         return;
       }
 

frontend/components/admin/dashboard/widgets/YardManagement3DWidget.tsx

@@ -3,8 +3,7 @@
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Plus, Check } from "lucide-react";
-import YardLayoutList from "./yard-3d/YardLayoutList";
+import { Plus, Check, Trash2 } from "lucide-react";
 import YardLayoutCreateModal from "./yard-3d/YardLayoutCreateModal";
 import YardEditor from "./yard-3d/YardEditor";
 import Yard3DViewer from "./yard-3d/Yard3DViewer";
@@ -34,6 +33,7 @@ export default function YardManagement3DWidget({
   const [isLoading, setIsLoading] = useState(true);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [editingLayout, setEditingLayout] = useState<YardLayout | null>(null);
+  const [deleteLayoutId, setDeleteLayoutId] = useState<number | null>(null);
 
   // 레이아웃 목록 로드
   const loadLayouts = async () => {
@@ -93,6 +93,26 @@ export default function YardManagement3DWidget({
     loadLayouts();
   };
 
+  // 레이아웃 삭제
+  const handleDeleteLayout = async () => {
+    if (!deleteLayoutId) return;
+
+    try {
+      const response = await yardLayoutApi.deleteLayout(deleteLayoutId);
+      if (response.success) {
+        // 삭제된 레이아웃이 현재 선택된 레이아웃이면 설정 초기화
+        if (config?.layoutId === deleteLayoutId && onConfigChange) {
+          onConfigChange({ layoutId: 0, layoutName: "" });
+        }
+        await loadLayouts();
+      }
+    } catch (error) {
+      console.error("레이아웃 삭제 실패:", error);
+    } finally {
+      setDeleteLayoutId(null);
+    }
+  };
+
   // 편집 모드: 편집 중인 경우 YardEditor 표시
   if (isEditMode && editingLayout) {
     return (
@@ -149,16 +169,29 @@ export default function YardManagement3DWidget({
                       {layout.description && <p className="mt-1 text-xs text-gray-500">{layout.description}</p>}
                       <div className="mt-2 text-xs text-gray-400">배치된 자재: {layout.placement_count}개</div>
                     </button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setEditingLayout(layout);
-                      }}
-                    >
-                      편집
-                    </Button>
+                    <div className="flex gap-1">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setEditingLayout(layout);
+                        }}
+                      >
+                        편집
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="text-red-600 hover:bg-red-50"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setDeleteLayoutId(layout.id);
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
                   </div>
                 </div>
               ))}
@@ -172,6 +205,37 @@ export default function YardManagement3DWidget({
           onClose={() => setIsCreateModalOpen(false)}
           onCreate={handleCreateLayout}
         />
+
+        {/* 삭제 확인 모달 */}
+        <Dialog
+          open={deleteLayoutId !== null}
+          onOpenChange={(open) => {
+            if (!open) setDeleteLayoutId(null);
+          }}
+        >
+          <DialogContent onPointerDown={(e) => e.stopPropagation()} className="sm:max-w-[425px]">
+            <DialogHeader>
+              <DialogTitle>야드 레이아웃 삭제</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <p className="text-sm text-gray-600">
+                이 야드 레이아웃을 삭제하시겠습니까?
+                <br />
+                레이아웃 내의 모든 배치 정보도 함께 삭제됩니다.
+                <br />
+                <span className="font-semibold text-red-600">이 작업은 되돌릴 수 없습니다.</span>
+              </p>
+              <div className="flex justify-end gap-2">
+                <Button variant="outline" onClick={() => setDeleteLayoutId(null)}>
+                  취소
+                </Button>
+                <Button onClick={handleDeleteLayout} className="bg-red-600 hover:bg-red-700">
+                  삭제
+                </Button>
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
       </div>
     );
   }