File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import type {ChangeEvent} from 'react'
interface SearchBarProps {
searchCnd: string
searchKeyword: string
options: { value: string; label: string }[]
onChange: (
name: string,
value: string
) => void
}
export const SearchBar = ({
searchCnd,
searchKeyword,
options,
onChange
}: SearchBarProps) => {
const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
onChange(event.target.name, event.target.value);
}
return (
<>
<select
id="searchCnd"
name="searchCnd"
className="search_select"
value={searchCnd}
onChange={handleChange}
>
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<div className="search_type input_type">
<input
type="text"
id="searchWrd"
name="searchKeyword"
className="input search_input"
value={searchKeyword}
onChange={handleChange}
maxLength={20}
placeholder="검색어를 입력하세요"
/>
</div>
</>
)
}