야드3D 요소 삭제 시 Dialog를 사용

frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx

@@ -45,6 +45,10 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
     success: boolean;
     message: string;
   }>({ open: false, success: false, message: "" });
+  const [deleteConfirmDialog, setDeleteConfirmDialog] = useState<{
+    open: boolean;
+    placementId: number | null;
+  }>({ open: false, placementId: null });
 
   // 배치 목록 로드
   useEffect(() => {
@@ -110,11 +114,15 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
     setShowConfigPanel(true);
   };
 
-  // 요소 삭제 (로컬 상태에서만 삭제, 저장 시 서버에 반영)
+  // 요소 삭제 확인 Dialog 열기
   const handleDeletePlacement = (placementId: number) => {
-    if (!confirm("이 요소를 삭제하시겠습니까?")) {
+    setDeleteConfirmDialog({ open: true, placementId });
-      return;
+  };
-    }
+
+  // 요소 삭제 확정 (로컬 상태에서만 삭제, 저장 시 서버에 반영)
+  const confirmDeletePlacement = () => {
+    const { placementId } = deleteConfirmDialog;
+    if (placementId === null) return;
 
     setPlacements((prev) => prev.filter((p) => p.id !== placementId));
     if (selectedPlacement?.id === placementId) {
@@ -122,6 +130,7 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
       setShowConfigPanel(false);
     }
     setHasUnsavedChanges(true);
+    setDeleteConfirmDialog({ open: false, placementId: null });
   };
 
   // 자재 드래그 (3D 캔버스에서, 로컬 상태에만 반영)
@@ -442,6 +451,34 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* 삭제 확인 Dialog */}
+      <Dialog
+        open={deleteConfirmDialog.open}
+        onOpenChange={(open) => !open && setDeleteConfirmDialog({ open: false, placementId: null })}
+      >
+        <DialogContent onPointerDown={(e) => e.stopPropagation()}>
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5 text-orange-600" />
+              요소 삭제 확인
+            </DialogTitle>
+            <DialogDescription className="pt-2">
+              이 요소를 삭제하시겠습니까?
+              <br />
+              <span className="font-semibold text-orange-600">저장 버튼을 눌러야 최종적으로 삭제됩니다.</span>
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setDeleteConfirmDialog({ open: false, placementId: null })}>
+              취소
+            </Button>
+            <Button onClick={confirmDeletePlacement} className="bg-red-600 hover:bg-red-700">
+              삭제
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }