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 {
searchSortCnd: string
searchKeyword: string
options: { value: string; label: string }[]
onChange: (
name: string,
value: string
) => void
onSearch: () => void
}
export const SearchBar = ({
searchSortCnd,
searchKeyword,
options,
onChange,
onSearch
}: SearchBarProps) => {
const handleChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
onChange(event.target.name, event.target.value);
}
return (
<>
<select
id="searchCnd"
name="searchSortCnd"
className="search_select"
value={searchSortCnd}
onChange={handleChange}
>
<option value="">전체</option>
{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>
<button
type="button"
className="btn btn_search"
onClick={onSearch}
>
검색
</button>
</>
)
}