로그인 UI 추가

src/app/components/AppHeader.tsx

@@ -1,7 +1,22 @@
+"use client";
 import { ThemeToggle } from "@/app/components/ThemeToggle";
 import { SearchBar } from "@/app/components/SearchBar";
+import { Button } from "@/app/components/ui/Button";
+import React from "react";
 
 export function AppHeader() {
+  const [user, setUser] = React.useState<{ nickname: string } | null>(null);
+  React.useEffect(() => {
+    fetch("/api/auth/session")
+      .then((r) => r.json())
+      .then((d) => setUser(d?.ok ? d.user : null))
+      .catch(() => setUser(null));
+  }, []);
+  const onLogout = async () => {
+    await fetch("/api/auth/session", { method: "DELETE" });
+    setUser(null);
+    location.reload();
+  };
   return (
     <header style={{ display: "flex", justifyContent: "space-between", padding: 12 }}>
       <div>msg App</div>
@@ -10,6 +25,14 @@ export function AppHeader() {
         <a href="/boards">게시판</a>
         <SearchBar />
         <ThemeToggle />
+        {user ? (
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <span>{user.nickname}님</span>
+            <Button variant="ghost" onClick={onLogout}>로그아웃</Button>
+          </div>
+        ) : (
+          <a href="/login">로그인</a>
+        )}
       </nav>
     </header>
   );