게시물과 페이지 공개 상태 확장 v1.5.4

pages/admin/pages/[id].vue

@@ -125,7 +125,7 @@ onBeforeUnmount(() => {
       ref="pageForm"
       :initial-page="page"
       :saving="saving"
-      :can-view-page="Boolean(page?.slug)"
+      :can-view-page="Boolean(page?.slug) && page?.status === 'published'"
       :public-url="publicPageUrl"
       :deleting="deleting"
       show-delete

pages/admin/pages/index.vue

@@ -12,6 +12,40 @@ const { data: pages, refresh } = await useFetch('/admin/api/pages', {
   default: () => []
 })
 
+/**
+ * 페이지 상태 표시 문자열 생성
+ * @param {Object} page - 페이지
+ * @returns {string} 상태 표시 문자열
+ */
+const getPageStatusLabel = (page) => {
+  if (page.status === 'draft') {
+    return '초안'
+  }
+
+  if (page.status === 'private') {
+    return '비공개'
+  }
+
+  return '공개'
+}
+
+/**
+ * 페이지 상태 텍스트 클래스 생성
+ * @param {Object} page - 페이지
+ * @returns {string} 상태 텍스트 클래스
+ */
+const getPageStatusClass = (page) => {
+  if (page.status === 'draft') {
+    return 'font-bold text-[#fb2d8d]'
+  }
+
+  if (page.status === 'private') {
+    return 'font-bold text-[#15171a]'
+  }
+
+  return 'text-[#99A3AD]'
+}
+
 /**
  * 날짜 표시 형식 변환
  * @param {string | null} value - ISO 날짜 문자열
@@ -83,6 +117,7 @@ const deletePage = async (page) => {
         <thead class="admin-pages__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
           <tr>
             <th class="admin-pages__cell px-4 py-3">제목</th>
+            <th class="admin-pages__cell px-4 py-3">상태</th>
             <th class="admin-pages__cell px-4 py-3">수정일</th>
             <th class="admin-pages__cell admin-pages__cell-actions w-12 px-2 py-3 text-right">
               <span class="sr-only">관리</span>
@@ -99,6 +134,11 @@ const deletePage = async (page) => {
                 /pages/{{ page.slug }}
               </p>
             </td>
+            <td class="admin-pages__cell px-4 py-4">
+              <span class="admin-pages__status-text text-xs" :class="getPageStatusClass(page)">
+                {{ getPageStatusLabel(page) }}
+              </span>
+            </td>
             <td class="admin-pages__cell px-4 py-4">
               {{ formatDate(page.updatedAt) }}
             </td>