Header.js

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

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

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




function Welcome(props){
	return (
	<p>
		{props.name?`${props.name}님, 환영합니다`:'로그인하세요.'}<br/>
	</p>
	)
}

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

	const userContext = useContext(UserContext);
	const navigate = useNavigate();
	function MoveTo(link){
		navigate(link)
	}
	
	if (status) {
		return (
			<botton onClick = {()=>{userContext.LogOut()}}>
				{children}
			</botton>
		)
	}
	else {
		return (
			<botton onClick = {()=>{MoveTo(link)}}>
				{children}
			</botton>
		)
	}

}

function Header({islogged, username}){
	const name = cookie.load('name')
    return(
        <div className="header">
			<ButtonLink link='/'>
				<img className="logo_image" alt="logo" src={logo}/>
			</ButtonLink>
			<ul>
				<p>{name?`${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={islogged?'/':'/login'} status={islogged}>{islogged?'로그아웃':'로그인'}</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;