zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

관리자 글쓰기·목록 UX 개선 및 POST 설정 추가(v1.1.14~v1.1.18)

Browse Source 
Ghost형 툴바·초안 자동 저장·발행 모달, private 제거, 미디어 모달 통합,
발행일·수정일 표시 설정과 DB 마이그레이션 025·026을 반영한다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-15 16:26:48 +09:00
parent ca1e17890b
commit 2074b0b93a
26 changed files with 1184 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
pages/admin/posts/index.vue
View File

@@ -17,22 +17,34 @@ const { data: tags } = await useFetch('/admin/api/tags', {
default: () => []
})
const { data: siteSettings } = await useFetch('/admin/api/settings', {
default: () => ({ showPostUpdatedAt: false })
})
/**
* 날짜 표시 형식 변환
* @param {string | null} value - ISO 날짜 문자열
* @returns {string} 화면 표시 날짜
* 게시물 발행일 라벨을 반환한다.
* @param {Object} post - 게시물
* @returns {string} 발행일 또는 '-'
*/
const formatDate = (value) => {
if (!value) {
const getPublishDateLabel = (post) => {
if (!post.publishedAt) {
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 formatPostDateTime(post.publishedAt)
}
return `${year}.${month}.${day}`
/**
* 게시물 수정일 보조 라벨을 반환한다.
* @param {Object} post - 게시물
* @returns {string} 수정일 라벨 또는 빈 문자열
*/
const getUpdatedDateLabel = (post) => {
if (!siteSettings.value?.showPostUpdatedAt || !wasPostUpdatedAfterPublish(post)) {
return ''
}
return `수정: ${formatPostDateTime(post.updatedAt)}`
}
/**
@@ -46,7 +58,7 @@ const isPublicPost = (post) => post.status === 'published'
/**
* 게시물 상태 필터 키 생성
* @param {Object} post - 게시물
* @returns {'published' | 'scheduled' | 'draft' | 'private'} 상태 키
* @returns {'published' | 'scheduled' | 'draft'} 상태 키
*/
const getPostStatusKey = (post) => {
if (post.status === 'published' && !isPublicPost(post)) {
@@ -57,10 +69,6 @@ const getPostStatusKey = (post) => {
return 'published'
}
if (post.status === 'private') {
return 'private'
}
return 'draft'
}
@@ -80,10 +88,6 @@ const getPostStatusLabel = (post) => {
return '발행'
}
if (statusKey === 'private') {
return '비공개'
}
return '초안'
}
@@ -171,7 +175,7 @@ const deletePost = async (post) => {
<template>
<section class="admin-posts bg-paper p-6">
<div class="admin-posts__header flex items-center justify-between gap-4">
<div class="admin-posts__header flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<div>
<p class="admin-posts__eyebrow text-xs font-semibold uppercase text-muted">
Posts
@@ -180,37 +184,38 @@ const deletePost = async (post) => {
글 목록
</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>
<div class="admin-posts__filters mt-6 flex flex-wrap items-center gap-2">
<label class="admin-posts__filter">
<span class="sr-only">상태 필터</span>
<select v-model="statusFilter" class="admin-posts__filter-select h-10 rounded border border-line bg-white px-3 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
<option value="all">전체 상태</option>
<option value="published">발행</option>
<option value="draft">초안</option>
<option value="scheduled">예약</option>
</select>
</label>
<label class="admin-posts__filter">
<span class="sr-only">태그 필터</span>
<select v-model="tagFilter" class="admin-posts__filter-select h-10 rounded border border-line bg-white px-3 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
<option value="all">전체 태그</option>
<option v-for="tag in usedTagSlugs" :key="tag" :value="tag">
{{ getTagName(tag) }}
</option>
</select>
</label>
<label class="admin-posts__filter">
<span class="sr-only">정렬</span>
<select v-model="sortOrder" class="admin-posts__filter-select h-10 rounded border border-line bg-white px-3 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
<option value="newest">최신순</option>
<option value="oldest">오래된순</option>
</select>
</label>
<div class="admin-posts__header-actions flex min-w-0 flex-1 flex-wrap items-center justify-start gap-2 lg:flex-nowrap lg:justify-end">
<div class="admin-posts__filters flex min-w-0 flex-wrap items-center gap-2">
<label class="admin-posts__filter">
<span class="sr-only">상태 필터</span>
<select v-model="statusFilter" class="admin-posts__filter-select h-10 rounded border border-line bg-white px-3 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
<option value="all">전체 상태</option>
<option value="published">발행</option>
<option value="draft">초안</option>
<option value="scheduled">예약</option>
</select>
</label>
<label class="admin-posts__filter">
<span class="sr-only">태그 필터</span>
<select v-model="tagFilter" class="admin-posts__filter-select h-10 rounded border border-line bg-white px-3 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
<option value="all">전체 태그</option>
<option v-for="tag in usedTagSlugs" :key="tag" :value="tag">
{{ getTagName(tag) }}
</option>
</select>
</label>
<label class="admin-posts__filter">
<span class="sr-only">정렬</span>
<select v-model="sortOrder" class="admin-posts__filter-select h-10 rounded border border-line bg-white px-3 text-sm text-[#394047] outline-none transition-colors hover:border-[#c8ced3] focus:border-[#8e9cac]">
<option value="newest">최신순</option>
<option value="oldest">오래된순</option>
</select>
</label>
</div>
<NuxtLink class="admin-posts__new shrink-0 rounded bg-[#15171a] px-4 py-2 text-sm font-semibold text-white" to="/admin/posts/new">
새 글
</NuxtLink>
</div>
</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">
@@ -224,7 +229,7 @@ const deletePost = async (post) => {
<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>
<th class="admin-posts__cell px-4 py-3">관리</th>
</tr>
</thead>
@@ -250,9 +255,6 @@ const deletePost = async (post) => {
>
{{ getPostStatusLabel(post) }}
</span>
<p v-if="post.publishedAt" class="admin-posts__published-at mt-1 text-xs text-muted">
{{ formatDate(post.publishedAt) }}
</p>
</td>
<td class="admin-posts__cell px-4 py-4">
<div v-if="post.tags.length" class="admin-posts__tag-list flex flex-wrap gap-1.5">
@@ -267,7 +269,12 @@ const deletePost = async (post) => {
<span v-else class="admin-posts__tag-empty text-muted">-</span>
</td>
<td class="admin-posts__cell px-4 py-4">
{{ formatDate(post.updatedAt) }}
<p class="admin-posts__publish-date text-[#394047]">
{{ getPublishDateLabel(post) }}
</p>
<p v-if="getUpdatedDateLabel(post)" class="admin-posts__updated-date mt-1 text-xs text-muted">
{{ getUpdatedDateLabel(post) }}
</p>
</td>
<td class="admin-posts__cell px-4 py-4">
<button