Header.js

import React, {useState, useContext} from 'react';
import { useNavigate } from "react-router-dom";
import header_styles from './Header.module.css';
import Logout from './logout';
import { AuthContext } from '../App';
const Header=()=>{
  const { userData } = useContext(AuthContext);

  const navigate = useNavigate();
  const [LogoutModalOpen, setLogoutModalOpen] = useState(false);
  const [showUserInfo, setShowUserInfo] = useState(false);

  const openLogoutModal = () => {
    setLogoutModalOpen(true);
  };

  const closeLogoutModal = () => {
    setLogoutModalOpen(false);
  };

  const handleLogout = async() => {
    try {
      const response = await fetch('api/users/logout', {
        method: 'POST',
      });
  
      if (response.status===200) {
        localStorage.removeItem('userSession');
        alert('로그아웃 되었습니다.');
        closeLogoutModal();
        navigate('/users/login');
      } else {
        alert('로그아웃에 실패했습니다. 다시 시도해주세요.');
      }
    } catch (error) {
      console.error('로그아웃 중 오류 발생:', error);
      alert('로그아웃 중 오류가 발생했습니다.');
    }
  };


  const goToHome = () => {
    navigate("/schedules");

  }

  const goToSearch = () => {
    navigate("/recruits");
  }

  const goToClientservice = () => {
    navigate("/clientservice");
  }

  const goToMypage = () => {
    navigate("/mypage");
  }

  const handleimgClick = () => {
    setShowUserInfo(!showUserInfo);
  };


  return (
    <header>
      <div className={header_styles.header_content}>

        <div className={header_styles.header_logo}><a href="/"><img src="/logo.png"></img></a></div>
        <nav className={header_styles.header_nav}>
          <ul>