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

2026-07-23 16:50:01 +09:00
parent f1bc980b61
commit 611abb5a76
8 changed files with 143 additions and 166 deletions
--- a/components/admin/AdminPagination.vue
+++ b/components/admin/AdminPagination.vue
@@ -0,0 +1,120 @@
+<script setup>
+const props = defineProps({
+  /** 현재 페이지 */
+  page: {
+    type: Number,
+    default: 1
+  },
+  /** 전체 페이지 수 */
+  pageCount: {
+    type: Number,
+    default: 1
+  },
+  /** 페이지네이션 영역 접근성 라벨 */
+  label: {
+    type: String,
+    default: '페이지'
+  }
+})
+
+const emit = defineEmits(['update:page'])
+
+/** @type {import('vue').ComputedRef<number>} */
+const totalPageCount = computed(() => Math.max(1, Number(props.pageCount) || 1))
+
+/** @type {import('vue').ComputedRef<number>} */
+const currentPage = computed(() => Math.min(Math.max(Number(props.page) || 1, 1), totalPageCount.value))
+
+/** @type {import('vue').ComputedRef<Array<number|string>>} */
+const paginationItems = computed(() => {
+  const total = totalPageCount.value
+  const current = currentPage.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
+  }, [])
+})
+
+/**
+ * 페이지 변경을 요청한다.
+ * @param {number} page - 이동할 페이지
+ * @returns {void}
+ */
+const updatePage = (page) => {
+  emit('update:page', Math.min(Math.max(Number(page) || 1, 1), totalPageCount.value))
+}
+</script>
+
+<template>
+  <nav
+    v-if="totalPageCount > 1"
+    class="admin-pagination mt-6 flex flex-wrap items-center justify-center gap-2"
+    :aria-label="label"
+  >
+    <button
+      class="admin-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="currentPage <= 1"
+      aria-label="이전 페이지"
+      @click="updatePage(currentPage - 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 paginationItems" :key="item">
+      <span v-if="typeof item === 'string'" class="admin-pagination__ellipsis px-2 text-sm font-semibold text-muted">
+        ...
+      </span>
+      <button
+        v-else
+        class="admin-pagination__page grid size-9 place-items-center rounded-full text-sm font-semibold transition"
+        :class="item === currentPage ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-white hover:text-ink'"
+        type="button"
+        :aria-current="item === currentPage ? 'page' : undefined"
+        @click="updatePage(item)"
+      >
+        {{ item }}
+      </button>
+    </template>
+    <button
+      class="admin-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="currentPage >= totalPageCount"
+      aria-label="다음 페이지"
+      @click="updatePage(currentPage + 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>
+</template>