게시물과 페이지 공개 상태 확장 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>

pages/admin/posts/index.vue

@@ -78,9 +78,13 @@ const isPublicPost = (post) => post.status === 'published'
 /**
  * 게시물 상태 필터 키 생성
  * @param {Object} post - 게시물
- * @returns {'published' | 'scheduled' | 'draft'} 상태 키
+ * @returns {'published' | 'scheduled' | 'draft' | 'members' | 'private'} 상태 키
  */
 const getPostStatusKey = (post) => {
+  if (post.status === 'members' || post.status === 'private') {
+    return post.status
+  }
+
   if (post.status === 'published' && !isPublicPost(post)) {
     return 'scheduled'
   }
@@ -108,6 +112,14 @@ const getPostStatusLabel = (post) => {
     return '발행'
   }
 
+  if (statusKey === 'members') {
+    return '멤버십'
+  }
+
+  if (statusKey === 'private') {
+    return '비공개'
+  }
+
   return '초안'
 }
 
@@ -127,6 +139,14 @@ const getPostStatusClass = (post) => {
     return 'font-bold text-[#fb2d8d]'
   }
 
+  if (statusKey === 'members') {
+    return 'font-bold text-[#5a63d8]'
+  }
+
+  if (statusKey === 'private') {
+    return 'font-bold text-[#15171a]'
+  }
+
   if (statusKey === 'published') {
     return 'text-[#99A3AD]'
   }
@@ -411,6 +431,8 @@ watch(openPostMenuId, async (postId) => {
               <option value="published">발행</option>
               <option value="draft">초안</option>
               <option value="scheduled">예약</option>
+              <option value="members">멤버십</option>
+              <option value="private">비공개</option>
             </select>
           </label>
           <label class="admin-posts__filter">