인프런 커뮤니티 질문&답변

9강 리액트 사용자 정보 수정 중에 kakao api 연동해서 그전까지 잘되는데, 디비에 카카오 사용자 정보가 없는 상태에서 로그인을 하면 디비에 member와 member_member_role_list 두 테이블 사용자가 잘 생성됩니다.

서버에는 getClaims 함수실행에서 오류가 발생하고 DTO에 정보를 못찾는다는거 같은 오류인거 같은데

화면상에는 이렇게 나옵니다.

새로고침 후의 상태이고

그냥 localhost:3000 으로 다시 들어가서 로그인을 하면 디비에는 카카오사용자가 생성이 된 상태라 로그인이 잘됩니다.... 원인이 무엇일까요

@GetMapping("/api/member/kakao")
    public Map<String, Object> getMemberFromKakao(String accessToken) {

        log.info("access Token : {}", accessToken);

        MemberDTO memberDTO = memberService.getKakaoMember(accessToken);

        Map<String, Object> claims = memberDTO.getClaims();

        String jwtAccessToken = JWTUtil.generateToken(claims, 10);
        String jwtRefreshToken = JWTUtil.generateToken(claims, 60 * 24);

        claims.put("accessToken", jwtAccessToken);
        claims.put("refreshToken", jwtRefreshToken);

        return claims;
    }

public Map<String, Object> getClaims() {

        Map<String, Object> dataMap = new HashMap<>();

        dataMap.put("email", email);
        dataMap.put("pw", pw);
        dataMap.put("nickname", nickname);
        dataMap.put("social", social);
        dataMap.put("roleNames", roleNames);

        return dataMap;
    }

import axios from "axios"
import { API_SERVER_HOST } from "./todoApi"


const rest_api_key = ``
const redirect_uri = `http://localhost:3000/member/kakao`

const auth_code_path = `https://kauth.kakao.com/oauth/authorize`

const access_token_url =`https://kauth.kakao.com/oauth/token`

export const getKakaoLoginLink = () => {

    const kakaoURL = `${auth_code_path}?client_id=${rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`

    return kakaoURL
}

export const getAccessToken = async (authCode) => {

    const header = {
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        }
    }

    const params = {
        grant_type: "authorization_code",
        client_id: rest_api_key,
        redirect_uri: redirect_uri,
        code: authCode
    }
    const res = await axios.post(access_token_url, params, header)
    const accessToken = res.data.access_token

    return accessToken

}

export const getMemberWithAccessToken = async (accessToken) => {
    const res = await
        axios.get(`${API_SERVER_HOST}/api/member/kakao?accessToken=${accessToken}`) 
        return res.data
}

rest_api_key에 restkey입력되어있습니다.