File name
Commit message
Commit date
File name
Commit message
Commit date
import Link from "next/link";
import type { ReactNode } from "react";
interface PaginationProps {
/** 1-based. */
currentPage: number;
totalPages: number;
/** 각 페이지 번호로 이동할 href를 만들어 준다 — 라우팅은 소비처 책임. */
buildHref: (page: number) => string;
/** 한 번에 보여줄 번호 개수. 기본 5. */
windowSize?: number;
}
const ITEM_CLASSES =
"inline-flex size-9 items-center justify-center rounded-md text-body-sm transition-colors duration-200";
const ENABLED_CLASSES = "text-foreground-muted hover:bg-surface-muted hover:text-foreground";
const DISABLED_CLASSES = "text-foreground-subtle opacity-50";
const CURRENT_CLASSES = "bg-primary text-on-primary";
/** 현재 페이지를 중심으로 windowSize개 번호를 [1, totalPages] 범위 안에서 슬라이딩한다. */
function getPageWindow(currentPage: number, totalPages: number, windowSize: number): number[] {
if (totalPages < 1) {
return [];
}
const half = Math.floor(windowSize / 2);
let start = Math.max(1, currentPage - half);
const end = Math.min(totalPages, start + windowSize - 1);
start = Math.max(1, end - windowSize + 1);
const pages: number[] = [];
for (let page = start; page <= end; page += 1) {
pages.push(page);
}
return pages;
}
interface PaginationItemProps {
disabled: boolean;
href: string;
label: string;
children: ReactNode;
}
/** 처음·이전·다음·끝 이동 항목 — 비활성일 때는 링크 대신 aria-disabled span으로 렌더한다. */
function PaginationItem({ disabled, href, label, children }: PaginationItemProps) {
if (disabled) {
return (
<span aria-disabled="true" aria-label={label} className={`${ITEM_CLASSES} ${DISABLED_CLASSES}`}>
{children}
</span>
);
}
return (
<Link href={href} aria-label={label} className={`${ITEM_CLASSES} ${ENABLED_CLASSES}`}>
{children}
</Link>
);
}
/**
* 페이지네이션 — « ‹ [번호들] › ». 페이지 이동은 `next/link` href 기반이며 실제 라우팅(쿼리
* 구성 등)은 `buildHref`를 통해 호출부(feature)가 책임진다. 첫/마지막 페이지에서는 처음·이전·
* 다음·끝 이동이 비활성 처리된다.
*/
export function Pagination({
currentPage,
totalPages,
buildHref,
windowSize = 5,
}: PaginationProps) {
const pages = getPageWindow(currentPage, totalPages, windowSize);
const isFirst = currentPage <= 1;
const isLast = currentPage >= totalPages;
return (
<nav aria-label="페이지네이션" className="flex items-center justify-center gap-1">
<PaginationItem disabled={isFirst} href={buildHref(1)} label="처음 페이지">
«
</PaginationItem>
<PaginationItem
disabled={isFirst}
href={buildHref(Math.max(1, currentPage - 1))}
label="이전 페이지"
>
‹
</PaginationItem>
{pages.map((page) => (
<Link
key={page}
href={buildHref(page)}
aria-current={page === currentPage ? "page" : undefined}
className={`${ITEM_CLASSES} ${page === currentPage ? CURRENT_CLASSES : ENABLED_CLASSES}`}
>
{page}
</Link>
))}
<PaginationItem
disabled={isLast}
href={buildHref(Math.min(totalPages, currentPage + 1))}
label="다음 페이지"
>
›
</PaginationItem>
<PaginationItem disabled={isLast} href={buildHref(totalPages)} label="마지막 페이지">
»
</PaginationItem>
</nav>
);
}