[페이먼츠 미션 Step 2] 가브리엘(윤주현) 미션 제출합니다.

.eslintrc.json

@@ -31,6 +31,7 @@
     "@typescript-eslint/comma-dangle": "off",
     "react/jsx-props-no-spreading": "off",
     "import/no-extraneous-dependencies": [0, { "devDependencies": true }],
+    "import/prefer-default-export": ["off"],
     "react/require-default-props": "off"
   },
   "overrides": [

.github/workflows/deploy.yml

@@ -2,7 +2,7 @@ name: Deploy
 
 on:
   push:
-    branches: ['step1']
+    branches: ['step2']
 
 jobs:
   deploy:
@@ -28,7 +28,7 @@ jobs:
           key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
             ${{ runner.os }}-node-
-      - run: npm ci
+      - run: npm ci --legacy-peer-deps
         if: steps.cache.outputs.cache-hit != 'true'
 
       - run: npm run build

.prettierrc

@@ -3,10 +3,10 @@
   "semi": true,
   "useTabs": false,
   "tabWidth": 2,
-  "trailingComma": "all",
+  "trailingComma": "es5",
   "printWidth": 80,
   "arrowParens": "always",
   "orderedImports": true,
   "bracketSpacing": true,
   "jsxBracketSameLine": false
-}
+}

.storybook/main.js

@@ -1,20 +1,20 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  staticDirs: ["../public"],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  staticDirs: ['../public'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
   ],
-  framework: "@storybook/react",
+  framework: '@storybook/react',
   core: {
-    builder: "@storybook/builder-webpack5",
+    builder: '@storybook/builder-webpack5',
   },
   features: {
     interactionsDebugger: true,
   },
   typescript: {
-    reactDocgen: "react-docgen-typescript-plugin"
-  }
+    reactDocgen: 'react-docgen-typescript-plugin',
+  },
 };

.storybook/preview.js

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

README.md

@@ -2,10 +2,13 @@
 
 ## FE 5기 레벨2 React 모바일 페이먼츠 애플리케이션
 
-<img width="1704" alt="image" src="https://user-images.githubusercontent.com/69189073/233289234-b1d09ba3-58ea-4f64-9080-f846c5cbea67.png">
+<img width="1313" alt="스크린샷 2023-04-29 00 50 23" src="https://user-images.githubusercontent.com/69189073/235194743-75373f7e-08af-4113-87ad-1416f60cf7a1.png">
 
-<img width="856" alt="image" src="https://user-images.githubusercontent.com/69189073/233289025-58cbef02-efaa-4e25-b46e-3196cf751582.png">
+<img width="1313" alt="스크린샷 2023-04-29 00 45 13" src="https://user-images.githubusercontent.com/69189073/235193888-d9377aac-4847-46bf-945b-92120012cf45.png">
 
+<img width="1313" alt="스크린샷 2023-04-29 00 47 28" src="https://user-images.githubusercontent.com/69189073/235194129-a0a66fed-8716-4ecf-b09c-8baebbe65e03.png">
+
+<img width="1313" alt="스크린샷 2023-04-29 00 48 05" src="https://user-images.githubusercontent.com/69189073/235194311-0e32c104-c983-49bb-82ba-c1344d9f1477.png">
 
 <br>
 
@@ -48,11 +51,10 @@
 
 <br>
 <br>
-
-### 🎯 기능 목록
-
 <br>
 
+# 1단계 요구사항
+
 ### 📝 필수 요구 사항
 
 - 카드 등록을 위한 form을 CDD로 구현한다.
@@ -74,6 +76,29 @@
 - 각 스토리에 명확한 이름을 지정하고, 스토리 이름을 통해 컴포넌트의 사용 사례를 쉽게 이해할 수 있도록 한다.
 - 변동 가능한 값에 대해 사용자가 직접 조작해볼 수 있게 하여 컴포넌트를 더욱 쉽게 이해할 수 있도록 한다.
 
+# 2단계 요구사항
+
+🚀 Getting Started
+Component-Driven Development 에 따라 UI를 구성하고 재사용 가능한 Component를 작성합니다.
+
+✔️ 모바일 타겟의 웹 앱을 구현하며 사용하기 편리한 모바일 UI/UX에 대해 고민해봅니다.
+
+✔️ 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.
+
+✔️ React Hooks API를 활용합니다.
+
+✔️ 재사용 가능한 Component를 직접 작성하고 사용합니다.
+
+✔️ Controlled & Uncontrolled Components에 입각하여 Form을 핸들링합니다.
+
+- 카드 등록 과정에서 발생할 수 있는 여러 스토리를 고려하여 구현한다.
+
+- 주요 컴포넌트에 대한 Storybook 상호 작용 테스트
+
+- Controlled & Uncontrolled Components에 입각하여 Form 핸들링
+
+- Context API를 활용해 전역 상태 관리 및 계층 재구성
+
 <br>
 
 ---

docs/REQUIREMENTS.md

@@ -36,13 +36,13 @@
   - [x] 최대 30자까지 허용한다.
   - [x] 영어 대문자만 가능하다.
   - [x] 영어 소문자로 입력할 경우 대문자로 자동 변환한다.
-- [ ] 보안 코드를 입력받는다.
-  - [ ] 숫자만 허용한다.
+- [x] 보안 코드를 입력받는다.
+  - [x] 숫자만 허용한다.
   - [x] 숫자 3자리를 입력한다.
   - [x] 모두 숨긴다.
   - [x] ?를 클릭할 경우 안내 메시지를 보여준다.
-- [ ] 카드 비밀번호를 입력받는다.
-  - [ ] 숫자만 허용한다.
+- [x] 카드 비밀번호를 입력받는다.
+  - [x] 숫자만 허용한다.
   - [x] 4자리 중 앞 두 자리를 입력받는다.
   - [x] 카드 비밀번호는 숨긴다.
 - [x] 카드 번호, 이름, 만료일 작성하면 카드에 실시간으로 반영된다.
@@ -54,6 +54,22 @@
 - [x] 등록된 카드를 등록 순으로 보여준다.
 - [x] 새로운 카드 등록 버튼을 누르면 등록하기 페이지로 이동한다.
 
+# 2단계 요구사항
+
+🚀 Getting Started
+Component-Driven Development 에 따라 UI를 구성하고 재사용 가능한 Component를 작성합니다.
+
+✔️ 모바일 타겟의 웹 앱을 구현하며 사용하기 편리한 모바일 UI/UX에 대해 고민해봅니다.
+✔️ 다른 라이브러리나 프레임워크 없이 오로지 React만으로 상태를 관리하고 컴포넌트를 설계합니다.
+✔️ React Hooks API를 활용합니다.
+✔️ 재사용 가능한 Component를 직접 작성하고 사용합니다.
+✔️ Controlled & Uncontrolled Components에 입각하여 Form을 핸들링합니다.
+
+- 카드 등록 과정에서 발생할 수 있는 여러 스토리를 고려하여 구현한다.
+- 주요 컴포넌트에 대한 Storybook 상호 작용 테스트
+- Controlled & Uncontrolled Components에 입각하여 Form 핸들링
+- Context API를 활용해 전역 상태 관리 및 계층 재구성
+
 ## 스타일 컴포넌트 참고 컨벤션
 
 - 최상위 레이아웃 설정 컴포넌트는 `Layout` 으로 끝나게끔 짓습니다