282 lines
10 KiB
TypeScript
282 lines
10 KiB
TypeScript
'use client';
|
|
|
|
import Link from "next/link";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import MainLogoSvg from "./svgs/mainlogosvg";
|
|
import ChevronDownSvg from "./svgs/chevrondownsvg";
|
|
import apiService from "./lib/apiService";
|
|
|
|
const NAV_ITEMS = [
|
|
{ label: "교육 과정 목록", href: "/course-list" },
|
|
{ label: "학습 자료실", href: "/resources" },
|
|
{ label: "공지사항", href: "/notices" },
|
|
];
|
|
|
|
const INSTRUCTOR_NAV_ITEMS = [
|
|
{ label: "강좌 현황", href: "/instructor/courses" },
|
|
{ label: "학습 자료실", href: "/admin/resources" },
|
|
{ label: "공지사항", href: "/admin/notices" },
|
|
];
|
|
|
|
export default function NavBar() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
|
|
const [userName, setUserName] = useState<string>('');
|
|
const [userRole, setUserRole] = useState<string>('');
|
|
const userMenuRef = useRef<HTMLDivElement | null>(null);
|
|
const userButtonRef = useRef<HTMLButtonElement | null>(null);
|
|
const hideCenterNav = /^\/[^/]+\/review$/.test(pathname);
|
|
const isAdminPage = pathname.startsWith('/admin');
|
|
const isInstructorPage = pathname.startsWith('/instructor');
|
|
|
|
// 사용자 정보 가져오기 및 비활성화 계정 체크
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
async function fetchUserInfo() {
|
|
try {
|
|
// localStorage와 쿠키 모두에서 토큰 확인
|
|
const localStorageToken = localStorage.getItem('token');
|
|
const cookieToken = document.cookie
|
|
.split('; ')
|
|
.find(row => row.startsWith('token='))
|
|
?.split('=')[1];
|
|
|
|
const token = localStorageToken || cookieToken;
|
|
|
|
if (!token) {
|
|
return;
|
|
}
|
|
|
|
// localStorage에 토큰이 없고 쿠키에만 있으면 localStorage에도 저장 (동기화)
|
|
if (!localStorageToken && cookieToken) {
|
|
localStorage.setItem('token', cookieToken);
|
|
}
|
|
|
|
const response = await apiService.getCurrentUser();
|
|
|
|
if (response.status === 401) {
|
|
// 토큰이 만료되었거나 유효하지 않은 경우
|
|
localStorage.removeItem('token');
|
|
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
// 로그인 페이지가 아닐 때만 리다이렉트
|
|
if (isMounted && pathname !== '/login') {
|
|
router.push('/login');
|
|
}
|
|
return;
|
|
}
|
|
|
|
const data = response.data;
|
|
|
|
// 계정 상태 확인
|
|
const userStatus = data.status || data.userStatus;
|
|
if (userStatus === 'INACTIVE' || userStatus === 'inactive') {
|
|
// 비활성화된 계정인 경우 로그아웃 처리
|
|
localStorage.removeItem('token');
|
|
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
// 로그인 페이지가 아닐 때만 리다이렉트
|
|
if (isMounted && pathname !== '/login') {
|
|
router.push('/login');
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (isMounted) {
|
|
const role = data.role || data.userRole || '';
|
|
setUserRole(role);
|
|
if (data.name) {
|
|
setUserName(data.name);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('사용자 정보 조회 오류:', error);
|
|
}
|
|
}
|
|
|
|
fetchUserInfo();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, [router, pathname]);
|
|
|
|
useEffect(() => {
|
|
if (!isUserMenuOpen) return;
|
|
const onDown = (e: MouseEvent) => {
|
|
const t = e.target as Node;
|
|
if (
|
|
userMenuRef.current &&
|
|
!userMenuRef.current.contains(t) &&
|
|
userButtonRef.current &&
|
|
!userButtonRef.current.contains(t)
|
|
) {
|
|
setIsUserMenuOpen(false);
|
|
}
|
|
};
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setIsUserMenuOpen(false);
|
|
};
|
|
document.addEventListener("mousedown", onDown);
|
|
document.addEventListener("keydown", onKey);
|
|
return () => {
|
|
document.removeEventListener("mousedown", onDown);
|
|
document.removeEventListener("keydown", onKey);
|
|
};
|
|
}, [isUserMenuOpen]);
|
|
|
|
return (
|
|
<header className="bg-[#060958] h-20">
|
|
<div className="mx-auto flex h-full w-full max-w-[1440px] items-center justify-between px-8">
|
|
<div className="flex flex-1 items-center gap-9">
|
|
<Link
|
|
href={(userRole === 'ADMIN' || userRole === 'admin') ? "/instructor" : "/"}
|
|
aria-label="XR LMS 홈"
|
|
className="flex items-center gap-2"
|
|
>
|
|
<MainLogoSvg width={46.703} height={36} />
|
|
<span className="text-2xl font-extrabold leading-[1.45] text-white">XR LMS</span>
|
|
</Link>
|
|
{!hideCenterNav && !isAdminPage && isInstructorPage && (
|
|
<nav className="flex h-full items-center">
|
|
{INSTRUCTOR_NAV_ITEMS.map((item) => {
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={["px-4 py-2 text-[16px] font-semibold text-white"].join(" ")}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
<Link
|
|
href="/admin"
|
|
className={["px-4 py-2 text-[16px] font-semibold text-white"].join(" ")}
|
|
>
|
|
관리자페이지
|
|
</Link>
|
|
</nav>
|
|
)}
|
|
{!hideCenterNav && !isAdminPage && !isInstructorPage && (
|
|
<nav className="flex h-full items-center">
|
|
{NAV_ITEMS.map((item) => {
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={["px-4 py-2 text-[16px] font-semibold text-white"].join(" ")}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
)}
|
|
</div>
|
|
<div className="relative flex items-center gap-2">
|
|
{(isAdminPage || isInstructorPage) ? (
|
|
<>
|
|
<button
|
|
ref={userButtonRef}
|
|
type="button"
|
|
onClick={() => setIsUserMenuOpen((v) => !v)}
|
|
aria-haspopup="menu"
|
|
aria-expanded={isUserMenuOpen}
|
|
className="flex items-center gap-1 px-4 py-2 text-[16px] font-semibold text-white cursor-pointer"
|
|
>
|
|
{userName || '사용자'}
|
|
<ChevronDownSvg
|
|
width={16}
|
|
height={16}
|
|
className={["transition-transform", isUserMenuOpen ? "rotate-180" : "rotate-0"].join(" ")}
|
|
/>
|
|
</button>
|
|
{isUserMenuOpen && (
|
|
<div
|
|
ref={userMenuRef}
|
|
role="menu"
|
|
aria-label="사용자 메뉴"
|
|
className="absolute right-0 top-full mt-2 bg-white rounded-lg shadow-[0_0_8px_0_rgba(0,0,0,0.25)] p-3 z-50"
|
|
>
|
|
<button
|
|
role="menuitem"
|
|
className="flex items-center w-[136px] h-10 px-2 rounded-lg text-left text-[#333C47] text-[16px] font-medium leading-normal hover:bg-[rgba(236,240,255,0.5)] focus:bg-[rgba(236,240,255,0.5)] outline-none"
|
|
onClick={() => {
|
|
// 로컬 스토리지에서 토큰 제거
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
// 쿠키에서 토큰 제거
|
|
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
// 로그인 페이지로 리다이렉트
|
|
window.location.href = '/login';
|
|
}}
|
|
>
|
|
로그아웃
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
<Link href="/menu/courses" className="px-4 py-2 text-[16px] font-semibold text-white">
|
|
내 강좌실
|
|
</Link>
|
|
<button
|
|
ref={userButtonRef}
|
|
type="button"
|
|
onClick={() => setIsUserMenuOpen((v) => !v)}
|
|
aria-haspopup="menu"
|
|
aria-expanded={isUserMenuOpen}
|
|
className="flex items-center gap-1 px-4 py-2 text-[16px] font-semibold text-white cursor-pointer"
|
|
>
|
|
{userName || '사용자'}
|
|
<ChevronDownSvg
|
|
width={16}
|
|
height={16}
|
|
className={["transition-transform", isUserMenuOpen ? "rotate-180" : "rotate-0"].join(" ")}
|
|
/>
|
|
</button>
|
|
{isUserMenuOpen && (
|
|
<div
|
|
ref={userMenuRef}
|
|
role="menu"
|
|
aria-label="사용자 메뉴"
|
|
className="absolute right-0 top-full mt-2 bg-white rounded-lg shadow-[0_0_8px_0_rgba(0,0,0,0.25)] p-3 z-50"
|
|
>
|
|
<Link
|
|
role="menuitem"
|
|
href="/menu/account"
|
|
className="flex items-center w-[136px] h-10 px-2 rounded-lg text-left text-[#333C47] text-[16px] font-medium leading-normal hover:bg-[rgba(236,240,255,0.5)] focus:bg-[rgba(236,240,255,0.5)] outline-nonq"
|
|
onClick={() => setIsUserMenuOpen(false)}
|
|
>
|
|
내 정보 수정
|
|
</Link>
|
|
<button
|
|
role="menuitem"
|
|
className="flex items-center w-[136px] h-10 px-2 rounded-lg text-left text-[#333C47] text-[16px] font-medium leading-normal hover:bg-[rgba(236,240,255,0.5)] focus:bg-[rgba(236,240,255,0.5)] outline-none"
|
|
onClick={() => {
|
|
// 로컬 스토리지에서 토큰 제거
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
// 쿠키에서 토큰 제거 (미들웨어에서 확인하므로)
|
|
document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
|
|
// 로그인 페이지로 리다이렉트
|
|
window.location.href = '/login';
|
|
}}
|
|
>
|
|
로그아웃
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
|