woowacourse · iborymagic · Apr 23, 2024 · Apr 16, 2024 · Apr 16, 2024 · Apr 16, 2024
diff --git a/.eslintrc.cjs b/.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 }],
   },
 };
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": false,
+  "bracketSpacing": true
+}
diff --git a/README.md b/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
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-typescript"],
+};
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />