[페이먼츠 미션 Step 2] 아커(전증훈) 미션 제출합니다.

.github/workflows/webpack.yml

@@ -2,7 +2,7 @@ name: NodeJS with Webpack
 
 on:
   push:
-    branches: ['step1']
+    branches: ['step2']
 
 jobs:
   deploy:

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 100,
   "singleQuote": true,
   "semi": true,
   "trailingComma": "es5",

docs/REQUIREMENTS.md

@@ -1,45 +1,20 @@
 # 기능 요구 사항
 
-## 페이지
-
-### 보유 카드 페이지
-
-- [ ] 새로운 카드 등록 버튼을 누른다
-- [ ] 사용자가 등록한 카드를 볼 수 있다
-
-### 카드 추가 페이지
-
-- [ ] 이전 페이지로 이동할 수 있다
-- [ ] 등록 버튼을 누를 수 있다
-- [ ] 카드 번호를 입력할 수 있다
-  - [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)
+- [ ] 스토리북 상호작용 테스트하기
+- [x] Custom Hooks로 리팩토링하기
+- [x] 카드 등록 버튼은 맨 아래에 위치한다.
+- [x] CVC/CVV 툴팁
+- [x] CardInfoList 상태를 Context API를 활용해 전역적으로 관리한다.
+- [x] CardInfoList를 로컬 스토리지에 저장하여 페이지를 벗어나도 데이터가 남아 있어야 한다.
+- [x] 카드 등록 페이지로 들어가면, 등록할 카드의 회사를 선택할 수 있다.
+  - [x] 카드 등록 페이지에서는 바텀 시트가 렌더링된다.
+  - [x] 바텀 시트에서 특정 카드 회사를 클릭하면, 회사 정보 state들이 저장된다.
+    - [x] 카드사 이름
+    - [x] 카드사 테마 컬러
+- [x] 카드사가 선택되면, CardPreview는 카드사의 테마에 맞춰 디자인된다.
+- [x] 카드 등록 페이지에서 다음 버튼을 누르면 별칭 설정 페이지로 이동한다.
+- [x] 별칭 설정 페이지에서 카드 별칭을 설정할 수 있다.
+  - [x] 별칭 설정 페이지에서 별칭을 등록하면, CardInfoList의 마지막 요소에 별칭 state로 추가된다.
+- [x] 카드 별칭은 보유 카드 페이지에서 확인할 수 있다.
+- [x] 보유카드를 선택하면, 별칭 설정 페이지로 이동한다.
+  - [x] 별칭을 수정할 수 있다.