[design] 어드민 로그아웃 시 좌단 nav바 스타일 변경

softeerbootcamp4th · Aug 13, 2024 · e06a296 · e06a296
1 parent 8da06a2
commit e06a296
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/adminPage/shared/components/NavBar.jsx b/src/adminPage/shared/components/NavBar.jsx
@@ -1,13 +1,24 @@
+import { useNavigate } from "react-router-dom";
+
 import NavBarItem from "./NavBarItem.jsx";
+import useAuthStore, { logout } from "@admin/auth/store.js";
 
 function NavBar()
 {
+	const navigate = useNavigate();
+	const isLogin = useAuthStore( store=>store.isLogin );
+	function onLogoutClick()
+	{
+		logout();
+		navigate("/login");
+	}
+
 	return <nav className="w-36 h-screen sticky flex-shrink-0 top-0 bg-black flex flex-col items-center p-4 gap-4">
 		<p className="text-white py-4 border-b-2 border-white">관리자 페이지</p>
 		<ul className="w-full flex flex-col justify-center">
-			<NavBarItem to="/events">events</NavBarItem>
-			<NavBarItem to="/comments">기대평</NavBarItem>
-			<NavBarItem>LOGOUT</NavBarItem>
+			<NavBarItem disabled={!isLogin} to="/events">events</NavBarItem>
+			<NavBarItem disabled={!isLogin} to="/comments">기대평</NavBarItem>
+			{isLogin && <NavBarItem onClick={onLogoutClick}>LOGOUT</NavBarItem>}
 		</ul>
 	</nav>
 }

diff --git a/src/adminPage/shared/components/NavBarItem.jsx b/src/adminPage/shared/components/NavBarItem.jsx
@@ -1,6 +1,6 @@
 import {NavLink} from "react-router-dom";
 
-function NavBarItem({to, onClick, children})
+function NavBarItem({to, onClick, disabled, children})
 {
 	const commonStyle = `w-full h-full flex justify-center items-center
 	hover:border-2 hover:border-white
@@ -9,11 +9,11 @@ function NavBarItem({to, onClick, children})
 	const commonTextStyle = `text-neutral-200 hover:text-white active:text-neutral-400 invalid:text-neutral-600`;
 
 	const navLink = <NavLink to={to} 
-		className={ ({isActive})=>`${commonStyle} ${isActive ? "text-blue-400" : commonTextStyle}` }>
+		className={ ({isActive})=>`${commonStyle} ${disabled ? "pointer-events-none text-neutral-600": ""} ${isActive ? "text-blue-400" : commonTextStyle}` }>
 		{children}
 	</NavLink>;
 
-	const button = <button onClick={onClick} className={`${commonStyle} ${commonTextStyle}`}>{children}</button>;
+	const button = <button onClick={onClick} disabled={disabled} className={`${commonStyle} ${commonTextStyle}`}>{children}</button>;
 
 	return <li className="w-full h-12 flex justify-center items-center">
 		{to ? navLink : button}