shackstack/react-payments

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

TypeScript

Level2 - 페이먼츠

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

📝 실행 방법

앱 바로 실행하기
스토리북
터미널에서 npm 설치(npm install) 후 npm start 커맨드로 앱을 실행할 수 있다.

🧑‍🤝‍🧑 페어 (페어 프로그래밍으로 개발)


제레미(김민석)	도밥(이도현)

🎯 기능 목록

🚀 Getting Started

✔️ 모바일 타겟의 웹 앱을 구현하며 사용하기 편리한 모바일 UI/UX에 대해 고민해봅니다.

✔️ 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.

✔️ React Hooks API를 활용합니다.

✔️ 재사용 가능한 Component를 직접 작성하고 사용합니다.

✔️ Controlled & Uncontrolled Components에 입각하여 Form을 핸들링합니다.

📝 필수 요구사항

카드 등록 과정에서 발생할 수 있는 여러 스토리를 고려하여 구현한다.

주요 컴포넌트에 대한 Storybook 상호 작용 테스트
Controlled & Uncontrolled Components에 입각하여 Form 핸들링
Context API를 활용해 전역 상태 관리 및 계층 재구성

✅ 프로그래밍 요구사항

✔️ 이전 미션의 프로그래밍 요구사항은 기본으로 포함한다.

Readability

custom hook을 이용여 재사용 가능한 기능을 추출한다.
공통적으로 사용되는 UI 컴포넌트를 재사용 가능하게 구현한다.

Reusability

각 스토리에 명확한 이름을 지정하고, 스토리 이름을 통해 컴포넌트의 사용 사례를 쉽게 이해할 수 있도록 한다.
변동 가능한 값에 대해 사용자가 직접 조작해볼 수 있게 하여 컴포넌트를 더욱 쉽게 이해할 수 있도록 한다.

Performance

react에서 제공하는 hook을 이용하여 성능 최적화를 고려한다.
Controlled & Uncontrolled Components를 고려하여 Form을 핸들링한다.