[feature] 반응속도 페이지 '순위' 표시

[cl-o-lc]

📌 작업 내용

반응속도 순위를 표시합니다.

• 내 순위를 기준으로 상하 5명씩 확인 가능합니다.
• 현재 상위 10위권을 확인 가능합니다.

**도움말 페이지의 문구를 수정합니다. **

• "사용자 반응속도 데이터를 알림 발생 시간에 적용한다"는 내용을 제거했습니다.

📸 스크린샷

📝 기타

- [Top10 순위] 비활성화
nearby API 호출 시, range가 정상적으로 적용되질 않아, nearby만으로 top10을 확인할 수 있는 상황입니다.

Summary by CodeRabbit

• 신기능

  • 반응속도 랭킹 도입: 내 주변 순위와 내 순위 표시, 결과 저장 후 랭킹 자동 갱신
  • 반응 기록 서버 저장으로 베스트 타임 관리 개선

• 리팩터링

  • 인증 토큰 처리 중앙화 및 로그인/회원가입 API 엔드포인트 정리
  • 랭킹 관련 API 유틸 추가로 데이터 요청 체계화

• 문서

  • FAQ 답변 업데이트: 인간 시각 반응 한계(0.1ms) 및 RTT 반영 안내

• 잡무

  • React 타입 정의(devDependency) 버전 업데이트

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
checktime	Error			Oct 9, 2025 6:07pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

랭킹 API 유틸 신규 추가 및 반응속도 게임 페이지를 랭킹 기반으로 개편. 헤더의 인증 토큰 처리 로직을 AuthUtils로 이관하고 API 베이스 URL을 변경. FAQ 일부 문구 수정. 타입 정의 devDependency 버전 업데이트.

Changes

Cohort / File(s)	Summary of Changes
타입 정의 업데이트 package.json	@types/react, @types/react-dom devDependency 버전 상승. 런타임 의존성/코드 변경 없음.
랭킹 API 유틸 신규 src/libs/api/reactionRanking.ts	공통 fetchApi 추가, 베이스 URL(NEXT_PUBLIC_API_URL 기본값 포함) 사용. saveReactionTimeRecord, getNearbyRankings, getTop10Rankings 공개 함수 추가. 인증 헤더 병합 및 에러 처리 포함.
반응 테스트 페이지 랭킹 연동 src/app/reaction-test/page.tsx	로컬스토리지 기반 최고기록 제거. 초기 로드 시 Top10/근처/내 랭킹 동시 조회. 결과 저장 후 랭킹 새로고침. 랭킹 렌더링 섹션 추가 및 관련 타입/상태 정의. 클릭 핸들러 비동기화.
헤더 인증 처리 통합 및 API URL 변경 src/components/ClientHeader.tsx	토큰 확인/저장/삭제를 AuthUtils로 대체. 로그인/회원가입 엔드포인트를 NEXT_PUBLIC_API_URL 기준으로 변경(/auth/...). refreshToken, userName 로컬 저장 유지.
FAQ 문구 조정 src/components/FaqSection.tsx	4번 항목 답변을 시각 반응 한계(0.1ms)와 RTT 반영 언급으로 갱신.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User as User
  participant Page as ReactionTest Page
  participant API as reactionRanking.ts
  participant BE as Backend

  rect rgb(243,246,249)
    Note over Page: 초기 로드
    User->>Page: 페이지 진입
    Page->>API: getTop10Rankings()
    Page->>API: getNearbyRankings(range)
    API->>BE: GET /refresh-records/stats
    API->>BE: GET /refresh-records/nearby?range=...
    BE-->>API: 랭킹 데이터
    API-->>Page: Top10/근접/내 랭킹
    Page-->>User: 랭킹 UI 렌더
  end

  rect rgb(236,248,236)
    Note over Page: 유효 클릭 후 저장
    User->>Page: 반응 클릭
    Page->>API: saveReactionTimeRecord(refreshTime)
    API->>BE: POST /refresh-records { refreshTime }
    BE-->>API: 저장 결과
    API-->>Page: 저장 성공
    Page->>API: (병렬) getTop10Rankings(), getNearbyRankings()
    API->>BE: GET 통계/근접
    BE-->>API: 최신 랭킹
    API-->>Page: 랭킹 갱신
    Page-->>User: 새 랭킹 표시
  end

Loading

sequenceDiagram
  autonumber
  actor User as User
  participant Header as ClientHeader
  participant Auth as AuthUtils
  participant BE as Backend

  Note over Header: 초기 렌더 시 인증 확인
  Header->>Auth: hasToken()
  Auth-->>Header: 토큰 존재 여부

  alt 로그인
    User->>Header: 로그인 제출
    Header->>BE: POST /auth/login
    BE-->>Header: accessToken, refreshToken
    Header->>Auth: setToken(accessToken)
    Header-->>User: 로그인 상태 반영
  else 로그아웃
    User->>Header: 로그아웃
    Header->>Auth: removeToken()
    Header-->>User: 비로그인 상태
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• [feature] 로그인/회원가입 모달 및 Header 이벤트 로직 구현 #6: 헤더 로그인/토큰 처리와 API 베이스 URL 흐름 변경과 직접적으로 맞닿은 수정.
• [feature] 사용자 반응속도 테스트 기능 구현 #9: 동일한 src/app/reaction-test/page.tsx의 초기 로컬 저장 기반 구현과 연속선상에 있는 서버 랭킹 연동 변경.

Poem

새벽 코드 밭에 당근 깃발 휘날려, 🥕
기록은 구름 너머 랭킹으로 실려와
탁— 클릭 한 점에 점수 피어오르고
헤더엔 토큰 별 하나 반짝인다.
오늘도 깡충, API 길 따라 뛰어—업!

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/reaction-ranking

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 68f9fb0 and 28b0527.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (5)

• package.json (1 hunks)
• src/app/reaction-test/page.tsx (5 hunks)
• src/components/ClientHeader.tsx (5 hunks)
• src/components/FaqSection.tsx (1 hunks)
• src/libs/api/reactionRanking.ts (1 hunks)

---

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.}