# 💳 React 모바일 페이먼츠 앱

## 1단계 기능 목록

- [x] 사용자의 입력에 따라 유효성 검사가 이뤄져야 한다.
  - 체크 리스트
  - [x] 카드번호는 숫자로만 입력할 수 있다.
  - [x] 만료월은 1월부터 12월까지 입력할 수 있으며, 만료연도는 2자리 단위로 숫자만 입력할 수 있다.
  - [x] 카드 소유자 이름은 30자까지 입력할 수 있다.
  - [x] 보안 코드는 숫자로 3자리까지 입력할 수 있다.
  - [x] 카드 비밀번호는 앞 2자리만 입력하며, 숫자로만 입력할 수 있다.
- [x] 사용자는 다음 텍스트를 눌러, 카드를 추가할 수 있다.

## 2단계 기능 목록

- [x] 사용자의 입력에 따라 같은 필드 내 다음 입력란으로 포커스가 자동으로 이동되어야 한다.
- [x] 카드 추가 시 카드를 눌러 카드사를 선택할 수 있는 모달이 출력되어야 하며, 모달을 통해 카드사를 선택할 수 있어야 한다.
- [x] 추가한 카드들을 목록으로 출력하여야 한다.\*
- [x] 카드 목록에서 카드를 추가하고, 기존 카드를 수정할 수 있어야 한다.\*
  - [x] 카드 수정 시 기존의 카드 추가 컴포넌트를 재사용하여야 한다.\*
- [x] 카드를 추가 및 저장할 때 별칭을 저장할 수 있어야한다.\*

- [x] 추가된 카드를 비동기 통신을 통해 서버에 저장할 수 있어야 한다.
- [ ] StoryBook 스냅샷 테스트를 진행할 수 있어야 한다.

_필수 요구사항은 \* 표시하였습니다._