[1단계 - 페이먼츠 미션] 하루(김하루) 미션 제출합니다.

.eslintrc

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "browser": true
+  },
+  "extends": [
+    "semistandard",
+    "standard-jsx",
+    "standard-react",
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "prettier"
+  ],
+  "plugins": ["react", "jsx-a11y"],
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "react/jsx-handler-names": "off",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/button-has-type": "off"
+  }
+}

.gitignore

@@ -0,0 +1,24 @@
+# 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*
+.eslintcache

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "endOfLine": "auto",
+  "singleQuote": true,
+  "arrowParens": "always",
+  "trailingComma": "all"
+}

.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-create-react-app'],
+};

.storybook/preview.js

@@ -0,0 +1,20 @@
+const customViewports = {
+  Default: {
+    name: 'Default',
+    styles: {
+      width: '375px',
+      height: '701px',
+    },
+  },
+};
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {},
+  layout: 'fullscreen',
+  viewport: {
+    viewports: {
+      ...customViewports,
+    },
+    defaultViewport: 'Default',
+  },
+};

REQUIREMENTS.md

@@ -0,0 +1,55 @@
+## 📝 기능 구현 목록
+
+### 1단계
+
+#### 카드 목록 화면
+
+- [x] 카드추가 버튼(이미지)을 클릭하면 카드 추가 폼 화면이 표시된다.
+
+#### 카드 추가 폼 화면
+
+- 카드번호
+  - [x] 카드 번호 입력창이 자동 포커싱된다.
+  - [x] 네 자리 입력이 완료될 때마다 하이픈(-)이 표시되고 다음 입력창으로 넘어간다.
+  - [x] 8자리까지 입력했을 때 8자리로 매칭되는 카드사가 있을 경우, 카드사가 자동으로 선택된다.
+  - [x] 8자리까지 입력했을 때 8자리로 매칭되는 카드사가 없을 경우, 카드사 선택 모달이 표시된다.
+    - [x] 카드사 버튼을 클릭해서 카드사를 선택할 수 있다.
+    - [x] 모달의 Dimmed 영역을 클릭해서 모달을 닫을 수 있다.
+  - [x] 9~12번째 자리와 13~16번째 자리 입력 시 마스킹되어 표시된다.
+  - [x] 16자리를 모두 입력하면 카드 이미지에도 카드번호가 표시된다.
+  - [x] 16자리를 모두 입력하면 카드 만료일 입력창으로 포커스가 넘어간다.
+- 카드 만료일
+  - [x] 월 2자리 입력이 완료되면 연 2자리 입력창으로 포커스가 넘어간다.
+  - [x] 4자리를 모두 입력하면 카드 소유자 이름 입력창으로 포커스가 넘어간다.
+  - [x] 4자리를 모두 입력하면 카드 이미지에도 카드번호가 표시된다.
+- 카드 소유자 이름
+  - [x] 입력된 글자수가 우측 상단에 실시간으로 표시된다.
+  - [x] 알파벳만 입력 가능하다.
+  - [x] 소문자로 입력하더라도 input창에는 대문자로 표시된다.
+  - [x] 이름을 입력하고 포커스아웃 되었을 때 카드 이미지에도 이름이 표시된다.
+- 보안 코드
+  - [x] 입력 시 마스킹되어 표시된다.
+  - [x] 물음표 버튼 호버 시 보안 코드 설명 모달이 표시된다.
+  - [x] 3자리를 모두 입력하면 카드 비밀번호 입력창으로 포커스가 넘어간다.
+- 카드 비밀번호
+  - [x] 입력 시 마스킹되어 표시된다.
+- 카드 등록
+  - [x] 선택 칸을 제외한 빈 칸이 없고, 카드사도 선택이 된 경우에 '다음'버튼이 표시된다.
+  - [x] '다음'버튼을 클릭하면 카드를 등록한다.
+    - [x] 카드사가 선택되지 않았을 경우, 카드사 선택 모달을 표시한다.
+    - [ ] (심화) 만료 월 입력 시 1 부터 12 사이의 정수만 입력할 수 있다.
+    - [ ] (심화) 만료 연도 입력 시 00 부터 99 사이의 정수만 입력할 수 있다.
+    - [ ] (심화) 현재 연월 보다 이전 연월은 입력한 경우 등록할 수 없다.
+
+#### 카드 추가 확인 화면
+
+- 등록 카드 확인
+  - [x] 등록한 카드의 이미지가 표시된다.
+- 별칭 등록
+  - [x] 별칭 등록에 자동 포커싱된다.
+  - [x] 1글자 ~ 10글자 범위 내로 입력 가능하다.
+
+### 2단계
+
+- [ ] 카드 추가 확인 버튼을 누르면 보유 카드 목록 화면을 표시한다.
+- 추가 작성 예정

cspell.json

@@ -0,0 +1,17 @@
+{
+  "version": "0.1",
+  "language": "en",
+  "words": [
+    "predeploy",
+    "semistandard",
+    "datetime",
+    "noopener",
+    "noreferrer",
+    "Viewports",
+    "Parens",
+    "Strapi",
+    "classname",
+    "browserslist"
+  ],
+  "flagWords": []
+}