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 Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Field } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import {
DEFAULT_STUDENT_MEMBER_SEARCH_FIELD,
STUDENT_MEMBERS_PATH,
STUDENT_MEMBER_SEARCH_FIELD_OPTIONS,
buildStudentMemberHref,
type StudentMemberQuery,
} from '@/lib/domain/student-member-query';
interface StudentSearchBarProps {
query: StudentMemberQuery;
}
/**
* 검색 영역 — 순수 `<form method="get">` GET 제출로 URL을 갱신한다(자바스크립트 없이도
* 동작). 현재 `sort`·`pageSize`는 hidden input으로 함께 제출해 검색 후에도 유지되게 하고,
* 검색 자체는 항상 1페이지로 돌아간다(hidden page 필드를 두지 않아 parseStudentMemberQuery의
* 기본값 1로 자연스럽게 떨어진다). "초기화"는 폼 제출이 아니라 기본값으로 되돌린 링크라
* 현재 입력값과 무관하게 동작한다. 상호작용이 전부 네이티브 폼 제출/링크 내비게이션이라
* 클라이언트 자바스크립트가 필요 없다 — Server Component로 유지한다.
*/
export function StudentSearchBar({ query }: StudentSearchBarProps) {
const resetHref = buildStudentMemberHref(query, {
searchField: DEFAULT_STUDENT_MEMBER_SEARCH_FIELD,
keyword: '',
page: 1,
});
return (
<form
method="get"
action={STUDENT_MEMBERS_PATH}
className="flex flex-wrap items-end gap-3"
>
<input type="hidden" name="sort" value={query.sort} />
<input type="hidden" name="pageSize" value={query.pageSize} />
<Field label="검색 대상">
<Select name="searchField" defaultValue={query.searchField}>
{STUDENT_MEMBER_SEARCH_FIELD_OPTIONS.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</Select>
</Field>
<Field label="검색어">
<Input
type="text"
name="keyword"
defaultValue={query.keyword}
placeholder="검색어를 입력하세요"
/>
</Field>
<Button type="submit" variant="secondary">
검색
</Button>
<Link
href={resetHref}
className="text-body-md text-foreground-muted underline-offset-2 hover:underline"
>
초기화
</Link>
</form>
);
}