ㄱㄱ

2025-11-18 06:19:26 +09:00
parent e574caa7ce
commit 0452ca2c28
16 changed files with 1012 additions and 219 deletions
--- a/src/app/NavBar.tsx
+++ b/src/app/NavBar.tsx
@@ -0,0 +1,114 @@
+'use client';
+
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
+import MainLogoSvg from "./svgs/mainlogosvg";
+
+const NAV_ITEMS = [
+  { label: "교육 과정 목록", href: "/menu" },
+  { label: "학습 자료실", href: "/resources" },
+  { label: "공지사항", href: "/notices" },
+];
+
+export default function NavBar() {
+  const pathname = usePathname();
+  const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const userMenuRef = useRef<HTMLDivElement | null>(null);
+  const userButtonRef = useRef<HTMLButtonElement | null>(null);
+
+  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="/" 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>
+          <nav className="flex h-full items-center">
+            {NAV_ITEMS.map((item) => {
+              const isActive = pathname === item.href;
+              return (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className={[
+                    "px-4 py-2 text-[16px] font-semibold",
+                    isActive ? "text-white" : "text-white/80 hover:text-white",
+                  ].join(" ")}
+                >
+                  {item.label}
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+        <div className="relative flex items-center gap-2">
+          <Link href="/my-courses" className="px-4 py-2 text-[16px] font-semibold text-white hover: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"
+          >
+            김이름
+            <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden className="-rotate-90">
+              <path d="M8 5l8 7-8 7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+          </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="w-full 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"
+              >
+                내 정보 수정
+              </button>
+              <button
+                role="menuitem"
+                className="w-full 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"
+              >
+                로그아웃
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}
+
+