areumsheep / react-payments Goto Github PK

React 모바일 페이먼츠 애플리케이션

Component-Driven Development 에 따라 UI를 구성하고 재사용 가능한 Component를 작성합니다.

✔️ 모바일 타겟의 웹 앱을 구현하며 사용하기 편리한 모바일 UI/UX에 대해 고민해봅니다.
✔️ 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.
✔️ 재사용 가능한 Component를 직접 작성하고 사용합니다.
✔️ Controlled & Uncontrolled Components에 입각하여 Form을 핸들링합니다.

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

• < (뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
• 카드 번호를 입력 받을 수 있다.
  • 카드 번호는 숫자만 입력가능하다.
  • 카드 번호 4자리마다 -가 삽입된다.
  • 카드 번호는 실시간으로 카드 UI에 반영된다.
  • 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 *로 보여진다.
• 만료일을 입력 받을 수 있다.
  • MM / YY 로 placeholder를 적용한다.
  • 월, 년 사이에 자동으로 /가 삽입된다.
  • 만료일은 실시간으로 카드 UI에 반영된다.
  • 월은 1이상 12이하 숫자여야 한다.
• 보안코드를 입력 받을 수 있다.
  • 보안코드는 *으로 보여진다. (type="password"를 사용하여 * 표시 사용하지 않음)
  • 보안코드는 숫자만 입력가능하다.
• 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
  • 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
  • 카드 번호 입력 시, *으로 보여진다.
• 카드 소유자 이름을 입력 받을 수 있다.
  • 이름은 30자리까지 입력할 수 있다.
  • 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
• (추가) 카드 값을 localStorage에 저장한다
• (추가) 카드 색상 + 카드 이름을 변경할 수 있다
• 카드 추가 완료시 카드 등록 완료 페이지로 이동한다.
  • localStorage 값으로 카드 등록 완료 페이지에서 입력한 값을 확인한다.