Pagination 컴포넌트 구현

[sik9252]

🎨 작업 개요

피그마의 [Pagination] 디자인을 기반으로 페이지 네비게이션을 구현합니다.
페이지 범위 계산 로직(Ellipsis 처리)과 맨 처음/맨 끝 이동 버튼을 추가하여 기능을 확장합니다.

📋 상세 스펙

1. Controls (Navigation)

• Previous/Next: 화살표 아이콘 (<, >)
• First/Last: 이중 화살표 아이콘 (<<, >>) - Shadcn 기본셋에 없으므로 추가 구현 필요
• State: 첫 페이지에서는 '이전' 버튼 비활성(Disabled), 마지막 페이지에서는 '다음' 버튼 비활성 처리

2. Page Indicators

• Active: 현재 선택된 페이지
• Default
• Ellipsis: 페이지가 많을 경우, 현재 페이지 주변을 제외하고 ...으로 축약 표시 (이미지 예시: 1 ... 4 5 [6] 7 8 ... 100)

✅ 작업 체크리스트

[ ] 개발
[ ] 문서화 (Storybook): 페이지가 적을 때(5개 이하)와 많을 때(100개 이상)의 스토리 작성
[ ] 테스트 (Vitest): 이전/다음 버튼 클릭 시 핸들러 호출 및 비활성 상태 로직 검증