App.js

import "./css/App.css";
import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
import React, { useEffect, useState, useContext} from 'react';
import cookie from 'react-cookies';

import { UserContext } from './Context.js';

import Main from "./pages/Main.js";
import Login from "./pages/Login.js";
import Search from "./pages/Search.js";
import PostWrite from "./pages/PostWrite.js"
import PostRead from "./pages/PostRead.js"

import Header from "./components/Header.js";

import axios from 'axios';
axios.defaults.withCredentials = true;

function App() {
	
	const [ isloggedIn, SetIsloggedIn] = useState(false);
	const [ userName, setUserName] = useState(null);
	const navigate = useNavigate();
	function MoveTo(link){
		navigate(link)
	}	

	const userinfo = cookie.load('name')
	// 헤더 업데이트
	const LogIn = (name)=>{
		// API 로그아웃 요청
		// 로그아웃 성공시 헤더 반영
		SetIsloggedIn(true)
		setUserName(name)

		console.log("Usercontext:LogIn")
		console.log(isloggedIn)
	};
	
	const LogOut = ()=>{
		// API 로그아웃 요청
		requestLogout().then(
			(response) => {
				// 로그아웃 성공시 헤더 반영
				SetIsloggedIn(false)
				setUserName(null)
				console.log("Usercontext:LogOut")
				console.log(userName)
				alert("정상적으로 로그아웃 되었습니다.")	
				MoveTo('/')			
			}
		)
		.catch((response)=>{
			console.log("error!:LogOut")
			console.log(response)
		})
	};

	const CheckSession = ()=>{
		return requestCheckSession();
	};


  return(
    <div className="App">
		<UserContext.Provider value={{isloggedIn, userName, LogIn, LogOut, CheckSession}}>
		<Header cookie={userinfo} username={userName}></Header>
			<Routes>
				<Route path="/" element={<Main/>}></Route>
				<Route path="/login" element={<Login/>}></Route>
				<Route path="/search" element={<Search/>}></Route>
				<Route path="/postwrite" element={<PostWrite/>}></Route> 
				<Route path="/post/:id" element={<PostRead/>}></Route> 
			</Routes>
		</UserContext.Provider>
		{/* <Footer/> */}
    </div>
    );
}

async function requestLogout() {
	const response = await axios({
	  url: 'http://localhost:8080/auth/logout', // 통신할 웹문서
	  method: 'get', // 통신할 방식
	});
	return response;
  }

async function requestCheckSession() {
	const response = await axios({
	  url: 'http://localhost:8080/auth/session', // 통신할 웹문서
	  method: 'get', // 통신할 방식
	});
	return response;
  }

export default App;