프론트 기획 실습 회원가입 (2)

2. 상세 기능 명세

1. 로그인 및 회원 가입

아이디	- 플레이스 홀더 내에 아이디라고 표기된다 - 유저가 플레이스 홀더 클릭시 커서가 노출되며 아이디 문구가 없어진다
비밀번호	- 플레이스 홀더 내에 비밀번호라고 표기된다 - 유저가 플레이스 홀더 클릭시 커서가 노출되며 비밀번호 문구가 없어진다 - 입력되는 비밀번호는 *처리 되어 노출된다
자동 로그인	클릭시 체크박스가 활성화↔비활성화 되며 - 활성화 시 : 아이디 / 비밀번호를 저장하여 또다시 아이디 / 비밀번호를 입력하지 않아도 로그인 되도록 설정 - 비활성화 시 : 매번 아이디 / 비밀번호를 입력하여 로그인하도록 설정
로그인 버튼	로그인 버튼 클릭 시 - 아이디 / 비밀번호가 정확할 때 : 로그인되어 이전 진입 화면으로 이동 - 아이디 / 비밀번호 둘 중 하나라도 틀린 값을 입력했을 때 : 아이디 또는 비밀번호를 확인해주세요. 라고 문구가 로그인 버튼 위에 노출된다.
아이디 찾기	아이디 찾기 화면으로 이동한다
비밀번호 찾기	비밀번호 찾기 화면으로 이동한다
회원가입	회원 가입 페이지로 이동한다
SNS 로그인	각 소셜 버튼 클릭 시 해당 서비스의 로그인 단계로 이동

 

2. 회원 가입 상세

번호 항목 기능 명세

1	아이디	- 플레이스홀더에 '아이디(필수)'라고 표기됨- 클릭 시 커서가 노출되며 문구는 사라짐
2	비밀번호	- 플레이스홀더에 '비밀번호(필수)'라고 표기됨- 클릭 시 커서가 노출되며 문구는 사라짐- 입력 내용은 * 처리되어 표시됨
3	보기 버튼	- 클릭 시 * 처리된 비밀번호가 평문으로 보임
4	이름	- 플레이스홀더에 '이름(필수)'라고 표기됨- 클릭 시 커서가 노출되며 문구는 사라짐- 휴대폰 인증 시, 입력한 이름과 일치 여부 확인
5	국가코드 선택	- 클릭 시 국가 코드 리스트가 노출되며, 기본값은 '대한민국'으로 설정됨
6	휴대폰 번호	- 플레이스홀더에 '휴대폰번호(필수)'라고 표기됨- 클릭 시 커서가 노출되며 문구는 사라짐
7	인증 버튼	- 대한민국 국가코드 선택 후 010-XXXX-XXXX 형식 확인- 형식이 올바르면 인증 단계 진행- 틀릴 경우 메시지 노출
8	이메일 주소	- 플레이스홀더에 '이메일 주소(필수, 아이디 찾기에 사용됩니다.)' 표기- 클릭 시 문구 사라지고 커서 노출(이건 전문 팀에서 처리함)
9	유저 동의 항목 / 내용보기	- 동의가 필요한 항목들이 나열됨- ‘내용보기’ 클릭 시 각 항목 전문이 노출되는 화면으로 이동
10	가입하기 버튼	- 모든 필수 입력 항목이 작성되고, 필수 동의 항목 체크 시 버튼 활성화

 

회원 가입 시 에러 메세지 노출

에러메세지 작성할 때

1. 해당 필드에 맞지않는, 규칙에 맞지 않는 내용이 입력되면 플레이스 홀더가 빨갛게 노출된다. 

2. 플레이스 홀더 밑에 문구가 노출된다.

아이디 필드 문구 : 아이디는 6~12자의 영문, 숫자...

비밀번호 필드 문구 : 비밀번호는 8~20자...