REQUIREMENTS.md

📌 요구사항

필수 요구사항

• 원시적인 형태의 Primitive UI 형태의 컴포넌트 작성
• Funnel 기반의 애플리케이션 설계
• Storybook 상호 작용 테스트
• Controlled & Uncontrolled Components를 명확하게 구분하거나 선택하여 구현

카드 추가

• <(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.

• 카드 번호를 입력 받을 수 있다.

  • 카드 번호는 숫자만 입력가능하다.
  • 카드 번호 4자리마다 -가 삽입된다.
  • 카드 번호는 실시간으로 카드 UI에 반영된다.
  • 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 *로 보여진다.

• 만료일을 입력 받을 수 있다.

  • MM / YY 로 placeholder를 적용한다.
  • 월, 년 사이에 자동으로 /가 삽입된다.
  • 만료일은 실시간으로 카드 UI에 반영된다.
  • 월은 1이상 12이하 숫자여야 한다.

• 보안코드를 입력 받을 수 있다.

  • 보안코드는 *으로 보여진다.
  • 보안코드는 숫자만 입력가능하다.

• 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.

  • 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
  • 카드 번호 입력 시, *으로 보여진다.

• 카드 소유자 이름을 입력 받을 수 있다.

  • 이름은 30자리까지 입력할 수 있다.
  • 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.

• 카드 추가 완료시 카드 등록 완료 페이지로 이동한다.

구현 계획 (Step1)

카드 번호 입력 Input 컴포넌트

입력 로직은 커스텀 훅에서 제어한다. 4개의 input 컴포넌트로 구현하며, 각각의 input 컴포넌트는 한자리 숫자만 입력 가능하도록 제한한다. 두번째 ~ 4번째 input 태그의 ref를 반환하여 컴포넌트에서 해당 ref를 사용하게 한다 .

• 카드 번호 입력 시, 숫자만 입력 가능하도록 제한한다.
• 첫번째 ~ 3번째 input 태그에 4자리 숫자 입력 시, 다음 input 태그로 포커스가 이동한다.
• 각각의 input은 4자리 까지만 입력 가능하다.

만료일 입력 Input 컴포넌트

입력 로직은 커스텀 훅에서 제어하며 value 와 onChange 를 컴포넌트에 전달하는 제어 컴포넌트로 구현.

• placeholder가 'MM / YY' 이다.
• 월, 년 사이에 자동으로 /가 삽입된다.
• 월은 1이상 12이하 숫자(01~12)여야 한다. 월에서 벗어난 숫자 입력 시, 입력이 무시된다.
• 연은 00 ~ 99 까지 입력 가능하다. 연에서 벗어난 숫자 입력 시, 입력이 무시된다.
• 숫자 이외의 입력은 무시된다.

보안코드 입력 Input 컴포넌트

입력 로직은 커스텀 훅에서 제어하며 value 와 onChange 를 컴포넌트에 전달하는 제어 컴포넌트로 구현.

• 보안코드 입력 시, 숫자만 입력 가능하도록 제한한다.
• 보안코드 input 태그의 타입은 password 이다.

카드 소유자 이름 입력 Input 컴포넌트

입력 로직은 커스텀 훅에서 제어하며 value 와 onChange 를 컴포넌트에 전달하는 제어 컴포넌트로 구현.

• 이름은 30자리까지 입력할 수 있다.
• 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.

카드 비밀번호 입력 Input 컴포넌트

입력 로직은 커스텀 훅에서 제어한다. 두개의 input 컴포넌트로 구현하며, 각각의 input 컴포넌트는 한자리 숫자만 입력 가능하도록 제한한다. 두번째 input 태그의 ref를 반환하여 컴포넌트에서 해당 ref를 사용하게 한다 .

• 카드 비밀번호 입력 시, 숫자만 입력 가능하도록 제한한다.
• input 태그들의 type이 password이다.
• 첫번째 input 태그에 입력 시, 두번째 input 태그로 포커스가 이동한다.
• 각각의 input은 한자리만 입력가능하다.