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

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

Co-authored-by: Cursor <cursoragent@cursor.com>

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"
     />

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

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"

pages/admin/settings/index.vue

@@ -33,7 +33,8 @@ const form = reactive({
   logoText: settings.value?.logoText || '井',
   logoUrl: settings.value?.logoUrl || '',
   faviconUrl: settings.value?.faviconUrl || '',
-  copyrightText: settings.value?.copyrightText || '©2026 sori.studio'
+  copyrightText: settings.value?.copyrightText || '©2026 sori.studio',
+  showPostUpdatedAt: Boolean(settings.value?.showPostUpdatedAt)
 })
 
 /**
@@ -49,6 +50,12 @@ const settingsNavGroups = [
       { id: 'admin-settings-section-misc', label: '기타 설정', keywords: 'logo url copyright favicon' }
     ]
   },
+  {
+    heading: '게시물',
+    items: [
+      { id: 'admin-settings-section-post', label: 'POST 설정', keywords: 'post updated date display 수정일' }
+    ]
+  },
   {
     heading: '사이트',
     items: [
@@ -242,7 +249,8 @@ const buildSiteSettingsPayload = () => ({
   logoText: form.logoText || '井',
   logoUrl: form.logoUrl,
   faviconUrl: form.faviconUrl,
-  copyrightText: form.copyrightText
+  copyrightText: form.copyrightText,
+  showPostUpdatedAt: Boolean(form.showPostUpdatedAt)
 })
 
 /**
@@ -667,6 +675,44 @@ onBeforeUnmount(() => {
             </div>
           </section>
 
+          <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
+            게시물
+          </h2>
+          <section
+            id="admin-settings-section-post"
+            class="admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
+          >
+            <div class="admin-settings-screen__card-head mb-4">
+              <h2 class="text-lg font-semibold text-[#15171a]">
+                POST 설정
+              </h2>
+              <p class="mt-1 text-sm leading-relaxed text-[#657080]">
+                공개 글 상세·관리자 글 목록에서 발행 후 수정이 있었을 때 수정일을 함께 표시합니다.
+              </p>
+            </div>
+            <label class="admin-settings-screen__toggle flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-[#e6e8eb] bg-[#f7f8fa] px-4 py-4">
+              <span class="grid gap-1">
+                <span class="text-sm font-semibold text-[#15171a]">수정일 표시</span>
+                <span class="text-xs text-[#657080]">발행일 아래에 「수정: YYYY.MM.DD 오전/오후 HH:MM」 형식으로 노출</span>
+              </span>
+              <input
+                v-model="form.showPostUpdatedAt"
+                class="admin-settings-screen__toggle-input size-5 shrink-0 accent-[#15171a]"
+                type="checkbox"
+              >
+            </label>
+            <div class="admin-settings-screen__actions mt-6 flex justify-end border-t border-[#eceff2] pt-6">
+              <button
+                class="rounded-md bg-[#15171a] px-5 py-2.5 text-sm font-semibold text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                type="button"
+                :disabled="saving"
+                @click="persistSiteSettings({ successToast: 'POST 설정이 저장되었습니다.' })"
+              >
+                {{ saving ? '저장 중' : 'POST 설정 저장' }}
+              </button>
+            </div>
+          </section>
+
           <h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
             사이트
           </h2>

pages/post/[slug].vue

@@ -13,6 +13,9 @@ const { data: tags } = await useFetch('/api/tags', {
 const { data: posts } = await useFetch('/api/posts', {
   default: () => []
 })
+const { data: siteSettings } = await useFetch('/api/site-settings', {
+  default: () => ({ showPostUpdatedAt: false })
+})
 
 if (!post.value) {
   throw createError({
@@ -43,6 +46,13 @@ const primaryTagMeta = computed(() => {
 })
 
 const publishedAtLabel = computed(() => formatPostDate(post.value.publishedAt || null))
+const updatedAtLabel = computed(() => {
+  if (!siteSettings.value?.showPostUpdatedAt || !wasPostUpdatedAfterPublish(post.value)) {
+    return ''
+  }
+
+  return `수정: ${formatPostDateTime(post.value.updatedAt)}`
+})
 const authorLabel = computed(() => 'sori.studio')
 const shareModalOpen = ref(false)
 const copyButtonLabel = ref('Copy link')
@@ -234,6 +244,10 @@ useHead(() => ({
               {{ publishedAtLabel }}
             </time>
 
+            <time v-if="updatedAtLabel" :datetime="post.updatedAt" class="admin-post-detail__updated-at">
+              {{ updatedAtLabel }}
+            </time>
+
             <a href="#" class="hover:opacity-75">
               {{ authorLabel }}
             </a>