.

src/components/layout/DesktopMenuBar.tsx

@@ -1,15 +1,14 @@
 'use client';
 
+import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 import { clsx } from 'clsx';
+import { BatteryMedium, ChevronRight, Command, Monitor, Search, Wifi } from 'lucide-react';
 import { getProfile } from '@/api/profile';
 import ThemeToggle from '@/components/theme/ThemeToggle';
-
-interface DesktopMenuBarProps {
-  isSidebarCollapsed: boolean;
-}
+import { useAuthStore } from '@/store/authStore';
 
 const defaultProfile = {
   githubUrl: 'https://github.com',
@@ -24,11 +23,11 @@ const getCategoryTitle = (pathname: string) => {
 
 const getAppTitle = (pathname: string) => {
   if (pathname.startsWith('/admin/posts/new')) return 'Write';
-  if (pathname.startsWith('/admin/posts')) return 'Posts';
-  if (pathname.startsWith('/admin/comments')) return 'Comments';
-  if (pathname.startsWith('/admin/categories')) return 'Categories';
-  if (pathname.startsWith('/admin/profile')) return 'Profile';
-  if (pathname.startsWith('/admin')) return 'Dashboard';
+  if (pathname.startsWith('/admin/posts')) return 'Post Manager';
+  if (pathname.startsWith('/admin/comments')) return 'Comment Center';
+  if (pathname.startsWith('/admin/categories')) return 'Category Studio';
+  if (pathname.startsWith('/admin/profile')) return 'Profile Panel';
+  if (pathname.startsWith('/admin')) return 'Admin Console';
   if (pathname.startsWith('/archive')) return 'Archive';
   if (pathname.startsWith('/category')) return getCategoryTitle(pathname);
   if (pathname.startsWith('/posts')) return 'Reader';
@@ -38,8 +37,22 @@ const getAppTitle = (pathname: string) => {
   return '홈';
 };
 
-export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarProps) {
+const formatMenuTime = (date: Date | null) => {
+  if (!date) return '';
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    month: 'short',
+    day: 'numeric',
+    weekday: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+};
+
+export default function DesktopMenuBar() {
   const pathname = usePathname();
+  const { isLoggedIn, role, _hasHydrated } = useAuthStore();
+  const [now, setNow] = useState<Date | null>(null);
 
   const { data: profile } = useQuery({
     queryKey: ['profile'],
@@ -47,37 +60,86 @@ export default function DesktopMenuBar({ isSidebarCollapsed }: DesktopMenuBarPro
     retry: 0,
   });
 
+  useEffect(() => {
+    const updateTime = () => setNow(new Date());
+    const frameId = window.requestAnimationFrame(updateTime);
+    const timerId = window.setInterval(updateTime, 60_000);
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      window.clearInterval(timerId);
+    };
+  }, []);
+
   const githubUrl = profile?.githubUrl || defaultProfile.githubUrl;
   const email = profile?.email || defaultProfile.email;
-  const menuLinkClass = 'text-xs font-semibold text-[var(--color-text-subtle)] transition hover:text-[var(--color-text)]';
+  const isAdmin = _hasHydrated && isLoggedIn && role?.includes('ADMIN');
+  const menuItems = useMemo(() => {
+    const items = [
+      { href: '/', label: '홈' },
+      { href: '/archive', label: '아카이브' },
+      { href: '/play/chess', label: '체스' },
+    ];
+
+    if (isAdmin) {
+      items.push({ href: '/admin', label: '관리자' }, { href: '/admin/posts/new', label: '새 글' });
+    }
+
+    return items;
+  }, [isAdmin]);
+  const menuLinkClass = 'hidden rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-muted)] transition hover:bg-[var(--card-bg)] hover:text-[var(--color-text)] lg:inline-flex';
+  const systemIconClass = 'text-[var(--color-text-muted)]';
 
   return (
     <div
-      className={clsx(
-        'fixed right-6 top-3 z-40 hidden transition-[left] duration-300 ease-out md:block',
-        isSidebarCollapsed ? 'md:left-24' : 'md:left-[19rem]',
-      )}
+      className="fixed inset-x-0 top-0 z-[70] hidden h-10 border-b border-[var(--menubar-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-menubar)] backdrop-blur-[28px] md:block"
+      role="menubar"
+      aria-label="시스템 메뉴 막대"
     >
-      <div className="flex h-11 items-center justify-between gap-3 rounded-lg border border-[var(--menubar-border)] bg-[var(--menubar-bg)] px-3 shadow-[var(--shadow-menubar)] backdrop-blur-[24px]">
-        <div className="flex min-w-0 items-center gap-3">
-          <Link href="/" className="shrink-0 text-sm font-bold text-[var(--color-text)]">
+      <div className="flex h-full min-w-0 items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-1">
+          <Link
+            href="/"
+            className="mr-1 inline-flex h-7 shrink-0 items-center gap-1.5 rounded px-2 text-sm font-bold text-[var(--color-text)] transition hover:bg-[var(--card-bg)]"
+          >
+            <Command size={15} strokeWidth={2.4} />
             WYPark
           </Link>
-          <span className="hidden h-4 w-px bg-[var(--color-line)] sm:block" />
-          <span className="truncate text-sm font-semibold text-[var(--color-text-muted)]">
-            {getAppTitle(pathname)}
-          </span>
-          <div className="hidden items-center gap-3 md:flex">
-            <a href={githubUrl} target="_blank" rel="noreferrer" className={menuLinkClass}>
-              GitHub
-            </a>
-            <a href={`mailto:${email}`} className={menuLinkClass}>
-              Email
-            </a>
+
+          <div className="hidden min-w-0 items-center gap-1 sm:flex">
+            {menuItems.map((item) => (
+              <Link key={item.href} href={item.href} className={menuLinkClass}>
+                {item.label}
+              </Link>
+            ))}
+          </div>
+
+          <span className="mx-1 hidden h-4 w-px bg-[var(--color-line)] xl:block" />
+          <div className="hidden min-w-0 items-center gap-1.5 rounded px-2 py-1 text-xs font-semibold text-[var(--color-text-subtle)] xl:flex">
+            <Monitor size={14} />
+            <span className="truncate text-[var(--color-text-muted)]">{getAppTitle(pathname)}</span>
+            <ChevronRight size={13} />
+            <span className="truncate">{profile?.name || 'WYPark'}</span>
           </div>
         </div>
 
-        <ThemeToggle />
+        <div className="flex shrink-0 items-center gap-2">
+          <a href={githubUrl} target="_blank" rel="noreferrer" className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
+            GitHub
+          </a>
+          <a href={`mailto:${email}`} className={clsx(menuLinkClass, 'hidden xl:inline-flex')}>
+            Email
+          </a>
+          <Search size={15} className={systemIconClass} />
+          <Wifi size={15} className={systemIconClass} />
+          <BatteryMedium size={17} className={systemIconClass} />
+          <span className="hidden min-w-[8.5rem] text-right text-xs font-semibold tabular-nums text-[var(--color-text-muted)] lg:block">
+            {formatMenuTime(now)}
+          </span>
+          <div className="scale-[0.88]">
+            <ThemeToggle />
+          </div>
+        </div>
       </div>
     </div>
   );