-
-
React 모바일 페이먼츠 애플리케이션
- +https://hochan222.github.io/react-payments/ -## 🚀 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을 보내주세요. - -{name}
+CardListPresenter
+ + ); +}; + +export default CardListPresenter; diff --git a/src/Route/CardList/index.tsx b/src/Route/CardList/index.tsx new file mode 100644 index 0000000000..b3d250b270 --- /dev/null +++ b/src/Route/CardList/index.tsx @@ -0,0 +1,2 @@ +import CardListContainer from './CardListContainer'; +export default CardListContainer; diff --git a/src/__test__/__snapshots__/storyshots.test.ts.snap b/src/__test__/__snapshots__/storyshots.test.ts.snap new file mode 100644 index 0000000000..f157656293 --- /dev/null +++ b/src/__test__/__snapshots__/storyshots.test.ts.snap @@ -0,0 +1,27 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots ColorButton blue 1`] = ` + +`; + +exports[`Storyshots ColorButton red 1`] = ` + +`; diff --git a/src/__test__/storyshots.test.ts b/src/__test__/storyshots.test.ts new file mode 100644 index 0000000000..28de10fecc --- /dev/null +++ b/src/__test__/storyshots.test.ts @@ -0,0 +1,2 @@ +import initStoryshots from '@storybook/addon-storyshots'; +initStoryshots({}); diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000000..781db41a6b --- /dev/null +++ b/src/index.css @@ -0,0 +1,14 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + font-size: 16px; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: #e5e5e5; +} diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000000..395b74997b --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; + +ReactDOM.render(