[페이먼츠 미션 Step 1] 우디(류정우) 미션 제출합니다. (#212)

* docs: 기능 목록 작성

Co-authored-by: Woody <evencoding@users.noreply.github.com>

* chore: 초기 환경 세팅

* test: Input 검증(숫자만 입력) 테스트 추가

* feat: Input 검증 함수 구현

* chore: 개발 환경 세팅

* test: 입력값 테스트 추가

* feat: 입력값 검증 함수 구현

* test: setupTests.ts 파일 추가

* chore: 개발 환경 세팅

* docs: 기능 목록 수정

* story: Input 컴포넌트 스토리 작성

* chore: storybook 세팅

* feat: Input 컴포넌트 구현

* feat: CardNumberBox 컴포넌트 구현

* feat: ExpirationDateInputBox 컴포넌트 구현

* refactor: Input 컴포넌트 생성 함수 재사용성 증진

* feat: OwnerNameInputBox 컴포넌트 구현

* fix: Input 컴포넌트 생성 함수 제거

* feat: PasswordBox 컴포넌트 구현

* feat: SecurityCodeInputBox 컴포넌트 구현

* refactor: 컴포넌트 이름 구체화

* feat: global style css 추가

* feat: CardRegisterPage 페이지 구현

* refactor: CardRegisterPage 이름 MyCardPage로 변경, CardRegisterPage에 카드 등록 페이지 적용

* feat: 리액트 라우터 적용

* feat: CardRegisterPage 스타일 적용

* feat: MyCardPage에서 CardRegisterPage로 넘어가는 로직 구현

* feat: 카드 등록 기능 구현

* feat: CardPreview 컴포넌트 구현

* feat: 보유 카드 리스트 렌더링 기능 구현

* feat: Header 컴포넌트 구현

* refactor: 파일 구조 변경

폴더 분리 세분화

* refactor: 카드 컴포넌트 스타일 수정

* refactor: 카드 번호 입력 Input에 4개의 숫자가 들어가면 구분 라인이 생기도록 기능 구현

* refactor: 만료일 Input 사이에 구분 라인이 들어가도록 구현

* refactor: 카드 이름 Input에 text-align:center 제거

* refactor: CVC, Password Input에 password 타입 적용

* refactor: 카드 비밀번호의 3, 4번째를 Dot으로 표시

* refactor: 다음 버튼 위치 변경

* refactor: 불필요한 style 제거

* feat: useForm 구현

* refactor: Header 컴포넌트를 각 페이지 컴포넌트로 이동

* refactor: 공용으로 쓰이는 interface를 파일로 분리

* refactor: 스타일 수정

* refactor: useForm 적용

* feat: 카드 정보 Form에 대한 유효성 검증 구현

* feat: useForm을 타입스크립트로 마이그레이션

* fix: 존재하지 않는 컴포넌트 제거

---------

Co-authored-by: jeonjeunghoon <jeonjeunghoon@gmail.com>
Co-authored-by: Woody <evencoding@users.noreply.github.com>

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "printWidth": 100
+}

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  staticDirs: ['../public'],
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

docs/REQUIREMENTS.md

@@ -0,0 +1,45 @@
+# 기능 요구 사항
+
+## 페이지
+
+### 보유 카드 페이지
+
+- [ ] 새로운 카드 등록 버튼을 누른다
+- [ ] 사용자가 등록한 카드를 볼 수 있다
+
+### 카드 추가 페이지
+
+- [ ] 이전 페이지로 이동할 수 있다
+- [ ] 등록 버튼을 누를 수 있다
+- [ ] 카드 번호를 입력할 수 있다
+  - [x] 숫자만 입력할 수 있다
+  - [ ] 16개의 숫자를 입력하면 다음 만료일 Input으로 focus된다
+  - [ ] 4개의 숫자 입력마다 - 가 추가된다
+  - [ ] PreCardView를 업데이트 한다
+- [ ] 만료일을 입력할 수 있다
+  - [x] 숫자만 입력할 수 있다
+  - [ ] 4개의 숫자를 입력하면 다음 카드 소유자 이름 Input으로 focus된다
+  - [ ] PreCardView를 업데이트 한다
+  - [ ] 2개의 숫자를 입력하면 / 가 추가된다
+  - [x] YY는 이번연도부터 가능
+  - [x] MM에는 01~12까지의 값만 들어갈 수 있다
+  - [x] YY가 이번연도일 경우, MM은 이번달부터 가능
+- [ ] 카드 소유자 이름을 입력할 수 있다
+  - [x] 영어와 공백만 입력할 수 있다
+  - [x] 0글자 이상~30글자 이하까지만 입력이 가능하다
+- [ ] 보안 코드를 입력할 수 있다
+  - [x] 숫자만 입력할 수 있다
+  - [ ] 3개의 숫자를 입력하면 카드 비밀번호 Input으로 focus된다
+- [ ] 카드 비밀번호를 입력할 수 있다
+  - [x] 숫자만 입력할 수 있다
+  - [ ] 숫자를 입력하면 다음 비밀번호 Input으로 focus된다
+
+## 공통 기능 목록
+
+- [x] 숫자만 입력할 수 있다
+- [ ] n개의 숫자 입력마다 어떤 문자가 추가된다
+- [ ] 다음 Input으로 focus된다
+
+## 기술 스택
+
+styled-components (css)