강사페이지

src/app/NavBar.tsx

@@ -12,15 +12,23 @@ const NAV_ITEMS = [
   { label: "공지사항", href: "/notices" },
 ];
 
+const INSTRUCTOR_NAV_ITEMS = [
+  { label: "강좌 현황", href: "/admin/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 === '/instructor';
 
   // 사용자 정보 가져오기 및 비활성화 계정 체크
   useEffect(() => {
@@ -86,8 +94,12 @@ export default function NavBar() {
           return;
         }
 
-        if (isMounted && data.name) {
-          setUserName(data.name);
+        if (isMounted) {
+          const role = data.role || data.userRole || '';
+          setUserRole(role);
+          if (data.name) {
+            setUserName(data.name);
+          }
         }
       } catch (error) {
         console.error('사용자 정보 조회 오류:', error);
@@ -129,11 +141,30 @@ export default function NavBar() {
     <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="/" aria-label="XR LMS 홈" className="flex items-center gap-2">
+          <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 && (
+          {!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>
+                );
+              })}
+            </nav>
+          )}
+          {!hideCenterNav && !isAdminPage && !isInstructorPage && (
             <nav className="flex h-full items-center">
               {NAV_ITEMS.map((item) => {
                 return (
@@ -150,26 +181,47 @@ export default function NavBar() {
           )}
         </div>
         <div className="relative flex items-center gap-2">
-          {isAdminPage ? (
+          {(isAdminPage || isInstructorPage) ? (
             <>
-              <Link href="/menu/account" className="px-4 py-2 text-[16px] font-semibold text-white">
-                내 정보
-              </Link>
               <button
+                ref={userButtonRef}
                 type="button"
-                onClick={() => {
-                  // 로컬 스토리지에서 토큰 제거
-                  localStorage.removeItem('token');
-                  localStorage.removeItem('user');
-                  // 쿠키에서 토큰 제거
-                  document.cookie = 'token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-                  // 로그인 페이지로 리다이렉트
-                  window.location.href = '/login';
-                }}
-                className="px-4 py-2 text-[16px] font-semibold text-white cursor-pointer"
+                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>
+              )}
             </>
           ) : (
             <>