[1단계 - 페이먼츠] - 버건디(전태헌) 미션 제출합니다.

.eslintrc.cjs

@@ -2,18 +2,31 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:storybook/recommended",
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+    'plugin:react/recommended',
+    'plugin:import/recommended',
+    'plugin:jsx-a11y/recommended',
+    'eslint-config-prettier',
   ],
-  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 }],
+    'react/react-in-jsx-scope': 'off',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+    'import/resolver': {
+      node: {
+        paths: ['src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
   },
 };

.nvmrc

@@ -0,0 +1 @@
+v20.0.0

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

.storybook/preview.tsx

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

README.md

@@ -1 +1,27 @@
-# react-payments
+# 💳 페이먼츠
+
+페이먼츠 사용자의 카드 정보를 입력하고 해당 카드를 어플리케이션에 등록한다.
+
+### 카드 번호 입력 및 식별
+
+- 사용자가 입력하는 카드 번호를 실시간으로 파악하여, Visa나 MasterCard에 해당하면 해당 브랜드의 로고를 UI에 표시한다.
+  - Visa : 4로 시작하는 16자리
+  - MasterCard: 51~55로 시작하는 16자리 숫자
+- 입력은 숫자만 가능하며, 유효하지 않은 번호 입력 시 피드백을 제공한다.
+
+### 카드 유효기간 입력
+
+- 월과 년도를 범위 내에서만 입력할 수 있어야 하며, 입력 제한을 두어 사용자가 숫자만 입력할 수 있도록 한다.
+
+### 카드 소유자 이름 입력
+
+- 영문자 대문자만 입력 가능한 폼을 구현한다.
+
+### 실시간 프리뷰 업데이트
+
+- 사용자의 카드 정보 입력에 따라 카드 프리뷰를 동시에 업데이트한다.
+
+### ⚠️ 주의 사항
+
+- 사용자의 입력 input에 포커스를 자동으로 이동하는 부분을 1단계에서 고려하지 않는다. **'기능' 자체에 집중해서 구현**한다. 만약 리뷰어가 사용자 경험 측면에서 피드백을 준다면, 피드백을 반영하는 시점에서 사용자 경험도 함께 고려하여 개선한다.
+- 기본적인 기능 요구사항을 만족하지 못한 코드는 코드 리뷰 대상이 아니다.

package.json

@@ -9,11 +9,14 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_a2a6e1e59fdce40"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
+    "styled-reset": "^4.5.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",
@@ -30,10 +33,16 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "chromatic": "^11.3.0",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
+    "prettier": "^3.2.5",
     "storybook": "^8.0.8",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"

src/App.tsx

@@ -1,9 +1,161 @@
-import "./App.css";
+import GlobalStyles from './GlobalStyles';
+import InputInfo from './components/InputSection';
+import Input from './components/composables/Input';
+import CreditCard from './components/CreditCard';
+import useInput from './hooks/useInput';
+import Label from './components/composables/Label';
+import validate from './utils/validate';
+import { CARD_NUMBER, EXPIRATION_PERIOD, OWNER_NAME } from './constants/cardSection';
+import * as React from 'react';
+import useCardNumber, { InitialCardNumberState } from './hooks/useCardNumber';
+import * as S from './app.style';
+
+const initialCardNumberState: InitialCardNumberState = {
+  value: '',
+  isError: false,
+};
+
+const CARD_NUMBER_LENGTH = 4;
+
+const MONTH = Object.freeze({
+  MIN: 1,
+  MAX: 12,
+});
+
+const MAX_LENGTH = Object.freeze({
+  CARD_NUMBERS: 4,
+  MONTH: 2,
+  YEAR: 2,
+  NAME: 30,
+});
 
 function App() {
+  const { cardNumbers, cardNumbersChangeHandler, cardBrand } = useCardNumber(
+    Array.from({ length: CARD_NUMBER_LENGTH }, () => initialCardNumberState),
+  );
+
+  const {
+    inputValue: month,
+    onChange: monthChangeHandler,
+    error: monthError,
+  } = useInput([
+    {
+      fn: (value) =>
+        validate.isNumberInRange({ min: MONTH.MIN, max: MONTH.MAX, compareNumber: Number(value) }),
+    },
+    { fn: (value) => validate.isValidDigit(value) },
+  ]);
+
+  const {
+    inputValue: year,
+    onChange: yearChangeHandler,
+    error: yearError,
+  } = useInput([{ fn: (value) => validate.isValidDigit(value) }]);
+
+  const {
+    inputValue: name,
+    onChange: nameChangeHandler,
+    error: nameError,
+  } = useInput([{ fn: (value) => validate.isEnglish(value) }]);
+
   return (
     <>
-      <h1>React Payments</h1>
+      <GlobalStyles />
+      <S.Container>
+        <CreditCard
+          cardNumbers={cardNumbers}
+          month={month}
+          year={year}
+          name={name}
+          cardBrand={cardBrand}
+        />
+        <S.CardInfoContainer>
+          <S.Wrapper>
+            <InputInfo
+              title={CARD_NUMBER.title}
+              description={CARD_NUMBER.description}
+              inputTitle={CARD_NUMBER.inputTitle}
+            >
+              {cardNumbers.map((cardNumber, index) => {
+                const uniqueId = 'cardNumbers' + index;
+                return (
+                  <React.Fragment key={uniqueId}>
+                    <Label htmlFor={uniqueId} />
+                    <Input
+                      id={uniqueId}
+                      placeholder="1234"
+                      type="text"
+                      maxLength={MAX_LENGTH.CARD_NUMBERS}
+                      value={cardNumber.value}
+                      onChange={(e) => cardNumbersChangeHandler(e, index)}
+                      isError={cardNumber.isError}
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </InputInfo>
+            <S.ErrorContainer>
+              <S.ErrorMessageSpan>
+                {cardNumbers.some((cardNumber) => cardNumber.isError) && CARD_NUMBER.errorMessage}
+              </S.ErrorMessageSpan>
+            </S.ErrorContainer>
+          </S.Wrapper>
+
+          <S.Wrapper>
+            <InputInfo
+              title={EXPIRATION_PERIOD.title}
+              description={EXPIRATION_PERIOD.description}
+              inputTitle={EXPIRATION_PERIOD.inputTitle}
+            >
+              <Label htmlFor={'month'} />
+              <Input
+                id={'month'}
+                placeholder={'MM'}
+                type="text"
+                value={month}
+                maxLength={MAX_LENGTH.MONTH}
+                onChange={monthChangeHandler}
+                isError={monthError}
+              />
+              <Label htmlFor={'year'} />
+              <Input
+                id={'year'}
+                placeholder={'YY'}
+                type="text"
+                maxLength={MAX_LENGTH.YEAR}
+                value={year}
+                onChange={yearChangeHandler}
+                isError={yearError}
+              />
+            </InputInfo>
+            <S.ErrorContainer>
+              <S.ErrorMessageSpan>
+                {monthError && yearError ? EXPIRATION_PERIOD.monthErrorMessage : ''}
+                {!monthError && yearError ? EXPIRATION_PERIOD.yearErrorMessage : ''}
+                {monthError && !yearError ? EXPIRATION_PERIOD.monthErrorMessage : ''}
+              </S.ErrorMessageSpan>
+            </S.ErrorContainer>
+          </S.Wrapper>
+
+          <S.Wrapper>
+            <InputInfo title={OWNER_NAME.title} inputTitle={OWNER_NAME.inputTitle}>
+              <Label htmlFor={'name'} />
+              <Input
+                id="name"
+                maxLength={MAX_LENGTH.NAME}
+                onChange={nameChangeHandler}
+                isError={nameError}
+                placeholder="JOHN DOE"
+                type="text"
+                value={name}
+              />
+            </InputInfo>
+            <S.ErrorContainer>
+              <S.ErrorMessageSpan>{nameError && OWNER_NAME.errorMessage}</S.ErrorMessageSpan>
+            </S.ErrorContainer>
+          </S.Wrapper>
+        </S.CardInfoContainer>
+      </S.Container>
     </>
   );
 }

src/GlobalStyles.tsx

@@ -0,0 +1,45 @@
+import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';
+
+const GlobalStyles = createGlobalStyle`
+  ${reset}
+
+  a{
+    text-decoration: none;
+    color: inherit;
+  }
+
+  *{
+    box-sizing: border-box;
+  }
+
+  #root {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 100vw;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  input, textarea { 
+    -moz-user-select: auto;
+    -webkit-user-select: auto;
+    -ms-user-select: auto;
+    user-select: auto;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+  }
+`;
+
+export default GlobalStyles;