-
Hyun Woo Jeong authoredHyun Woo Jeong authored
Header.js 1.75 KiB
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;