woowacourse · igy95 · Apr 21, 2025 · Apr 15, 2025 · Apr 15, 2025 · Apr 15, 2025
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "quoteProps": "as-needed",
+  "singleQuote": true,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "bracketSameLine": false
+}
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -1,4 +1,7 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
+import '../reset.css';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
+import GlobalStyles from '../styles/global.ts';
 
 const preview: Preview = {
   parameters: {
@@ -9,6 +12,11 @@ const preview: Preview = {
       },
     },
   },
+  decorators: [
+    withThemeFromJSXProvider({
+      GlobalStyles,
+    }),
+  ],
 };
 
 export default preview;
diff --git a/README.md b/README.md
@@ -1 +1,17 @@
 # react-payments
+
+- 카드 번호 입력 및 식별
+- [x] Visa나 MasterCard에 해당하면 해당 브랜드의 로고를 UI에 표시한다.
+
+- [x] 입력은 숫자만 가능하다.
+- [x] 사용자가 입력하는 카드 번호를 실시간으로 파악한다.
+- [x] 유효하지 않은 번호 입력 시 피드백을 제공한다.
+  - 카드 브랜드 구분 로직 (Visa / MasterCard)
+  - [x] Visa: 4로 시작하는 16자리 숫자
+  - [x] MasterCard: 51~55로 시작하는 16자리 숫자
+- 카드 유효기간 입력
+- [x] 월과 년도를 범위 내에서만 입력할 수 있어야 한다.
+- [x] 입력 제한을 두어 사용자가 숫자만 입력할 수 있도록 한다.
+
+- 실시간 프리뷰 업데이트
+- [x] 사용자의 카드 정보 입력에 따라 카드 프리뷰를 동시에 업데이트한다.
diff --git a/fonts.d.ts b/fonts.d.ts
@@ -0,0 +1 @@
+declare module '*.ttf';
diff --git a/fonts/Inter-VariableFont_opsz,wght.ttf b/fonts/Inter-VariableFont_opsz,wght.ttf
diff --git a/fonts/NotoSansKR-VariableFont_wght.ttf b/fonts/NotoSansKR-VariableFont_wght.ttf
diff --git a/index.html b/index.html
@@ -1,8 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="./reset.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React Payments</title>
   </head>