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

pages/admin/media/index.vue

@@ -663,43 +663,6 @@ const isAllFilteredMediaSelected = computed(() => {
   return filteredSelectableMediaUrls.value.every((url) => selectedMediaUrls.value.includes(url))
 })
 
-const mediaPaginationItems = computed(() => {
-  const total = mediaPageCount.value
-  const current = mediaPage.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 - 이동할 페이지
@@ -1706,53 +1669,16 @@ watch(() => mediaPagination.value.page, (page) => {
           </div>
         </div>
 
-        <nav
-          v-if="mediaPageCount > 1"
-          class="admin-media__pagination mt-6 flex flex-wrap items-center justify-center gap-2"
-          aria-label="미디어 페이지"
-        >
-          <button
-            class="admin-media__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="mediaPage <= 1"
-            aria-label="이전 페이지"
-            @click="setMediaPage(mediaPage - 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 mediaPaginationItems" :key="item">
-            <span v-if="typeof item === 'string'" class="admin-media__pagination-ellipsis px-2 text-sm font-semibold text-muted">
-              ...
-            </span>
-            <button
-              v-else
-              class="admin-media__pagination-page grid size-9 place-items-center rounded-full text-sm font-semibold transition"
-              :class="item === mediaPage ? 'bg-[#15171a] text-white' : 'text-muted hover:bg-white hover:text-ink'"
-              type="button"
-              :aria-current="item === mediaPage ? 'page' : undefined"
-              @click="setMediaPage(item)"
-            >
-              {{ item }}
-            </button>
-          </template>
-          <button
-            class="admin-media__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="mediaPage >= mediaPageCount"
-            aria-label="다음 페이지"
-            @click="setMediaPage(mediaPage + 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>
-
         <p v-else class="admin-media__empty mt-5 border border-dashed border-line bg-white p-8 text-center text-sm text-muted">
           표시할 미디어가 없습니다.
         </p>
+
+        <AdminPagination
+          :page="mediaPage"
+          :page-count="mediaPageCount"
+          label="미디어 페이지"
+          @update:page="setMediaPage"
+        />
       </div>
     </div>