refactor: 업무 삭제 모달을 공통 다이얼로그로 흡수

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

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-21 23:35:03 +09:00
parent b1afe5480c
commit 9e29d0d0b0
+11 -54
View File
@@ -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"