[클린코드 리액트 3기 이정수] 페이먼츠 미션 Step1

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -13,3 +13,34 @@
 ✔️ 다른 라이브러리나 프레임워크 없이 오로지 `React`만으로 상태를 관리하고 컴포넌트를 설계합니다.  
 ✔️ `재사용 가능한 Component`를 직접 작성하고 사용합니다.  
 ✔️ `Controlled` & `Uncontrolled Components`에 입각하여 `Form`을 핸들링합니다.
+
+## 📝 Requirements
+
+### 필수 요구사항
+- [x] 원시적인 형태의 `Primitive UI` 형태의 컴포넌트 작성
+- [x] `Stepper` 기반의 애플리케이션 설계
+- [ ] `Storybook` 상호 작용 테스트
+- [ ] `Controlled` & `Uncontrolled Components`를 명확하게 구분하거나 선택하여 구현
+
+### 카드 추가
+- [x] <(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
+- [x] 카드 번호를 입력 받을 수 있다.
+  - [x] 카드 번호는 숫자만 입력가능하다.
+  - [x] 카드 번호 4자리마다 -가 삽입된다.
+  - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
+  - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 *로 보여진다.
+- [x] 만료일을 입력 받을 수 있다.
+    - [x] MM / YY 로 placeholder를 적용한다.
+    - [x] 월, 년 사이에 자동으로 /가 삽입된다.
+    - [x] 만료일은 실시간으로 카드 UI에 반영된다.
+    - [x] 월은 1이상 12이하 숫자여야 한다.
+- [x] 보안코드를 입력 받을 수 있다.
+  - [x] 보안코드는 *으로 보여진다.
+  - [x] 보안코드는 숫자만 입력가능하다.
+- [x] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
+  - [x] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
+  - [x] 카드 번호 입력 시, *으로 보여진다.
+- [x] 카드 소유자 이름을 입력 받을 수 있다.
+  - [x] 이름은 30자리까지 입력할 수 있다.
+  - [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
+- [x] 카드 추가 완료시 카드 등록 완료 페이지로 이동한다.