//KakaoLoginPage.js

import React from 'react'
import { KAKAO_AUTH_URL } from './key'
import Logo from './img/Logo.png'
import kakaoLoginButton from './img/kakaoLoginButton.png'

function KakaoLoginPage() {
    return (
        <div style={{textAlign: 'center', marginTop: '180px'}}>
            <img src={Logo} alt='img' style={{width: '217px', height: '109px'}} />
            <h5 style={{fontSize: '11px'}}>지금 바로 Hoppy의 서비스를 시작해보세요!</h5>
            <br />
            <a href={KAKAO_AUTH_URL}>
                <img src={kakaoLoginButton} alt='img' style={{height: '50%'}}/>
            </a>
        </div>
    )
}

export default KakaoLoginPage

//key.js
export const KAKAO_AUTH_URL = '<https://hoppy.kro.kr/api/oauth2/authorization/kakao>';

key.js에 있는 주소로 로그인 요청 시

로그인에 성공했다는 console과 인가코드가 나타납니다.

근데 대한님이 올려주신 노션처럼 network 부분에 jwt 토큰은 나타나지 않아요.

//AuthRedirectHandler.js
import Axios from 'axios'
import React from 'react'

Axios.defaults.withCredentials = true;

function AuthRedirectHandler(props) {

    // console.log('props', props)
    const logKey = props.location.search
    // console.log(logKey)
    const splitLogKey = logKey.split('=')
    // console.log(splitLogKey[1])
    let jwtToken = splitLogKey[1].slice(0, -6)
    console.log(jwtToken)

    const loginSuccess = () => {
      if (jwtToken === undefined) {
          console.log('로그인에 실패했습니다.')
          //delete Axios.defaults.headers.common['Authorization'];
          return <React.Fragment>
            <p>로그인 실패 ㅠ</p>
            </React.Fragment>
      } else {
          console.log('로그인에 성공하였습니다.')
          //Axios.defaults.headers.common['Authorization'] = `Bearer ${jwtToken}`;
          return <React.Fragment>
            <p>로그인 성공! {jwtToken}</p>
            </React.Fragment>
      }
    }

  return (
    <div>
      {loginSuccess()}
    </div>
  )
}

export default AuthRedirectHandler

어떤 부분이 빠진 건지 알 수가 없네요,,, 알려주시면 감사하겠습니다!