Skip to content

한국외대 백준 순위 상승 서비스 프론트엔드 레포

Notifications You must be signed in to change notification settings

boram2445/hufs_baekjoon_front

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🏫 한국외대 백준 순위 올리기 시스템

🙌 '한국외대 백준 순위 올리기 시스템'은 백준에서의 한국외대 랭킹을 높이기 위해 제공하는 서비스입니다.

🎁 한국외대와 앞뒤 집단 순위를 비교하고, 구성원들이 아직 풀지 않은 문제만 선별하여 보여줍니다. 

😎 한국외대 학생들이 몇 문제 풀었는지 나타내는 개인 랭킹을 제공하며, 오늘의 추천 문제를 제공합니다. 

✨ 직접적인 랭킹 상승 방법을 알려줌으로써 학우들의 알고리즘 문제풀이에 대한 동기를 부여합니다. 

💥서버를 닫아놓은 상태이기 때문에, 캡쳐 화면으로만 확인하실 수 있습니다💥

구현 기능

- 🔐 인증
      - 로그인 / 로그아웃
      - 회원가입 / 회원 탈퇴
- 💵 백준 인증 X
      - 한국외대 백준 순위 비교
      - 문제 리스트 확인
      - 문제 리스트 정렬
      - 문제 검색
      - 오늘의 추천 문제
- 🔖 백준 인증 O
      - 도전 문제 찜하기
      - 개인 랭킹 

구현 UI 설명

1. 구성원들이 아직 풀지 않은 문제 / 문제 정렬 / 문제 검색기능

- 가장 핵심기능
- solved.ac api에서 백준 사이트의 전체문제와 한국외대 학우들이 푼 문제를 받아와 아직 안푼 문제를 추출한 결과를 보여준다. 
- 6가지 정렬기능을 제공한다. (도전중인 문제, 아직 풀지 않은 문제, 쉬운순, 어려운 순, 도전자가 많은 순, 도전자가 적은 순)
- 검색기능을 제공하여, 문제 번호를 입력하면 해당 문제가 리스트에 표시된다.
- React Query를 활용하여 사용자가 클릭한 페이지를 캐싱해 두도록 페이지네이션을 구현 하였다.
- 또한, 프리패칭 기능을 이용하여 다음 페이지의 데이터를 미리 받아오도록 하여 사용성을 향상시켰다.

2. 문제 찜하기(도전중인 문제)

- 로그인 및 백준 인증이 완료된 사용자에게 제공되는 기능이다. 
- 문제의 아직 안품 버튼을 누르면, 도전중으로 바뀌고 현재 도전중인 사람수가 증가한다.
- 내가 도전중인 문제는 정렬을 통해 선별하여 볼 수 있다. 

3. 한국외대 랭킹 비교 / 오늘의 추천 문제

- 메인 기능
- 한국외대 앞과 뒤의 순위에 있는 집단의 맞은 문제수를 제공한다.
- 이 비교를 통해 얼만큼의 문제를 풀어야 앞 순위 집단을 이길 수 있는지 알 수 있다.
- 미해결 문제 중 난이도별 1개씩 문제를 제공하여 오늘의 추천 문제표를 제공한다.
- 랜덤 문제는 서버에서 스케줄링 되어 24시간마다 자동으로 교체된다. 

4. 개인 랭킹

- 로그인 및 백준 인증이 완료된 사용자에게 제공되는 기능이다. 
- 학우들의 알고리즘 학습의욕을 고취시키기 위해, 그동안 푼 문제를 기준으로 개인 순위 리스트를 제공한다.
- 랭킹에 등재되는 닉네임은 마이페이지에서 수정이 가능하다. 

5. 회원가입 / 로그인

- 회원가입은 아이디, 닉네임, 비밀번호를 입력받는다.
- 아이디와 닉네임은 중복확인 검사를 한다.
- 로그인은 정보가 일치하지 않으면 경고문구가 보여진다. 

6. 마이페이지 - 개인정보 수정

- 마이페이지에서는 닉네임, 비밀번호를 수정할 수 있으며, 탈퇴기능을 제공한다.

7. 마이페이지 - 백준 인증

- 백준 실사용자인지 확인하기 위해 백준 사이트에 로그인하여 문제를 풀고 캡쳐한 사진을 관리자에게 전송하도록 하였다.
- 사용자가 충분히 이해하도록 모달을 이용하여 인증 순서를 자세히 설명하였다. 

About

한국외대 백준 순위 상승 서비스 프론트엔드 레포

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 69.3%
  • CSS 29.8%
  • HTML 0.9%