xrlms/src/app/NavBar.tsx

'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>
  );
}