페이지네이션

긴 글 목록이나 아카이브를 이전·다음 묶음으로 넘기는 내비게이션이다. Muse에서는 번호를 잔뜩 늘어놓는 대신 방향 버튼과 위치 라벨만 남겨 지면의 리듬을 지킨다. 양 끝에서는 갈 수 없는 방향을 흐리게 막아 현재 위치를 알린다.

상태

첫 페이지

중간

마지막

비활성

갈 수 없는 방향은 hasPrevious·hasNext 를 꺼서 흐리게 막는다.

hasPrevious·hasNext 로 이동 가능 여부를 정하고 label 로 현재 위치를 보여준다. 넘길 항목이 남았을 때 해당 방향을 켠다.

Preview

tsx

<Pagination
  hasPrevious
  hasNext
  label="26-50 / 248"
  onPrevious={() => setPage((p) => p - 1)}
  onNext={() => setPage((p) => p + 1)}
/>

previousHref·nextHref 를 주면 방향 버튼이 링크로 렌더된다. 서버 라우팅으로 페이지를 넘기는 아카이브에 쓴다.

Preview

tsx

<Pagination
  hasPrevious
  hasNext
  previousHref="/archive/issue-1"
  nextHref="/archive/issue-3"
  label="2호 / 12호"
/>

previousLabel·nextLabel 로 접근성 라벨을 상황에 맞춘다. label 을 생략하면 방향 버튼만 남는다.

Preview

tsx

<Pagination
  hasPrevious
  hasNext
  previousLabel="이전 호"
  nextLabel="다음 호"
/>