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

.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] 입력 값이 유효하지 않은 경우 에러 메세지를 출력한다