[클린코드 리액트 3기 정진범] 페이먼츠 미션 Step3

.eslintrc.js

@@ -1,7 +1,12 @@
 module.exports = {
   root: true,
   env: { browser: true, es2020: true },
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    // 'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended',
+  ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ."
   },
   "keywords": [],
   "author": "",
@@ -27,9 +28,8 @@
     "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "eslint": "^8.57.0",
-    "eslint-config-xo": "^0.44.0",
-    "eslint-config-xo-typescript": "^3.0.0",
     "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-refresh": "^0.4.6",
     "eslint-plugin-storybook": "^0.8.0",
     "prettier": "^3.2.5",
     "typescript": "^5.3.3",

src/App.tsx

@@ -1,25 +1,15 @@
-import CardList from './pages/card-list/CardList';
-import AddCard from './pages/card-add/AddCard';
-import CardRegisterComplete from './pages/card-register-complete/CardRegisterComplete';
-import CardInfoProvider from './provider/card-info-provider/CardInfoProvider';
-import MyCardsProvider from './provider/my-cards-provider/MyCardsProvider';
+import Stepper from './pages/Stepper';
+import CardInfoProvider from './pages/card-add/components/card-form/card-password/CardInfoProvider';
+
 import StepProvider from './provider/step-provider/StepProvider';
 
 const App = () => (
   <div className="root">
-    <MyCardsProvider>
+    <CardInfoProvider>
       <StepProvider>
-        {(route) => (
-          <>
-            {'LIST' === route && <CardList />}
-            <CardInfoProvider>
-              {'CARD' === route && <AddCard />}
-              {'COMPLETE' === route && <CardRegisterComplete />}
-            </CardInfoProvider>
-          </>
-        )}
+        <Stepper />
       </StepProvider>
-    </MyCardsProvider>
+    </CardInfoProvider>
   </div>
 );
 

