로그인, 회원가입 UI부터 구현하기

[DataCodeLiteracy]

• tailwind로 스타일링 잘 되는지 확인
• 구현하는 과정에서 발생하는 문제 기록하고 팀원들한테 공유하기

[DataCodeLiteracy]

요구 사항

회원가입 페이지

UI

• OAuth 로그인이 가능한 UI를 구현한다.
• 이메일, 비밀번호를 입력받는다.
• 이름과 휴대폰번호를 입력받는다.
• 유효성 검사에 맞는 유효성 메시지를 나타낸다.
• 이용약관를 입력받는다.
• 공통적으로 사용할 버튼 컴포넌트를 구현한다.

로그인 페이지

UI

• 아이디와 비밀번호를 입력받는다.
• 자동 로그인 체크박스와 아이디, 비밀번호 찾기를 구현한다.
• 로그인 버튼과 회원가입 버튼을 구현한다.
• OAuth 버튼을 구현한다.

계정 정보 찾기 페이지

• 아이디 찾기

  UI

  • 휴대폰 인증과 이메일 인증을 받을 수 있는 UI를 공통 컴포넌트로 구현한다.
  • 버튼 컴포넌트를 이용해서 버튼을 구현한다.
  • 아이디를 찾고 난 뒤의 UI는 찾았다는 메세지와 아이디와 가입일을 보여준다.
    • 비밀번호 찾기버튼과 로그인 버튼도 보여준다.

• 비밀번호 찾기

  UI

  • UI도 공통 컴포넌트를 이용한다.