msgapp/src/app/components/AppHeader.tsx

"use client";
// 클라이언트 훅(useState/useEffect)을 사용하여 세션 표시/로그아웃을 처리합니다.
import Image from "next/image";
import Link from "next/link";
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", alignItems: "center", justifyContent: "space-between", padding: 12 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Link href="/" aria-label="홈">
          <Image src="/logo.png" alt="logo" width={120} height={28} priority />
        </Link>
      </div>
      <nav style={{ display: "flex", gap: 12, alignItems: "center" }}>
        {/* 대분류/소분류 네비는 이후 단계에서 데이터 연동 포함 확장 */}
        <Link href="/boards">게시판</Link>
        <SearchBar />
        <ThemeToggle />
        {user ? (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span>{user.nickname}님</span>
            <Button variant="ghost" onClick={onLogout}>로그아웃</Button>
          </div>
        ) : (
          <Link href="/login">로그인</Link>
        )}
      </nav>
    </header>
  );
}