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

.eslintrc.js

@@ -1,7 +1,11 @@
 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: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,16 @@
-import CardList from './pages/card-list/CardList';
-import AddCard from './pages/card-add/AddCard';
-import CardRegisterComplete from './pages/card-register-complete/CardRegisterComplete';
+import Stepper from './pages/Stepper';
 import CardInfoProvider from './provider/card-info-provider/CardInfoProvider';
-import MyCardsProvider from './provider/my-cards-provider/MyCardsProvider';
+
 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 id="modal"></div>
   </div>
 );
 

src/components/card/Card.stories.tsx

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

src/components/card/Card.tsx

@@ -1,40 +1,48 @@
-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 = ({
+const REGEX = /[1-9]/gi;
+
+export const Card = ({
   ownerName = 'NAME',
   month,
   year = '',
   cardNumbers,
-  status = 'small',
+  status = 'empty',
+  color,
+  cardBrandName,
   onClick,
 }: CardProps) => {
+  const cardNumber = `${cardNumbers?.first ?? ''} ${cardNumbers?.second ?? ''} ${cardNumbers?.third?.replace(REGEX, '*') ?? ''} ${cardNumbers?.fourth?.replace(REGEX, '*') ?? ''}`;
+
   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} />
         </div>
         <CardBottom>
-          <CardNumbers status={status} {...cardNumbers} />
+          <CardNumbers status={status} cardNumber={cardNumber} />
           <div className="card-bottom__info">
             <CardText status={status}>{ownerName}</CardText>
             <CardText status={status}>{expirationDate || 'MM/YY'}</CardText>
@@ -44,5 +52,3 @@ const Card = ({
     </CardBox>
   );
 };
-
-export default Card;

src/components/card/EmptyCard.tsx

@@ -1,17 +1,14 @@
 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>
-  );
 };
 
-export default EmptyCard;
+export const EmptyCard = ({ onClick }: EmptyCardProps) => (
+  <CardBox onClick={onClick}>
+    <CardForm status="empty">
+      <div>+</div>
+    </CardForm>
+  </CardBox>
+);

src/components/card/index.ts

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export { 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,13 @@
-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 HTMLAttributes, type PropsWithChildren } from 'react';
+type BaseCardFormProps = HTMLAttributes<HTMLDivElement>;
+type CardFormProps = {
   status: string;
-}
-const CardForm = ({ status, children }: CardFormProps) => {
-  return <div className={classNames(`${status}-card`)}>{children}</div>;
-};
+} & PropsWithChildren<BaseCardFormProps>;
+
+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,14 @@
-import { CardNumbersType } from '@/domain/type';
 import CardText from './CardText';
 
-const REGEX = /[1-9]/gi;
-interface CardNumbersProps extends CardNumbersType {
+type CardNumbersProps = {
   status: 'big' | 'small' | 'empty';
-}
-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>
-  );
+  cardNumber: string;
 };
 
+const CardNumbers = ({ status, cardNumber }: CardNumbersProps) => (
+  <div className="card-bottom__number">
+    <CardText status={status}>{cardNumber}</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 HTMLAttributes, type PropsWithChildren } from 'react';
 
-type BaseCardTextProps = DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
-interface CardTextProps extends BaseCardTextProps, PropsWithChildren {
+type BaseCardTextProps = HTMLAttributes<HTMLSpanElement>;
+
+type CardTextProps = {
   status: string;
-}
+} & PropsWithChildren<BaseCardTextProps>;
 
-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,11 @@
 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,10 @@
 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 {}
 
-const ButtonBox = ({ className, children }: ButtonBoxProps) => {
-  return <div className={classNames(className, 'button-box')}>{children}</div>;
-};
+type ButtonBoxProps = Record<string, unknown> & PropsWithChildren<BaseButtonBox>;
 
-export default ButtonBox;
+export const ButtonBox = ({ className, children }: ButtonBoxProps) => (
+  <div className={classNames(className, 'button-box')}>{children}</div>
+);