Skip to content

Conversation

@cl-o-lc
Copy link
Collaborator

@cl-o-lc cl-o-lc commented Oct 12, 2025

📌 작업 내용

최종적으로, 반응속도 테스트 페이지 UI 및 기능 구현을 완료합니다.

  • 내 순위 확인 (/refresh-records/my-rank)
  • Top 10 확인 (/refresh-records/stats)

주요 변경사항

  • /refresh-records/nearby API 활용 시, range 파라미터 적용이 정상적으로 처리되지 않는 문제 발생
    ▶️ 내 순위만 확인하는 refresh-records/my-rank)로 대체
  • 따라서 top10 관련 요소들의 주석을 제거했습니다.
  • vercel에 최신 환경 변수를 업데이트 했습니다.

📸 스크린샷

checktime-reaction-ranking.mp4

📝 기타

  • 간단한 디자인의 파비콘을 적용했습니다. 추후 수정 환영합니다! 🙆

Summary by CodeRabbit

  • 신기능
    • 반응속도 테스트에 TOP 10 리더보드와 ‘내 순위’ 카드 추가, 기록 저장 후 순위 자동 갱신
  • 리팩터
    • 인증 토큰 관리 일원화 및 API 호출 체계 정비로 안정성 향상
  • 문서/콘텐츠
    • FAQ의 알림 작동 원리 설명을 시각적 반응 한계 중심으로 보완
  • 작업
    • 타입 정의(devDependencies) 업데이트

- `saveReactionTimeRecord`: 반응속도 기록을 서버에 저장
- `getMyRank`: 내 순위 정보 가져오기
- `getTop10Rankings`: 상위 10위권 정보 가져오기
- 사용자 반응속도 데이터를 활용하지 않으므로, 해당 부분 삭제
- 인간의 시각적 반응 한계(0.1ms) 반영
- UI 수정: [내 랭킹], [Top 10]
- 기존 방식(로컬 저장) 변경 (`saveReactionTimeRecord`)
@cl-o-lc cl-o-lc added feat🛠️ 기능 구현 design✨ UI 구현 및 개선 fix🔨 오류 수정 labels Oct 12, 2025
@vercel
Copy link

vercel bot commented Oct 12, 2025

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

Project Deployment Preview Comments Updated (UTC)
checktime Ready Ready Preview Comment Oct 12, 2025 7:43pm

@coderabbitai
Copy link

coderabbitai bot commented Oct 12, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

이 PR은 반응속도 테스트 페이지에 서버 기반 랭킹 기능을 도입하고, 인증 토큰 관리를 AuthUtils로 일원화하며, FAQ 문구를 갱신하고, 타입 정의 패키지 버전을 올립니다. 랭킹 전용 API 클라이언트 모듈을 신설하고 페이지에서 초기 로드·기록 저장 후 순위 갱신 흐름을 추가했습니다.

Changes

Cohort / File(s) Change Summary
Dependencies
package.json
devDependencies에서 @types/react, @types/react-dom를 ^19.1.x → ^19.2.x로 업데이트.
Reaction Test 랭킹 통합
src/app/reaction-test/page.tsx
서버 랭킹 연동 추가: TOP10/내 순위 동시 조회, 기록 저장 후 재조회, 비동기 처리로 타이밍 액션 조정, UI에 “내 순위”/“TOP 10” 카드 추가, 로컬 기록 제거, 헬퍼 fetchAllRankings 도입. 내부 타입 RankEntry, MyRankInfo 정의.
Auth 토큰 유틸 적용
src/components/ClientHeader.tsx
토큰 확인/저장/삭제를 AuthUtils로 대체, 로그인/회원가입 엔드포인트를 NEXT_PUBLIC_API_URL 기반으로 변경, 직접적 accessToken localStorage 관리 제거.
FAQ 문구 수정
src/components/FaqSection.tsx
알림 원리 설명을 RTT + 인간 시각적 반응 한계(0.1 ms) 기준으로 서술 변경.
Reaction Ranking API 모듈 추가
src/libs/api/reactionRanking.ts
공통 fetchApi 헬퍼 추가, saveReactionTimeRecord, getMyRank, getNearbyRankings, getTop10Rankings 구현. NEXT_PUBLIC_API_URL 기본값 사용, AuthUtils.getAuthHeaders()로 인증 헤더 적용, 204 처리/에러 처리 포함.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant P as ReactionTest Page
  participant A as reactionRanking API
  participant B as Backend API

  Note over P: 초기 로드
  U->>P: 페이지 접속
  par 동시 조회
    P->>A: getTop10Rankings()
    P->>A: getMyRank()
  end
  A->>B: GET /refresh-records/stats
  A->>B: GET /refresh-records/my-rank
  B-->>A: TOP10 JSON
  B-->>A: 내 순위 JSON
  A-->>P: 데이터 반환
  P-->>U: TOP10/내 순위 렌더링

  Note over P: 유효 측정 성공 시
  U->>P: 기록 저장 트리거
  P->>A: saveReactionTimeRecord(refreshTime)
  A->>B: POST /refresh-records {refreshTime}
  B-->>A: 저장 성공
  A-->>P: OK
  Note over P: 저장 후 재조회
  par 동시 조회
    P->>A: getTop10Rankings()
    P->>A: getMyRank()
  end
  A->>B: GET stats / my-rank
  B-->>A: 최신 랭킹
  A-->>P: 데이터 반환
  P-->>U: 갱신된 순위 렌더링
Loading
sequenceDiagram
  autonumber
  participant U as User
  participant H as ClientHeader
  participant Auth as AuthUtils
  participant B as Backend API

  U->>H: 로그인 시도(크리덴셜 입력)
  H->>B: POST /auth/login (API_URL)
  B-->>H: 토큰/사용자 정보
  H->>Auth: setToken()/hasToken()
  Auth-->>H: 토큰 상태 반영
  H-->>U: 로그인 상태 UI 업데이트

  U->>H: 로그아웃 클릭
  H->>Auth: removeToken()
  Auth-->>H: 토큰 제거 완료
  H-->>U: 로그아웃 UI 업데이트
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

귀 쫑긋, 탁-! 반응을 재고 또 재네
서버에 점프해 순위를 세네 🥕
TOP10 별빛 아래 이름이 반짝
토큰은 가볍게, 유틸로 착착
오늘의 클릭, 내일의 왕관… 끼익- 낙!

✨ 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-v2

📜 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 f32896a and e7397c0.

⛔ Files ignored due to path filters (1)
  • public/favicon.ico is excluded by !**/*.ico
📒 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

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

@cl-o-lc cl-o-lc merged commit 147cd8c into main Oct 12, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design✨ UI 구현 및 개선 feat🛠️ 기능 구현 fix🔨 오류 수정

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants