auth provider hook 로 변경

src/client/src/App.js

-import React, {useState} from 'react';
+import React from 'react';
 import { BrowserRouter } from 'react-router-dom'
-import { AuthContext } from './auth/auth-context';
-import authHelpers from './auth/auth-helpers';
+import { AuthProvider } from './auth/auth-context';
 import MainRouter from './MainRouter';
 
 function App() {
-  const [authState, setAuthState] = useState(authHelpers.isAuthenticated())
   return (
-    <AuthContext.Provider value={{authState, setAuthState}}>
+    <AuthProvider>
       <BrowserRouter>
         <MainRouter />
       </BrowserRouter>
-    </AuthContext.Provider>
+    </AuthProvider>
   );
 }
 

src/client/src/MainRouter.jsx

 import React from "react";
-import { BrowserRouter, Route, Switch } from "react-router-dom";
+import { Route, Switch } from "react-router-dom";
 import Signin from "./auth/Signin";
 import Home from "./core/Home";
 import Menu from "./core/Menu";

src/client/src/auth/Signin.jsx

-import React, { useState, useContext } from "react";
+import React, { useState } from "react";
 import Button from "react-bootstrap/Button";
 import Form from "react-bootstrap/Form";
 import Container from "react-bootstrap/Container";
 import { signin } from "./api-auth";
 import auth from "./auth-helpers";
-import { Redirect, useHistory } from "react-router-dom";
-import { AuthContext } from "./auth-context";
+import { Redirect } from "react-router-dom";
+import { useAuth } from "./auth-context";
 
 function Signin() {
-  const authContext = useContext(AuthContext)
-  // const history = useHistory()
+  const { setAuthUser } = useAuth();
   const [values, setValues] = useState({
     email: "",
     password: "",
@@ -22,20 +21,18 @@ function Signin() {
   };
 
   const clickSubmit = (event) => {
-    event.preventDefault()
+    event.preventDefault();
     const user = {
       email: values.email || undefined,
       password: values.password || undefined,
     };
 
-    console.log('authContext in Signin.jsx:', authContext)
-
     signin(user).then((data) => {
       if (data.error) {
         setValues({ ...values, error: data.error });
       } else {
         auth.authenticate(data, () => {
-          authContext.setAuthState(auth.isAuthenticated())
+          setAuthUser(auth.isAuthenticated());
           setValues({ ...values, error: "", redirect: true });
         });
       }
@@ -43,8 +40,8 @@ function Signin() {
   };
 
   if (values.redirect) {
-    return <Redirect to='/' />
-  }  
+    return <Redirect to="/" />;
+  }
 
   return (
     <Container className="col-sm-6 col-md-5 col-lg-4 p-5">
@@ -54,7 +51,7 @@ function Signin() {
           <Form.Control
             type="email"
             placeholder="Enter email"
-            onChange={handleChange('email')}
+            onChange={handleChange("email")}
           />
           <Form.Text className="text-muted">
             We'll never share your email with anyone else.
@@ -66,7 +63,7 @@ function Signin() {
           <Form.Control
             type="password"
             placeholder="Password"
-            onChange={handleChange('password')}
+            onChange={handleChange("password")}
           />
         </Form.Group>
 

src/client/src/auth/auth-context.js

-import React from 'react'
+import React, { useState, useContext } from 'react'
+import authHelpers from './auth-helpers'
 
-export const AuthContext = React.createContext({
-  authState: false,
-  isAuthed: () => {}
-})
+const AuthContext = React.createContext()
+
+export const AuthProvider = ({ children }) => {
+  const [authUser, setAuthUser] = useState(authHelpers.isAuthenticated())
\ No newline at end of file
+
+  return (
+    <AuthContext.Provider value={{ authUser, setAuthUser }}>
+      {children}
+    </AuthContext.Provider>
+  )
+}
+
+export const useAuth = () => useContext(AuthContext)
\ No newline at end of file

src/client/src/core/Menu.jsx

-import React, { useState, useEffect, useContext } from "react";
+import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 import NavDropdown from "react-bootstrap/NavDropdown";
-import Form from "react-bootstrap/Form";
-import FormControl from "react-bootstrap/FormControl";
 import Button from "react-bootstrap/Button";
 import auth from "../auth/auth-helpers";
 import { Link, useHistory } from "react-router-dom";
-import { AuthContext } from "../auth/auth-context";
-
-// import { Link } from "react-router-dom";
+import { useAuth } from "../auth/auth-context";
 
 function Menu() {
-  const authContext = useContext(AuthContext);
+  const {authUser, setAuthUser} = useAuth()
   const history = useHistory();
 
-  console.log("Menu.jsx", history);
-  console.log("authContext in Menu.jsx:", authContext);
-
   return (
     <Navbar sticky="top" bg="dark" variant="dark" expand="sm">
       <Navbar.Brand href="/">
@@ -40,12 +33,12 @@ function Menu() {
             </NavDropdown.Item>
           </NavDropdown>
         </Nav>
-        {authContext.authState ? (
+        {authUser ? (
           <Button
             onClick={() =>
               auth.clearJwt(() => {
                 history.push("/");
-                authContext.setAuthState(false);
+                setAuthUser(false);
               })
             }
           >