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
'use client';
import { useRouter } from 'next/navigation';
import type { ChangeEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import {
STUDENT_MEMBER_PAGE_SIZE_OPTIONS,
STUDENT_MEMBER_SORT_OPTIONS,
buildStudentMemberHref,
type StudentMemberPageSize,
type StudentMemberQuery,
type StudentMemberSortOption,
} from '@/lib/domain/student-member-query';
interface StudentListToolbarProps {
query: StudentMemberQuery;
}
/**
* 목록 툴바 — 정렬/페이지 크기 select는 변경 즉시 URL을 갱신해 서버 데이터를 다시 조회하게
* 한다(select의 onChange가 필요해 이 컴포넌트만 최말단 클라이언트 경계로 분리했다). 두 값 모두
* 바뀌면 1페이지로 되돌린다(기존 페이지 번호가 새 정렬·크기 기준으로는 의미가 달라지므로).
* 엑셀다운로드는 이번 범위에서 버튼 배치만 하고 동작은 구현하지 않는다(사용자 지시) —
* disabled로 두어 클릭해도 아무 일도 일어나지 않게 한다.
*/
export function StudentListToolbar({ query }: StudentListToolbarProps) {
const router = useRouter();
function handleSortChange(event: ChangeEvent<HTMLSelectElement>) {
const sort = event.target.value as StudentMemberSortOption;
router.replace(buildStudentMemberHref(query, { sort, page: 1 }));
}
function handlePageSizeChange(event: ChangeEvent<HTMLSelectElement>) {
const pageSize = Number(event.target.value) as StudentMemberPageSize;
router.replace(buildStudentMemberHref(query, { pageSize, page: 1 }));
}
return (
<div className="flex flex-wrap items-center justify-between gap-3">
<Button type="button" variant="primary" disabled title="준비 중입니다">
엑셀다운로드
</Button>
<div className="flex items-center gap-3">
<Select
name="sort"
aria-label="정렬"
defaultValue={query.sort}
onChange={handleSortChange}
>
{STUDENT_MEMBER_SORT_OPTIONS.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</Select>
<Select
name="pageSize"
aria-label="페이지 크기"
defaultValue={query.pageSize}
onChange={handlePageSizeChange}
>
{STUDENT_MEMBER_PAGE_SIZE_OPTIONS.map((size) => (
<option key={size} value={size}>
{size}개씩
</option>
))}
</Select>
</div>
</div>
);
}