예약 발행 기능 추가

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(', ') || '-' }}