src/components/card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import Card from './Card';
 import '../../../styles/card.css';
 const meta = {

src/components/card/Card.tsx

@@ -1,34 +1,38 @@
-import CardNumbers from './parts/CardNumbers';
+import { type CardBrand, type CardStateType } from '@/domain/type';
 import CardBox from './parts/CardBox';
 import CardForm from './parts/CardForm';
+import CardNumbers from './parts/CardNumbers';
 import CardTitle from './parts/CardTitle';
-import { CardStateType } from '@/domain/type';
 
+import CardBottom from './parts/CardBottom';
 import CardText from './parts/CardText';
 import Chip from './parts/Chip';
-import CardBottom from './parts/CardBottom';
 
-interface CardProps extends CardStateType {
+type CardProps = {
   status?: 'small' | 'big' | 'empty';
   onClick?: () => void;
-}
+  cardBrandName: string;
+} & CardStateType &
+  CardBrand;
 
 const Card = ({
   ownerName = 'NAME',
   month,
   year = '',
   cardNumbers,
-  status = 'small',
+  status = 'empty',
+  color,
+  cardBrandName,
   onClick,
 }: CardProps) => {
   const displayMonth = month ? `${month} / ` : '';
   const expirationDate = `${displayMonth}${year}`;
 
   return (
     <CardBox onClick={onClick}>
-      <CardForm status={status}>
+      <CardForm status={status} style={{ backgroundColor: color }}>
         <CardTitle>
-          <CardText status={status}>타이틀</CardText>
+          <CardText status={status}>{cardBrandName}</CardText>
         </CardTitle>
         <div className="card-middle">
           <Chip status={status} />

src/components/card/EmptyCard.tsx

@@ -1,17 +1,15 @@
 import CardBox from './parts/CardBox';
 import CardForm from './parts/CardForm';
 
-interface EmptyCardProps {
+type EmptyCardProps = {
   onClick: () => void;
-}
-const EmptyCard = ({ onClick }: EmptyCardProps) => {
-  return (
-    <CardBox onClick={onClick}>
-      <CardForm status="empty">
-        <div>+</div>
-      </CardForm>
-    </CardBox>
-  );
 };
+const EmptyCard = ({ onClick }: EmptyCardProps) => (
+  <CardBox onClick={onClick}>
+    <CardForm status="empty">
+      <div>+</div>
+    </CardForm>
+  </CardBox>
+);
 
 export default EmptyCard;

src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card';
+export { default as EmptyCard } from './EmptyCard';

src/components/card/parts/CardBottom.tsx

@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 
-const CardBottom = ({ children }: PropsWithChildren) => {
-  return <div className="card-bottom">{children}</div>;
-};
+const CardBottom = ({ children }: PropsWithChildren) => (
+  <div className="card-bottom">{children}</div>
+);
 
 export default CardBottom;

src/components/card/parts/CardBox.tsx

@@ -1,14 +1,12 @@
-import { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 
-interface CardBoxProps extends PropsWithChildren {
+type CardBoxProps = {
   onClick?: () => void;
-}
-const CardBox = ({ onClick, children }: CardBoxProps) => {
-  return (
-    <div onClick={onClick} className="card-box">
-      {children}
-    </div>
-  );
-};
+} & PropsWithChildren;
+const CardBox = ({ onClick, children }: CardBoxProps) => (
+  <div onClick={onClick} className="card-box">
+    {children}
+  </div>
+);
 
 export default CardBox;

src/components/card/parts/CardForm.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames';
-import { PropsWithChildren } from 'react';
-
-interface CardFormProps extends PropsWithChildren {
+import { type DetailedHTMLProps, type HTMLAttributes, type PropsWithChildren } from 'react';
+type BaseCardFormProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+type CardFormProps = {
   status: string;
-}
-const CardForm = ({ status, children }: CardFormProps) => {
-  return <div className={classNames(`${status}-card`)}>{children}</div>;
-};
+} & BaseCardFormProps &
+  PropsWithChildren;
+const CardForm = ({ status, children, style }: CardFormProps) => (
+  <div className={classNames(`${status}-card`)} style={style}>
+    {children}
+  </div>
+);
 
 export default CardForm;

src/components/card/parts/CardNumbers.tsx

@@ -1,24 +1,22 @@
-import { CardNumbersType } from '@/domain/type';
+import { type CardNumbersType } from '@/domain/type';
 import CardText from './CardText';
 
 const REGEX = /[1-9]/gi;
-interface CardNumbersProps extends CardNumbersType {
+type CardNumbersProps = {
   status: 'big' | 'small' | 'empty';
-}
+} & CardNumbersType;
 const CardNumbers = ({
   status,
   first = '',
   second = '',
   third = '',
   fourth = '',
-}: CardNumbersProps) => {
-  return (
-    <div className="card-bottom__number">
-      <CardText
-        status={status}
-      >{`${first} ${second} ${third.replace(REGEX, '*')} ${fourth.replace(REGEX, '*')}`}</CardText>
-    </div>
-  );
-};
+}: CardNumbersProps) => (
+  <div className="card-bottom__number">
+    <CardText
+      status={status}
+    >{`${first} ${second} ${third.replace(REGEX, '*')} ${fourth.replace(REGEX, '*')}`}</CardText>
+  </div>
+);
 
 export default CardNumbers;

src/components/card/parts/CardText.tsx

@@ -1,17 +1,14 @@
 import classNames from 'classnames';
-import { DetailedHTMLProps, PropsWithChildren } from 'react';
+import { type DetailedHTMLProps, type PropsWithChildren } from 'react';
 
 type BaseCardTextProps = DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-interface CardTextProps extends BaseCardTextProps, PropsWithChildren {
+type CardTextProps = {
   status: string;
-}
+} & BaseCardTextProps &
+  PropsWithChildren;
 
-const CardText = ({ status, children }: CardTextProps) => {
-  return (
-    <span className={classNames(status === 'big' ? 'card-text__big' : 'card-text')}>
-      {children}
-    </span>
-  );
-};
+const CardText = ({ status, children }: CardTextProps) => (
+  <span className={classNames(status === 'big' ? 'card-text__big' : 'card-text')}>{children}</span>
+);
 
 export default CardText;

src/components/card/parts/CardTitle.tsx

@@ -1,7 +1,5 @@
-import { PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 
-const CardTitle = ({ children }: PropsWithChildren) => {
-  return <div className="card-top">{children}</div>;
-};
+const CardTitle = ({ children }: PropsWithChildren) => <div className="card-top">{children}</div>;
 
 export default CardTitle;

src/components/card/parts/Chip.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 
-interface ChipProps {
+type ChipProps = {
   status: 'small' | 'big' | 'empty';
-}
-const Chip = ({ status }: ChipProps) => {
-  return <div className={classNames(status === 'big' ? 'big-card__chip' : 'small-card__chip')} />;
 };
+const Chip = ({ status }: ChipProps) => (
+  <div className={classNames(status === 'big' ? 'big-card__chip' : 'small-card__chip')} />
+);
 
 export default Chip;

src/components/common/button-box/ButtonBox.tsx

@@ -1,11 +1,11 @@
 import classNames from 'classnames';
-import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
+import { type DetailedHTMLProps, type HTMLAttributes, type PropsWithChildren } from 'react';
 
 type BaseButtonBox = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-interface ButtonBoxProps extends BaseButtonBox, PropsWithChildren {}
+type ButtonBoxProps = Record<string, unknown> & BaseButtonBox & PropsWithChildren;
 
-const ButtonBox = ({ className, children }: ButtonBoxProps) => {
-  return <div className={classNames(className, 'button-box')}>{children}</div>;
-};
+const ButtonBox = ({ className, children }: ButtonBoxProps) => (
+  <div className={classNames(className, 'button-box')}>{children}</div>
+);
 
 export default ButtonBox;

src/components/common/button/Button.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import Button from './Button';
 import '../../../../styles/button.css';
 
 const meta: Meta<typeof Button> = {
   title: 'Button',
   component: Button,
-  // decorators: [
+  // Decorators: [
   //   (Story) => (
   //     <ButtonBox>
   //       <Story />