[1단계 - 페이먼츠] 라이언(박한영) 미션 제출합니다.

.eslintrc.cjs

@@ -2,18 +2,16 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended",
+    'plugin:prettier/recommended',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
   ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
   rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
   },
 };

.gitignore

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

.prettierrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  printWidth: 120,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  proseWrap: 'never',
+  endOfLine: 'auto',
+};

.storybook/main.ts

@@ -14,7 +14,7 @@ const config: StorybookConfig = {
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: true,
   },
 };
 export default config;

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,11 +1,21 @@
 import type { Preview } from "@storybook/react";
+import React from "react";
+import GlobalStyles from '../src/styles/GlobalStyles';
+
+export const decorators = [
+  (Story) => (
+    <>
+      <GlobalStyles />
+      <Story />
+    </>
+  ),
+];
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
         color: /(background|color)$/i,
-        date: /Date$/i,
       },
     },
   },

docs/REQUIREMENTS.md

@@ -0,0 +1,34 @@
+# react-payments
+- 스타일링 : styled-components
+1. 사용자 관점에서 보이는 기능들을 기준으로 분류
+2. 개발자 관점에서 컴포넌트 기준으로 분류
+
+# 기능 요구 사항 분석
+- [x] 카드 번호를 입력한다. (입력이 유효하지 않은 경우 에러 메세지 출력)
+  - [x] 4자리 숫자만 입력할 수 있다.
+  - [x] 카드 번호 뒤의 8자리는 `*` 로 표시한다.
+- [x] 입력한 카드 번호에 맞는 브랜드 로고를 UI에 표시한다. (해당하는 경우)
+  - [x] Visa: 4로 시작하는 16자리 숫자
+  - [x] MasterCard: 51~55로 시작하는 16자리 숫자
+- [x] 카드 유효기간을 입력한다. (입력이 유효하지 않은 경우 에러 메세지 출력)
+  - [x] 월(1월~12월)과 년도(2024년~2040년)를 범위 내에서만 입력할 수 있다.
+  - [x] 숫자만 입력할 수 있다.
+- [x] 카드 소유자 이름을 입력한다. (입력이 유효하지 않은 경우 에러 메세지 출력)
+  - [x] 영문자 대문자만 입력할 수 있다.
+  - [x] 이름은 100자 내로 입력할 수 있다.
+  - [x] 소문자로 입력해도 대문자로 자동 변환된다. (optional)
+- [x] 실시간으로 입력하는 카드 정보를 보여준다.
+
+# 컴포넌트 설계
+- 공통 컴포넌트
+  - Input
+  - RegistrationLayout
+
+- 컴포넌트
+  - CardPreview (카드 프리뷰)
+  - CardNumberContainer (카드 번호)
+  - CardExpiryDateContainer (카드 유효기간)
+  - CardholderNameContainer (카드 소유자 이름)
+
+
+