🥸 Leets 로그인

미션 요구사항

• 동아리원들이 로그인하여 스스로 출석할 수 있습니다

로그인

• 아이디와 비밀번호를 입력 받습니다.
• 아이디/비밀번호가 일치하지 않는 경우 각각 따로 불일치 문구를 표시합니다.
• 아이디/비밀번호가 일치하는 경우 출석하기 버튼이 있는 페이지로 이동합니다.
• 아이디가 없는 경우, 회원 가입을 진행합니다.

회원가입

• 이름을 입력 받습니다.
• 파트를 입력 받습니다.
• 아이디 중복확인을 진행합니다.
• 비밀번호 확인 입력이 필요합니다.
• 비밀번호 입력란과 비밀번호 확인 입력란이 일치하며, 아이디가 중복되지 않은 경우에만 회원가입을 진행할 수 있습니다.
• 회원가입이 성공하면 다시 로그인 화면으로 이동합니다.

출석하기

• 출석하기 버튼을 클릭하면 자신의 출석 로그 페이지로 이동합니다
• 사용자의 이름과 오늘의 날짜가 떠야 합니다.
• 출석하기 버튼이 있어야 합니다.
• 출석하기 버튼을 누르면 출석 로그 페이지가 떠야 합니다.

출석로그

• 출석 로그 페이지에는 자신의 총 출석 횟수가 나타납니다.
• 전체 동아리 진행 주차 중, 오늘이 해당하는 주차의 출석이 완료 되어 있어야 합니다.
• 로그아웃 버튼을 클릭하면 로그아웃이 되며, 로그인 하기 페이지로 이동해야 합니다.

기능 요구사항

FE

화면구성은 아래의 피그마를 참고하여 주세요 :

https://www.figma.com/file/ufDXPwoda6rcq4yiKHRJZA/Untitled?type=design&node-id=0-1&mode=design&t=lRRNX7GyQibpUKRT-0

요구 페이지

• 로그인 페이지

  아이디와 비밀번호를 입력 받습니다 일치하지 않는 경우 따로 불일치 문구를 표시합니다 일치하는 경우 출석하기 버튼이 있는 페이지로 이동합니다

• 회원가입 페이지

  아이디 중복 확인을 합니다 비밀번호를 확인합니다

• 출석 페이지

  로그인 성공 이후의 페이지입니다 로그인한 유저의 이름과 파트가 화면에 뜹니다 오늘의 날짜가 화면에 뜹니다 출석하기 버튼이 렌더링 됩니다

• 출석 로그 페이지

  출석하기 버튼을 클릭하면 넘어옵니다 사용자의 출석이 완료 됨을 알립니다 출석 현황이 렌더링됩니다 출석률이 계산되어 렌더링됩니다

요구 기능

Front End

• 회원가입
  • 유효성 검사
  • 중복된 아이디 시, 사용자에게 표시
• 로그인
  • 로그인 실패 시, 실패 원인 사용자에게 표시
• 출석하기
  • 이번 주차 출석하기
• 출석로그
  • 출석 기록 표시

프로그래밍 요구사항

Front End

• React를 통해 서비스
• 로그인 시 발급 받은 토큰을 "쿠키에" 저장해야 합니다
• 로그아웃 구현
• 예외 처리를 해야 합니다
• BE에서 반환한 에러 메세지에 맞는 페이지 or 컴포넌트를 반환
• 디자인에 맞는 애니메이션 및 액션을 구현해야 합니다