예약 발행 기능 추가

pages/admin/posts/[id].vue

@@ -21,6 +21,14 @@ if (!post.value) {
   })
 }
 
+/**
+ * 공개 화면에서 접근 가능한 게시물 여부 확인
+ * @param {Object} value - 게시물
+ * @returns {boolean} 공개 접근 가능 여부
+ */
+const isPublicPost = (value) => value?.status === 'published'
+  && (!value.publishedAt || new Date(value.publishedAt) <= new Date())
+
 /**
  * 저장 상태 토스트 표시
  * @param {'success'|'error'|'info'} type - 토스트 타입
@@ -127,7 +135,7 @@ onBeforeUnmount(() => {
       </div>
       <div class="admin-post-edit__actions flex gap-2">
         <NuxtLink
-          v-if="post.status === 'published'"
+          v-if="isPublicPost(post)"
           class="admin-post-edit__view rounded border border-line bg-white px-4 py-2 text-sm font-semibold"
           :to="`/post/${post.slug}`"
           target="_blank"

pages/admin/posts/index.vue

@@ -28,6 +28,35 @@ const formatDate = (value) => {
   return `${year}.${month}.${day}`
 }
 
+/**
+ * 게시물 공개 여부 확인
+ * @param {Object} post - 게시물
+ * @returns {boolean} 공개 여부
+ */
+const isPublicPost = (post) => post.status === 'published'
+  && (!post.publishedAt || new Date(post.publishedAt) <= new Date())
+
+/**
+ * 게시물 상태 표시 문자열 생성
+ * @param {Object} post - 게시물
+ * @returns {string} 상태 표시 문자열
+ */
+const getPostStatusLabel = (post) => {
+  if (post.status === 'published' && !isPublicPost(post)) {
+    return '예약'
+  }
+
+  if (post.status === 'published') {
+    return '발행'
+  }
+
+  if (post.status === 'private') {
+    return '비공개'
+  }
+
+  return '초안'
+}
+
 /**
  * 게시물 삭제
  * @param {Object} post - 삭제할 게시물
@@ -96,7 +125,20 @@ const deletePost = async (post) => {
               </p>
             </td>
             <td class="admin-posts__cell px-4 py-4">
-              {{ post.status }}
+              <span
+                class="admin-posts__status rounded px-2 py-1 text-xs font-semibold"
+                :class="{
+                  'bg-green-50 text-green-700': getPostStatusLabel(post) === '발행',
+                  'bg-blue-50 text-blue-700': getPostStatusLabel(post) === '예약',
+                  'bg-[#f5f5f2] text-muted': getPostStatusLabel(post) === '초안',
+                  'bg-red-50 text-red-700': getPostStatusLabel(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">
               {{ post.tags.join(', ') || '-' }}