Puterism / react-payments

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

Level2 - 페이먼츠

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

🚀 Getting Started

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

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

📝 Requirements

공통 요구사항

• Storybook 상호 작용 테스트

Step1

권장 마감기한 - 4월 27일 화요일

• REQUIREMENTS.md에 요구 사항 도출
• 재사용 가능한 Component 작성

필수 구현

• 카드 추가 폼
• 카드 추가 확인

심화 요구사항

• Storybook 단위 테스트
• 유효성 검증 실패에 대한 UI/UX 추가
• 가상 키보드
  • 마스킹 처리된 값 입력시 사용
  • 숫자를 랜덤으로 배열

Step2

권장 마감기한 - 5월 4일 화요일

필수 요구사항

• Controlled & Uncontrolled Components에 입각하여 Form 핸들링
• Context API를 활용해 전역 상태 관리 및 계층 재구성

필수 구현

• 카드 목록

심화 요구사항

• Storybook 스냅샷 테스트
• 비동기 통신
  • 다양한 도구를 활용 (예 JSON Server, Strapi 등등)
  • 등록된 카드 정보를 CRUD 합니다.
• 나열된 카드 클릭시 카드 추가 확인 화면 재활용
  • 별칭 수정 가능

👏 Contributing

만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.

🐞 Bug Report

버그를 발견한다면, Issues에 등록해주세요.