From 821be53b19ea6e64da0cc8002278173ffc0dd52a Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Mon, 20 Oct 2025 12:07:07 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=BC=EB=93=9C3D=20=EC=9A=94=EC=86=8C=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EC=8B=9C=20Dialog=EB=A5=BC=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dashboard/widgets/yard-3d/YardEditor.tsx  | 45 +++++++++++++++++--
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx
index 346d59f5..473ae3b8 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx
+++ b/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("이 요소를 삭제하시겠습니까?")) {
-      return;
-    }
+    setDeleteConfirmDialog({ open: true, placementId });
+  };
+
+  // 요소 삭제 확정 (로컬 상태에서만 삭제, 저장 시 서버에 반영)
+  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>
   );
 }