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

Ghost형 툴바·초안 자동 저장·발행 모달, private 제거, 미디어 모달 통합, 발행일·수정일 표시 설정과 DB 마이그레이션 025·026을 반영한다. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-15 16:26:48 +09:00
parent ca1e17890b
commit 2074b0b93a
26 changed files with 1184 additions and 393 deletions
--- a/pages/admin/posts/[id].vue
+++ b/pages/admin/posts/[id].vue
@@ -6,6 +6,7 @@ definePageMeta({
 const route = useRoute()
 const id = computed(() => String(route.params.id || ''))
 const saving = ref(false)
+const autoSaving = ref(false)
 const deleting = ref(false)
 const errorMessage = ref('')
 const postForm = ref(null)
@@ -106,6 +107,43 @@ const savePost = async (payload) => {
  }
 }

+/**
+ * 초안 자동 저장(디바운스 PUT) — 발행·예약 글에는 사용하지 않는다.
+ * @param {Object} payload - `createPostPayload`와 동일 구조
+ * @returns {Promise<void>}
+ */
+const autosaveDraftPost = async (payload) => {
+  if (!id.value || autoSaving.value) {
+    return
+  }
+
+  autoSaving.value = true
+  try {
+    const updatedPost = await $fetch(`/admin/api/posts/${id.value}`, {
+      method: 'PUT',
+      body: payload
+    })
+
+    post.value = updatedPost
+    postForm.value?.markSaved()
+  } catch (error) {
+    const msg = error?.data?.message || error?.message || '자동 저장에 실패했습니다.'
+    showToast('error', msg)
+  } finally {
+    autoSaving.value = false
+  }
+}
+
+onBeforeRouteLeave(async () => {
+  await nextTick()
+  const payload = postForm.value?.takePendingAutosavePayload?.()
+  if (!payload) {
+    return true
+  }
+  await autosaveDraftPost(payload)
+  return true
+})
+
 /**
 * 게시물 삭제
 * @returns {Promise<void>} 삭제 처리 결과
@@ -148,13 +186,14 @@ onBeforeUnmount(() => {
    <AdminPostForm
      ref="postForm"
      :initial-post="post"
-      submit-label="변경 저장"
      :saving="saving"
+      :auto-saving="autoSaving"
      :can-view-post="isPublicPost(post)"
      :public-url="publicPostUrl"
      :deleting="deleting"
      show-delete
      @submit="savePost"
+      @autosave="autosaveDraftPost"
      @preview="previewPost"
      @delete="deletePost"
    />
--- a/pages/admin/posts/index.vue
+++ b/pages/admin/posts/index.vue
@@ -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
--- a/pages/admin/posts/new.vue
+++ b/pages/admin/posts/new.vue
@@ -4,6 +4,7 @@ definePageMeta({
 })

 const saving = ref(false)
+const autoSaving = ref(false)
 const errorMessage = ref('')
 const postForm = ref(null)
 const toast = ref(null)
@@ -68,6 +69,52 @@ const savePost = async (payload) => {
  }
 }

+/**
+ * 신규 초안 서버 자동 저장(POST). 성공 시 기본은 편집 URL로 교체 이동, 이탈 플러시 시에는 이동하지 않는다.
+ * @param {Object} payload - 게시물 입력값
+ * @param {{ skipNavigate?: boolean }} options - `skipNavigate`가 true면 생성만 하고 URL은 바꾸지 않는다.
+ * @returns {Promise<void>}
+ */
+const createDraftAutosave = async (payload, options = {}) => {
+  const skipNavigate = Boolean(options.skipNavigate)
+  if (autoSaving.value) {
+    return
+  }
+
+  autoSaving.value = true
+  errorMessage.value = ''
+
+  try {
+    const post = await $fetch('/admin/api/posts', {
+      method: 'POST',
+      body: payload
+    })
+
+    postForm.value?.markSaved()
+    postForm.value?.clearAutosave()
+    postForm.value?.allowNextRouteLeave()
+    if (!skipNavigate) {
+      await navigateTo(`/admin/posts/${post.id}`, { replace: true })
+    }
+  } catch (error) {
+    const msg = error?.data?.message || error?.message || '자동 저장에 실패했습니다.'
+    errorMessage.value = msg
+    showToast('error', msg)
+  } finally {
+    autoSaving.value = false
+  }
+}
+
+onBeforeRouteLeave(async () => {
+  await nextTick()
+  const payload = postForm.value?.takePendingAutosavePayload?.()
+  if (!payload) {
+    return true
+  }
+  await createDraftAutosave(payload, { skipNavigate: true })
+  return true
+})
+
 onBeforeUnmount(() => {
  window.clearTimeout(toastTimer)
 })
@@ -78,7 +125,14 @@ onBeforeUnmount(() => {
    <p v-if="errorMessage" class="admin-post-editor__error mx-6 mt-6 rounded border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
      {{ errorMessage }}
    </p>
-    <AdminPostForm ref="postForm" submit-label="글 저장" :saving="saving" @submit="savePost" @preview="previewPost" />
+    <AdminPostForm
+      ref="postForm"
+      :saving="saving"
+      :auto-saving="autoSaving"
+      @submit="savePost"
+      @autosave="createDraftAutosave"
+      @preview="previewPost"
+    />
    <div
      v-if="toast"
      class="admin-post-editor__toast fixed right-5 top-5 z-50 rounded border px-4 py-3 text-sm font-semibold shadow-lg"