feat: Funnel 기반 페이지 이동되도록 구성

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자리까지 입력할 수 있다.
-- [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
-- [ ] 카드 추가 완료시 카드 등록 완료 페이지로 이동한다.
+- [x] 이름은 30자리까지 입력할 수 있다.
+- [x] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
+- [x] 카드 추가 완료시 카드 등록 완료 페이지로 이동한다.

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 = () => (
-  <AppLayout>
-    <div>Hello, React Payments</div>
-  </AppLayout>
+  <Funnel.Root>
+    <Funnel.Step index={0}>
+      <CardListPage />
+    </Funnel.Step>
+    <Funnel.Step index={1}>
+      <CardAddPage />
+    </Funnel.Step>
+    <Funnel.Step index={2}>
+      <CardCompletePage />
+    </Funnel.Step>
+  </Funnel.Root>
 );
-
 export default App;

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';

src/pages/index.ts

@@ -0,0 +1,3 @@
+export * from './CardAddPage';
+export * from './CardCompletePage';
+export * from './CardListPage';