리트코드 스터디의 성취감 제고를 위한 리더보드 페이지 개발

Image

• 스터디 참가자들의 문제 풀이 회수와 등급을 보여준다.
• 참여자 검색: GitHub 유저네임 기준으로 (partical match)
• 기수 선택: 해당 기수에 선택되는 참여자만 필터링
• "진행 현황" 버튼: 해당 참가자의 구체적인 프로그레스
• "수료증" 버튼: 수료증 화면으로 이동 (모두에게 노출)
• 저장소에 새로운 답안 코드가 머지될 때 마다 갱신되야 함 (매번 다시 불러와도 무방)

Shot 2024年10月27日 at 11 25 26@2x

• 참가자 별 구체적인 프로그레스를 보여준다.
• Blind 75 문제 표
  • 푼 문제에 대해서는 체크 표시
• "풀이 보기" 버튼: 해당 참가자의 PR 리스트 (예: https://github.com/DaleStudy/leetcode-study/pulls?q=is%3Apr+author%3ASamTheKorean)

Shot 2024年10月27日 at 10 44 49@2x

• 수표증 페이지
  • 수료증 내용
  • "출력" 버튼
  • "링크드인 공유" 버튼 (Certification에 자동입력되도록)

• Test Coverage 70%
• Mobile-first, Acessibility, Performance: Light House 전 항목 90점 이상

• https://github.com/DaleStudy/leaderboard/issues/2