66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import type { FormEvent } from "react";
|
|
import { Search, X } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface StockSearchFormProps {
|
|
keyword: string;
|
|
onKeywordChange: (value: string) => void;
|
|
onSubmit: (event: FormEvent) => void;
|
|
onInputFocus?: () => void;
|
|
disabled?: boolean;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
/**
|
|
* @description 종목 검색 입력/제출 폼을 렌더링합니다.
|
|
* @see features/trade/components/TradeContainer.tsx 검색 패널에서 키워드 입력 이벤트를 전달합니다.
|
|
*/
|
|
export function StockSearchForm({
|
|
keyword,
|
|
onKeywordChange,
|
|
onSubmit,
|
|
onInputFocus,
|
|
disabled,
|
|
isLoading,
|
|
}: StockSearchFormProps) {
|
|
const handleClear = () => {
|
|
onKeywordChange("");
|
|
// 포커스 로직이 필요하다면 상위에서 ref를 전달받거나 여기서 ref를 사용해야 함.
|
|
// 현재는 단순 값 초기화만 수행.
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={onSubmit} className="flex gap-2">
|
|
{/* ========== SEARCH INPUT ========== */}
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground dark:text-brand-100/65" />
|
|
<Input
|
|
value={keyword}
|
|
onChange={(e) => onKeywordChange(e.target.value)}
|
|
onFocus={onInputFocus}
|
|
placeholder="종목명 또는 종목코드(6자리)를 입력하세요."
|
|
autoComplete="off"
|
|
className="pl-9 pr-9 dark:border-brand-700/55 dark:bg-brand-900/28 dark:text-brand-100 dark:placeholder:text-brand-100/55"
|
|
/>
|
|
{keyword && (
|
|
<button
|
|
type="button"
|
|
onClick={handleClear}
|
|
className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground dark:text-brand-100/65 dark:hover:text-brand-100"
|
|
tabIndex={-1}
|
|
aria-label="검색어 지우기"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* ========== SUBMIT BUTTON ========== */}
|
|
<Button type="submit" disabled={disabled || isLoading}>
|
|
{isLoading ? "검색 중..." : "검색"}
|
|
</Button>
|
|
</form>
|
|
);
|
|
}
|