Phase 4. 마에스트로 목록 화면 구현

app/(admin)/maestros/[maestroId]/page.tsx

@@ -0,0 +1,273 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+
+import { buttonVariants } from "@/components/ui/button";
+import { getMaestroDetail } from "@/lib/maestros";
+import {
+  formatDate,
+  formatDateTime,
+  getAccountTypeLabel,
+  getActivateStatusLabel,
+  getRequestStatusLabel,
+} from "@/lib/utils";
+
+type MaestroDetailPageProps = {
+  params: Promise<{
+    maestroId: string;
+  }>;
+};
+
+export default async function MaestroDetailPage({
+  params,
+}: MaestroDetailPageProps) {
+  const { maestroId } = await params;
+  const maestroID = Number(maestroId);
+
+  if (!Number.isInteger(maestroID) || maestroID <= 0) {
+    notFound();
+  }
+
+  const detail = await getMaestroDetail(maestroID);
+
+  if (!detail) {
+    notFound();
+  }
+
+  const { maestro } = detail;
+
+  return (
+    <section className="space-y-5">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div>
+          <Link
+            className={buttonVariants({
+              variant: "ghost",
+              size: "sm",
+              className: "mb-2 -ml-2",
+            })}
+            href="/maestros"
+          >
+            <ArrowLeft className="size-4" aria-hidden="true" />
+            목록
+          </Link>
+          <h1 className="text-2xl font-semibold tracking-normal">
+            {maestro.name}
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            MaestroID {maestro.maestroID} · {maestro.email}
+          </p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-4">
+        <SummaryCard
+          label="상태"
+          value={getActivateStatusLabel(maestro.activateStatus)}
+        />
+        <SummaryCard
+          label="계정 유형"
+          value={getAccountTypeLabel(maestro.accountType)}
+        />
+        <SummaryCard
+          label="학생 수"
+          value={detail.counts.players.toLocaleString()}
+        />
+        <SummaryCard
+          label="사용 가능일"
+          value={formatDate(maestro.availableActivateDateTime)}
+        />
+      </div>
+
+      <section className="rounded-lg border bg-background p-5">
+        <h2 className="text-base font-semibold">기본 정보</h2>
+        <dl className="mt-4 grid gap-x-8 gap-y-4 text-sm md:grid-cols-2 xl:grid-cols-3">
+          <InfoItem label="이름" value={maestro.name} />
+          <InfoItem label="이메일" value={maestro.email} />
+          <InfoItem
+            label="상태"
+            value={getActivateStatusLabel(maestro.activateStatus)}
+          />
+          <InfoItem
+            label="계정 유형"
+            value={getAccountTypeLabel(maestro.accountType)}
+          />
+          <InfoItem
+            label="DB 학생 수"
+            value={detail.counts.players.toLocaleString()}
+          />
+          <InfoItem
+            label="PlayerCount"
+            value={maestro.playerCount.toLocaleString()}
+          />
+          <InfoItem
+            label="사용 가능일"
+            value={formatDateTime(maestro.availableActivateDateTime)}
+          />
+          <InfoItem
+            label="약관 동의일"
+            value={formatDateTime(maestro.acceptClausesDateTime)}
+          />
+          <InfoItem
+            label="입장코드 수정"
+            value={maestro.allowEditEnterCode === 1 ? "허용" : "비허용"}
+          />
+          <InfoItem
+            label="체험 MaestroID"
+            value={maestro.maestroTestID?.toString() ?? "-"}
+          />
+        </dl>
+      </section>
+
+      <section className="rounded-lg border bg-background p-5">
+        <div className="flex items-end justify-between gap-3">
+          <div>
+            <h2 className="text-base font-semibold">학생 목록 요약</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
+              전체 {detail.counts.players.toLocaleString()}명 중 최근 20명
+            </p>
+          </div>
+        </div>
+        <SimpleTable
+          emptyText="등록된 학생이 없습니다."
+          headers={["PlayerID", "이름", "입장코드", "AccountType"]}
+          rows={detail.players.map((player) => [
+            player.playerID,
+            player.name,
+            player.enterCode,
+            player.accountType ?? "-",
+          ])}
+        />
+      </section>
+
+      <div className="grid gap-4 xl:grid-cols-2">
+        <section className="rounded-lg border bg-background p-5">
+          <h2 className="text-base font-semibold">연장 신청 이력</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            전체 {detail.counts.extensionRequests.toLocaleString()}건 중 최근
+            20건
+          </p>
+          <SimpleTable
+            emptyText="연장 신청 이력이 없습니다."
+            headers={["신청ID", "계정 유형", "신청일시", "상태"]}
+            rows={detail.extensionRequests.map((request) => [
+              request.maestroExtensionID,
+              getAccountTypeLabel(request.accountType),
+              formatDateTime(request.requestedDateTime),
+              getRequestStatusLabel(request.status),
+            ])}
+          />
+        </section>
+
+        <section className="rounded-lg border bg-background p-5">
+          <h2 className="text-base font-semibold">업그레이드 신청 이력</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            전체 {detail.counts.upgradeRequests.toLocaleString()}건 중 최근 20건
+          </p>
+          <SimpleTable
+            emptyText="업그레이드 신청 이력이 없습니다."
+            headers={["신청ID", "현재", "요청", "신청일시", "상태"]}
+            rows={detail.upgradeRequests.map((request) => [
+              request.maestroUpgradeID,
+              getAccountTypeLabel(request.registeredAccountType),
+              getAccountTypeLabel(request.requestedAccountType),
+              formatDateTime(request.requestedDateTime),
+              getRequestStatusLabel(request.status),
+            ])}
+          />
+        </section>
+      </div>
+
+      <section className="rounded-lg border bg-background p-5">
+        <h2 className="text-base font-semibold">처리 로그</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          전체 {detail.counts.logs.toLocaleString()}건 중 최근 30건
+        </p>
+        <SimpleTable
+          emptyText="처리 로그가 없습니다."
+          headers={["LogID", "유형", "처리일시", "내용"]}
+          rows={detail.logs.map((log) => [
+            log.maestroLogID,
+            log.type,
+            formatDateTime(log.logDateTime),
+            log.remark,
+          ])}
+        />
+      </section>
+    </section>
+  );
+}
+
+function SummaryCard({ label, value }: { label: string; value: string }) {
+  return (
+    <article className="rounded-lg border bg-background p-4">
+      <p className="text-xs font-medium text-muted-foreground">{label}</p>
+      <p className="mt-2 text-lg font-semibold">{value}</p>
+    </article>
+  );
+}
+
+function InfoItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div>
+      <dt className="text-xs font-medium text-muted-foreground">{label}</dt>
+      <dd className="mt-1 break-words font-medium">{value}</dd>
+    </div>
+  );
+}
+
+function SimpleTable({
+  headers,
+  rows,
+  emptyText,
+}: {
+  headers: string[];
+  rows: Array<Array<string | number>>;
+  emptyText: string;
+}) {
+  return (
+    <div className="mt-4 overflow-hidden rounded-lg border">
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[560px] border-collapse text-sm">
+          <thead className="bg-muted/60">
+            <tr className="border-b">
+              {headers.map((header) => (
+                <th
+                  className="h-10 px-3 text-left text-xs font-medium text-muted-foreground"
+                  key={header}
+                >
+                  {header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.length > 0 ? (
+              rows.map((row, index) => (
+                <tr className="border-b last:border-b-0" key={index}>
+                  {row.map((cell, cellIndex) => (
+                    <td
+                      className="h-11 max-w-[360px] break-words px-3 align-middle"
+                      key={cellIndex}
+                    >
+                      {cell}
+                    </td>
+                  ))}
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td
+                  className="h-24 px-3 text-center text-sm text-muted-foreground"
+                  colSpan={headers.length}
+                >
+                  {emptyText}
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

app/(admin)/maestros/page.tsx

@@ -0,0 +1,295 @@
+import Link from "next/link";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Search,
+} from "lucide-react";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { MaestrosTable } from "@/components/data-table/maestros-table";
+import { AutoSubmitSelect } from "@/components/forms/auto-submit-select";
+import {
+  ACCOUNT_TYPE_LABELS,
+  ACCOUNT_TYPES,
+  ACTIVATE_STATUS_LABELS,
+  ACTIVATE_STATUSES,
+} from "@/lib/constants";
+import { getMaestros, type RawSearchParams } from "@/lib/maestros";
+import { cn } from "@/lib/utils";
+
+type MaestrosPageProps = {
+  searchParams: Promise<RawSearchParams>;
+};
+
+const activateStatusOptions = [
+  ACTIVATE_STATUSES.PENDING,
+  ACTIVATE_STATUSES.TRIAL,
+  ACTIVATE_STATUSES.ACTIVE,
+  ACTIVATE_STATUSES.CANCELED,
+] as const;
+
+const accountTypeOptions = [
+  ACCOUNT_TYPES.BASIC_20,
+  ACCOUNT_TYPES.STANDARD_50,
+  ACCOUNT_TYPES.PRO_100,
+  ACCOUNT_TYPES.SCHOOL_500,
+  ACCOUNT_TYPES.SCHOOL_1000,
+] as const;
+
+const sortOptions = [
+  { value: "id-desc", label: "ID 최신순" },
+  { value: "id-asc", label: "ID 오래된순" },
+  { value: "joinedAt-desc", label: "가입일 최신순" },
+  { value: "joinedAt-asc", label: "가입일 오래된순" },
+  { value: "availableAt-desc", label: "사용 가능일 최신순" },
+  { value: "availableAt-asc", label: "사용 가능일 오래된순" },
+] as const;
+
+export default async function MaestrosPage({
+  searchParams,
+}: MaestrosPageProps) {
+  const params = await searchParams;
+  const result = await getMaestros(params);
+  const paginationItems = buildPaginationItems(result.page, result.totalPages);
+  const firstVisiblePage = paginationItems[0] ?? 1;
+  const lastVisiblePage = paginationItems.at(-1) ?? result.totalPages;
+  const hasFirstPage = paginationItems.includes(1);
+  const hasLastPage = paginationItems.includes(result.totalPages);
+  const hasPreviousPageGroup = firstVisiblePage > 1;
+  const hasNextPageGroup = lastVisiblePage < result.totalPages;
+
+  return (
+    <section className="space-y-5">
+      <div className="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold tracking-normal">마에스트로</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            전체 {result.totalCount.toLocaleString()}명 중 {result.page} /{" "}
+            {result.totalPages} 페이지
+          </p>
+        </div>
+      </div>
+
+      <form
+        className="grid grid-cols-1 gap-3 rounded-lg border bg-background p-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-[minmax(220px,1fr)_160px_180px_190px_110px_auto]"
+        method="get"
+      >
+        <label className="min-w-0 space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            검색
+          </span>
+          <div className="relative min-w-0">
+            <Search
+              className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+              aria-hidden="true"
+            />
+            <input
+              className="h-9 w-full min-w-0 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"
+              defaultValue={result.q}
+              name="q"
+              placeholder="이름, 이메일, ID"
+              type="search"
+            />
+          </div>
+        </label>
+
+        <label className="min-w-0 space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            상태
+          </span>
+          <AutoSubmitSelect
+            className="h-9 w-full min-w-0 rounded-md border bg-background px-3 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
+            name="activateStatus"
+            value={result.activateStatus ?? "all"}
+          >
+            <option value="all">전체</option>
+            {activateStatusOptions.map((status) => (
+              <option key={status} value={status}>
+                {ACTIVATE_STATUS_LABELS[status]}
+              </option>
+            ))}
+          </AutoSubmitSelect>
+        </label>
+
+        <label className="min-w-0 space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            계정 유형
+          </span>
+          <AutoSubmitSelect
+            className="h-9 w-full min-w-0 rounded-md border bg-background px-3 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
+            name="accountType"
+            value={result.accountType ?? "all"}
+          >
+            <option value="all">전체</option>
+            {accountTypeOptions.map((accountType) => (
+              <option key={accountType} value={accountType}>
+                {ACCOUNT_TYPE_LABELS[accountType]}
+              </option>
+            ))}
+          </AutoSubmitSelect>
+        </label>
+
+        <label className="min-w-0 space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            정렬
+          </span>
+          <AutoSubmitSelect
+            className="h-9 w-full min-w-0 rounded-md border bg-background px-3 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
+            name="sort"
+            value={result.sort}
+          >
+            {sortOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </AutoSubmitSelect>
+        </label>
+
+        <label className="min-w-0 space-y-1.5">
+          <span className="text-xs font-medium text-muted-foreground">
+            페이지 크기
+          </span>
+          <AutoSubmitSelect
+            className="h-9 w-full min-w-0 rounded-md border bg-background px-3 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30"
+            name="pageSize"
+            value={result.pageSize}
+          >
+            {[10, 20, 50, 100].map((pageSize) => (
+              <option key={pageSize} value={pageSize}>
+                {pageSize}
+              </option>
+            ))}
+          </AutoSubmitSelect>
+        </label>
+
+        <div className="flex min-w-0 flex-wrap items-end gap-2 sm:col-span-2 xl:col-span-1">
+          <Button className="h-9" type="submit">
+            적용
+          </Button>
+          <Link
+            className={buttonVariants({
+              variant: "outline",
+              size: "default",
+              className: "h-9",
+            })}
+            href="/maestros"
+          >
+            초기화
+          </Link>
+        </div>
+      </form>
+
+      <MaestrosTable data={result.items} />
+
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <p className="text-sm text-muted-foreground">
+          페이지당 {result.pageSize}개 표시
+        </p>
+        <nav
+          aria-label="마에스트로 목록 페이지"
+          className="flex flex-wrap items-center gap-1.5"
+        >
+          {!hasFirstPage ? (
+            <Link
+              aria-label="처음 페이지"
+              className={buttonVariants({
+                variant: "outline",
+                size: "icon-sm",
+              })}
+              href={buildPageHref(params, 1)}
+            >
+              <ChevronsLeft className="size-4" aria-hidden="true" />
+            </Link>
+          ) : null}
+
+          {hasPreviousPageGroup ? (
+            <Link
+              aria-label="이전 5페이지"
+              className={buttonVariants({
+                variant: "outline",
+                size: "icon-sm",
+              })}
+              href={buildPageHref(params, Math.max(1, result.page - 5))}
+            >
+              <ChevronLeft className="size-4" aria-hidden="true" />
+            </Link>
+          ) : null}
+
+          {paginationItems.map((item) => (
+            <Link
+              aria-current={item === result.page ? "page" : undefined}
+              className={cn(
+                buttonVariants({
+                  variant: item === result.page ? "default" : "outline",
+                  size: "sm",
+                }),
+                "min-w-8 px-2"
+              )}
+              href={buildPageHref(params, item)}
+              key={item}
+            >
+              {item}
+            </Link>
+          ))}
+
+          {hasNextPageGroup ? (
+            <Link
+              aria-label="다음 5페이지"
+              className={buttonVariants({
+                variant: "outline",
+                size: "icon-sm",
+              })}
+              href={buildPageHref(
+                params,
+                Math.min(result.totalPages, result.page + 5)
+              )}
+            >
+              <ChevronRight className="size-4" aria-hidden="true" />
+            </Link>
+          ) : null}
+
+          {!hasLastPage ? (
+            <Link
+              aria-label="끝 페이지"
+              className={buttonVariants({
+                variant: "outline",
+                size: "icon-sm",
+              })}
+              href={buildPageHref(params, result.totalPages)}
+            >
+              <ChevronsRight className="size-4" aria-hidden="true" />
+            </Link>
+          ) : null}
+        </nav>
+      </div>
+    </section>
+  );
+}
+
+function buildPageHref(rawParams: RawSearchParams, page: number) {
+  const params = new URLSearchParams();
+
+  Object.entries(rawParams).forEach(([key, value]) => {
+    const firstValue = Array.isArray(value) ? value[0] : value;
+
+    if (firstValue && key !== "page") {
+      params.set(key, firstValue);
+    }
+  });
+  params.set("page", String(Math.max(1, page)));
+
+  return `/maestros?${params.toString()}`;
+}
+
+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
+  );
+}