feat: step1: 코드리뷰 반영

Author: DoLiLu

src/components/AddCard.tsx

@@ -3,23 +3,25 @@ import {AddCardProps} from "../interface/AddCardProps.ts";
 import CardContext from "../context/CardContext.tsx";
 import {CardType} from "../type/CardType.ts";
 import {useStepper} from "../context/StepperContext.tsx";
+import Display from "./Display.tsx";
+import Button from "./Button.tsx";
 
-const AddCard: React.FC<AddCardProps> = ({cardName, cardNumber, name, expireDate}) => {
-    const {addCard} = useContext(CardContext)
+const AddCard: React.FC<AddCardProps> = ({cardCompanyName, cardNumber, userName, expireDate}) => {
+    const {maxCardId, addCard} = useContext(CardContext)
     const {setCurrentStep} = useStepper()
 
     const handleClick = () => {
         const {month, year} = expireDate
         const cardExpireDate = `${month} / ${year}`
-        const newCard: CardType = {cardName, cardNumber, name, cardExpireDate}
+        const newCard: CardType = {id: maxCardId + 1 , cardCompanyName, cardNumber, userName, cardExpireDate}
         addCard(newCard)
         setCurrentStep("AddCardComplete")
     }
 
     return (
-        <div className="button-box">
-            <span className="button-text" onClick={handleClick}>다음</span>
-        </div>
+        <Button onClick={handleClick}>
+            <Display value={"다음"}/>
+        </Button>
     )
 }
 

src/components/AddCardComplete.tsx

@@ -4,12 +4,12 @@ import {CardType} from "../type/CardType.ts";
 import {useStepper} from "../context/StepperContext.tsx";
 import {AddCardCompleteProps} from "../interface/AddCardCompleteProps.ts";
 
-const AddCardComplete: React.FC<AddCardCompleteProps> = ({cardName, cardNumber, name, cardExpireDate, cardAlias}) => {
+const AddCardComplete: React.FC<AddCardCompleteProps> = ({id, cardCompanyName, cardNumber, userName, cardExpireDate, cardAlias}) => {
     const {modifyCard} = useContext(CardContext)
     const {setCurrentStep} = useStepper()
 
     const handleClick = () => {
-        const card: CardType = {cardName, cardNumber, name, cardExpireDate, cardAlias}
+        const card: CardType = {id, cardCompanyName, cardNumber, userName, cardExpireDate, cardAlias}
         modifyCard(card)
         setCurrentStep("CardList")
     }

src/components/App.tsx

@@ -8,14 +8,14 @@ import AddCardForm from "../form/AddCardForm.tsx";
 import {useStepper} from "../context/StepperContext.tsx";
 import AddCardCompleteForm from "../form/AddCardCompleteForm.tsx";
 import {CardProvider} from "../context/CardContext.tsx";
-import CardListForm from "../form/CardList.tsx";
+import CardListForm from "../form/CardListForm.tsx";
 
 function App() {
     const {step} = useStepper()
 
     return (
         <CardProvider>
-            {step === '/' && <AddCardForm/>}
+            {step === 'AddCard' && <AddCardForm/>}
             {step === 'AddCardComplete' && <AddCardCompleteForm/>}
             {step === 'CardList' && <CardListForm/>}
         </CardProvider>

src/components/Button.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import {ButtonProps} from "../interface/ButtonProps.ts";
+
+const Button: React.FC<ButtonProps> = ({onClick, children}) => {
+    return (
+        <button className={"button-box"} onClick={onClick}>
+            {children}
+        </button>
+    )
+}
+
+export default Button

src/components/Card.tsx

@@ -2,7 +2,7 @@ import React from "react"
 import Display from "./Display.tsx"
 import {CardProps} from "../interface/CardProps.ts"
 
-const Card: React.FC<CardProps> = ({cardName, cardNumber, name, cardExpireDate, onClick}) => {
+const Card: React.FC<CardProps> = ({cardCompanyName, cardNumber, userName, cardExpireDate, onClick}) => {
 
     const formattedExpireDate = () => {
         if (cardExpireDate) {
@@ -11,18 +11,14 @@ const Card: React.FC<CardProps> = ({cardName, cardNumber, name, cardExpireDate,
         }
         return ''
     }
+
     const formattedCardNumber = () => {
         if (cardNumber) {
+            const maskString = (input: string) => input.replace(/./g, '*')
             let {first, second, third, fourth} = cardNumber
-            if (first.length > 0) {
-                first = first + "-"
-            }
-            if (second.length > 0) {
-                second = second + "-"
-            }
-            const thirdSecret = third.length === 4 ? "****-" : "*".repeat(third.length)
-            const fourthSecret = fourth.length === 4 ? "****" : "*".repeat(fourth.length)
-            return `${first}${second}${thirdSecret}${fourthSecret}`
+            return [first, second, maskString(third), maskString(fourth)]
+                .filter((value) => value.length >= 1)
+                .join('-')
         }
         return ''
     }
@@ -31,7 +27,7 @@ const Card: React.FC<CardProps> = ({cardName, cardNumber, name, cardExpireDate,
         <div className={"card-box"} onClick={onClick}>
             <div className="empty-card">
                 <div className={"card-top"}>
-                    <Display className={"card-text"} value={cardName}></Display>
+                    <Display className={"card-text"} value={cardCompanyName}></Display>
                 </div>
                 <div className={"card-middle"}>
                     <div className={"small-card__chip"}></div>
@@ -41,7 +37,7 @@ const Card: React.FC<CardProps> = ({cardName, cardNumber, name, cardExpireDate,
                         <Display className={"card-text"} value={formattedCardNumber()}></Display>
                     </div>
                     <div className={"card-bottom__info"}>
-                        <Display className={"card-text"} value={name} defaultValue={"NAME"}></Display>
+                        <Display className={"card-text"} value={userName} defaultValue={"NAME"}></Display>
                         <Display className={"card-text"} value={formattedExpireDate()} defaultValue={"MM / YY"}></Display>
                     </div>
                 </div>

src/components/HeaderButton.tsx

@@ -5,12 +5,12 @@ export interface HeaderButtonProps {
     tag: string
     className: string
     value?: string
-    event?: () => void
+    onClickHandler?: () => void
 }
 
-const HeaderButton: React.FC<HeaderButtonProps> = ({tag, className, value, event}) => {
+const HeaderButton: React.FC<HeaderButtonProps> = ({tag, className, value, onClickHandler}) => {
     const handleClickEvent = () => {
-        event?.()
+        onClickHandler?.()
     }
 
     const Tag = tag as keyof IntrinsicElements;

src/components/Input.tsx

@@ -7,9 +7,7 @@ const Input: React.FC<InputProps> = ({onChange, ...rest}) => {
     const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
         const value = event.target.value
         setInputValue(value)
-        if (onChange) {
-            onChange(event)
-        }
+        onChange?.(event)
     }
 
     return (

src/components/Modal.tsx

@@ -1,31 +1,29 @@
 import React from "react"
 import {ModalProps} from "../interface/ModalProps.ts";
-import {CardType} from "../enums/CardType.ts";
+import {CardListType} from "../enums/CardListType.ts";
+import {CardModalType} from "../type/CardModalType.ts";
 
 const Modal: React.FC<ModalProps> = ({isOpen, selectCard}) => {
-    const cardNames = Object.keys(CardType);
-    const chunkSize = 4;
-    const chunkedCardNames: string[][] = [];
-    for (let i = 0; i < cardNames.length; i += chunkSize) {
-        chunkedCardNames.push(cardNames.slice(i, i + chunkSize));
-    }
     const cardSelect = (cardName: string) => {
         selectCard(cardName)
     }
+    const cardModalArray = (): CardModalType[] => {
+        let idCounter = 1
+        return Object.values(CardListType).map((cardType) => ({
+            id: idCounter++,
+            cardListType: cardType
+        }))
+    }
+
+    const cardModalTypes = cardModalArray();
 
     return (
         <div className="modal-dimmed" style={{display: isOpen ? "flex" : "none"}}>
             <div className="modal">
-                {chunkedCardNames.map((chunk, index) => (
-                    <div key={index} className="flex-center">
-                        {chunk.map((key) => (
-                            <div className="modal-item-container"
-                                 onClick={() => cardSelect(CardType[key as keyof typeof CardType])}>
-                                <div className="modal-item-dot"></div>
-                                <span
-                                    className="modal-item-name">{CardType[key as keyof typeof CardType]}</span>
-                            </div>
-                        ))}
+                {cardModalTypes.map((card) => (
+                    <div key={card.id} className="modal-item-container" onClick={() => cardSelect(card.cardListType)}>
+                        <div className="modal-item-dot"></div>
+                        <span className="modal-item-name">{card.cardListType}</span>
                     </div>
                 ))}
             </div>

src/context/CardContext.tsx

@@ -2,22 +2,26 @@ import React, { createContext, useState } from 'react'
 import {CardType} from "../type/CardType.ts";
 
 interface CardContextType {
+    maxCardId: number
     cards: CardType[]
     addCard: (newCard: CardType) => void
     modifyCard: (newCard: CardType) => void
 }
 
 const CardContext = createContext<CardContextType>({
+    maxCardId: 0,
     cards: [],
     addCard: () => {},
     modifyCard: () => {}
 });
 
 export const CardProvider: React.FC<{ children: React.ReactNode}> = ({ children }) => {
     const [cards, setCards] = useState<CardType[]>([])
+    const [maxCardId, setMaxCardId] = useState<number>(0)
 
     const addCard = (newCard: CardType) => {
-        setCards(prevCards => [...prevCards, newCard]);
+        setCards(prevCards => [...prevCards, newCard])
+        setMaxCardId(prevMaxCardId => prevMaxCardId + 1)
     }
 
     const modifyCard = (newCard: CardType) => {
@@ -28,7 +32,7 @@ export const CardProvider: React.FC<{ children: React.ReactNode}> = ({ children
     }
 
     return (
-        <CardContext.Provider value={{ cards, addCard, modifyCard }}>
+        <CardContext.Provider value={{ maxCardId, cards, addCard, modifyCard }}>
             {children}
         </CardContext.Provider>
     )

src/context/StepperContext.tsx

@@ -6,12 +6,12 @@ interface StepperContextType {
 }
 
 const StepperContext = createContext<StepperContextType>({
-    step: "/",
+    step: "AddCard",
     setCurrentStep: () => {}
 });
 
 export const StepperProvider: React.FC<{ children: React.ReactNode}> = ({ children }) => {
-    const [step, setStep] = useState<string>("/")
+    const [step, setStep] = useState<string>("AddCard")
 
     const setCurrentStep = (step: string) => {
         setStep(step)