"use client"; import { Search, ListMusic, LogIn, LogOut, Home } from "lucide-react"; import { signIn, signOut, useSession } from "next-auth/react"; import { useState } from "react"; import type { DiscordServer } from "@/types/music"; interface TopNavProps { onSearch: (query: string) => void; onHome: () => void; selectedServer: DiscordServer | null; } /** 프로필 이미지가 없을 수도 있어(이미지 URL 빈 값) 깨진 아이콘 대신 이니셜을 보여준다. */ function Avatar({ user, size, }: { user: { name?: string | null; image?: string | null }; size: "sm" | "md"; }) { const box = size === "sm" ? "h-7 w-7 text-xs" : "h-9 w-9 text-sm"; if (user.image) { return ( // eslint-disable-next-line @next/next/no-img-element ); } return ( {(user.name ?? "?").trim().charAt(0).toUpperCase()} ); } export default function TopNav({ onSearch, onHome, selectedServer }: TopNavProps) { const { data: session, status } = useSession(); const [term, setTerm] = useState(""); const isAuthed = status === "authenticated"; const canSearch = isAuthed && !!selectedServer; const submitSearch = () => { if (canSearch && term.trim()) onSearch(term.trim()); }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") submitSearch(); }; const handleHomeClick = () => { setTerm(""); onHome(); }; // 상황별로 검색창 안내를 다르게 준다(로그인 전인데 "서버를 고르라"고 하면 혼란스럽다). const searchPlaceholder = !isAuthed ? "로그인하면 검색할 수 있어요" : !selectedServer ? "먼저 서버를 선택해주세요" : "노래 제목이나 유튜브·스포티파이 주소"; return (
); }