refactor: 업무 삭제 모달을 공통 다이얼로그로 흡수
업무 삭제 모달은 공통 다이얼로그와 동일 구조(아이콘+제목+설명+취소/삭제)라 공통 시스템으로 통합한다. 구조가 다른 할 일 검토 모달은 그대로 유지. - showDelete·confirmDelete·삭제 모달 마크업 제거 - askDelete() 에서 dialog.confirm(danger, 삭제)로 확인받아 삭제 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user