stock_chart_site/web/components/TopNav.tsx

"use client";

// 글로벌 sticky 헤더 — 모든 페이지 상단에 고정. 토스 톱바 톤.
// 좌: 로고/타이틀, 중: 컴팩트 검색 (debounced + popover), 우: 관심종목 링크.
//
// 홈의 큰 SearchBox 와 별개로 동작. 결과 클릭 시 popover 가 닫히고 페이지 이동.
// Esc 또는 바깥 클릭으로 popover 닫힘.

import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import { api, type Symbol } from "../lib/api";
import { recent } from "../lib/recent";

export function TopNav() {
  const [q, setQ] = useState("");
  const [items, setItems] = useState<Symbol[]>([]);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [recentCodes, setRecentCodes] = useState<string[]>([]);
  const wrapRef = useRef<HTMLDivElement | null>(null);

  // 최근 본 종목 구독 — popover 빈 상태에서 보여줌.
  useEffect(() => {
    const refresh = () => setRecentCodes(recent.get());
    refresh();
    return recent.subscribe(refresh);
  }, []);

  // 디바운스 검색. 입력 비면 결과 클리어.
  useEffect(() => {
    const term = q.trim();
    if (!term) {
      setItems([]);
      return;
    }
    setLoading(true);
    const h = setTimeout(async () => {
      try {
        const r = await api.search(term, false, 8, false);
        setItems(r.items);
      } catch {
        setItems([]);
      } finally {
        setLoading(false);
      }
    }, 200);
    return () => clearTimeout(h);
  }, [q]);

  // 바깥 클릭으로 popover 닫기.
  useEffect(() => {
    const onDoc = (e: MouseEvent) => {
      if (!wrapRef.current) return;
      if (!wrapRef.current.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, []);

  return (
    <header className="sticky top-0 z-40 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur">
      <div className="mx-auto flex h-12 max-w-5xl items-center gap-4 px-6">
        <Link
          href="/"
          className="shrink-0 text-sm font-semibold tracking-tight text-zinc-100 hover:text-white"
        >
          Stock Chart
        </Link>

        <div ref={wrapRef} className="relative flex-1 max-w-md">
          <input
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              setOpen(true);
            }}
            onFocus={() => setOpen(true)}
            placeholder="종목 검색"
            className="w-full rounded-md border border-zinc-800 bg-zinc-900 px-3 py-1.5 text-xs text-zinc-100 outline-none focus:border-zinc-600"
          />
          {open && q.trim() && (
            <div className="absolute left-0 right-0 top-full mt-1 max-h-80 overflow-auto rounded-md border border-zinc-800 bg-zinc-950 shadow-xl">
              {loading && (
                <div className="px-3 py-2 text-xs text-zinc-500">검색중…</div>
              )}
              {!loading && items.length === 0 && (
                <div className="px-3 py-2 text-xs text-zinc-500">결과 없음</div>
              )}
              <ul className="divide-y divide-zinc-800">
                {items.map((it) => (
                  <li key={it.code}>
                    <Link
                      href={`/${it.code}`}
                      onClick={() => {
                        setOpen(false);
                        setQ("");
                      }}
                      className="flex items-center justify-between gap-2 px-3 py-2 text-xs hover:bg-zinc-800/60"
                    >
                      <span className="min-w-0 truncate text-zinc-100">
                        {it.name}
                        {it.is_seed && (
                          <span className="ml-1.5 rounded-sm bg-emerald-900/60 px-1 py-0.5 text-[9px] font-semibold text-emerald-300">
                            SEED
                          </span>
                        )}
                      </span>
                      <span className="shrink-0 text-zinc-500">
                        {it.code} · {it.market}
                      </span>
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}

          {open && !q.trim() && recentCodes.length > 0 && (
            <div className="absolute left-0 right-0 top-full mt-1 max-h-80 overflow-auto rounded-md border border-zinc-800 bg-zinc-950 shadow-xl">
              <div className="flex items-center justify-between px-3 py-1.5 text-[10px] text-zinc-500">
                <span>최근 본 종목</span>
                <button
                  type="button"
                  onClick={() => recent.clear()}
                  className="hover:text-zinc-300"
                >
                  지우기
                </button>
              </div>
              <ul className="divide-y divide-zinc-800">
                {recentCodes.map((c) => (
                  <li key={c}>
                    <Link
                      href={`/${c}`}
                      onClick={() => setOpen(false)}
                      className="block px-3 py-2 text-xs text-zinc-200 hover:bg-zinc-800/60"
                    >
                      {c}
                    </Link>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>

        <Link
          href="/watchlist"
          className="shrink-0 text-xs text-amber-300 hover:text-amber-200"
        >
          ★ 관심
        </Link>
      </div>
    </header>
  );
}