feat: 페이지네이션 추가

[DongEun02]

1) 작업한 이슈번호

#37

2) 변경 요약 (What & Why)

• 무엇을 변경했는지: 페이지네이션 추가
• 왜 변경했는지(문제/목표):

3) 스크린샷/동영상 (UI 변경 시)

전/후 비교, 반응형(모바일/데스크톱) 캡쳐

• Before:
• After:

4) 상세 변경사항

• 라우팅/페이지: tils/page.tsx에서 Pagination 컴포넌트 호출 및 페이지 관리
• 컴포넌트: Pagination.tsx 파일에서 페이지네이션 기능 구현
• 상태관리:
• API 호출:
• 스타일:
• 기타:

5) 참고사항

Summary by CodeRabbit

릴리스 노트

• New Features
  • TIL 목록에 클라이언트 사이드 페이지네이션 도입(현재 페이지, 총 페이지 기반 분할 표시)
  • 페이지 이동(이전/다음, 숫자 버튼, 첫/마지막 및 생략 표시)을 통한 네비게이션 추가
  • 기존 로딩/오류 처리와 연동되어 페이지별로 항목을 안정적으로 표시

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

클라이언트 측 페이지네이션을 도입합니다. TIL 페이지에 currentPage 상태, itemsPerPage 및 currentData 슬라이싱을 추가하고, 새로운 Pagination 컴포넌트를 생성해 페이지 네비게이션을 렌더링하도록 통합했습니다. 로딩/에러 흐름은 유지됩니다. (약 50단어 이내)

Changes

Cohort / File(s)	변경 요약
페이지네이션 상태 관리 app/(with-sidebar)/tils/page.tsx	currentPage 상태, itemsPerPage 상수, totalPages 계산 및 currentData 슬라이싱 로직 추가. TilList에 전달하는 데이터 소스를 sortedItems에서 페이징된 currentData로 변경. 페이지 변경 핸들러 통합 및 Pagination 렌더링 추가.
새 페이지네이션 컴포넌트 components/common/Pagination.tsx	PaginationProps 타입과 Pagination 컴포넌트 신규 추가. 이전/다음 버튼, 숫자 페이지 버튼, 생략(ellipsis) 표시 로직 및 버튼 클릭 시 onPageChange 호출 구현. 기본/활성/비활성 버튼 클래스를 사용한 시각적 상태 처리 포함.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant TilsPage as TIL 페이지
    participant Pagination as Pagination 컴포넌트
    participant TilList as TilList 컴포넌트

    User->>Pagination: 페이지 버튼 클릭
    Pagination->>TilsPage: onPageChange(pageNumber)
    TilsPage->>TilsPage: currentPage 상태 업데이트
    TilsPage->>TilsPage: currentData 재계산 (sortedItems 슬라이싱)
    TilsPage->>TilList: currentData 전달
    TilList->>User: 페이지된 항목 렌더링
    TilsPage->>Pagination: currentPage, totalPages props 업데이트
    Pagination->>User: 버튼 상태 갱신

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 페이지를 살짝 넘기며 속삭여요,
작은 덩어리로 세상을 나눠 보여줘요.
버튼 하나에 길이 열리고,
데이터가 춤추며 흐르네.
감사해요, 새 페이지의 첫 발자국. ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경사항의 핵심을 명확하게 설명하고 있으며, 페이지네이션 추가라는 주요 변경을 정확히 요약하고 있습니다.
Description check	✅ Passed	PR 설명이 템플릿의 대부분 섹션을 포함하고 있으나, '왜 변경했는지' 부분이 비어있고 스타일 변경사항이 기재되지 않았습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@app/`(with-sidebar)/tils/page.tsx:
- Around line 71-80: When totalPages (computed from sortedItems and
itemsPerPage) decreases currentPage can become out-of-range causing currentData
to be empty; add a guard to clamp currentPage whenever
sortedItems/itemsPerPage/totalPages change by using setCurrentPage(Math.max(1,
Math.min(currentPage, totalPages))). Implement this in a useEffect that watches
sortedItems or totalPages and adjusts currentPage via setCurrentPage so
pagination recovers automatically (affects totalPages, currentPage,
setCurrentPage, currentData, handlePageChange).

🧹 Nitpick comments (1)

components/common/Pagination.tsx (1)

39-95: totalPages가 1 이하일 때 컨트롤 노출을 막아 UX 혼란을 줄여주세요.

현재는 totalPages=0/1에서도 이전/다음 버튼이 노출되어 의미 없는 UI가 생깁니다. 컨트롤 자체를 숨기면 더 명확합니다.

♻️ 제안 변경

+  if (totalPages <= 1) return null;
+
   return (
     <div className="mt-7.5 flex items-center justify-center gap-1.5">