GoogleLoginButton.js

import { GoogleLogin } from "@react-oauth/google";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { useNavigate, Navigate } from "react-router-dom";
import { useCookies } from 'react-cookie'
import React, { useEffect, useState, useContext} from 'react';
import { UserContext } from './Usercontext.js';

// 안써도 자동으로 한국 시간을 불러온다. 명확하게 하기 위해 import
import moment from 'moment';
import 'moment/locale/ko';

import base64 from 'base-64';
import axios from 'axios';

axios.defaults.withCredentials = true;


const GoogleLoginButton = () => {
	
  const setUserName = useContext(UserContext);

  const [cookies, setCookie, removeCookie] = useCookies();
  const clientId = '716858812522-rb0pfisq317unkh4so5hvbu16p19kqp8.apps.googleusercontent.com'
  const navigate = useNavigate();
  
  const goMain = () => {
    navigate("/");
  }
  return (
    <>
      <GoogleOAuthProvider clientId={clientId}>
        <GoogleLogin
          onSuccess={(res) => {
			
            let datas = res.credential.split('.')
            const obj = JSON.parse(b64DecodeUnicode(datas[1]));
	
			// 토큰을 보내 로그인 로직 처리
			// 로그인이 정상적으로 되었다면 쿠키를 등록

            let response = requestLogin(obj).then(
				(val) => {
					setUserName(val)
					goMain();
				}
			);
			
          }}
          onFailure={(err) => {
            console.log("Login Failed");
            console.log(err);
          }}
        />
      </GoogleOAuthProvider>
    </>
  );
};

function b64DecodeUnicode(str) {
  // Going backwards: from bytestream, to percent-encoding, to original string.
  return decodeURIComponent(atob(str)
    .split('').map(function (c) {
      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

async function requestLogin(payloadObj) {
  const response = await axios({
    url: 'http://localhost:8080/login', // 통신할 웹문서
    method: 'post', // 통신할 방식
    data: payloadObj
  });
  if (response.status === 200) {
    return response.data;
  }
  else {
    return null;
  }
}

export default GoogleLoginButton