FNA Design System

페이지네이션

데스크톱 표는 쪽 번호, 폰 목록은 '더 보기' 버튼. 총 건수와 현재 범위를 항상 글자로 보여주고, 페이지 크기는 25·50·100 셋 중 하나입니다.

제안 컴포넌트: .fna-pager / .fna-loadmore 는 components.css 에 없습니다. 관제·이력 표의 서버 페이징 규격입니다.

정의

긴 목록을 나눠 보여주는 두 방식입니다. 쪽 번호(데스크톱 표: 처음·이전·번호·다음·끝 + 총 건수 + 페이지 크기)와 더 보기(폰 목록: 버튼 하나, 남은 건수). 무한 스크롤은 쓰지 않습니다 — 기록을 "끝까지 봤다"는 것이 심사에서 중요합니다.

언제 쓰고 언제 쓰지 않나

  • 25건을 넘는 서버 목록. 그 이하는 한 번에 보여준다.
  • 차트·요약 카드에는 페이징이 없다(기간 필터가 대신).
  • 시니어 모드는 하루 단위 화면이라 페이징 자체가 없다.

해부도

  1. 범위 정보전체 n건 · 시작–끝. 천 단위 쉼표, en dash
  2. 이동 버튼처음 « 이전 ‹ 다음 › 끝 » — 첫·끝 쪽에서는 비활성
  3. 쪽 번호현재 ±2 + 첫·끝, 생략은 …. 현재는 primary 채움 + aria-current
  4. 페이지 크기25 · 50 · 100. 바꾸면 1쪽으로

변형

간단형 (이전 · 다음만) — 결과 수를 모를 때·카드 목록
코드
<nav class="fna-pager fna-pager--simple" aria-label="쪽 이동"><span class="fna-pager__info">51–75</span><ul class="fna-pager__list"><li><a href="#">‹ 이전</a></li><li><a href="#">다음 ›</a></li></ul></nav>
더 보기 (폰)
50 / 1,284건
코드
<div class="fna-loadmore"><button class="fna-btn fna-btn--outline">더 보기 (25건)</button><span class="fna-muted">50 / 1,284건</span></div>
끝에 도달
1,284건 모두 확인했습니다
코드
<div class="fna-loadmore"><span class="fna-muted">1,284건 모두 확인했습니다</span></div>

상태

상태표현
현재 쪽primary 채움, 흰 글자, aria-current="page", 클릭 불가
첫·끝 쪽처음/이전 또는 다음/끝 비활성(.4)
불러오는 중표는 이전 렌더 40% 유지, 더 보기 버튼은 "불러오는 중"
한 쪽뿐페이저 숨김, 범위 정보만("전체 18건")
0건빈 상태로 대체

치수

항목값
번호 버튼≥32 × 32 (큰글씨 48) · 라운드 4 · 13/700 tabular
간격2 (버튼 사이) · 12 (그룹 사이)
보이는 번호데스크톱 현재 ±2 + 첫·끝 · 폰 현재 ±1
간단형 버튼40 · 아웃라인 · 패딩 0 1em
더 보기md 아웃라인 · min-width 200 · 패딩 16
페이지 크기25 (기본) · 50 · 100

Do · Don't

전체 1,284건 · 26–50
Do 총 건수와 범위를 글자로
Don't 번호만 · 무한 스크롤'끝까지 봤다'를 확인할 수 없다
Do 폰은 더 보기 하나
Don't 폰에 쪽 번호 11개

접근성

  • <nav aria-label="쪽 이동"> + <ul>. 기호 버튼은 aria-label(처음·이전·다음·끝). 현재 쪽 aria-current="page".
  • 쪽 이동 후 포커스는 표 캡션(또는 범위 정보)로, aria-live="polite" 로 "26–50건 표시" 낭독.
  • URL 에 ?page=2&size=50 반영 — 뒤로가기·공유·심사 재현.
  • 더 보기 후 포커스는 새로 추가된 첫 항목으로.

문구

전체 1,284건 · 26–50 / 쪽당 25 / 더 보기 (25건) / 50 / 1,284건 / 1,284건 모두 확인했습니다. 영문("Page 2 of 52", "Load more") 금지.

코드

<nav class="fna-pager" aria-label="쪽 이동">
  <span class="fna-pager__info" aria-live="polite">전체 1,284건 · 26–50</span>
  <ul class="fna-pager__list">
    <li><a href="?page=1" aria-label="처음">«</a></li><li><a href="?page=1" aria-label="이전">‹</a></li>
    <li><a href="?page=1">1</a></li><li><a href="?page=2" aria-current="page">2</a></li><li><a href="?page=3">3</a></li>
    <li><span class="ellipsis">…</span></li><li><a href="?page=52">52</a></li>
    <li><a href="?page=3" aria-label="다음">›</a></li><li><a href="?page=52" aria-label="끝">»</a></li>
  </ul>
  <label class="fna-pager__size">쪽당 <select class="fna-select fna-select--sm">…</select></label>
</nav>
<div class="fna-loadmore"><button class="fna-btn fna-btn--outline">더 보기 (25건)</button><span class="fna-muted">50 / 1,284건</span></div>

제안 (소스 미반영)마지막 갱신 담당 디자인시스템 TF · jjo831@farmzone.kr소스 제안 — proposed.css .fna-pager · .fna-loadmoreComponents · FNA 디자인 시스템 v1.0