File name
Commit message
Commit date
File name
Commit message
Commit date
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 {useState, type ChangeEvent} from 'react'
import {SearchBar} from "../../../component/SearchBar.tsx";
import type {SearchParams} from "../../../../type/searchParams.ts";
import {PageSizeSelector} from "../../../component/pagination/PageSizeSelector.tsx";
interface BoardListSearchFormProps {
totalCount: number
searchParams: SearchParams
onChange: (params: SearchParams) => void
}
const searchOptions = [
{value: '0', label: '게시판명/연결메뉴'},
{value: '1', label: '게시판유형'},
]
const pageSizeOptions = [
{value: '10', label: '10건씩'},
{value: '20', label: '20건씩'},
{value: '30', label: '30건씩'},
]
export function BoardListSearchForm({
totalCount,
searchParams,
onChange
}: BoardListSearchFormProps) {
const [draftParams, setDraftParams] = useState({
searchSortCnd: searchParams.searchSortCnd,
searchKeyword: searchParams.searchKeyword,
});
const handleChange = (
name: string,
value: string
) => {
setDraftParams((prev) => ({
...prev,
[name]: value,
}));
};
const handleSearch = () => {
onChange({
...searchParams,
...draftParams,
pageIndex: 1,
});
};
const handlePageChange = (event: ChangeEvent<HTMLSelectElement>) => {
const {name, value} = event.target
onChange({
...searchParams,
[name]: Number(value),
pageIndex: 1,
})
}
return (
<div className="search_area">
<div className="search_left">
<p className="total_number">
게시물 <b>{totalCount}</b>
</p>
</div>
<div className="search_right">
<SearchBar
searchSortCnd={draftParams.searchSortCnd}
searchKeyword={draftParams.searchKeyword}
options={searchOptions}
onChange={handleChange}
onSearch={handleSearch}
/>
<PageSizeSelector
value={searchParams.pageUnit}
options={pageSizeOptions}
onChange={handlePageChange}
/>
</div>
</div>
)
}