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

.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  chromatic:
+    name: 'Run Chromatic'
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@latest
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -26,4 +26,6 @@ dist-ssr
 *.sln
 *.sw?
 
-*storybook.log
+*storybook.log
+
+# json

README.md

@@ -1 +1,32 @@
 # react-payments
+
+### 카드 번호 입력 및 식별
+
+- [x] 사용자가 입력하는 카드 번호를 실시간으로 파악
+- [x] Visa나 MasterCard에 해당하면 해당 브랜드의 로고를 UI에 표시한다.
+- [x] 숫자에 대한 유효성 검사 진행
+  - [x] 입력은 숫자만 가능
+  - [x] 유효하지 않은 경우 피드백 제공
+
+### 카드 유효기간 입력
+
+- [x] 연월을 입력한다.
+- [x] 연월에 대한 유효성 검사
+  - [x] 범위 내에서만 입력 가능
+  - [x] 숫자만 입력 가능
+
+### 실시간 프리뷰 업데이트
+
+- [x] 한 input의 값이 채워지고 유효성 검사가 통과 되면 카드 프리뷰에 노출시킨다.
+  - [x] 고유 식별 번호에 따라서 카드 로고가 변경된다.
+    - [x] Visa: 4로 시작하는 16자리 숫자
+    - [x] MasterCard: 51~55로 시작하는 16자리 숫자
+
+### 리팩터링 사항
+
+- [x] 카드 로고 동적 UI 구현 방법 바꾸기
+- [x] 코드 포맷터 적용
+- [x] isValidNumber 수정
+- [x] 중복 코드 줄이기
+- [x] types 폴더명 앞 공백 수정
+- [x] 에러 처리 로직 수정