From 72ac6d6caf61ddf949854a9ba1a1e9989ff117e5 Mon Sep 17 00:00:00 2001 From: bytrustu Date: Sun, 3 Mar 2024 23:26:17 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Funnel=20=EA=B8=B0=EB=B0=98=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EB=8F=99=EB=90=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/REQUIREMENTS.md | 49 +++++++++++++++++++++-------------------- src/App.tsx | 18 ++++++++++----- src/components/index.ts | 1 + src/pages/index.ts | 3 +++ 4 files changed, 42 insertions(+), 29 deletions(-) create mode 100644 src/pages/index.ts diff --git a/docs/REQUIREMENTS.md b/docs/REQUIREMENTS.md index 4505e53a0..f22bd0616 100644 --- a/docs/REQUIREMENTS.md +++ b/docs/REQUIREMENTS.md @@ -1,43 +1,44 @@ ### 필수 요구사항 - [x] 원시적인 형태의 Primitive UI 형태의 컴포넌트 작성 - [x] Box + - [x] Button + - [x] Circle - [x] HStack - [x] VStack - [x] Grid - - [x] Circle - - [x] Button - [x] TextField - [x] Typography + - [x] Label -- [ ] Funnel 기반의 애플리케이션 설계 +- [x] Funnel 기반의 애플리케이션 설계 - [x] Storybook 상호 작용 테스트 -- [ ] Controlled & Uncontrolled Components를 명확하게 구분하거나 선택하여 구현 +- [x] Controlled & Uncontrolled Components를 명확하게 구분하거나 선택하여 구현 ### 카드 추가 <(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다. -= [ ] 카드 번호를 입력 받을 수 있다. += [x] 카드 번호를 입력 받을 수 있다. -- [ ] 카드 번호는 숫자만 입력가능하다. -- [ ] 카드 번호 4자리마다 -가 삽입된다. -- [ ] 카드 번호는 실시간으로 카드 UI에 반영된다. -- [ ] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 *로 보여진다. -- [ ] 만료일을 입력 받을 수 있다. +- [x] 카드 번호는 숫자만 입력가능하다. +- [x] 카드 번호 4자리마다 -가 삽입된다. +- [x] 카드 번호는 실시간으로 카드 UI에 반영된다. +- [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 *로 보여진다. +- [x] 만료일을 입력 받을 수 있다. -- [ ] MM / YY 로 placeholder를 적용한다. -- [ ] 월, 년 사이에 자동으로 /가 삽입된다. -- [ ] 만료일은 실시간으로 카드 UI에 반영된다. -- [ ] 월은 1이상 12이하 숫자여야 한다. -- [ ] 보안코드를 입력 받을 수 있다. +- [x] MM / YY 로 placeholder를 적용한다. +- [x] 월, 년 사이에 자동으로 /가 삽입된다. +- [x] 만료일은 실시간으로 카드 UI에 반영된다. +- [x] 월은 1이상 12이하 숫자여야 한다. +- [x] 보안코드를 입력 받을 수 있다. -- [ ] 보안코드는 *으로 보여진다. -- [ ] 보안코드는 숫자만 입력가능하다. -- [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다. +- [x] 보안코드는 *으로 보여진다. +- [x] 보안코드는 숫자만 입력가능하다. +- [x] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다. -- [ ] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다. -- [ ] 카드 번호 입력 시, *으로 보여진다. -- [ ] 카드 소유자 이름을 입력 받을 수 있다. +- [x] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다. +- [x] 카드 번호 입력 시, *으로 보여진다. +- [x] 카드 소유자 이름을 입력 받을 수 있다. -- [ ] 이름은 30자리까지 입력할 수 있다. -- [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다. -- [ ] 카드 추가 완료시 카드 등록 완료 페이지로 이동한다. \ No newline at end of file +- [x] 이름은 30자리까지 입력할 수 있다. +- [x] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다. +- [x] 카드 추가 완료시 카드 등록 완료 페이지로 이동한다. \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index b0c825026..2f511f8df 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,9 +1,17 @@ -import { AppLayout } from 'src/components/AppLayout'; +import { Funnel } from '@/components'; +import { CardListPage, CardAddPage, CardCompletePage } from '@/pages'; const App = () => ( - -
Hello, React Payments
- + + + + + + + + + + + ); - export default App; diff --git a/src/components/index.ts b/src/components/index.ts index 61eb3f41d..d50ad014b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,6 @@ export * from './AppLayout'; export * from './CardInput'; export * from './CardDisplay'; +export * from './CardSelectBottomSheet'; export * from './CardProvider'; export * from './Funnel'; diff --git a/src/pages/index.ts b/src/pages/index.ts new file mode 100644 index 000000000..f5219138c --- /dev/null +++ b/src/pages/index.ts @@ -0,0 +1,3 @@ +export * from './CardAddPage'; +export * from './CardCompletePage'; +export * from './CardListPage';