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

* docs: 기능 명세 작성
Co-authored-by: yeongipark  <[email protected]>

* chore: styled component 설치
Co-authored-by: yeongipark  <[email protected]>

* feat: Input 컴포넌트 구현

Co-authored-by: yeongipark <[email protected]>

* style: input 스타일 변경

* feat: CardNumberInputs 구현

* feat: input width 동적으로 조정

Co-authored-by: yeongipark <[email protected]>

* feat:CardExpirationPeriodInputs 구현

Co-authored-by: yeongipark <[email protected]>

* feat:CardCVCNumberInputs구현

Co-authored-by: yeongipark <[email protected]>

* feat: SectionTitle 구현

Co-authored-by: yeongipark <[email protected]>

* feat:CardNumberSection구현

Co-authored-by: yeongipark <[email protected]>

* feat:CardExpirationPeriodSection 구현

Co-authored-by: yeongipark <[email protected]>

* feat:CardCVCNumberSection 구현

Co-authored-by: yeongipark <[email protected]>

* feat:CardPreview UI 구현

Co-authored-by: yeongipark <[email protected]>

* feat: inputProps type 삭제

Co-authored-by: yeongipark <[email protected]>

* feat: 카드번호 동적 Ui로 표현

Co-authored-by: yeongipark <[email protected]>

* feat: cardNumberInput 유효성 검사 추가

Co-authored-by: yeongipark <[email protected]>

* feat: cardExpirationPeriodInput 유효성 검사 추가

Co-authored-by: yeongipark <[email protected]>

* feat: cardExpirationPeriodInput UI 동적 표현

Co-authored-by: yeongipark <[email protected]>

* feat: cardCVCNumberInput UI 동적 표현

Co-authored-by: yeongipark <[email protected]>

* feat: cardPreview UI 동적 표현

Co-authored-by: yeongipark <[email protected]>

* fix: storybook 에러 수정

Co-authored-by: yeongipark <[email protected]>

* fix: 경로 오류 수정

Co-authored-by: yeongipark <[email protected]>

* style: styled component 변수명 변경

Co-authored-by: yeongipark <[email protected]>

* refactor: app UI 중앙 정렬

Co-authored-by: yeongipark <[email protected]>

* refactor: 공통 type 분리

Co-authored-by: yeongipark <[email protected]>

* refactor: 상수화

Co-authored-by: yeongipark <[email protected]>

* refactor: 공통 로직 분리

Co-authored-by: yeongipark <[email protected]>

* style: 코드 스타일 변경

Co-authored-by: yeongipark <[email protected]>

* chore: chromatic workflow  추가

* docs: 기능 사항 체크

* feat: 페이지 배포

* docs: 리팩터링 사항 추가

* refactor: 카드 로고 동적 UI 구현 방식 변경

* refactor: validation 조건 수정

* style: types 폴더명 앞 공백 제거

* fix: 문자 입력 시 오류메시지 미로딩 오류 해결

* refactor: 에러 처리 방식 변경

* refactor: input 중복 코드 줄이기

* style: 코드 포멧터 적용

* docs: 리팩터리 반영사항 체크

---------

Co-authored-by: yeongipark <[email protected]>

Author: ha-kuku

.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] 에러 처리 로직 수정