[1단계 - 페이먼츠] - 초코(강다빈) 미션 제출합니다. (#357)

* 테스트커밋

* 테스트커밋2

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* chore : 외부 접근 허용을 위한 host 옵션 추가

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* docs : STEP1 기능 요구 사항 정리

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* docs : 피그마 기반 사용할 컴포넌트 설계

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* chore : emotion 라이브러리 설치

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* chore : card brand logo 이미지

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* feat: CreditCardBrandLogo 컴포넌트 구현

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* style : reset.css 설정

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* refactor : creditCard type 파일 분리

* feat : creditCard 정보 표시

* refactor : CreditCard 컴포넌트의 인풋 type을 string으로 변환

* feat : input을 입력받는 커스텀 훅 구현

* fix : 배열로 생성되는 컴포넌트에 key 값 추가

* feat : 재사용 가능한 InputBox 컴포넌트 구현

* feat : 카드 정보 입력에 필요한 텍스트를 상수로 선언

* feat : 카드 소유자 이름 입력 기능 구현

* feat : creditCard 입력 type 추가

* style : InputBox 컴포넌트 스타일 구현

* style : 카드 소유자 이름 입력 컴포넌트 스타일 추가

* feat : 유효 기간 입력 컴포넌트 구현

* feat : 카드 번호 입력 컴포넌트 구현

* feat : 카드 번호 입력 컴포넌트 구현

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* style : 카드 컴포넌트 스타일 추가

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* feat : payments 페이지 구현

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* docs : 기능 요구 사항 업데이트

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* feat : 입력 값의 유효성 검사 진행

- credit card 번호 확인 유효성 검사
- credit card 유효기간 유효성 검사
- credit card 소유자 이름 유효성 검사

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* feat : 유효성 검사에 따른 error 피드백 추가

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* style : credit card 정보의 섹션별 높이 지정

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* docs : README.md 업데이트

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* chore : prettier 세팅

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* chore : prettier width 수정

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* feat : cardFormType 상수화

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* feat : 부호 상수화

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* chore : card inputbox name 상수화

Co-Authored-By: Lee sang Yeop <mma7710@naver.com>

* fix : Storybook 서버 오픈 에러 해결

* refactor : TypeScript: Sort Imports 활용해서 import문 정렬

* refactor : description이 없을 땐 margin-bottom 속성을 0으로 주기

* refactor : CreditCardBrandLogo 함수에서 컴포넌트로 수정

* refactor : inputError 네이밍 isInputError로 변경

* refactor : inputWidthSize 파일 분리

* refactor : description이 있을 땐 margin-bottom을 16px 주기

* refactor : 여러 개의 InputBox가 하나의 레이블을 공유하니 aria-labelledby 속성 사용

* refactor : CreditCardForm의 props drilling 해결

- children prop
- concatPeriod에서 formatExpirationPeriod으로 네이밍 변경

* style : 줄바꿈

* fix : creditCard 컴포넌트 스타일링 조정

* test : creditCard 컴포넌트 Storybook 테스트

---------

Co-authored-by: Lee sang Yeop <mma7710@naver.com>

.eslintrc.cjs

@@ -11,9 +11,6 @@ module.exports = {
   parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],
   rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
   },
 };

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true
+}

README.md

@@ -1 +1,38 @@
 # react-payments
+
+## STEP1
+
+### 기능 요구 사항
+
+- [x] 재사용 가능한 Input Component를 개발한다.
+
+  - [x] 카드 번호를 입력한다.
+  - [x] 카드 유효기간을 입력한다.
+  - [x] 카드 소유자 이름 입력한다.
+
+- [x] 입력 받은 카드 번호를 식별한다.
+
+  - Visa: 4로 시작하는 16자리 숫자
+  - MasterCard: 51~55로 시작하는 16자리 숫자
+
+- [x] 입력 유효성 검사를 진행한다.
+
+  - [x] 카드 번호 입력은 숫자만 가능하다. -> 에러 발생
+  - [x] 카드 번호 입력은 최대 4자리까지 입력이 가능하다.
+  - [x] 카드 유효기간 입력은 범위 내의 숫자만 가능하다. -> 에러 발생
+  - [x] 카드 유효기간 입력은 각 최대 2자리까지 입력이 가능하다.
+  - [x] 카드 소유자 이름 입력은 영문자 대문자만 가능하다. -> 에러 발생
+  - [x] 카드 소유자 이름을 영어 소문자로 입력해도 영문자 대문자로 변환 해준다.
+  - [x] 유효하지 않은 값 입력 시 피드백을 제공한다.
+
+- [x] 사용자의 카드 정보 입력에 따라 카드 프리뷰를 실시간으로 업데이트한다.
+
+- [ ] Storybook을 사용하여 컴포넌트의 다양한 상태를 시각적으로 테스트한다.
+
+### 컴포넌트 설계
+
+- CreditCard
+- CreditCardForm
+  - InputCreditCardNumber
+  - InputExpirationPeriod
+  - InputOwnerName

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-typescript"],
+};

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />