Header.js

import logo from '../logo.png';
import '../css/Header.css';

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

import React, { useEffect, useState, useContext } from 'react';
import { Link, useNavigate, Navigate } from "react-router-dom";


function ButtonLink({ link, status, children }) {

  const userContext = useContext(UserContext);
  const navigate = useNavigate();
  function MoveTo(link) {
    navigate(link)
  }

  if (status) {
    return (
      <div>
        <label className='Labelheader' htmlFor={children}>{children}</label>
        <button id={children} onClick={() => { userContext.LogOut() }} style={{ display: "none" }}>
          {children}
        </button>
      </div>

    )
  }
  else {
    return (
      <div>
        <label className='Labelheader' htmlFor={children}>{children}</label>
        <button id={children} onClick={() => { MoveTo(link) }} style={{ display: "none" }}>
          {children}
        </button>
      </div>
    )
  }

}

function Header({ cookie }) {

  return (
    <div className="header">
      <ButtonLink link='/'>
        <img className="logo_image" alt="logo" src={logo} />
      </ButtonLink>
      <ul>
        <p>{cookie ? `${cookie.name}님, 환영합니다` : '로그인하세요.'}</p>
        <ul className="menu_list">
          <li><ButtonLink link='/'>Home</ButtonLink></li>
          <li><ButtonLink link='/search'>검색</ButtonLink></li>
          <li><ButtonLink link='/postwrite'>포스트 작성</ButtonLink></li>
          <li><ButtonLink link={cookie ? '/' : '/login'} status={cookie ? true : false}>{cookie ? '로그아웃' : '로그인'}</ButtonLink></li> {/*로그인 여부 로직 구현 필요*/}
          {/* { Object.keys(user).length != 0 ? 
						<li><Link to={`/profile/${getUserId()}`}>profile</Link>/<span onClick={logout}>logout</span></li> :
						<li><Link to="/login">login</Link></li>
					}   */}
        </ul>
      </ul>
    </div>
  );
}



export default Header;