v1.2.0: 관리자 글 목록·슬러그·예약 시각 UX 정리

발행일 기준 목록 정렬, 추천 필터·별 표시, 슬러그 자동/수동 구분, 예약 날짜·시간 클릭 영역 수정.

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

pages/admin/posts/index.vue

@@ -7,6 +7,7 @@ const deletingId = ref('')
 const errorMessage = ref('')
 const statusFilter = ref('all')
 const tagFilter = ref('all')
+const featuredFilter = ref('all')
 const sortOrder = ref('newest')
 
 const { data: posts, refresh } = await useFetch('/admin/api/posts', {
@@ -47,6 +48,17 @@ const getUpdatedDateLabel = (post) => {
   return `수정: ${formatPostDateTime(post.updatedAt)}`
 }
 
+/**
+ * 목록 정렬용 시각(ms). 발행일이 있으면 발행일, 없으면 수정일(초안 등).
+ * @param {Object} post - 게시물
+ * @returns {number} 정렬 기준 시각
+ */
+const getListSortTimestamp = (post) => {
+  const sortAt = post.publishedAt || post.updatedAt || post.createdAt
+
+  return new Date(sortAt || 0).getTime()
+}
+
 /**
  * 게시물 공개 여부 확인
  * @param {Object} post - 게시물
@@ -131,17 +143,30 @@ const usedTagSlugs = computed(() => {
   return [...slugs].sort((a, b) => getTagName(a).localeCompare(getTagName(b), 'ko'))
 })
 
+/** 전체 게시물 수 */
+const totalPostCount = computed(() => posts.value.length)
+
+/** 추천(`isFeatured`) 게시물 수 */
+const featuredPostCount = computed(() => posts.value.filter((post) => post.isFeatured).length)
+
+/** 필터가 적용됐는지 */
+const hasActiveListFilters = computed(() => statusFilter.value !== 'all'
+  || tagFilter.value !== 'all'
+  || featuredFilter.value !== 'all')
+
 const filteredPosts = computed(() => {
   const filtered = posts.value.filter((post) => {
     const matchesStatus = statusFilter.value === 'all' || getPostStatusKey(post) === statusFilter.value
     const matchesTag = tagFilter.value === 'all' || (post.tags || []).includes(tagFilter.value)
+    const matchesFeatured = featuredFilter.value === 'all'
+      || (featuredFilter.value === 'featured' && post.isFeatured)
 
-    return matchesStatus && matchesTag
+    return matchesStatus && matchesTag && matchesFeatured
   })
 
   return [...filtered].sort((a, b) => {
-    const left = new Date(a.updatedAt || a.createdAt || 0).getTime()
-    const right = new Date(b.updatedAt || b.createdAt || 0).getTime()
+    const left = getListSortTimestamp(a)
+    const right = getListSortTimestamp(b)
 
     return sortOrder.value === 'oldest' ? left - right : right - left
   })
@@ -183,6 +208,17 @@ const deletePost = async (post) => {
         <h1 class="admin-posts__title mt-2 text-3xl font-semibold">
           글 목록
         </h1>
+        <p class="admin-posts__count mt-2 text-sm text-muted">
+          총 {{ totalPostCount }}개
+          <template v-if="featuredPostCount > 0">
+            <span class="admin-posts__count-separator text-[#c8ced3]"> · </span>
+            <span class="admin-posts__count-featured">추천 {{ featuredPostCount }}개</span>
+          </template>
+          <template v-if="hasActiveListFilters && filteredPosts.length !== totalPostCount">
+            <span class="admin-posts__count-separator text-[#c8ced3]"> · </span>
+            <span class="admin-posts__count-filtered">표시 {{ filteredPosts.length }}개</span>
+          </template>
+        </p>
       </div>
       <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">
@@ -204,6 +240,13 @@ const deletePost = async (post) => {
               </option>
             </select>
           </label>
+          <label class="admin-posts__filter">
+            <span class="sr-only">추천 필터</span>
+            <select v-model="featuredFilter" 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="featured">추천만</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]">
@@ -226,6 +269,10 @@ const deletePost = async (post) => {
       <table class="admin-posts__table-inner w-full border-collapse text-left text-sm">
         <thead class="admin-posts__table-head bg-[#f5f5f2] text-xs uppercase text-muted">
           <tr>
+            <th class="admin-posts__cell admin-posts__cell-featured w-10 px-2 py-3 text-center">
+              <span class="sr-only">추천</span>
+              <span class="inline-flex size-4 items-center justify-center text-[#f5a623]" aria-hidden="true">★</span>
+            </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>
@@ -235,6 +282,18 @@ const deletePost = async (post) => {
         </thead>
         <tbody class="admin-posts__table-body divide-y divide-line bg-white">
           <tr v-for="post in filteredPosts" :key="post.id" class="admin-posts__row">
+            <td class="admin-posts__cell admin-posts__cell-featured w-10 px-2 py-4 text-center">
+              <span
+                v-if="post.isFeatured"
+                class="admin-posts__featured-star inline-flex size-8 items-center justify-center text-[#f5a623]"
+                title="추천 글"
+                aria-label="추천 글"
+              >
+                <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+                </svg>
+              </span>
+            </td>
             <td class="admin-posts__cell px-4 py-4">
               <div class="admin-posts__title-row flex flex-wrap items-center gap-x-2 gap-y-1">
                 <NuxtLink class="admin-posts__title-link font-semibold hover:opacity-70" :to="`/admin/posts/${post.id}`">