Conversation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
Walkthrough뱃지 목록 페이지 기능을 추가합니다. 새로운 Badges 페이지 컴포넌트를 구현하고, 라우팅을 등록하며, 뱃지 정의 및 레벨 티어 데이터를 상수로 관리합니다. 프로필 페이지에서 뱃지 섹션으로의 네비게이션 링크를 추가합니다. Changes
Sequence DiagramsequenceDiagram
participant User
participant App as Badges Page
participant Auth as useAuth
participant API as usersApi.getLevel
participant Toast as Toast Notification
User->>App: Navigate to /badges
App->>Auth: Check auth state
alt User not authenticated
Auth-->>App: user = null
App->>User: Show login prompt
User->>App: Click login button
App->>User: Redirect to login
else User authenticated
Auth-->>App: user data available
App->>App: Show loading indicator
App->>API: Fetch user level data
API-->>App: Return UserLevel
App->>App: Compute earned badges
App->>App: Render level categories
App->>App: Render badge grid
Note over App: Display earned badges with Award icon<br/>Display locked badges with Lock icon
App->>User: Display badges dashboard
end
alt API Error
API-->>Toast: Error occurred
Toast->>User: Show error message
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/profile/ProfileStats.tsx (1)
48-64: 링크 접근성 힌트를 조금만 보강하면 더 좋습니다.현재도 동작은 좋습니다. 다만 링크 목적을 명확히 하기 위해
aria-label과focus-visible스타일을 추가해두면 접근성이 더 좋아집니다.✏️ 제안 diff
- <Link to="/badges" className="flex items-center justify-between group"> + <Link + to="/badges" + aria-label="뱃지 및 레벨 페이지로 이동" + className="flex items-center justify-between group rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40" + >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/profile/ProfileStats.tsx` around lines 48 - 64, The Link component rendering the badges (the <Link ...> that wraps the userLevel.badges list and ChevronRight) should include an explicit aria-label describing the link target (e.g., "View badges" or localized text) and a visible focus style for keyboard users; update the Link props to add aria-label and augment its className with a focus-visible utility (or a11y-focused CSS class) so keyboard focus shows a clear outline (e.g., focus-visible:ring / focus-visible:outline) while keeping existing styles, ensuring the change is applied to the Link that contains userLevel.badges and the ChevronRight.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/Badges.tsx`:
- Around line 64-67: The progressPercent calculation currently uses info.count /
info.nextThreshold which ignores the current tier start and overstates progress;
change progressPercent (and the similar calculation at the other occurrence) to
compute the progress within the current tier by subtracting the current-tier
threshold start: let start = info.prevThreshold ?? info.currentThreshold ?? 0;
let range = info.nextThreshold - start; let progress = Math.max(0, info.count -
start); set progressPercent = range > 0 ? Math.round((progress / range) * 100) :
100 and clamp to 0–100. Update both occurrences (the progressPercent assignment
and the duplicate at the later location) and keep references to
info.nextThreshold and info.count.
---
Nitpick comments:
In `@src/components/profile/ProfileStats.tsx`:
- Around line 48-64: The Link component rendering the badges (the <Link ...>
that wraps the userLevel.badges list and ChevronRight) should include an
explicit aria-label describing the link target (e.g., "View badges" or localized
text) and a visible focus style for keyboard users; update the Link props to add
aria-label and augment its className with a focus-visible utility (or
a11y-focused CSS class) so keyboard focus shows a clear outline (e.g.,
focus-visible:ring / focus-visible:outline) while keeping existing styles,
ensuring the change is applied to the Link that contains userLevel.badges and
the ChevronRight.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 983210ed-7873-453c-90d3-7d9b71c6bdb1
📒 Files selected for processing (6)
src/App.tsxsrc/components/profile/ProfileStats.tsxsrc/constants/badges.tssrc/lib/api/users.api.tssrc/pages/Badges.tsxsrc/pages/__tests__/Badges.test.tsx
Comment on lines
+64
to
+67
| const progressPercent = | ||
| info.nextThreshold !== null && info.nextThreshold > 0 | ||
| ? Math.round((info.count / info.nextThreshold) * 100) | ||
| : 100; |
Contributor
There was a problem hiding this comment.
진행률 계산이 현재 레벨 구간 기준이 아니라 과대 표기됩니다.
count / nextThreshold는 현재 레벨 시작점을 반영하지 않아, 레벨업 직후에도 진행률이 높게 보입니다. 현재 티어 threshold를 빼서 구간 진행률로 계산하는 편이 정확합니다.
🐛 제안 diff
- const progressPercent =
- info.nextThreshold !== null && info.nextThreshold > 0
- ? Math.round((info.count / info.nextThreshold) * 100)
- : 100;
+ const currentThreshold = tiers.find((tier) => tier.level === info.level)?.threshold ?? 0;
+ const progressPercent =
+ info.nextThreshold !== null && info.nextThreshold > currentThreshold
+ ? Math.round(((info.count - currentThreshold) / (info.nextThreshold - currentThreshold)) * 100)
+ : 100;
@@
- <Progress value={Math.min(progressPercent, 100)} className="h-2" />
+ <Progress value={Math.max(0, Math.min(progressPercent, 100))} className="h-2" />Also applies to: 78-78
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/pages/Badges.tsx` around lines 64 - 67, The progressPercent calculation
currently uses info.count / info.nextThreshold which ignores the current tier
start and overstates progress; change progressPercent (and the similar
calculation at the other occurrence) to compute the progress within the current
tier by subtracting the current-tier threshold start: let start =
info.prevThreshold ?? info.currentThreshold ?? 0; let range = info.nextThreshold
- start; let progress = Math.max(0, info.count - start); set progressPercent =
range > 0 ? Math.round((progress / range) * 100) : 100 and clamp to 0–100.
Update both occurrences (the progressPercent assignment and the duplicate at the
later location) and keep references to info.nextThreshold and info.count.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
usersApi.getLevel에 TypeScript 제네릭 타입 추가Test plan
/badges페이지 직접 접근 확인🤖 Generated with Claude Code
Summary by CodeRabbit
새로운 기능