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 type { BoardType } from '@/lib/domain/board-post';
import {
BOARD_PAGE_SIZE_OPTIONS,
buildBoardPostHref,
type BoardPageSize,
type BoardPostQuery,
} from '@/lib/domain/board-post-query';
import { BoardPostFormModal } from './board-post-form-modal';
interface BoardListToolbarProps {
boardType: BoardType;
query: BoardPostQuery;
/** 1:1문의는 관리자가 글을 등록하지 않으므로 false다(사용자 확인 사항). */
canCreate: boolean;
}
/**
* 목록 툴바 — [신규 등록]과 페이지 크기 select. 페이지 크기가 바뀌면 1페이지로 되돌린다
* (기존 페이지 번호가 새 크기 기준으로는 의미가 달라지므로).
*
* 시안의 "최근등록순" 정렬 select는 두지 않았다 — 백엔드 목록 SQL의 정렬이 최신순으로 고정돼
* 있고 시안의 select에도 다른 선택지가 없어, 선택지가 하나뿐인 컨트롤이 되기 때문이다.
* 정렬 기준이 추가되면 그때 select를 붙인다.
*/
export function BoardListToolbar({
boardType,
query,
canCreate,
}: BoardListToolbarProps) {
const router = useRouter();
const [isCreateOpen, setIsCreateOpen] = useState(false);
function handlePageSizeChange(event: ChangeEvent<HTMLSelectElement>) {
const pageSize = Number(event.target.value) as BoardPageSize;
router.replace(buildBoardPostHref(boardType, query, { pageSize, page: 1 }));
}
return (
<div className="flex flex-wrap items-center justify-end gap-3">
{canCreate && (
<Button
type="button"
variant="primary"
onClick={() => setIsCreateOpen(true)}
>
+ 신규 등록
</Button>
)}
<Select
name="pageSize"
aria-label="페이지 크기"
defaultValue={query.pageSize}
onChange={handlePageSizeChange}
>
{BOARD_PAGE_SIZE_OPTIONS.map((size) => (
<option key={size} value={size}>
{size}개씩
</option>
))}
</Select>
{isCreateOpen && (
<BoardPostFormModal
boardType={boardType}
mode="create"
onClose={() => setIsCreateOpen(false)}
/>
)}
</div>
);
}