Skip to content
Snippets Groups Projects
Header.js 1.78 KiB
Newer Older
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
import logo from '../logo.png';
import '../css/Header.css';
import { UserContext } from '../Context.js';
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
import React, { useEffect, useState, useContext} from 'react';
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
import { Link, useNavigate, Navigate } from "react-router-dom";
function ButtonLink({link, status, children}){
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed

	const userContext = useContext(UserContext);
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
	const navigate = useNavigate();
	function MoveTo(link){
		navigate(link)
	if (status) {
		return (
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
			<div>
				<label className='Labelheader' htmlFor={children}>{children}</label>
				<button id={children} onClick = {()=>{userContext.LogOut()}} style={{ display: "none"}}>
					{children}
				</button>
			</div>

Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
	}
	else {
		return (
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
			<div>
				<label className='Labelheader' htmlFor={children}>{children}</label>
				<button id={children} onClick = {()=>{MoveTo(link)}} style={{ display: "none"}}>
					{children}
				</button>
			</div>
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
	}
function Header({cookie}){

LEE's avatar
LEE committed
    return(
        <div className="header">
			<ButtonLink link='/'>
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
				<img className="logo_image" alt="logo" src={logo}/>
			</ButtonLink>
			<ul>
				<p>{cookie?`${cookie.name}님, 환영합니다`:'로그인하세요.'}</p>
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
				<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> {/*로그인 여부 로직 구현 필요*/}
Hyun Woo Jeong's avatar
Hyun Woo Jeong committed
					{/* { 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>
LEE's avatar
LEE committed
        </div>
    );
}

Hyun Woo Jeong's avatar
Hyun Woo Jeong committed

LEE's avatar
LEE committed
export default Header;