관리자 페이지네이션 공통화

pages/admin/posts/index.vue

@@ -416,44 +416,6 @@ const hasActiveListFilters = computed(() => statusFilter.value !== 'all'
 /** 글 목록 전체 페이지 수 */
 const postPageCount = computed(() => Math.max(1, Number(postPagination.value.pageCount || 1)))
 
-/** 글 목록 페이지 버튼 항목 */
-const postPaginationItems = computed(() => {
-  const total = postPageCount.value
-  const current = postPage.value
-
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, index) => index + 1)
-  }
-
-  const pages = new Set([1, total, current - 1, current, current + 1])
-
-  if (current <= 4) {
-    pages.add(2)
-    pages.add(3)
-    pages.add(4)
-    pages.add(5)
-  }
-
-  if (current >= total - 3) {
-    pages.add(total - 4)
-    pages.add(total - 3)
-    pages.add(total - 2)
-    pages.add(total - 1)
-  }
-
-  const orderedPages = [...pages].filter((page) => page >= 1 && page <= total).sort((left, right) => left - right)
-  return orderedPages.reduce((items, page, index) => {
-    const previousPage = orderedPages[index - 1]
-
-    if (previousPage && page - previousPage > 1) {
-      items.push(`ellipsis-${previousPage}-${page}`)
-    }
-
-    items.push(page)
-    return items
-  }, [])
-})
-
 /**
  * 게시물 목록 썸네일 URL을 반환한다.
  * @param {Object} post - 게시물
@@ -1341,49 +1303,12 @@ watch(postPageCount, (pageCount) => {
       {{ totalPostCount === 0 ? '아직 작성된 글이 없습니다.' : '조건에 맞는 글이 없습니다.' }}
     </p>
 
-    <nav
-      v-if="postPageCount > 1"
-      class="admin-posts__pagination mt-6 flex flex-wrap items-center justify-center gap-2"
-      aria-label="글 목록 페이지"
-    >
-      <button
-        class="admin-posts__pagination-arrow grid size-9 place-items-center rounded-full border border-line bg-white text-ink transition hover:border-[#c8ced3] disabled:cursor-not-allowed disabled:opacity-40"
-        type="button"
-        :disabled="postPage <= 1"
-        aria-label="이전 페이지"
-        @click="setPostPage(postPage - 1)"
-      >
-        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="m15 18-6-6 6-6" />
-        </svg>
-      </button>
-      <template v-for="item in postPaginationItems" :key="item">
-        <span v-if="typeof item === 'string'" class="admin-posts__pagination-ellipsis px-2 text-sm font-semibold text-muted">
-          ...
-        </span>
-        <button
-          v-else
-          class="admin-posts__pagination-page grid size-9 place-items-center rounded-full text-sm font-semibold transition"
-          :class="item === postPage ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-white hover:text-ink'"
-          type="button"
-          :aria-current="item === postPage ? 'page' : undefined"
-          @click="setPostPage(item)"
-        >
-          {{ item }}
-        </button>
-      </template>
-      <button
-        class="admin-posts__pagination-arrow grid size-9 place-items-center rounded-full border border-line bg-white text-ink transition hover:border-[#c8ced3] disabled:cursor-not-allowed disabled:opacity-40"
-        type="button"
-        :disabled="postPage >= postPageCount"
-        aria-label="다음 페이지"
-        @click="setPostPage(postPage + 1)"
-      >
-        <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="m9 18 6-6-6-6" />
-        </svg>
-      </button>
-    </nav>
+    <AdminPagination
+      :page="postPage"
+      :page-count="postPageCount"
+      label="글 목록 페이지"
+      @update:page="setPostPage"
+    />
 
     <Teleport to="body">
       <div