[1단계 - 페이먼츠] 블루(이한희) 미션 제출합니다. (#441)

* docs : 기능 요구사항 정리

* style : 디자인 시스템 정리

* style : reset.css 설정

* feat : Description 컴포넌트 제작

* feat : Input 컴포넌트 제작

* feat: 카드 컴포넌트 생성
- 카드 엠블럼 변경 로직 추가 필요

* feat : 카드 타입에 따라 visa 또는 mastercard 로고 생성

* feat : LabeledInput 컴포넌트 제작

* feat : 레이블 input 타입 매칭

* feat: pages UI 제작
- 스타일 추가 필요

* style: pages css gap 변경

* feat : 카드 번호를 입력 받고 카드 프리뷰에 반영

* fix : input maxLength 설정되지 않은 오류 해결

* fix: 카드 번호 위치에 맞도록 수정

* feat: 유효성 검사 및 오류 처리 로직 구현

* fix : input값이 0인 경우 유효성 검사 배제

* feat : 카드번호 마스킹 기능 제작

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

* feat: 카드 첫 번호에 따라 BrandLogo 변경 로직 구현

* refactor : 에러메세지 상수 분리

* refactor : justifyLogoBrand 함수 분리

* refactor : 불필요한 errorMessage 삭제

* feat : InputGroup 스토리 작성

* feat: storyBook 배포 및 inputGroup 수정

* feat: 카드 스토리 (visa, default, mastercar)추가

* feat: Card Story (카드번호, 유효기간) 구현

* refactor : 불필요한 style 삭제

* fix : 에러 메세지가 덮어씌워지는 오류 해결

* refactor : erroMessages에 함수대신 상수 전달

* feat : 카드 번호 유효기간 실시간 입력 반영

* refactor : maskingNumber 유틸함수 card 폴더 내로 이동

* fix : 스토리북 에러 메세지 해결

* chore : 배포 설정

* chore : storybook 정적파일 깃 ignore 설정

* chore : storybook 정적파일 캐시 삭제

* feat : globalStyle 적용

* refactor : 스토리북과 컴포넌트를 가깝게 위치

1. preview.ts에 globalStyle 설정
2. 스토리북과 컴포넌트를 가깝게 위치하도록 폴더 수정

* refactor : 유틸 함수 위치 src/util로 수정

* refactor : Input을 CardInput으로 변경

* refactor : AddCard에서 CardNumberInput 컴포넌트 분리

* refactor : AddCard에서 ExpirationDateInputs 컴포넌트 분리

* refactor : AddCard에서 CVCInputs 컴포넌트 분리

* refactor : div 태그를 form으로 변경

* refactor : CardNumberInputs에서 반복되는 CardInput 추상화

* refactor : ExpirationDateInputs에서 반복되는 CardInput 추상화

* refactor : getFirstErrorMessage 추상화

* refactor : styled-component의 위치를 로직 하단으로 수정

* refactor: CardNumber 컴포넌트 분리

* refactor : InputType을 CardInputProps의 key로 통일

* feat : label과 input을 id로 연결

* refactor : InputProps가 ComponentProps를 확장하도록 변경

* refactor : 스토리 코드 파일 분리

* refactor : 사용하지 않는 state 삭제

---------

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

Author: hanheel

.gitignore

@@ -26,4 +26,5 @@ dist-ssr
 *.sln
 *.sw?
 
-*storybook.log
+*storybook.log
+storybook-static

.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
+    "@storybook/addon-themes"
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.ts

@@ -1,4 +1,6 @@
 import type { Preview } from "@storybook/react";
+import GlobalStyles from "../src/GlobalStyles";
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
 
 const preview: Preview = {
   parameters: {
@@ -8,7 +10,38 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        mobile: {
+          name: "Mobile",
+          styles: {
+            width: "360px",
+            height: "640px",
+          },
+        },
+        tablet: {
+          name: "Tablet",
+          styles: {
+            width: "768px",
+            height: "1024px",
+          },
+        },
+        desktop: {
+          name: "Desktop",
+          styles: {
+            width: "1024px",
+            height: "768px",
+          },
+        },
+      },
+    },
   },
 };
 
+export const decorators = [
+  withThemeFromJSXProvider({
+    GlobalStyles,
+  }),
+];
+
 export default preview;

README.md

@@ -1 +1,41 @@
 # react-payments
+
+## ✅ 프로그램 설명
+
+사용자에게 올바른 카드 정보를 입력 받고 카드 프리뷰를 실시간으로 보여준다
+
+## 🛠️ 기능 요구 사항
+
+### 번호를 입력 받는다
+
+- [x] 카드 번호를 입력 받는다
+- [x] 카드 유효기간을 입력 받는다
+- [x] cvc 번호를 입력 받는다
+
+### 카드 프리뷰
+
+- 카드 이미지
+
+  - [x] 카드 번호를 입력하면 카드 프리뷰에 입력한 값을 보여준다
+  - [x] 카드 번호 세 번째~네 번째 칸에 값을 입력할 경우 암호화 한다
+  - [x] 카드 유효기간을 입력할 경우 카드 프리뷰에 입력한 값을 보여준다
+
+- 카드 아이콘
+  - [] 카드 번호가 4로 시작할 경우 카드 프리뷰에 visa 아이콘을 보여준다
+  - [] 카드 번호가 51~52로 시작하거나 2221~2720으로 시작할 경우 카드 프리뷰에 master card 아이콘을 보여준다
+
+### 입력 받은 값에 대해 유효성 검사를 실시한다
+
+- 카드번호
+  - [x] 각 카드 번호는 숫자여야 한다
+  - [x] 각 카드 번호는 4자리여야 한다
+- 카드 유효 기간
+  - [x] 유효 기간 YY은 현재 연도보다 크거나 같아야 한다
+  - [x] 유효 기간 MM은 1~31 사이 숫자를 입력해야 한다
+- cvc번호
+  - [x] cvc 번호는 3자리로 입력해야 한다
+
+### 에러 처리
+
+- [x] 입력 값이 유효하지 않은 경우 input에 border 색상이 변경된다
+- [x] 입력 값이 유효하지 않은 경우 에러 메세지를 출력한다