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 { useState, type ChangeEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import {
ADMIN_MEMBER_PAGE_SIZE_OPTIONS,
ADMIN_MEMBER_SORT_OPTIONS,
buildAdminMemberHref,
type AdminMemberPageSize,
type AdminMemberQuery,
type AdminMemberSortOption,
} from '@/lib/domain/admin-member-query';
import { AdminMemberCreateModal } from './admin-member-create-modal';
interface AdminMemberListToolbarProps {
query: AdminMemberQuery;
}
const EXCEL_UNSUPPORTED_NOTE = '엑셀 다운로드는 추후 제공됩니다.';
/**
* 목록 툴바(시안 ADM_ADM_101 ②③) — 정렬/페이지 크기 select는 변경 즉시 URL을 갱신해 서버
* 데이터를 다시 조회하게 한다. 두 값 모두 바뀌면 1페이지로 되돌린다(기존 페이지 번호가 새 정렬·
* 크기 기준으로는 의미가 달라지므로).
*
* **엑셀다운로드는 버튼만 배치하고 동작은 구현하지 않는다**(사용자 지시 — 추후 진행).
* disabled로 두어 클릭해도 아무 일도 일어나지 않게 한다. 학생 회원 목록처럼 백엔드에 엑셀 API가
* 있으면 라우트 핸들러로 중계하면 되지만, 관리자 쪽에는 그 API가 아직 없다
* (`/api/v1/mngr/admin/**`에 목록 조회 하나뿐).
*
* [신규 등록]은 시안대로 등록 팝업을 연다 — 팝업 열림 상태를 이 컴포넌트가 소유한다.
*/
export function AdminMemberListToolbar({ query }: AdminMemberListToolbarProps) {
const router = useRouter();
const [isCreateOpen, setIsCreateOpen] = useState(false);
function handleSortChange(event: ChangeEvent<HTMLSelectElement>) {
const sort = event.target.value as AdminMemberSortOption;
router.replace(buildAdminMemberHref(query, { sort, page: 1 }));
}
function handlePageSizeChange(event: ChangeEvent<HTMLSelectElement>) {
const pageSize = Number(event.target.value) as AdminMemberPageSize;
router.replace(buildAdminMemberHref(query, { pageSize, page: 1 }));
}
return (
<div className="flex flex-wrap items-center justify-end gap-3">
<Button
type="button"
variant="success"
disabled
title={EXCEL_UNSUPPORTED_NOTE}
>
엑셀다운로드
</Button>
<Button
type="button"
variant="primary"
onClick={() => setIsCreateOpen(true)}
>
신규 등록
</Button>
<Select
name="sort"
aria-label="정렬"
defaultValue={query.sort}
onChange={handleSortChange}
>
{ADMIN_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}
>
{ADMIN_MEMBER_PAGE_SIZE_OPTIONS.map((size) => (
<option key={size} value={size}>
{size}개씩
</option>
))}
</Select>
{isCreateOpen && (
<AdminMemberCreateModal onClose={() => setIsCreateOpen(false)} />
)}
</div>
);
}