/react-payments

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

Primary LanguageJavaScript

Level2 - 페이먼츠

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

😎 프로젝트 결과 페이지

결과 페이지 보러 가기: https://iborymagic-payments.netlify.app/

🚀 Getting Started

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

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

📝 기능 목록

  • 폼을 통한 카드 추가
    • 유효성 검증 실패에 대한 UI/UX
  • 카드 추가 확인
  • 카드 목록 조회
  • 나열된 카드 클릭시 카드 추가 확인 화면 재활용
    • 별칭 수정 가능
  • Context API를 활용해 전역 상태 관리 및 계층 재구성

⚙ 기능 구현 모습

🗃 컴포넌트 설계도

1 2 3 4 5 6 7