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';
import MyPage from "./pages/MyPage.js";
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>
          <Route path="/mypage" element={<MyPage />}></Route>
        </Routes>
      </UserContext.Provider>
      {/* <Footer/> */}
    </div>
  );
}

async function requestLogout() {
  const response = await axios({
    url: `${process.env.REACT_APP_BACKEND_URL}/auth/logout`, // 통신할 웹문서
    method: 'get', // 통신할 방식
  });
  return response;
}

async function requestCheckSession() {
  const response = await axios({
    url: `${process.env.REACT_APP_BACKEND_URL}/auth/session`, // 통신할 웹문서
    method: 'get', // 통신할 방식
  });
  return response;
}

export default App;