문제리스트 페이지네이션 수정

[leetaewon123]

🔎 작업 사항

• 문제리스트 페이지네이션 수정

➕ 관련 이슈

Summary by CodeRabbit

• 새 기능
  • 페이지 버튼에 1부터 시작하는 라벨 표시(내부 인덱스는 0 기반)
• 리팩터링
  • 페이징을 1 기반에서 0 기반으로 전환(초기 페이지, 그룹 계산, 경계 처리 포함)
  • 검색 시 Enter/버튼 클릭 모두 첫 페이지(0)로 리셋
  • 페이지 네비게이션 동작 개선(이전/다음 그룹 이동 및 범위 클램핑)
  • ProblemTable에 페이지 변경 핸들러를 래퍼 함수로 전달
  • 필터 행을 3열 레이아웃으로 재구성(카테고리, 난이도, 검색)
• 스타일
  • 여백, 경계, 뱃지 포맷 등 경미한 UI 정리 및 접근성 향상

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

페이지네이션을 1-base에서 0-base로 전환하고, 검색 시 페이지 초기화를 0으로 변경했습니다. 필터 UI 레이아웃을 세 칼럼으로 재구성했으며, ProblemTable과의 prop 전달 방식을 래핑 함수로 맞췄습니다. Table 내부의 페이지 그룹/이동 로직과 렌더링 라벨(표시만 1-base)도 이에 맞게 수정되었습니다.

Changes

Cohort / File(s)	Change Summary
페이지네이션 0-base 전환 및 필터 UI 재구성 src/app/(auth)/(navigationsBarLayout)/problems/page.tsx	currentPage 초기값과 검색 초기화 값을 0으로 변경. 검색 엔터/버튼 시 페이지 0으로 리셋. 필터 UI를 3분할 div 레이아웃으로 재구성하고 category Select에 id 부여. setCurrentPage를 래핑 함수로 전달. 사소한 스타일 정리.
Table 컴포넌트 0-base 페이지네이션 리팩터 src/app/(auth)/(navigationsBarLayout)/problems/ui/Table.tsx	내부 인덱싱을 0-base로 통일. lastIndex = totalPages - 1 도입 및 경계 처리. 페이지 그룹 계산/클램프 로직 수정. Prev/Next가 그룹 단위 점프하도록 변경. 페이지 버튼은 1-base 라벨로 표시(키와 label 적용). myProblemsList 빌드 로직/의존성 정리. 경미한 스타일/포맷 변경.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User as User
  participant Page as ProblemsPage (0-base)
  participant Table as ProblemTable (0-base)
  participant API as ProblemsAPI

  rect rgba(230,240,255,0.4)
    note over User,Page: 초기 로드 또는 검색
    User->>Page: 검색어 입력 + Enter/검색 클릭
    Page->>Page: currentPage = 0
    Page->>API: fetchProblems(query, page=0)
    API-->>Page: data(totalPages, items)
    Page->>Table: props { currentPage=0, setCurrentPage(fn), data }
  end

  rect rgba(240,255,230,0.4)
    note over User,Table: 페이지네이션 (0-base 인덱싱)
    User->>Table: 페이지 번호 클릭 (표시는 1-base)
    Table->>Page: setCurrentPage(index)
    Page->>API: fetchProblems(query, page=index)
    API-->>Page: data
    Page->>Table: props 업데이트
  end

  rect rgba(255,245,230,0.5)
    note over User,Table: 그룹 네비게이션
    User->>Table: Prev / Next
    Table->>Table: 그룹 경계 계산, 0..lastIndex 클램프
    Table->>Page: setCurrentPage(newIndex)
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• 문제리스트에서 내가 푼 문제 UI 변경 #78: Table에서 myProblemsList 구성과 세션 의존 효과를 다루는 변경과 겹치는 부분이 있음.
• fix : 문제리스트 prev 버튼 next버튼 페이지 단위로 넘어가게 수정 #96: Prev/Next를 그룹 단위 점프로 바꾸는 페이지네이션 내비게이션 로직과 직접적으로 연관.
• 문제 리스트 검색어 필터, 마이페이지 #30: problems/page.tsx 및 Table 간의 페이지네이션 prop/행동 조정과 같은 동일 영역의 리팩터와 접점 존재.

Suggested labels

fix, refactoring

Poem

새벽 코드를 톡톡, 당근 달빛 반짝-☆
1이 0이 되고, 숫자는 살짝 깔맞춤!
페이지는 점프, 그룹은 착착 이동—퐁퐁!
검색은 처음부터, 토끼 발자국 재정렬.
깔끔한 표 위에, 바람처럼 빠른 페이징! 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between dbc99d0 and 3a0d088.

📒 Files selected for processing (2)

• src/app/(auth)/(navigationsBarLayout)/problems/page.tsx (6 hunks)
• src/app/(auth)/(navigationsBarLayout)/problems/ui/Table.tsx (5 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/problems

---

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

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.