msgapp/src/app/components/AppHeader.tsx

"use client";
// 클라이언트 훅(useState/useEffect)을 사용하여 세션 표시/로그아웃을 처리합니다.
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);
  // 헤더 마운트 시 세션 존재 여부를 조회해 로그인/로그아웃 UI를 제어합니다.
  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>
      <nav style={{ display: "flex", gap: 12, alignItems: "center" }}>
        <a href="/">홈</a>
        <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>
  );
}