824c171158
- 전체 인라인 SVG를 Google Material Symbols Rounded로 교체 - Icon 컴포넌트 추가, cuisine-icons 매핑 리팩토링 - Tasteby 핀 로고 이미지 적용 (라이트/다크 버전) - 테이블링/캐치테이블 이름 유사도 체크 및 리셋 API 추가 - 어드민 페이지 리셋 버튼 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Icon from "@/components/Icon";
|
|
|
|
interface SearchBarProps {
|
|
onSearch: (query: string, mode: "keyword" | "semantic" | "hybrid") => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export default function SearchBar({ onSearch, isLoading }: SearchBarProps) {
|
|
const [query, setQuery] = useState("");
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (query.trim()) {
|
|
onSearch(query.trim(), "hybrid");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="relative">
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
|
|
<Icon name="search" size={16} />
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="식당, 지역, 음식 검색..."
|
|
className="w-full pl-9 pr-3 py-2 bg-gray-100 dark:bg-gray-800 border border-transparent focus:border-brand-400 focus:bg-surface rounded-xl text-sm outline-none transition-all dark:text-gray-200 dark:placeholder-gray-500"
|
|
/>
|
|
{isLoading && (
|
|
<div className="absolute right-3 top-1/2 -translate-y-1/2">
|
|
<div className="w-4 h-4 border-2 border-brand-400 border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
)}
|
|
</form>
|
|
);
|
|
}
|