[Spring Boot/React] 카드 번호, CVV 코드 랜덤 생성 및 카드 정보 DB에 insert

 

- 카드번호, cvv 코드 랜덤 생성 front에서 

import React, { createContext, useContext, useState } from 'react';

const CardContext = createContext(); // 컨텍스트 객체를 생성

//  useContext를 사용하여 CardContext의 현재 값을 반환
export const useCardContext = () => {
    return useContext(CardContext);
};

// 16자리의 랜덤 카드 번호를 생성하는 함수
const generateRandomCardNumber = () => {
    let cardNumber = '';
    for(let i = 0; i < 4; i++) {
        cardNumber += Math.floor(1000 + Math.random() * 9000).toString() + ' ';
    }
    return cardNumber.trim();
}

// 3자리의 랜덤 CVV 코드를 생성하는 함수
const generateRandomCVVCode = () => {
    return Math.floor(Math.random() * 900 + 100).toString().padStart(3, '0');
};

// 현재 날짜를 'YYYY-MM-DD' 형식으로 반환하는 함수
const getCurrentDate = () => {
    const date = new Date();
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 현재 날짜로부터 5년 후의 날짜를 'YYYY-MM-DD' 형식으로 반환하는 함수
const getExpirationDate = () => {
    const date = new Date();
    const year = date.getFullYear() + 5;
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
};



export const CardProvider = ({children}) => {
    const [produceCardOffer, setProduceCardOffer] = useState({
        "card_id": null,
        "card_account":null,
        "card_balance" : null, 
        "card_number":generateRandomCardNumber(),
        "card_password":null,
        "card_pickup":null,
        "card_status":true,
        "cvv_code":generateRandomCVVCode(),
        "expiration_date":getExpirationDate(),
        "issue_date":getCurrentDate(),
        "payment_bank":null,
        "payment_date":null,
        "pickup_date":null,
        "transportation":null,
        "card_type_id":null,
        "member_id":null  // member T
    });

    return (
        <CardContext.Provider value={{produceCardOffer, setProduceCardOffer}}>
            {children}
        </CardContext.Provider>
    )
}

- member 테이블에서 가져와야될 데이터 : 사용자id(member_id), 이름(name), 주민등록번호(date_of_birth) 가져오기

=> 프론트에서 해당 데이터 보여주기 

 

 

 

 

- 프론트에서 보여지는 카드 데이터 정보들 백 card 테이블에 insert하기 

 

DTO 매핑 및 데이터 형식 문제 해결과 카드 발급 시 데이터를 데이터베이스에 정상적으로 저장하는 것이었습니다.

1. DTO 매핑 및 데이터 형식 문제 해결

문제점:

• 프론트엔드에서 서버로 전송되는 데이터가 서버에서 기대하는 데이터 형식과 맞지 않아서 400 Bad Request 오류가 발생했습니다. 이는 주로 데이터 타입 불일치, 필드 이름 불일치, 그리고 특정 필드의 잘못된 포맷팅에서 기인했습니다.

수정 내용:

• 필드 매핑 수정: Card6.js에서 axios를 사용해 서버로 데이터를 전송할 때, 프론트엔드의 필드 이름을 서버의 DTO 클래스(CardDTO)와 일치하도록 수정했습니다. 예를 들어, card_id를 cardId, card_number를 cardNumber 등으로 매핑했습니다.
• 데이터 포맷팅: paymentDate와 같은 날짜 필드에 대해 서버에서 예상하는 형식으로 데이터를 포맷팅했습니다. 예를 들어, paymentDate를 서버에서 날짜로 받아야 하는 경우, 올바른 형식(YYYY-MM-DD)으로 변환하여 전송하도록 했습니다.

2. 카드 발급 시 데이터베이스에 데이터 저장

문제점:

• 서버에서 CardDTO를 CardEntity로 변환할 때, Member와 CardTypeEntity를 올바르게 매핑하지 못하면 데이터가 제대로 저장되지 않는 문제가 발생할 수 있었습니다.

수정 내용:

• Member 및 CardType 매핑 수정: 서버의 CardServiceImpl에서 create 메서드를 수정하여, CardDTO의 memberId와 cardTypeId를 Member와 CardTypeEntity 객체로 변환한 후 CardEntity로 매핑했습니다. 이로 인해 카드 발급 시 데이터베이스에 데이터가 제대로 저장되도록 수정했습니다.
• Null 체크 및 예외 처리 추가: Member나 CardTypeEntity가 존재하지 않는 경우를 처리하기 위해 예외를 던지도록 하여, 잘못된 데이터로 인해 발생할 수 있는 추가적인 오류를 방지했습니다.

전체적인 수정 내용의 요약:

1. 프론트엔드에서 DTO 필드 매핑 문제를 해결하여 서버로 전송되는 데이터가 올바르게 매핑되도록 수정했습니다.
2. 날짜와 같은 필드의 데이터 포맷을 서버에서 예상하는 형식으로 변환하여 전송했습니다.
3. 백엔드 서비스에서 DTO를 Entity로 변환하는 과정에서의 매핑 오류를 수정하고, 필요한 경우 예외 처리를 추가하여 데이터베이스에 올바르게 저장되도록 했습니다.

이러한 수정으로 인해 프론트엔드에서 카드 발급 요청을 보내면, 서버가 이를 올바르게 처리하고, 관련된 데이터를 데이터베이스에 정상적으로 저장할 수 있게 되었습니다.