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;