관리자 기능과 태그 표시 설정 추가
This commit is contained in:
@@ -2,6 +2,13 @@
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
const { data: posts } = await useFetch('/admin/api/posts', {
|
||||
default: () => []
|
||||
})
|
||||
|
||||
const publishedCount = computed(() => posts.value.filter((post) => post.status === 'published').length)
|
||||
const draftCount = computed(() => posts.value.filter((post) => post.status === 'draft').length)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -14,8 +21,31 @@ definePageMeta({
|
||||
대시보드
|
||||
</h1>
|
||||
</div>
|
||||
<div class="admin-dashboard__body bg-paper p-6 text-sm text-muted">
|
||||
관리자 기능은 Ghost 스타일의 글쓰기 흐름을 기준으로 단계별 구현합니다.
|
||||
<div class="admin-dashboard__body grid gap-4 bg-paper p-6 text-sm text-muted md:grid-cols-3">
|
||||
<section class="admin-dashboard__metric border border-line bg-white p-4">
|
||||
<p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
|
||||
Posts
|
||||
</p>
|
||||
<strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
|
||||
{{ posts.length }}
|
||||
</strong>
|
||||
</section>
|
||||
<section class="admin-dashboard__metric border border-line bg-white p-4">
|
||||
<p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
|
||||
Published
|
||||
</p>
|
||||
<strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
|
||||
{{ publishedCount }}
|
||||
</strong>
|
||||
</section>
|
||||
<section class="admin-dashboard__metric border border-line bg-white p-4">
|
||||
<p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
|
||||
Draft
|
||||
</p>
|
||||
<strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
|
||||
{{ draftCount }}
|
||||
</strong>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
79
pages/admin/login.vue
Normal file
79
pages/admin/login.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: false
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const pending = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
/**
|
||||
* 관리자 로그인 제출
|
||||
* @returns {Promise<void>} 로그인 처리 결과
|
||||
*/
|
||||
const submitLogin = async () => {
|
||||
pending.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
await $fetch('/admin/api/auth/login', {
|
||||
method: 'POST',
|
||||
body: form
|
||||
})
|
||||
await navigateTo('/admin')
|
||||
} catch {
|
||||
errorMessage.value = '이메일 또는 비밀번호를 확인해 주세요.'
|
||||
} finally {
|
||||
pending.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="admin-login flex min-h-screen items-center justify-center bg-[#f5f5f2] px-5 text-ink">
|
||||
<section class="admin-login__panel w-full max-w-sm border border-line bg-paper p-8">
|
||||
<p class="admin-login__eyebrow text-xs font-semibold uppercase text-muted">
|
||||
Admin
|
||||
</p>
|
||||
<h1 class="admin-login__title mt-2 text-3xl font-semibold">
|
||||
로그인
|
||||
</h1>
|
||||
<form class="admin-login__form mt-8 grid gap-4" @submit.prevent="submitLogin">
|
||||
<label class="admin-login__field grid gap-2 text-sm">
|
||||
<span class="admin-login__label font-medium">이메일</span>
|
||||
<input
|
||||
v-model="form.email"
|
||||
class="admin-login__input rounded border border-line bg-white px-3 py-2"
|
||||
type="email"
|
||||
autocomplete="username"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
<label class="admin-login__field grid gap-2 text-sm">
|
||||
<span class="admin-login__label font-medium">비밀번호</span>
|
||||
<input
|
||||
v-model="form.password"
|
||||
class="admin-login__input rounded border border-line bg-white px-3 py-2"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
<p v-if="errorMessage" class="admin-login__error text-sm text-red-600">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
<button
|
||||
class="admin-login__button rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white disabled:opacity-50"
|
||||
type="submit"
|
||||
:disabled="pending"
|
||||
>
|
||||
{{ pending ? '확인 중' : '로그인' }}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
@@ -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>
|
||||
|
||||
94
pages/admin/tags/[id].vue
Normal file
94
pages/admin/tags/[id].vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
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: tag } = await useFetch(() => `/admin/api/tags/${id.value}`)
|
||||
|
||||
if (!tag.value) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: '태그를 찾을 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 태그 수정 저장
|
||||
* @param {Object} payload - 태그 입력값
|
||||
* @returns {Promise<void>} 저장 결과
|
||||
*/
|
||||
const saveTag = async (payload) => {
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const updatedTag = await $fetch(`/admin/api/tags/${id.value}`, {
|
||||
method: 'PUT',
|
||||
body: payload
|
||||
})
|
||||
|
||||
tag.value = updatedTag
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '태그를 저장하지 못했습니다.'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 태그 삭제
|
||||
* @returns {Promise<void>} 삭제 처리 결과
|
||||
*/
|
||||
const deleteTag = async () => {
|
||||
if (!confirm(`"${tag.value.name}" 태그를 삭제할까요? 연결된 글에서도 이 태그가 제거됩니다.`)) {
|
||||
return
|
||||
}
|
||||
|
||||
deleting.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
await $fetch(`/admin/api/tags/${id.value}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
await navigateTo('/admin/tags')
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '태그를 삭제하지 못했습니다.'
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-tag-edit bg-paper p-6">
|
||||
<div class="admin-tag-edit__header mb-8 flex items-start justify-between gap-4">
|
||||
<div>
|
||||
<p class="admin-tag-edit__eyebrow text-xs font-semibold uppercase text-muted">
|
||||
Tags
|
||||
</p>
|
||||
<h1 class="admin-tag-edit__title mt-2 text-3xl font-semibold">
|
||||
태그 수정
|
||||
</h1>
|
||||
</div>
|
||||
<button
|
||||
class="admin-tag-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="deleteTag"
|
||||
>
|
||||
{{ deleting ? '삭제 중' : '삭제' }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="errorMessage" class="admin-tag-edit__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
<AdminTagForm :initial-tag="tag" submit-label="변경 저장" :saving="saving" @submit="saveTag" />
|
||||
</section>
|
||||
</template>
|
||||
@@ -2,15 +2,114 @@
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
const deletingId = ref('')
|
||||
const errorMessage = ref('')
|
||||
|
||||
const { data: tags, refresh } = await useFetch('/admin/api/tags', {
|
||||
default: () => []
|
||||
})
|
||||
|
||||
/**
|
||||
* 태그 삭제
|
||||
* @param {Object} tag - 삭제할 태그
|
||||
* @returns {Promise<void>} 삭제 처리 결과
|
||||
*/
|
||||
const deleteTag = async (tag) => {
|
||||
if (!confirm(`"${tag.name}" 태그를 삭제할까요? 연결된 글에서도 이 태그가 제거됩니다.`)) {
|
||||
return
|
||||
}
|
||||
|
||||
deletingId.value = tag.id
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
await $fetch(`/admin/api/tags/${tag.id}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
await refresh()
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '태그를 삭제하지 못했습니다.'
|
||||
} finally {
|
||||
deletingId.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-tags bg-paper p-6">
|
||||
<h1 class="admin-tags__title text-3xl font-semibold">
|
||||
태그 관리
|
||||
</h1>
|
||||
<p class="admin-tags__description mt-4 text-sm text-muted">
|
||||
DEV, NOTE, REVIEW, PLAY 같은 카테고리성 태그를 관리합니다.
|
||||
<div class="admin-tags__header flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p class="admin-tags__eyebrow text-xs font-semibold uppercase text-muted">
|
||||
Tags
|
||||
</p>
|
||||
<h1 class="admin-tags__title mt-2 text-3xl font-semibold">
|
||||
태그 관리
|
||||
</h1>
|
||||
</div>
|
||||
<NuxtLink class="admin-tags__new rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" to="/admin/tags/new">
|
||||
태그 추가
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<p v-if="errorMessage" class="admin-tags__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-tags__table mt-8 overflow-hidden border border-line">
|
||||
<table class="admin-tags__table-inner w-full border-collapse text-left text-sm">
|
||||
<thead class="admin-tags__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
|
||||
<tr>
|
||||
<th class="admin-tags__cell px-4 py-3">순서</th>
|
||||
<th class="admin-tags__cell px-4 py-3">색상</th>
|
||||
<th class="admin-tags__cell px-4 py-3">이름</th>
|
||||
<th class="admin-tags__cell px-4 py-3">슬러그</th>
|
||||
<th class="admin-tags__cell px-4 py-3">설명</th>
|
||||
<th class="admin-tags__cell px-4 py-3">관리</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="admin-tags__table-body divide-y divide-line bg-white">
|
||||
<tr v-for="tag in tags" :key="tag.id" class="admin-tags__row">
|
||||
<td class="admin-tags__cell px-4 py-4 text-muted">
|
||||
{{ tag.sortOrder }}
|
||||
</td>
|
||||
<td class="admin-tags__cell px-4 py-4">
|
||||
<span class="admin-tags__color flex items-center gap-2">
|
||||
<span class="admin-tags__color-swatch h-5 w-2 rounded-full" :style="{ backgroundColor: tag.color }" />
|
||||
<span class="admin-tags__color-code text-xs text-muted">{{ tag.color }}</span>
|
||||
</span>
|
||||
</td>
|
||||
<td class="admin-tags__cell px-4 py-4 font-semibold">
|
||||
{{ tag.name }}
|
||||
</td>
|
||||
<td class="admin-tags__cell px-4 py-4 text-muted">
|
||||
{{ tag.slug }}
|
||||
</td>
|
||||
<td class="admin-tags__cell px-4 py-4 text-muted">
|
||||
{{ tag.description || '-' }}
|
||||
</td>
|
||||
<td class="admin-tags__cell px-4 py-4">
|
||||
<div class="admin-tags__actions flex gap-2">
|
||||
<NuxtLink class="admin-tags__edit rounded border border-line px-3 py-1.5 text-xs font-semibold" :to="`/admin/tags/${tag.id}`">
|
||||
수정
|
||||
</NuxtLink>
|
||||
<button
|
||||
class="admin-tags__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 === tag.id"
|
||||
@click="deleteTag(tag)"
|
||||
>
|
||||
{{ deletingId === tag.id ? '삭제 중' : '삭제' }}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p v-if="tags.length === 0" class="admin-tags__empty mt-6 text-sm text-muted">
|
||||
아직 등록된 태그가 없습니다.
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
48
pages/admin/tags/new.vue
Normal file
48
pages/admin/tags/new.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'admin'
|
||||
})
|
||||
|
||||
const saving = ref(false)
|
||||
const errorMessage = ref('')
|
||||
|
||||
/**
|
||||
* 새 태그 저장
|
||||
* @param {Object} payload - 태그 입력값
|
||||
* @returns {Promise<void>} 저장 결과
|
||||
*/
|
||||
const saveTag = async (payload) => {
|
||||
saving.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
const tag = await $fetch('/admin/api/tags', {
|
||||
method: 'POST',
|
||||
body: payload
|
||||
})
|
||||
|
||||
await navigateTo(`/admin/tags/${tag.id}`)
|
||||
} catch (error) {
|
||||
errorMessage.value = error?.data?.message || '태그를 저장하지 못했습니다.'
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="admin-tag-editor bg-paper p-6">
|
||||
<div class="admin-tag-editor__header mb-8">
|
||||
<p class="admin-tag-editor__eyebrow text-xs font-semibold uppercase text-muted">
|
||||
Tags
|
||||
</p>
|
||||
<h1 class="admin-tag-editor__title mt-2 text-3xl font-semibold">
|
||||
새 태그
|
||||
</h1>
|
||||
</div>
|
||||
<p v-if="errorMessage" class="admin-tag-editor__error mb-5 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
||||
{{ errorMessage }}
|
||||
</p>
|
||||
<AdminTagForm submit-label="태그 저장" :saving="saving" @submit="saveTag" />
|
||||
</section>
|
||||
</template>
|
||||
@@ -1,20 +1,40 @@
|
||||
<script setup>
|
||||
const posts = [
|
||||
{
|
||||
title: 'sori.studio를 직접 만들기 시작하며',
|
||||
excerpt: '블로그와 포털의 경계에 있는 개인 공간을 직접 구축하기 위한 첫 기록입니다.',
|
||||
tag: 'NOTE',
|
||||
publishedAt: '2026.04.29',
|
||||
to: '/posts/hello-sori-studio'
|
||||
},
|
||||
{
|
||||
title: '글쓰기 도구는 왜 직접 만들게 되는가',
|
||||
excerpt: '네이버 블로그, 티스토리, 워드프레스, Ghost를 거쳐 남은 취향의 빈칸을 정리합니다.',
|
||||
tag: 'DEV',
|
||||
publishedAt: '2026.04.29',
|
||||
to: '/posts/custom-writing-tool'
|
||||
const { data: posts } = await useFetch('/api/posts', {
|
||||
default: () => []
|
||||
})
|
||||
|
||||
/**
|
||||
* 날짜 표시 형식 변환
|
||||
* @param {string | null} value - ISO 날짜 문자열
|
||||
* @returns {string} 화면 표시 날짜
|
||||
*/
|
||||
const formatPostDate = (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 - API 게시물
|
||||
* @returns {Object} 게시물 카드 데이터
|
||||
*/
|
||||
const mapPostCard = (post) => ({
|
||||
title: post.title,
|
||||
excerpt: post.excerpt,
|
||||
tag: post.tags?.[0]?.toUpperCase() || 'POST',
|
||||
publishedAt: formatPostDate(post.publishedAt),
|
||||
to: `/posts/${post.slug}`
|
||||
})
|
||||
|
||||
const postCards = computed(() => posts.value.map(mapPostCard))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -76,6 +96,6 @@ const posts = [
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<PostCard v-for="post in posts" :key="post.to" :post="post" />
|
||||
<PostCard v-for="post in postCards" :key="post.to" :post="post" />
|
||||
</MainColumn>
|
||||
</template>
|
||||
|
||||
@@ -2,6 +2,18 @@
|
||||
definePageMeta({
|
||||
layout: 'page'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const slug = computed(() => String(route.params.slug || ''))
|
||||
|
||||
const { data: page } = await useFetch(() => `/api/pages/${slug.value}`)
|
||||
|
||||
if (!page.value) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: '페이지를 찾을 수 없습니다.'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -10,10 +22,10 @@ definePageMeta({
|
||||
Page
|
||||
</p>
|
||||
<h1 class="static-page__title mt-4 text-5xl font-semibold leading-tight">
|
||||
고정 페이지
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="static-page__description mt-6 text-lg leading-8 text-muted">
|
||||
About, Projects, Links, Contact 같은 고정 페이지는 헤더와 사이드바 없이 본문 중심으로 표시합니다.
|
||||
<p class="static-page__description mt-6 whitespace-pre-line text-lg leading-8 text-muted">
|
||||
{{ page.content }}
|
||||
</p>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@@ -2,43 +2,35 @@
|
||||
definePageMeta({
|
||||
layout: 'post'
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const slug = computed(() => String(route.params.slug || ''))
|
||||
|
||||
const { data: post } = await useFetch(() => `/api/posts/${slug.value}`)
|
||||
|
||||
if (!post.value) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: '게시물을 찾을 수 없습니다.'
|
||||
})
|
||||
}
|
||||
|
||||
const postTag = computed(() => post.value.tags?.[0]?.toUpperCase() || 'POST')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentRenderer>
|
||||
<ProseHeaderCard>
|
||||
<p class="post-detail__eyebrow text-sm uppercase text-white/70">
|
||||
NOTE
|
||||
{{ postTag }}
|
||||
</p>
|
||||
<h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
|
||||
sori.studio를 직접 만들기 시작하며
|
||||
{{ post.title }}
|
||||
</h1>
|
||||
</ProseHeaderCard>
|
||||
|
||||
<p>
|
||||
이 페이지는 게시물 본문 스타일을 확인하기 위한 초기 샘플입니다.
|
||||
실제 글 데이터와 마크다운 기반 위지윅 렌더링은 다음 단계에서 연결합니다.
|
||||
<p class="post-detail__content whitespace-pre-line">
|
||||
{{ post.content }}
|
||||
</p>
|
||||
|
||||
<ProseHeading :level="2">
|
||||
본문 스타일 기준
|
||||
</ProseHeading>
|
||||
<p>
|
||||
제목, 리스트, 인용구, 이미지, 버튼, 카드류 컴포넌트를 개별 컴포넌트로 분리해 이후 스타일 변경이 쉽도록 둡니다.
|
||||
</p>
|
||||
|
||||
<ProseList>
|
||||
<li>Regular image, Wide image, Full-width image 구분</li>
|
||||
<li>Callout, Toggle, File, Product 카드 분리</li>
|
||||
<li>YouTube, Twitter 임베드 영역 분리</li>
|
||||
</ProseList>
|
||||
|
||||
<ProseBlockquote>
|
||||
글쓰기 경험은 Ghost를 참고하되, 공개 화면은 sori.studio에 맞게 조정합니다.
|
||||
</ProseBlockquote>
|
||||
|
||||
<ProseCallout>
|
||||
<strong>초기 상태:</strong> 지금은 샘플 콘텐츠이며, DB와 관리자 글쓰기 연결 후 실제 데이터로 교체합니다.
|
||||
</ProseCallout>
|
||||
</ContentRenderer>
|
||||
</template>
|
||||
|
||||
@@ -1,9 +1,56 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const slug = computed(() => String(route.params.slug || ''))
|
||||
|
||||
const { data: tags } = await useFetch('/api/tags', {
|
||||
default: () => []
|
||||
})
|
||||
|
||||
const { data: posts } = await useFetch('/api/posts', {
|
||||
default: () => []
|
||||
})
|
||||
|
||||
/**
|
||||
* 날짜 표시 형식 변환
|
||||
* @param {string | null} value - ISO 날짜 문자열
|
||||
* @returns {string} 화면 표시 날짜
|
||||
*/
|
||||
const formatPostDate = (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}`
|
||||
}
|
||||
|
||||
const tag = computed(() => tags.value.find((item) => item.slug === slug.value))
|
||||
|
||||
const tagPosts = computed(() => posts.value
|
||||
.filter((post) => post.tags.includes(slug.value))
|
||||
.map((post) => ({
|
||||
title: post.title,
|
||||
excerpt: post.excerpt,
|
||||
tag: tag.value?.name || slug.value.toUpperCase(),
|
||||
publishedAt: formatPostDate(post.publishedAt),
|
||||
to: `/posts/${post.slug}`
|
||||
})))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MainColumn>
|
||||
<TagHeader title="NOTE" description="생각과 기록을 모아두는 태그 페이지입니다." />
|
||||
<section class="tag-posts site-section">
|
||||
<TagHeader
|
||||
:title="tag?.name || slug.toUpperCase()"
|
||||
:description="tag?.description || ''"
|
||||
/>
|
||||
<PostCard v-for="post in tagPosts" :key="post.to" :post="post" />
|
||||
<section v-if="tagPosts.length === 0" class="tag-posts site-section">
|
||||
<div class="tag-posts__empty site-section-body text-sm text-muted">
|
||||
태그별 글 목록은 DB 연결 후 표시합니다.
|
||||
이 태그에 연결된 글이 없습니다.
|
||||
</div>
|
||||
</section>
|
||||
</MainColumn>
|
||||
|
||||
Reference in New Issue
Block a user