[넥스트레벨 MaHyuna] 페이먼츠 미션 STEP1

[MaHyuna]

필수요구사항

• Storybook 상호 작용 테스트
• 재사용 가능한 Component 작성

카드 추가

• <(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
• 카드 번호를 입력 받을 수 있다.
  • 카드 번호입력 폼에 라벨을 보여준다.
  • 카드 번호는 숫자만 입력가능하다.
  • 카드 번호 4자리마다 -가 삽입된다.
  • 카드 번호는 실시간으로 카드 UI에 반영된다.
  • 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 *로 보여진다.
  • 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
  • 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
  • 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
  • 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
• 만료일을 입력 받을 수 있다.
  • 만료일 입력 폼에 라벨을 보여준다.
  • MM / YY 로 placeholder를 적용한다.
  • 월, 년 사이에 자동으로 /가 삽입된다.
  • 만료일은 실시간으로 카드 UI에 반영된다.
  • 월은 1이상 12이하 숫자여야 한다.
  • 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
  • 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
• 보안코드를 입력 받을 수 있다.
  • 카드 보안코드 입력 폼에 라벨을 보여준다.
  • 보안코드는 *으로 보여진다.
  • 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
  • 보안코드는 숫자만 입력가능하다.
  • 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
• 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
  • 카드 비밀번호 입력 폼에 라벨을 보여준다.
  • 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
  • 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
  • 카드 번호 입력 시, *으로 보여진다.
  • 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
• 카드 소유자 이름을 입력 받을 수 있다.
  • 카드 소유자 이름 입력 폼 라벨을 보여준다.
  • 이름은 30자리까지 입력할 수 있다.
  • 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
• 클릭 시, 카드 등록 완료 페이지로 이동한다.

심화 요구사항 (선택사항)

• Storybook 단위 테스트
• 유효성 검증 실패에 대한 UI/UX 추가
• 카드사 선택
  • 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다.
  • 카드사를 선택하지 않아도 모달을 닫을 수 있다.
• 보안코드 툴팁
  • 클릭 시, 보안코드 관련 안내 메시지를 보여준다.
  • focusout 시, 툴팁이 닫힌다.
• 가상 키보드
  • 마스킹 처리된 값 입력시 사용
  • 숫자를 랜덤으로 배열

---

안녕하세요, 수경님! 리뷰 잘 부탁드립니다. 😊

코드에 집중하고자 스타일은 따로 커스텀 하지 않고 기본 마크업 가지고 와서 작업했어요.
스타일 제외하고 코드부분만 봐주시면 될 것 같습니다!

1. 이번 목표는 라이브러리 미사용을 목적으로 코드를 작성했습니다!
   그래서 라우터에 대해 사실 고민이 많아요... 현재 방법으로 했을 때는 코드가 지저분해 보이는데 다른 방법이 있는 고민해보겠습니다.

2. 스토리북은 적용하면서 타입에러가 나오는데 아직 문제를 찾지 못했어요.. 😂
   카드목록 부분쪽에 스토리북을 예시로 적용해보았습니다만.. 2단계에서는 해결하도록 노력해보겠습니다.