관리자 기능과 태그 표시 설정 추가
This commit is contained in:
@@ -2,15 +2,103 @@
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const id = computed(() => String(route.params.id || ''))
|
||||
const saving = ref(false)
|
||||
const deleting = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
const { data: post } = await useFetch(() => `/admin/api/posts/${id.value}`)
|
||||
|
||||
if (!post.value) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: '게시물을 찾을 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 게시물 수정 저장
|
||||
* @param {Object} payload - 게시물 입력값
|
||||
* @returns {Promise<void>} 저장 결과
|
||||
*/
|
||||
const savePost = async (payload) => {
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const updatedPost = await $fetch(`/admin/api/posts/${id.value}`, {
|
||||
method: 'PUT',
|
||||
body: payload
|
||||
})
|
||||
|
||||
post.value = updatedPost
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '글을 저장하지 못했습니다.'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 게시물 삭제
|
||||
* @returns {Promise<void>} 삭제 처리 결과
|
||||
*/
|
||||
const deletePost = async () => {
|
||||
if (!confirm(`"${post.value.title}" 글을 삭제할까요?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
deleting.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
await $fetch(`/admin/api/posts/${id.value}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
await navigateTo('/admin/posts')
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '글을 삭제하지 못했습니다.'
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-post-edit bg-paper p-6">
|
||||
<h1 class="admin-post-edit__title text-3xl font-semibold">
|
||||
글 수정
|
||||
</h1>
|
||||
<p class="admin-post-edit__description mt-4 text-sm text-muted">
|
||||
저장된 글 데이터 연결 후 수정 화면을 구성합니다.
|
||||
<div class="admin-post-edit__header mb-8 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="admin-post-edit__eyebrow text-xs font-semibold uppercase text-muted">
|
||||
Posts
|
||||
</p>
|
||||
<h1 class="admin-post-edit__title mt-2 text-3xl font-semibold">
|
||||
글 수정
|
||||
</h1>
|
||||
</div>
|
||||
<div class="admin-post-edit__actions flex gap-2">
|
||||
<NuxtLink
|
||||
v-if="post.status === 'published'"
|
||||
class="admin-post-edit__view rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
|
||||
:to="`/posts/${post.slug}`"
|
||||
target="_blank"
|
||||
>
|
||||
보기
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="admin-post-edit__delete rounded border border-red-200 bg-white px-4 py-2 text-sm font-semibold text-red-700 disabled:opacity-50"
|
||||
type="button"
|
||||
:disabled="deleting"
|
||||
@click="deletePost"
|
||||
>
|
||||
{{ deleting ? '삭제 중' : '삭제' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p v-if="errorMessage" class="admin-post-edit__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
<AdminPostForm :initial-post="post" submit-label="변경 저장" :saving="saving" @submit="savePost" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -2,15 +2,124 @@
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
const deletingId = ref('')
|
||||
const errorMessage = ref('')
|
||||
|
||||
const { data: posts, refresh } = await useFetch('/admin/api/posts', {
|
||||
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} post - 삭제할 게시물
|
||||
* @returns {Promise<void>} 삭제 처리 결과
|
||||
*/
|
||||
const deletePost = async (post) => {
|
||||
if (!confirm(`"${post.title}" 글을 삭제할까요?`)) {
|
||||
return
|
||||
}
|
||||
|
||||
deletingId.value = post.id
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
await $fetch(`/admin/api/posts/${post.id}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
await refresh()
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '글을 삭제하지 못했습니다.'
|
||||
} finally {
|
||||
deletingId.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-posts bg-paper p-6">
|
||||
<h1 class="admin-posts__title text-3xl font-semibold">
|
||||
글 목록
|
||||
</h1>
|
||||
<p class="admin-posts__description mt-4 text-sm text-muted">
|
||||
글 목록 조회는 DB 설계 이후 연결합니다.
|
||||
<div class="admin-posts__header flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p class="admin-posts__eyebrow text-xs font-semibold uppercase text-muted">
|
||||
Posts
|
||||
</p>
|
||||
<h1 class="admin-posts__title mt-2 text-3xl font-semibold">
|
||||
글 목록
|
||||
</h1>
|
||||
</div>
|
||||
<NuxtLink class="admin-posts__new rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" to="/admin/posts/new">
|
||||
새 글
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="admin-posts__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-posts__table mt-8 overflow-hidden border border-line">
|
||||
<table class="admin-posts__table-inner w-full border-collapse text-left text-sm">
|
||||
<thead class="admin-posts__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
|
||||
<tr>
|
||||
<th class="admin-posts__cell px-4 py-3">제목</th>
|
||||
<th class="admin-posts__cell px-4 py-3">상태</th>
|
||||
<th class="admin-posts__cell px-4 py-3">태그</th>
|
||||
<th class="admin-posts__cell px-4 py-3">수정일</th>
|
||||
<th class="admin-posts__cell px-4 py-3">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="admin-posts__table-body divide-y divide-line bg-white">
|
||||
<tr v-for="post in posts" :key="post.id" class="admin-posts__row">
|
||||
<td class="admin-posts__cell px-4 py-4">
|
||||
<NuxtLink class="admin-posts__title-link font-semibold hover:opacity-70" :to="`/admin/posts/${post.id}`">
|
||||
{{ post.title }}
|
||||
</NuxtLink>
|
||||
<p class="admin-posts__slug mt-1 text-xs text-muted">
|
||||
/posts/{{ post.slug }}
|
||||
</p>
|
||||
</td>
|
||||
<td class="admin-posts__cell px-4 py-4">
|
||||
{{ post.status }}
|
||||
</td>
|
||||
<td class="admin-posts__cell px-4 py-4">
|
||||
{{ post.tags.join(', ') || '-' }}
|
||||
</td>
|
||||
<td class="admin-posts__cell px-4 py-4">
|
||||
{{ formatDate(post.updatedAt) }}
|
||||
</td>
|
||||
<td class="admin-posts__cell px-4 py-4">
|
||||
<button
|
||||
class="admin-posts__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 === post.id"
|
||||
@click="deletePost(post)"
|
||||
>
|
||||
{{ deletingId === post.id ? '삭제 중' : '삭제' }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p v-if="posts.length === 0" class="admin-posts__empty mt-6 text-sm text-muted">
|
||||
아직 작성된 글이 없습니다.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -2,15 +2,47 @@
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
const saving = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
/**
|
||||
* 새 게시물 저장
|
||||
* @param {Object} payload - 게시물 입력값
|
||||
* @returns {Promise<void>} 저장 결과
|
||||
*/
|
||||
const savePost = async (payload) => {
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const post = await $fetch('/admin/api/posts', {
|
||||
method: 'POST',
|
||||
body: payload
|
||||
})
|
||||
|
||||
await navigateTo(`/admin/posts/${post.id}`)
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '글을 저장하지 못했습니다.'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-post-editor bg-paper p-6">
|
||||
<h1 class="admin-post-editor__title text-3xl font-semibold">
|
||||
새 글 작성
|
||||
</h1>
|
||||
<p class="admin-post-editor__description mt-4 text-sm text-muted">
|
||||
마크다운 기반 위지윅 에디터는 다음 단계에서 구현합니다.
|
||||
<div class="admin-post-editor__header mb-8">
|
||||
<p class="admin-post-editor__eyebrow text-xs font-semibold uppercase text-muted">
|
||||
Posts
|
||||
</p>
|
||||
<h1 class="admin-post-editor__title mt-2 text-3xl font-semibold">
|
||||
새 글 작성
|
||||
</h1>
|
||||
</div>
|
||||
<p v-if="errorMessage" class="admin-post-editor__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
<AdminPostForm submit-label="글 저장" :saving="saving" @submit="savePost" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user