운영서버 : https://ez2archive.kr

기술 : HTML, CSS, JavaScript, React

구현 기능

- 계정

• 로그인 / 로그아웃 : JWT 토큰 방식을 사용한 로그인 구현 : 액세스 토큰은 로컬 스토리지, 리프레시 토큰은 httpOnly Cookie에 저장

• 회원가입

• reCaptcha

• 성과표(Achievement) : 로그인한 사용자에 한해 서비스 제공

  • 리스트

    • 키와 난이도를 선택하면 그에 해당하는 곡의 리스트가 나열됨

  • 빠른 수기입력

    • 리스트 페이지에서 빠르게 성과 입력을 할 수 있도록 이미지 좌측 하단을 클릭 시 점수 수기입력창으로 전환
    • 수기 입력창에서의 아이콘은 각각 취소/전송/올콤보/올쿨에 해당
    • 0점에서 (1100000 + 노트 수)점 사이의 값을 입력 후 전송 시 서버에 점수 전달. 그렇지 않을 경우 서버 전달 전에 프론트 선에서 막음.
    • 수기 점수 입력이 완료되면 점수와 옵션(클리어/올콤보/올쿨)에 맞는 정보로 실시간 전환됨.
    • 수기 점수 입력의 성공/실패에 따라 우측 하단 애니메이션이 다르게 표시됨.

  • 등급 필터 기능 : 선택한 등급에 해당하는 곡만 보여지도록 함

  • 타이틀 표시 기능

  • 내림차순 기능

  • 필터 숨기기 기능

  • 해당 키/난이도의 전체 성과 overall 기능

  • 성과표 모달창 : 성과표 페이지에서 디스크를 클릭 시 이동

    • 메모 입력 및 삭제
      • 255자 이내로 메모 가능
    • 성과 입력
      • 빠른 수기입력과 마찬가지로 점수와 옵션을 기입 후 전송
      • 성과가 입력되면 바깥 컴포넌트와 모달 내 컴포넌트(등급 정보, 차트 등)에 바로 반영됨.
    • 성과 삭제
      • 우측 X 버튼 클릭 시 삭제

• 서열표 : 비로그인 사용자도 조회 가능

  • 리스트 : 키와 난이도를 선택하면 그에 해당하는 곡의 리스트가 나열됨