# 배민 로그인

### 🤲 함께한 멤버

<table align="center">
<tr>
<td>
<a href="https://github.com/KimKwon">
<img src="https://avatars.githubusercontent.com/KimKwon" width="100"/>
</a>
</td>
<td>
<a href="https://github.com/youngkyo0504">
<img src="https://avatars.githubusercontent.com/youngkyo0504" width="100"/>
</a>
</td>
<td>
<a href="https://github.com/sangrimlee">
<img src="https://avatars.githubusercontent.com/sangrimlee" width="100"/>
</a>
</td>
<td>
<a href="https://github.com/pyo-sh">
<img src="https://avatars.githubusercontent.com/pyo-sh" width="100"/>
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="https://github.com/">
권혁진
</a>
</td>
<td align="center">
<a href="https://github.com/">
금교영
</a>
</td>
<td align="center">
<a href="https://github.com/">
이상림
</a>
</td>
<td align="center">
<a href="https://github.com/pyo-sh">
표석훈
</a>
</td>
</tr>
</table>

## 1. 초기 화면

- [ ] 레이아웃 설계하기
- [ ] 로그인 페이지로 이동

## 2. 로그인 화면

- [ ] 레이아웃 설계하기
- **로그인**
- [ ] 값이 비었을 때, 로그인 버튼을 누르면 에러 메시지 표시 (빨간 텍스트)
- [ ] 서버에서는 로그인 방식 정하기(쿠키,세션)
- [ ] 회원 가입 화면으로 이동

## 3. 회원가입

### 3-1. 가입 / 약관 동의 화면

- [ ] 필수화면 모두 선택 완료시, 하단 '다음으로' 버튼 활성화(배경색이 변함)(checkbox)
- [ ] 전체동의 구현
- [ ] 나이 선택 구현(둘 중 하나만 할 수 있음,radio)
- [ ] 휴대전화 인증 화면으로 이동

### 3-2. 휴대전화 인증 화면

- [ ] 레이아웃 설계하기
- [ ] 휴대전화 입력
- [ ] 입력완료 시 'v' 체크 색깔 변화
- [ ] 'x' 버튼으로 입력 값 초기화(
- [ ] 입력 값 휴대전화 형태 유지(xxx-xxxx-xxxx)(input[type="tel"]이라고 하면 validation 됨([w3schools 참조](https://www.w3schools.com/tags/att_input_type_tel.asp))
- [ ] 인증번호
- [ ] setTimeout API를 이용한 비동기 구현
- [ ] 랜덤 4개 숫자 값 구현
- [ ] 다시 받기 구현
- [ ] 추가정보 입력 화면 이동

### 3-3. 추가정보 입력 화면

- [ ] 이메일 중복 확인 구현
- [ ] 체크 표시
- [ ] 다른 입력 값 UI 노출(닉네임, 비밀번호, 생년월일))
- [ ] 비밀번호 입력
- 10자 이상, 대문자, 소문자, 숫자, 특수문자중 2종류 조합
- 같은 숫자 혹은 연속된 숫자를 3개 이상 입력할 수 없음.
(예. 111,123,321 불가능)
- [ ] 생년월일 YYYY.MM.DD 형식으로 나타내기 + validation
- [ ] 완료 버튼 (로그인 화면 이동)