[클린코드 리액트 3기 이정수] 페이먼츠 미션 Step1

README.md

@@ -17,13 +17,13 @@
 ## 📝 Requirements
 
 ### 필수 요구사항
-- [ ] 원시적인 형태의 `Primitive UI` 형태의 컴포넌트 작성
-- [ ] `Stepper` 기반의 애플리케이션 설계
+- [x] 원시적인 형태의 `Primitive UI` 형태의 컴포넌트 작성
+- [x] `Stepper` 기반의 애플리케이션 설계
 - [ ] `Storybook` 상호 작용 테스트
 - [ ] `Controlled` & `Uncontrolled Components`를 명확하게 구분하거나 선택하여 구현
 
 ### 카드 추가
-- [ ] <(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
+- [x] <(뒤로가기) 버튼 클릭 시, 카드 목록 페이지로 이동한다.
 - [x] 카드 번호를 입력 받을 수 있다.
   - [x] 카드 번호는 숫자만 입력가능하다.
   - [x] 카드 번호 4자리마다 -가 삽입된다.
@@ -43,4 +43,4 @@
 - [x] 카드 소유자 이름을 입력 받을 수 있다.
   - [x] 이름은 30자리까지 입력할 수 있다.
   - [ ] 이름 입력 폼 위에, 현재 입력 자릿수와 최대 입력 자릿수를 실시간으로 보여준다.
-- [ ] 카드 추가 완료시 카드 등록 완료 페이지로 이동한다.
+- [x] 카드 추가 완료시 카드 등록 완료 페이지로 이동한다.

src/components/AddCard.tsx

@@ -1,12 +1,19 @@
 import React, {useContext} from "react"
 import {AddCardProps} from "../interface/AddCardProps.ts";
 import CardContext from "../context/CardContext.tsx";
+import {CardType} from "../type/CardType.ts";
+import {useStepper} from "../context/StepperContext.tsx";
 
 const AddCard: React.FC<AddCardProps> = ({cardName, cardNumber, name, expireDate}) => {
     const {addCard} = useContext(CardContext)
+    const {setCurrentStep} = useStepper()
+
     const handleClick = () => {
-        const newCard = {cardName, cardNumber, name, expireDate};
-        addCard(newCard);
+        const {month, year} = expireDate
+        const cardExpireDate = `${month} / ${year}`
+        const newCard: CardType = {cardName, cardNumber, name, cardExpireDate}
+        addCard(newCard)
+        setCurrentStep("AddCardComplete")
     }
 
     return (

src/components/AddCardComplete.tsx

@@ -0,0 +1,24 @@
+import React, {useContext} from "react"
+import CardContext from "../context/CardContext.tsx";
+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 {modifyCard} = useContext(CardContext)
+    const {setCurrentStep} = useStepper()
+
+    const handleClick = () => {
+        const card: CardType = {cardName, cardNumber, name, cardExpireDate, cardAlias}
+        modifyCard(card)
+        setCurrentStep("CardList")
+    }
+
+    return (
+        <div className="button-box">
+            <span className="button-text" onClick={handleClick}>다음</span>
+        </div>
+    )
+}
+
+export default AddCardComplete

src/components/App.tsx

@@ -4,108 +4,20 @@ import '../styles/utils.css'
 import '../styles/button.css'
 import '../styles/card.css'
 import '../styles/modal.css'
-import NumberInput from "./NumberInput.tsx"
-import Input from "./Input.tsx"
-import Card from "./Card.tsx"
-import {Dispatch, SetStateAction, useState} from "react"
-import Modal from "./Modal.tsx"
+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 AddCard from "./AddCard.tsx";
+import CardListForm from "../form/CardList.tsx";
 
 function App() {
-    const [cardName, setCardName] = useState('')
-    const [name, setName] = useState('')
-    const [expireDate, setExpireDate] = useState({month: '', year: ''})
-    const [cardNumber, setCardNumber] = useState({first: '', second: '', third: '', fourth: ''})
-    const [isModalOpen, setIsModalOpen] = useState(false)
-
-    const handleCardClick = () => {
-        setIsModalOpen(true)
-    }
-
-    const handleCardNameChange = (value: string) => {
-        setCardName(value)
-        setIsModalOpen(false)
-    }
-    const handleInputChange = (value: string, field: string, setState: Dispatch<SetStateAction<any>>) => {
-        setState(prevState => ({
-            ...prevState,
-            [field]: value
-        }))
-    }
-
-    const handleExpiredDateChange = (value: string, field: string) => {
-        handleInputChange(value, field, setExpireDate)
-    }
-
-    const handleCardNumberChange = (value: string, field: string) => {
-        handleInputChange(value, field, setCardNumber)
-    }
+    const {step} = useStepper()
 
     return (
         <CardProvider>
-            <>
-                <div className="app">
-                    <h2 className={"page-title"}>&lt; 카드 추가</h2>
-                    <Card cardName={cardName} cardNumber={cardNumber} name={name} cardExpireDate={expireDate}
-                          onClick={handleCardClick}></Card>
-                    <div className="input-container">
-                        <span className="input-title">카드 번호</span>
-                        <div className="input-box">
-                            <NumberInput className={"input-basic"} type={"text"} maxLength={4}
-                                         inputChange={(value) => handleCardNumberChange(value, 'first')}></NumberInput>
-                            <span>-</span>
-                            <NumberInput className={"input-basic"} type={"text"} maxLength={4}
-                                         inputChange={(value) => handleCardNumberChange(value, 'second')}></NumberInput>
-                            <span>-</span>
-                            <NumberInput className={"input-basic"} type={"password"} maxLength={4}
-                                         inputChange={(value) => handleCardNumberChange(value, 'third')}></NumberInput>
-                            <span>-</span>
-                            <NumberInput className={"input-basic"} type={"password"} maxLength={4}
-                                         inputChange={(value) => handleCardNumberChange(value, 'fourth')}></NumberInput>
-                        </div>
-                    </div>
-                    <div className="input-container">
-                        <span className="input-title">만료일</span>
-                        <div className="input-box w-50">
-                            <NumberInput className={"input-basic"}
-                                         type={"text"}
-                                         placeHolder={"MM"}
-                                         inputRule={(value) => /^(0?\d|1[0-2])?$/.test(value) && value !== "00"}
-                                         inputChange={(value) => handleExpiredDateChange(value, 'month')}></NumberInput>
-                            <span>/</span>
-                            <NumberInput className={"input-basic"}
-                                         type={"text"}
-                                         placeHolder={"YY"}
-                                         maxLength={2}
-                                         inputChange={(value) => handleExpiredDateChange(value, 'year')}></NumberInput>
-                        </div>
-                    </div>
-                    <div className="input-container">
-                        <span className="input-title">카드 소유자 이름(선택)</span>
-                        <Input className={"input-basic"}
-                               type={"text"}
-                               placeHolder={"카드에 표시된 이름과 동일하게 입력하세요."}
-                               maxLength={30}
-                               inputChange={setName}></Input>
-                    </div>
-                    <div className="input-container">
-                        <span className="input-title">보안 코드(CVC/CVV)</span>
-                        <NumberInput className={"input-basic w-25"} type={"password"} maxLength={3}></NumberInput>
-                    </div>
-                    <div className="input-container">
-                        <span className="input-title">카드 비밀번호</span>
-                        <NumberInput className={"input-basic w-15"} type={"password"} maxLength={1}></NumberInput>
-                        <NumberInput className={"input-basic w-15"} type={"password"} maxLength={1}></NumberInput>
-                        <NumberInput className={"input-basic w-15"} type={"password"} maxLength={1} disabled={true}
-                                     defaultState={"*"}></NumberInput>
-                        <NumberInput className={"input-basic w-15"} type={"password"} maxLength={1} disabled={true}
-                                     defaultState={"*"}></NumberInput>
-                    </div>
-                    <AddCard cardName={cardName} name={name} cardNumber={cardNumber} expireDate={expireDate}></AddCard>
-                </div>
-                <Modal isOpen={isModalOpen} selectCard={(value) => handleCardNameChange(value)}></Modal>
-            </>
+            {step === '/' && <AddCardForm/>}
+            {step === 'AddCardComplete' && <AddCardCompleteForm/>}
+            {step === 'CardList' && <CardListForm/>}
         </CardProvider>
     )
 }

src/components/Display.tsx

@@ -1,12 +1,11 @@
 import React from 'react'
 interface DisplayProps {
-    className: string
+    className?: string
     value?: string
     defaultValue?: string
 }
 
 const Display: React.FC<DisplayProps> = ({className, value, defaultValue}) => {
-
     return (
         <span className={className}>{value !== undefined && value !== "" ? value : defaultValue}</span>
     )

src/components/DivButton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {useStepper} from "../context/StepperContext.tsx";
+
+export interface DivInputProps {
+    className: string
+    step?: string
+    value?: string
+}
+
+const DivButton: React.FC<DivInputProps> = ({className, step, value}) => {
+    const {setCurrentStep} = useStepper()
+    const handleClick = () => {
+        if (step) {
+            setCurrentStep(step)
+        }
+    }
+
+    return (
+        <>
+            <div
+                className={className}
+                onClick={handleClick}
+            >
+                {value}
+            </div>
+        </>
+    )
+}
+
+export default DivButton

src/components/HeaderButton.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {useStepper} from "../context/StepperContext.tsx";
+import IntrinsicElements = React.JSX.IntrinsicElements;
+
+export interface HeaderButtonProps {
+    tag: string
+    className: string
+    step?: string
+    value?: string
+}
+
+
+const HeaderButton: React.FC<HeaderButtonProps> = ({tag, className, step, value}) => {
+    const {setCurrentStep} = useStepper()
+    const handleClick = () => {
+        if (step) {
+            setCurrentStep(step)
+        }
+    }
+
+    const Tag = tag as keyof IntrinsicElements;
+
+    return (
+        <>
+            <Tag
+                className={className}
+                onClick={handleClick}
+            >
+                {value}
+            </Tag>
+        </>
+    )
+}
+
+
+export default HeaderButton;

src/context/CardContext.tsx

@@ -4,11 +4,13 @@ import {CardType} from "../type/CardType.ts";
 interface CardContextType {
     cards: CardType[]
     addCard: (newCard: CardType) => void
+    modifyCard: (newCard: CardType) => void
 }
 
 const CardContext = createContext<CardContextType>({
     cards: [],
-    addCard: () => {}
+    addCard: () => {},
+    modifyCard: () => {}
 });
 
 export const CardProvider: React.FC<{ children: React.ReactNode}> = ({ children }) => {
@@ -18,8 +20,15 @@ export const CardProvider: React.FC<{ children: React.ReactNode}> = ({ children
         setCards(prevCards => [...prevCards, newCard]);
     }
 
+    const modifyCard = (newCard: CardType) => {
+        setCards(prevCards => {
+            const cards = prevCards.slice(0, prevCards.length -1);
+            return [...cards, newCard];
+        })
+    }
+
     return (
-        <CardContext.Provider value={{ cards, addCard }}>
+        <CardContext.Provider value={{ cards, addCard, modifyCard }}>
             {children}
         </CardContext.Provider>
     )

src/context/StepperContext.tsx

@@ -0,0 +1,27 @@
+import React, {createContext, useContext, useState} from 'react'
+
+interface StepperContextType {
+    step: string
+    setCurrentStep: (step: string) => void
+}
+
+const StepperContext = createContext<StepperContextType>({
+    step: "/",
+    setCurrentStep: () => {}
+});
+
+export const StepperProvider: React.FC<{ children: React.ReactNode}> = ({ children }) => {
+    const [step, setStep] = useState<string>("/")
+
+    const setCurrentStep = (step: string) => {
+        setStep(step)
+    }
+
+    return (
+        <StepperContext.Provider value={{ step, setCurrentStep }}>
+            {children}
+        </StepperContext.Provider>
+    )
+}
+
+export const useStepper = () => useContext(StepperContext);