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

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>

docs/map.md

@@ -188,6 +188,7 @@
 | components/admin/AdminUnsavedChangesModal.vue | 관리자 편집 화면 공통 미저장 변경사항 이탈 확인 모달(상단 40px 위치) |
 | components/admin/AdminConfirmModal.vue | 관리자 공통 확인 모달(제목·본문 슬롯·확인/취소 버튼, primary/danger 톤) |
 | components/admin/AdminToast.vue | 관리자 공통 우측 상단 토스트 표시(성공·오류·안내 톤, 화면별 상단 위치 조정) |
+| components/admin/AdminPagination.vue | 관리자 공통 번호형 페이지네이션(이전·다음 화살표, 첫/끝/현재 주변 페이지, ellipsis 접기) |
 | components/admin/AdminAnalyticsTrendChart.vue | 관리자 통계 추이 막대 차트(축 라벨·증감 툴팁·기간 페이지 이동) |
 | lib/analytics-chart-ui.js | 통계 차트 라벨·페이지네이션·증감 계산 유틸 |
 

docs/todo.md

@@ -9,7 +9,7 @@
   - `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
   - `pages/admin/media/index.vue`: 미디어 목록, 폴더 트리, 상세 모달, 재생성 액션을 작은 단위로 분리.
 - 관리자 UI 공통 컴포넌트 정리.
-  - 모달 패널, 필터 팝오버, 페이지네이션 툴바의 radius·shadow·z-index·색상 규칙을 공통화.
+  - 모달 패널, 필터 팝오버의 radius·shadow·z-index·색상 규칙을 공통화.
   - 게시글/페이지/미디어 목록의 검색·필터·정렬 레이아웃을 같은 패턴으로 유지.
 - 최근 브라우저 회귀 테스트 추가.
   - 태그 추천 선택 후 다음 태그 후보가 포커스 해제 없이 유지되는지 확인.

docs/update.md

@@ -1,5 +1,10 @@
 # 업데이트 이력
 
+## v1.11.6
+
+- 관리자 번호형 페이지네이션을 공용 `AdminPagination` 컴포넌트로 분리.
+- 게시글 목록과 미디어 목록의 페이지 버튼 계산·렌더링 중복 제거.
+
 ## v1.11.5
 
 - 관리자 토스트 표시 마크업을 공용 `AdminToast` 컴포넌트로 분리.

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "1.11.5",
+  "version": "1.11.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "1.11.5",
+      "version": "1.11.6",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "1.11.5",
+  "version": "1.11.6",
   "private": true,
   "type": "module",
   "imports": {

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>
 

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
+    <AdminPagination
-      v-if="postPageCount > 1"
+      :page="postPage"
-      class="admin-posts__pagination mt-6 flex flex-wrap items-center justify-center gap-2"
+      :page-count="postPageCount"
-      aria-label="글 목록 페이지"
+      label="글 목록 페이지"
-    >
+      @update:page="setPostPage"
-      <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>
 
     <Teleport to="body">
       <div