작업 방식
페어 프로그래밍 → “로그인 이후 페이지 별 분담”
•
현지님 :2:2로 나눠서 페어하자. 기능 구현하는 것에 대한 감을 잘 잡을 수 있을 것 같아서. + 준엽님. + 소영님.
2대2 팀 어떻게 나눌까요?
14일 일정
•
공통스타일드컴포넌트
•
끝나면 이제 프로젝트 시작하는 걸로.
로그인 페이지 명세
3.1.2 로그인
•
로그인은 로그인 메인 화면과 이메일 로그인 화면으로 나눠져 있습니다.
•
SNS(카카오톡, 구글, 페이스북) 로그인은 구현하지 않으며, 화면에 버튼만 배치하도록 합니다. /* 카카오톡, 구글 로그인 구현합니다. */
•
로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
•
이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
•
로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
3.1.3 회원가입
•
로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.
•
회원가입 페이지에서는 유효성 검사가 로그인 페이지와 조금 다르게 진행됩니다.
•
이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
•
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 주황색 #F26E22)
•
작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
•
프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.
◦
프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.
◦
사용자 이름과 소개는 다른 사용자와 중복될 수 있습니다.
◦
계정 ID는 중복이 불가합니다.
◦
프로필 설정에서도 같은 방식으로 유효성 검사가 진행됩니다. 계정 ID에 대한 중복 유무와 형식을 검사합니다.
페어프로그래밍
1.준근 현지
2.준엽 소영
금요일 일정
9-16시 프로젝트
