zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zenn
2026-07-23 16:50:01 +09:00
parent f1bc980b61
commit 611abb5a76
8 changed files with 143 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
components/admin/AdminPagination.vue Normal file
View File

@@ -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>

1
docs/map.md
View File

@@ -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 | 통계 차트 라벨·페이지네이션·증감 계산 유틸 |

2
docs/todo.md
View File

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

5
docs/update.md
View File

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

4
package-lock.json generated
View File

@@ -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",

2
package.json
View File

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

88
pages/admin/media/index.vue
View File

@@ -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>

87
pages/admin/posts/index.vue
View File

@@ -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