From 9e29d0d0b0cefbfc73ae8e81b98d82d1cb94302e Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sun, 21 Jun 2026 23:35:03 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=97=85=EB=AC=B4=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=EB=A1=9C=20?=
 =?UTF-8?q?=ED=9D=A1=EC=88=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

업무 삭제 모달은 공통 다이얼로그와 동일 구조(아이콘+제목+설명+취소/삭제)라
공통 시스템으로 통합한다. 구조가 다른 할 일 검토 모달은 그대로 유지.

- showDelete·confirmDelete·삭제 모달 마크업 제거
- askDelete() 에서 dialog.confirm(danger, 삭제)로 확인받아 삭제

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/TaskDetailPage.vue | 65 ++++-----------------
 1 file changed, 11 insertions(+), 54 deletions(-)

diff --git a/frontend/src/pages/relay/TaskDetailPage.vue b/frontend/src/pages/relay/TaskDetailPage.vue
index 6793b24..2e65cf3 100644
--- a/frontend/src/pages/relay/TaskDetailPage.vue
+++ b/frontend/src/pages/relay/TaskDetailPage.vue
@@ -25,6 +25,7 @@ import {
 import type { ChecklistReviewItem } from '@/types/task'
 import { useTaskStore } from '@/stores/task.store'
 import { useAuthStore } from '@/stores/auth.store'
+import { useDialog } from '@/composables/useDialog'
 import UserAvatar from '@/components/UserAvatar.vue'
 import { attachmentKindOf, fileBadge } from '@/shared/utils/format'
 
@@ -35,6 +36,7 @@ const taskId = computed(() => Number(route.params.taskId))
 
 const taskStore = useTaskStore()
 const authStore = useAuthStore()
+const dialog = useDialog()
 
 // 업무 상세 — API 연동
 const task = ref<TaskDetail | null>(null)
@@ -115,19 +117,22 @@ const ActivityIcon = defineComponent({
  * 더보기 메뉴 / 모달
  * ============================================================ */
 const moreOpen = ref(false)
-const showDelete = ref(false)
 const showChanges = ref(false)
 
 function closeAllOverlays() {
-  showDelete.value = false
   showChanges.value = false
   moreOpen.value = false
 }
 
-// 모달에서 삭제 확정 → DELETE 후 프로젝트 상세로 이동
-async function confirmDelete() {
+// 삭제 — 공통 확인 다이얼로그로 확인받고 DELETE 후 프로젝트 상세로 이동
+async function askDelete() {
+  moreOpen.value = false
   if (!task.value) return
-  showDelete.value = false
+  const ok = await dialog.confirm(
+    `#${task.value.id} ${task.value.title} 업무와 체크리스트·댓글·첨부파일이 영구적으로 삭제됩니다. 이 작업은 되돌릴 수 없습니다.`,
+    { title: '업무를 삭제할까요?', variant: 'danger', confirmText: '삭제' },
+  )
+  if (!ok) return
   try {
     await taskStore.remove(projectId.value, task.value.id)
     router.push(`/projects/${projectId.value}`)
@@ -526,7 +531,7 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
               <button
                 class="menu-item danger"
                 type="button"
-                @click="showDelete = true; moreOpen = false"
+                @click="askDelete"
               >
                 <svg
                   viewBox="0 0 24 24"
@@ -1236,54 +1241,6 @@ function badgeFor(name: string | undefined): { label: string; cls: string } {
 
     <!-- ===== 모달 ===== -->
     <Teleport to="body">
-      <!-- 삭제 -->
-      <div
-        class="modal-backdrop"
-        :class="{ open: showDelete }"
-        @click.self="showDelete = false"
-      >
-        <div
-          class="modal"
-          role="dialog"
-          aria-modal="true"
-        >
-          <div class="modal-body">
-            <div class="modal-ico">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              ><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6M14 11v6" /></svg>
-            </div>
-            <h2 class="modal-title">
-              업무를 삭제할까요?
-            </h2>
-            <p class="modal-desc">
-              <b>#{{ task?.id }} {{ task?.title }}</b> 업무와 체크리스트·댓글·첨부파일이 영구적으로 삭제됩니다. 이 작업은 되돌릴 수 없습니다.
-            </p>
-          </div>
-          <div class="modal-foot">
-            <button
-              class="mbtn"
-              type="button"
-              @click="showDelete = false"
-            >
-              취소
-            </button>
-            <button
-              class="mbtn danger"
-              type="button"
-              @click="confirmDelete"
-            >
-              삭제
-            </button>
-          </div>
-        </div>
-      </div>
-
       <!-- 할 일 완료 검토(수정 요청 / 승인) -->
       <div
         class="modal-backdrop"