326 lines
9.8 KiB
TypeScript
326 lines
9.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ChevronsLeft,
|
|
ChevronsRight,
|
|
Search,
|
|
} from "lucide-react";
|
|
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
import type { MaestroStudentsResult } from "@/lib/maestros";
|
|
|
|
type StudentsSectionProps = {
|
|
maestroID: number;
|
|
};
|
|
|
|
export function StudentsSection({ maestroID }: StudentsSectionProps) {
|
|
const [q, setQ] = useState("");
|
|
const [submittedQ, setSubmittedQ] = useState("");
|
|
const [page, setPage] = useState(1);
|
|
const [pageSize, setPageSize] = useState(10);
|
|
|
|
const [data, setData] = useState<MaestroStudentsResult | null>(null);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
const run = async () => {
|
|
setIsLoading(true);
|
|
setErrorMessage("");
|
|
|
|
try {
|
|
const params = new URLSearchParams({
|
|
page: String(page),
|
|
pageSize: String(pageSize),
|
|
q: submittedQ,
|
|
});
|
|
|
|
const response = await fetch(
|
|
`/api/maestros/${maestroID}/students?${params.toString()}`
|
|
);
|
|
|
|
if (!response.ok) {
|
|
throw new Error("학생 목록을 불러오지 못했습니다.");
|
|
}
|
|
|
|
const result = (await response.json()) as MaestroStudentsResult;
|
|
|
|
if (!cancelled) {
|
|
setData(result);
|
|
}
|
|
} catch (err) {
|
|
if (!cancelled) {
|
|
setErrorMessage(
|
|
err instanceof Error
|
|
? err.message
|
|
: "학생 목록을 불러오지 못했습니다."
|
|
);
|
|
}
|
|
} finally {
|
|
if (!cancelled) {
|
|
setIsLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
void run();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [maestroID, submittedQ, page, pageSize]);
|
|
|
|
function handleSearch(e: React.FormEvent<HTMLFormElement>) {
|
|
e.preventDefault();
|
|
setPage(1);
|
|
setSubmittedQ(q);
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-lg border bg-background p-5">
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<h2 className="text-base font-semibold">학생 목록</h2>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
{data
|
|
? `전체 ${data.totalCount.toLocaleString()}명${submittedQ ? ` — "${submittedQ}" 검색 결과` : ""}`
|
|
: "로딩 중..."}
|
|
</p>
|
|
</div>
|
|
<form className="flex gap-2" onSubmit={handleSearch}>
|
|
<div className="relative">
|
|
<Search
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
|
|
/>
|
|
<input
|
|
className="h-8 w-44 rounded-md border bg-background pl-9 pr-3 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
|
|
onChange={(e) => setQ(e.target.value)}
|
|
placeholder="이름 검색"
|
|
type="search"
|
|
value={q}
|
|
/>
|
|
</div>
|
|
<Button size="sm" type="submit">
|
|
검색
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
|
|
{errorMessage ? (
|
|
<p className="mt-4 text-sm text-destructive">{errorMessage}</p>
|
|
) : (
|
|
<>
|
|
<StudentTable isLoading={isLoading} result={data} />
|
|
{data ? (
|
|
<StudentPagination
|
|
onPageChange={setPage}
|
|
onPageSizeChange={(size) => {
|
|
setPageSize(size);
|
|
setPage(1);
|
|
}}
|
|
page={data.page}
|
|
pageSize={pageSize}
|
|
totalPages={data.totalPages}
|
|
/>
|
|
) : null}
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function StudentTable({
|
|
result,
|
|
isLoading,
|
|
}: {
|
|
result: MaestroStudentsResult | null;
|
|
isLoading: boolean;
|
|
}) {
|
|
if (isLoading || !result) {
|
|
return (
|
|
<div className="mt-4 flex h-24 items-center justify-center rounded-lg border">
|
|
<p className="text-sm text-muted-foreground">로딩 중...</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="mt-4 overflow-hidden rounded-lg border">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full min-w-[360px] border-collapse text-sm">
|
|
<thead className="bg-muted/60">
|
|
<tr className="border-b">
|
|
<th className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
|
|
PlayerID
|
|
</th>
|
|
<th className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
|
|
이름
|
|
</th>
|
|
<th className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
|
|
입장코드
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{result.items.length > 0 ? (
|
|
result.items.map((player) => (
|
|
<tr
|
|
className="border-b last:border-b-0"
|
|
key={player.playerID}
|
|
>
|
|
<td className="h-11 px-3 align-middle">
|
|
<span className="font-mono text-xs tabular-nums">
|
|
{player.playerID}
|
|
</span>
|
|
</td>
|
|
<td className="h-11 px-3 align-middle">{player.name}</td>
|
|
<td className="h-11 px-3 align-middle">
|
|
<span className="font-mono text-xs">{player.enterCode}</span>
|
|
</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td
|
|
className="h-24 text-center text-sm text-muted-foreground"
|
|
colSpan={3}
|
|
>
|
|
{result.q
|
|
? "검색 결과가 없습니다."
|
|
: "등록된 학생이 없습니다."}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StudentPagination({
|
|
page,
|
|
pageSize,
|
|
totalPages,
|
|
onPageChange,
|
|
onPageSizeChange,
|
|
}: {
|
|
page: number;
|
|
pageSize: number;
|
|
totalPages: number;
|
|
onPageChange: (page: number) => void;
|
|
onPageSizeChange: (pageSize: number) => void;
|
|
}) {
|
|
const showNav = totalPages > 1;
|
|
const paginationItems = buildPaginationItems(page, totalPages);
|
|
const firstVisiblePage = paginationItems[0] ?? 1;
|
|
const lastVisiblePage = paginationItems.at(-1) ?? totalPages;
|
|
const hasFirstPage = paginationItems.includes(1);
|
|
const hasLastPage = paginationItems.includes(totalPages);
|
|
const hasPreviousPageGroup = firstVisiblePage > 1;
|
|
const hasNextPageGroup = lastVisiblePage < totalPages;
|
|
|
|
return (
|
|
<div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<label className="flex items-center gap-2">
|
|
<span className="text-sm text-muted-foreground">페이지당</span>
|
|
<select
|
|
className="h-7 rounded-md border bg-background px-2 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
|
|
onChange={(e) => onPageSizeChange(Number(e.target.value))}
|
|
value={pageSize}
|
|
>
|
|
{[10, 20, 50].map((size) => (
|
|
<option key={size} value={size}>
|
|
{size}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<span className="text-sm text-muted-foreground">개 표시</span>
|
|
</label>
|
|
{showNav ? <nav
|
|
aria-label="학생 목록 페이지"
|
|
className="self-end flex flex-wrap items-center gap-1.5 sm:self-auto"
|
|
>
|
|
{!hasFirstPage ? (
|
|
<Button
|
|
aria-label="처음 페이지"
|
|
className={buttonVariants({ variant: "outline", size: "icon-sm" })}
|
|
onClick={() => onPageChange(1)}
|
|
type="button"
|
|
>
|
|
<ChevronsLeft aria-hidden="true" className="size-4" />
|
|
</Button>
|
|
) : null}
|
|
|
|
{hasPreviousPageGroup ? (
|
|
<Button
|
|
aria-label="이전 5페이지"
|
|
className={buttonVariants({ variant: "outline", size: "icon-sm" })}
|
|
onClick={() => onPageChange(Math.max(1, page - 5))}
|
|
type="button"
|
|
>
|
|
<ChevronLeft aria-hidden="true" className="size-4" />
|
|
</Button>
|
|
) : null}
|
|
|
|
{paginationItems.map((item) => (
|
|
<Button
|
|
aria-current={item === page ? "page" : undefined}
|
|
className={cn(
|
|
buttonVariants({
|
|
variant: item === page ? "default" : "outline",
|
|
size: "sm",
|
|
}),
|
|
"min-w-8 px-2"
|
|
)}
|
|
key={item}
|
|
onClick={() => onPageChange(item)}
|
|
type="button"
|
|
>
|
|
{item}
|
|
</Button>
|
|
))}
|
|
|
|
{hasNextPageGroup ? (
|
|
<Button
|
|
aria-label="다음 5페이지"
|
|
className={buttonVariants({ variant: "outline", size: "icon-sm" })}
|
|
onClick={() => onPageChange(Math.min(totalPages, page + 5))}
|
|
type="button"
|
|
>
|
|
<ChevronRight aria-hidden="true" className="size-4" />
|
|
</Button>
|
|
) : null}
|
|
|
|
{!hasLastPage ? (
|
|
<Button
|
|
aria-label="끝 페이지"
|
|
className={buttonVariants({ variant: "outline", size: "icon-sm" })}
|
|
onClick={() => onPageChange(totalPages)}
|
|
type="button"
|
|
>
|
|
<ChevronsRight aria-hidden="true" className="size-4" />
|
|
</Button>
|
|
) : null}
|
|
</nav> : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function buildPaginationItems(currentPage: number, totalPages: number) {
|
|
const startPage = Math.max(1, currentPage - 2);
|
|
const endPage = Math.min(totalPages, currentPage + 2);
|
|
|
|
return Array.from(
|
|
{ length: endPage - startPage + 1 },
|
|
(_, index) => startPage + index
|
|
);
|
|
}
|