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>
            <li onClick={goToHome}><a>홈</a></li>
            <li onClick={goToSearch}><a>검색</a></li>
            <li onClick={goToClientservice}><a>고객지원</a></li>
            <li onClick={goToMypage}><a>마이페이지</a></li>
            
            <li><a onClick={handleimgClick}><img src="/logout_img.png"
             ></img></a>
                {showUserInfo &&(
                  <div className={header_styles.user_info}>
                    <div className={header_styles.profileinfo}>
                    <div><img className={header_styles.circular_img} src={userData.imagePath} alt="Profile"></img></div>
                    <div className={header_styles.userTextInfo}>
                    <div className={header_styles.userName}>{userData.name}</div>
                    <div className={header_styles.userNickname}>{userData.nickname}</div>
                    </div>
                    </div>
                    
                    <button className={header_styles.logout} onClick={openLogoutModal}>로그아웃</button>
                  </div>
                )}
            </li>
            {/* </div> */}
          </ul>
        </nav>
        
      </div>
        <Logout modalOpen={LogoutModalOpen} closeModal={closeLogoutModal} handleLogout={handleLogout} />
      
    </header>
  )
}
export default Header;