[넥스트레벨 Woobottle] 페이먼츠 미션 STEP1-1

.eslintrc.js

@@ -0,0 +1,22 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {},
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+};

.gitignore

@@ -0,0 +1,13 @@
+
+  # See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log 
+yarn-error.log

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ],
+  "framework": "@storybook/react"
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.organizeImports": false 
+  },
+  "editor.formatOnSave": true,
+  "search.useIgnoreFiles": true,
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true
+  }
+}

README.md

@@ -27,53 +27,53 @@
 ## 📝 Requirements
 ### 필수 요구사항 
 - [ ] `Storybook` 상호 작용 테스트
-- [ ] `재사용 가능한 Component` 작성
+- [x] `재사용 가능한 Component` 작성
 #### 카드 추가
-- [ ] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
-- [ ] 카드 번호를 입력 받을 수 있다.
-    - [ ] 카드 번호입력 폼에 라벨을 보여준다.
-    - [ ] 카드 번호는 숫자만 입력가능하다.
-    - [ ] 카드 번호 4자리마다 `-`가 삽입된다.
-    - [ ] 카드 번호는 실시간으로 카드 UI에 반영된다.
-    - [ ] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
-    - [ ] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
-    - [ ] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
-    - [ ] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
-    - [ ] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-- [ ] 만료일을 입력 받을 수 있다.
-    - [ ] 만료일 입력 폼에 라벨을 보여준다.
-    - [ ] `MM / YY` 로 placeholder를 적용한다.
-    - [ ] 월, 년 사이에 자동으로 `/`가 삽입된다.
-    - [ ] 만료일은 실시간으로 카드 UI에 반영된다.
-    - [ ] 월은 1이상 12이하 숫자여야 한다.
-    - [ ] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
-    - [ ] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-- [ ] 보안코드를 입력 받을 수 있다.
-    - [ ] 카드 보안코드 입력 폼에 라벨을 보여준다.
-    - [ ] 보안코드는 `*`으로 보여진다.
-    - [ ] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
-    - [ ] 보안코드는 숫자만 입력가능하다.
-    - [ ] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-- [ ] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
-    - [ ] 카드 비밀번호 입력 폼에 라벨을 보여준다.
-    - [ ] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
-    - [ ] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
-    - [ ] 카드 번호 입력 시, `*`으로 보여진다.
-    - [ ] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
-- [ ] 카드 소유자 이름을 입력 받을 수 있다.
-    - [ ] 카드 소유자 이름 입력 폼 라벨을 보여준다.
-    - [ ] 이름은 30자리까지 입력할 수 있다.
-    - [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
-- [ ] 클릭 시, 카드 등록 완료 페이지로 이동한다.
+- [x] `<`(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
+- [x] 카드 번호를 입력 받을 수 있다.
+    - [x] 카드 번호입력 폼에 라벨을 보여준다.
+    - [x] 카드 번호는 숫자만 입력가능하다.
+    - [x] 카드 번호 4자리마다 `-`가 삽입된다.
+    - [x] 카드 번호는 실시간으로 카드 UI에 반영된다.
+    - [x] 카드 번호는 앞 8자리만 숫자로 보여지고, 나머지 숫자는 `*`로 보여진다.
+    - [x] 카드 번호 앞 8자리로 카드사를 추정하여 그 테마를 카드 UI에 반영한다.
+    - [x] 카드사가 선택되고 유효한 카드 번호 16자리를 모두 입력하면, 자동으로 만료일로 focus된다.
+    - [x] 카드 앞 8자리 숫자를 입력하고 카드사가 선택되지 않은 경우, 나머지 카드 번호 입력 시도 시, 카드사 선택 모달이 보여진다.
+    - [x] 유효하지 않은 카드 번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 만료일을 입력 받을 수 있다.
+    - [x] 만료일 입력 폼에 라벨을 보여준다.
+    - [x] `MM / YY` 로 placeholder를 적용한다.
+    - [x] 월, 년 사이에 자동으로 `/`가 삽입된다.
+    - [x] 만료일은 실시간으로 카드 UI에 반영된다.
+    - [x] 월은 1이상 12이하 숫자여야 한다.
+    - [x] 월, 년 입력이 유효하면 보안코드 입력으로 focus된다
+    - [x] 유효하지 않은 만료일을 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 보안코드를 입력 받을 수 있다.
+    - [x] 카드 보안코드 입력 폼에 라벨을 보여준다.
+    - [x] 보안코드는 `*`으로 보여진다.
+    - [x] 보안코드 3자리가 입력되면 카드 비밀번호 입력으로 focus된다.
+    - [x] 보안코드는 숫자만 입력가능하다.
+    - [x] 유효하지 않은 보안코드를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 카드 비밀번호의 앞 2자리를 입력 받을 수 있다.
+    - [x] 카드 비밀번호 입력 폼에 라벨을 보여준다.
+    - [x] 카드 비밀번호는 각 폼마다 한자리 숫자만 입력가능하다.
+    - [x] 첫자리 입력이 완료되면 둘째자리 입력으로 focus된다.
+    - [x] 카드 번호 입력 시, `*`으로 보여진다.
+    - [x] 유효하지 않은 카드 비밀번호를 입력하면, 입력 폼 아래에 에러 메시지를 보여준다.
+- [x] 카드 소유자 이름을 입력 받을 수 있다.
+    - [x] 카드 소유자 이름 입력 폼 라벨을 보여준다.
+    - [x] 이름은 30자리까지 입력할 수 있다.
+    - [x] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
+- [x] 클릭 시, 카드 등록 완료 페이지로 이동한다.
 ### 심화 요구사항 (선택사항)
 - [ ] `Storybook` 단위 테스트
-- [ ] 유효성 검증 실패에 대한 UI/UX 추가
-- [ ] 카드사 선택
-  - [ ] 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다.
-  - [ ] 카드사를 선택하지 않아도 모달을 닫을 수 있다.
-- [ ] 보안코드 툴팁
-  - [ ] 클릭 시, 보안코드 관련 안내 메시지를 보여준다.
-  - [ ] focusout 시, 툴팁이 닫힌다.
+- [x] 유효성 검증 실패에 대한 UI/UX 추가
+- [x] 카드사 선택
+  - [x] 카드사를 선택하면 모달이 닫히고, 그 테마를 카드 UI에 반영한다.
+  - [x] 카드사를 선택하지 않아도 모달을 닫을 수 있다.
+- [x] 보안코드 툴팁
+  - [x] 클릭 시, 보안코드 관련 안내 메시지를 보여준다.
+  - [x] focusout 시, 툴팁이 닫힌다.
 - [ ] 가상 키보드
   - [ ] 마스킹 처리된 값 입력시 사용
   - [ ] 숫자를 랜덤으로 배열
@@ -113,3 +113,15 @@
   - [ ] 등록된 카드 정보를 CRUD 합니다.
 - [ ] 나열된 카드 클릭시 `카드 추가 확인` 화면 재활용
   - [ ] 별칭 수정 가능
+
+
+
+#### 고민했던 내용들
+- form elements 이동들 vs ref로 일일히 지정
+- 한 페이지에서 보여주는 추상화 레벨을 동일하게 하자(읽는이에게 편하게 하기 위해)
+- 폴더 구조(page, component, share component)
+- 프로젝트내에서 css-in-js만 쓰든지 css만 쓰든지 통일하는게 좋은건지??
+- setter를 일일히 넘겨주는것이 반복되고 있는데 이걸 context provider를 이용하면 좋은건가?? 일일히 입력해주지 않아도 되서?? 근데 나중에 보면 모를수도 있지 않을까? ==> 이래서 store, recoil이 나온건가??
+- type과 interface중 일단은 interface로 전부 통일했는데 뭐가 어떤 상황에 쓰이는게 적절한지 알아야겠다. 
+- cardNewPage에서 컴포넌트를 생성하는것을 굉장히 고민했는데 컴포넌트 자체의 생성 기준이 뭘지 찾아봐야겠다.
+- store 개념을 구현해보자

babel.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  presets: [
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-transform-runtime'],
+};

package.json

@@ -0,0 +1,81 @@
+{
+  "name": "react-payments",
+  "version": "1.0.0",
+  "description": "<p align=\"middle\" >   <img src=\"https://techcourse-storage.s3.ap-northeast-2.amazonaws.com/0fefce79602043a9b3281ee1dd8f4be6\" width=\"400\"> </p> <h2 align=\"middle\">페이먼츠</h2> <p align=\"middle\">React 모바일 페이먼츠 애플리케이션</p> </p>",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "npm run dev",
+    "dev": "cross-env NODE_ENV=development webpack serve --config ./webpack/webpack.config.js --host 0.0.0.0",
+    "build": "cross-env NODE_ENV=production node ./webpack/build.js",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/woobottle/react-payments.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/woobottle/react-payments/issues"
+  },
+  "homepage": "https://github.com/woobottle/react-payments#readme",
+  "dependencies": {
+    "cross-env": "^7.0.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.2.1",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.5.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.12",
+    "@babel/plugin-transform-runtime": "^7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.16.7",
+    "@babel/runtime": "^7.16.7",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
+    "@storybook/addon-actions": "^6.4.14",
+    "@storybook/addon-essentials": "^6.4.14",
+    "@storybook/addon-links": "^6.4.14",
+    "@storybook/react": "^6.4.14",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/styled-components": "^5.1.21",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "babel-core": "^7.0.0-beta.3",
+    "babel-loader": "^8.2.3",
+    "chalk": "^5.0.0",
+    "copy-webpack-plugin": "^10.2.1",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "dotenv-webpack": "^7.0.3",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-airbnb": "^0.0.1-security",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.5.2",
+    "ora": "^6.0.1",
+    "postcss-loader": "^6.2.1",
+    "prettier": "^2.5.1",
+    "react-refresh": "^0.11.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.0",
+    "sass-loader": "^12.4.0",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.0",
+    "ts-loader": "^9.2.6",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
+  }
+}

prettier.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  printWidth: 240,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'always',
+};

src/App.tsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import CardIndexPage from './pages/card';
+import CardNewPage from './pages/card/new';
+import CardConfirmPage from './pages/card/confirm';
+import { CardProps } from '@interface';
+import { initialNewCard } from '@constants';
+
+const App = () => {
+  const [cards, setCards] = useState<CardProps[]>([]);
+  const [newCard, setNewCard] = useState<CardProps>(initialNewCard);
+
+  return (
+    <div className="App">
+      <Routes>
+        <Route path="/" element={<CardIndexPage cards={cards} />} />
+        <Route path="/new" element={<CardNewPage newCard={newCard} setNewCard={setNewCard} />} />
+        <Route path="/complete" element={<CardConfirmPage />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default App;

src/assets/styles/button.scss

@@ -0,0 +1,8 @@
+.button-box {
+  width: 100%;
+  text-align: right;
+}
+
+.button-text {
+  margin-right: 10px;
+}