118 lines
3.7 KiB
Vue
118 lines
3.7 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
const deletingId = ref('')
|
|
const errorMessage = ref('')
|
|
|
|
const { data: pages, refresh } = await useFetch('/admin/api/pages', {
|
|
default: () => []
|
|
})
|
|
|
|
/**
|
|
* 날짜 표시 형식 변환
|
|
* @param {string | null} value - ISO 날짜 문자열
|
|
* @returns {string} 화면 표시 날짜
|
|
*/
|
|
const formatDate = (value) => {
|
|
if (!value) {
|
|
return '-'
|
|
}
|
|
|
|
const date = new Date(value)
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
|
|
return `${year}.${month}.${day}`
|
|
}
|
|
|
|
/**
|
|
* 고정 페이지 삭제
|
|
* @param {Object} page - 삭제할 고정 페이지
|
|
* @returns {Promise<void>} 삭제 처리 결과
|
|
*/
|
|
const deletePage = async (page) => {
|
|
if (!confirm(`"${page.title}" 페이지를 삭제할까요?`)) {
|
|
return
|
|
}
|
|
|
|
deletingId.value = page.id
|
|
errorMessage.value = ''
|
|
|
|
try {
|
|
await $fetch(`/admin/api/pages/${page.id}`, {
|
|
method: 'DELETE'
|
|
})
|
|
await refresh()
|
|
} catch (error) {
|
|
errorMessage.value = error?.data?.message || '페이지를 삭제하지 못했습니다.'
|
|
} finally {
|
|
deletingId.value = ''
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="admin-pages bg-paper p-6">
|
|
<div class="admin-pages__header flex items-center justify-between gap-4">
|
|
<div>
|
|
<p class="admin-pages__eyebrow text-xs font-semibold uppercase text-muted">
|
|
Pages
|
|
</p>
|
|
<h1 class="admin-pages__title mt-2 text-3xl font-semibold">
|
|
페이지 목록
|
|
</h1>
|
|
</div>
|
|
<NuxtLink class="admin-pages__new rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" to="/admin/pages/new">
|
|
새 페이지
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<p v-if="errorMessage" class="admin-pages__error mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
{{ errorMessage }}
|
|
</p>
|
|
|
|
<div class="admin-pages__table mt-8 overflow-hidden border border-line">
|
|
<table class="admin-pages__table-inner w-full border-collapse text-left text-sm">
|
|
<thead class="admin-pages__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
|
|
<tr>
|
|
<th class="admin-pages__cell px-4 py-3">제목</th>
|
|
<th class="admin-pages__cell px-4 py-3">수정일</th>
|
|
<th class="admin-pages__cell px-4 py-3">관리</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="admin-pages__table-body divide-y divide-line bg-white">
|
|
<tr v-for="page in pages" :key="page.id" class="admin-pages__row">
|
|
<td class="admin-pages__cell px-4 py-4">
|
|
<NuxtLink class="admin-pages__title-link font-semibold hover:opacity-70" :to="`/admin/pages/${page.id}`">
|
|
{{ page.title }}
|
|
</NuxtLink>
|
|
<p class="admin-pages__slug mt-1 text-xs text-muted">
|
|
/pages/{{ page.slug }}
|
|
</p>
|
|
</td>
|
|
<td class="admin-pages__cell px-4 py-4">
|
|
{{ formatDate(page.updatedAt) }}
|
|
</td>
|
|
<td class="admin-pages__cell px-4 py-4">
|
|
<button
|
|
class="admin-pages__delete rounded border border-red-200 px-3 py-1.5 text-xs font-semibold text-red-700 disabled:opacity-50"
|
|
type="button"
|
|
:disabled="deletingId === page.id"
|
|
@click="deletePage(page)"
|
|
>
|
|
{{ deletingId === page.id ? '삭제 중' : '삭제' }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p v-if="pages.length === 0" class="admin-pages__empty mt-6 text-sm text-muted">
|
|
아직 작성된 페이지가 없습니다.
|
|
</p>
|
|
</section>
|
|
</template>
|