"use client"; import type { ReactNode } from "react"; import { cx } from "../../utils"; import { FoxCaretLeftIcon, FoxCaretRightIcon } from "../../icons"; export interface FoxPaginationProps { /** 1부터 센다. */ currentPage: number; totalPages: number; onPageChange?: (page: number) => void; /** * 페이지 번호를 링크로 만들 때. 주면 `<a>`가 되고, 없으면 `<button>`이 된다. * 라우팅은 호출부 몫이다. */ buildHref?: (page: number) => string; /** 한 번에 보여줄 번호 개수. 기본 5. */ windowSize?: number; /** * 창 밖에 페이지가 더 있으면 `…`을 붙인다. 시안의 pagination-item에 있는 모양이다. * 기본값은 꺼짐 — 시안의 pagination 조합에는 없다. */ ellipsis?: boolean; previousLabel?: string; nextLabel?: string; /** 스크린리더가 읽을 이름. 한 화면에 둘 이상 두면 서로 다르게 준다. */ label?: string; /** 참이면 렌더하지 않는다(DOM에 남지 않는다). */ hidden?: boolean; /** 배치 조정용. */ className?: string; } /** 현재 페이지를 가운데 두고 `size`개를 [1, total] 안에서 민다. */ function pageWindow(current: number, total: number, size: number): number[] { if (total < 1) { return []; } const start = Math.max(1, Math.min(current - Math.floor(size / 2), total - size + 1)); const end = Math.min(total, start + size - 1); const pages: number[] = []; for (let page = Math.max(1, start); page <= end; page += 1) { pages.push(page); } return pages; } /** * @fox 페이지네이션. * * PC는 [이전] [번호들] [다음]이 한 줄이고, 모바일은 이전·다음이 위로 빠지고 번호가 아래 * 줄에 선다(시안의 device 축). 그 전환은 CSS가 화면 폭을 보고 하므로 프롭이 없다. * * ⚠️ 스타일은 이 파일이 import하지 않는다 — 호스트 앱이 `@use "@fox/styles/components"` * (또는 개별 파티셜)로 한 번 불러와야 한다. */ export function FoxPagination({ currentPage, totalPages, onPageChange, buildHref, windowSize = 5, ellipsis = false, previousLabel = "이전", nextLabel = "다음", label = "페이지", hidden = false, className, }: FoxPaginationProps) { if (hidden || totalPages < 1) { return null; } const pages = pageWindow(currentPage, totalPages, windowSize); const first = pages[0] ?? 1; const last = pages[pages.length - 1] ?? 1; const step = (target: number, disabled: boolean, direction: "prev" | "next", text: string) => { const icon = ( <span className="fox-pagination__step-icon" aria-hidden="true"> {direction === "prev" ? <FoxCaretLeftIcon /> : <FoxCaretRightIcon />} </span> ); const body: ReactNode = direction === "prev" ? ( <> {icon} {text} </> ) : ( <> {text} {icon} </> ); const itemClass = cx("fox-pagination__item", "fox-pagination__step"); // 갈 곳이 없으면 링크로 두지 않는다 — 눌리지 않는 링크는 스크린리더에서도 걸린다. if (disabled) { return ( <span className={itemClass} aria-disabled="true"> {body} </span> ); } return buildHref ? ( <a className={itemClass} href={buildHref(target)} onClick={() => onPageChange?.(target)}> {body} </a> ) : ( <button className={itemClass} type="button" onClick={() => onPageChange?.(target)}> {body} </button> ); }; const number = (page: number) => { const current = page === currentPage; const itemClass = cx( "fox-pagination__item", "fox-pagination__number", current && "fox-pagination__number--current" ); if (current) { return ( <span className={itemClass} aria-current="page"> {page} </span> ); } return buildHref ? ( <a className={itemClass} href={buildHref(page)} aria-label={`${page}페이지`} onClick={() => onPageChange?.(page)} > {page} </a> ) : ( <button className={itemClass} type="button" aria-label={`${page}페이지`} onClick={() => onPageChange?.(page)} > {page} </button> ); }; const more = ( <span className="fox-pagination__item fox-pagination__ellipsis" aria-hidden="true"> … </span> ); // 이전·목록·다음이 형제다. 모바일에서 목록만 한 줄을 통째로 차지해 아래로 밀린다. return ( <nav className={cx("fox-pagination", className)} aria-label={label}> {step(currentPage - 1, currentPage <= 1, "prev", previousLabel)} <ul className="fox-pagination__list"> {ellipsis && first > 1 && <li>{more}</li>} {pages.map((page) => ( <li key={page}>{number(page)}</li> ))} {ellipsis && last < totalPages && <li>{more}</li>} </ul> {step(currentPage + 1, currentPage >= totalPages, "next", nextLabel)} </nav> ); }