Commit 37cfe93b authored by Yoon, Daeki's avatar Yoon, Daeki 😅
Browse files

프로필, 로그인 상태에 따라 헤더 표시 변경

parent aa821332
import React from "react"; import React from "react";
import { Link } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
import { useAuth } from "../auth/auth.context"; import { useAuth } from "../auth/auth.context";
export const Header = () => { export const Header = () => {
const { user, logout } = useAuth(); const { user, logout } = useAuth();
const location = useLocation();
return ( return (
<div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5"> <div className="bg-white border-b-2 border-b-themeColor px-2 sm:px-4 py-2.5">
...@@ -13,22 +14,40 @@ export const Header = () => { ...@@ -13,22 +14,40 @@ export const Header = () => {
</Link> </Link>
<div className="md:flex items-center justify-end md:flex-1 lg:w-0"> <div className="md:flex items-center justify-end md:flex-1 lg:w-0">
{user.isLoggedIn ? ( {user.isLoggedIn ? (
<button onClick={() => logout()}>Logout</button> <div className="">
<button
onClick={() => logout()}
className="whitespace-nowrap font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
>
로그아웃
</button>
{location.pathname === "/profile" ? (
""
) : (
<Link
to="/profile"
className="whitespace-nowrap font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
>
프로필
</Link>
)}
</div>
) : ( ) : (
<Link <div>
to="/login" <Link
className="whitespace-nowrap font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md" to="/login"
> className="whitespace-nowrap font-bold text-gray-600 hover:text-themeColor mx-1 py-2 px-3 rounded-md"
Login >
</Link> 로그인
</Link>
<Link
to="/signup"
className="whitespace-nowrap font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md "
>
회원가입
</Link>
</div>
)} )}
<Link
to="/signup"
className="whitespace-nowrap font-bold text-white hover:bg-blue-500 mx-1 py-2 px-3 bg-themeColor rounded-md "
>
Sign Up
</Link>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment