feat: add mock page

src/app/layouts/AppLayout.tsx

@@ -1,44 +1,43 @@
-import { Link, Outlet } from 'react-router-dom';
+import { Link, NavLink, Outlet } from 'react-router-dom';
 
 import env from '@/shared/config/env';
-import { useLogout } from '@/features/auth/hooks/useLogout';
-import { useAuthStore } from '@/features/auth/store/authStore';
+import { UserMenu } from '@/features/auth/components/UserMenu';
+
+const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+  `rounded-full px-3 py-1.5 transition-colors ${
+    isActive ? 'bg-primary-light text-primary' : 'text-ink-secondary hover:bg-surface-soft hover:text-ink'
+  }`;
 
 export function AppLayout() {
-  const user = useAuthStore((s) => s.user);
-  const logout = useLogout();
-
   return (
-    <div className="min-h-screen bg-gray-50">
-      <header className="border-b border-gray-200 bg-white">
-        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
+    <div className="min-h-screen">
+      <header className="border-b border-border bg-surface">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-4">
           <div className="flex items-center gap-6">
-            <Link to="/" className="text-lg font-semibold text-gray-900">
+            <Link to="/" className="text-lg font-extrabold text-ink">
               {env.VITE_APP_NAME}
             </Link>
-            <nav className="flex items-center gap-4 text-sm text-gray-600">
-              <Link to="/" className="hover:text-gray-900">
+            <nav className="flex items-center gap-1 text-sm font-bold">
+              <NavLink to="/" end className={navLinkClass}>
                 Home
-              </Link>
-              <Link to="/learn" className="hover:text-gray-900">
-                Learn
-              </Link>
+              </NavLink>
+              <NavLink to="/vocabulary" className={navLinkClass}>
+                Vocabulary
+              </NavLink>
+              <NavLink to="/assignment" className={navLinkClass}>
+                Assignment
+              </NavLink>
+              <NavLink to="/ranking" className={navLinkClass}>
+                Ranking
+              </NavLink>
             </nav>
           </div>
-          <div className="flex items-center gap-4">
-            {user && <span className="text-sm text-gray-500">{user.email}</span>}
-            <button
-              type="button"
-              onClick={() => logout.mutate()}
-              disabled={logout.isPending}
-              className="rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 disabled:opacity-50"
-            >
-              {logout.isPending ? 'Signing out…' : 'Sign out'}
-            </button>
+          <div className="flex items-center gap-2">
+            <UserMenu />
           </div>
         </div>
       </header>
-      <main className="mx-auto max-w-5xl px-4 py-8">
+      <main className="mx-auto max-w-6xl px-4 py-8">
         <Outlet />
       </main>
     </div>