마에스트로 상세 화면의 처리 로그 표에 페이지네이션 추가

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

@@ -77,7 +77,6 @@ export function ExtensionRequestsSection({
             onClick={() => void handleCreate()}
             size="sm"
             type="button"
-            variant="outline"
           >
             <Plus aria-hidden="true" className="size-4" />
             연장

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

@@ -0,0 +1,299 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn, formatDateTime } from "@/lib/utils";
+import type { MaestroLogsResult } from "@/lib/maestros";
+
+type LogsSectionProps = {
+  maestroID: number;
+};
+
+export function LogsSection({ maestroID }: LogsSectionProps) {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+
+  const [data, setData] = useState<MaestroLogsResult | 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),
+        });
+
+        const response = await fetch(
+          `/api/maestros/${maestroID}/logs?${params.toString()}`
+        );
+
+        if (!response.ok) {
+          throw new Error("처리 로그를 불러오지 못했습니다.");
+        }
+
+        const result = (await response.json()) as MaestroLogsResult;
+
+        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, page, pageSize]);
+
+  return (
+    <section className="rounded-lg border bg-background p-5">
+      <div>
+        <h2 className="text-base font-semibold">처리 로그</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {data ? `전체 ${data.totalCount.toLocaleString()}건` : "로딩 중..."}
+        </p>
+      </div>
+
+      {errorMessage ? (
+        <p className="mt-4 text-sm text-destructive">{errorMessage}</p>
+      ) : (
+        <>
+          <LogTable isLoading={isLoading} result={data} />
+          {data ? (
+            <LogPagination
+              onPageChange={setPage}
+              onPageSizeChange={(size) => {
+                setPageSize(size);
+                setPage(1);
+              }}
+              page={data.page}
+              pageSize={pageSize}
+              totalPages={data.totalPages}
+            />
+          ) : null}
+        </>
+      )}
+    </section>
+  );
+}
+
+function LogTable({
+  result,
+  isLoading,
+}: {
+  result: MaestroLogsResult | 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-[560px] 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">
+                LogID
+              </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>
+              <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((log) => (
+                <tr
+                  className="border-b last:border-b-0"
+                  key={log.maestroLogID}
+                >
+                  <td className="h-11 px-3 align-middle">
+                    <span className="font-mono text-xs tabular-nums">
+                      {log.maestroLogID}
+                    </span>
+                  </td>
+                  <td className="h-11 px-3 align-middle">{log.type}</td>
+                  <td className="h-11 px-3 align-middle">
+                    {formatDateTime(new Date(log.logDateTime))}
+                  </td>
+                  <td className="h-11 max-w-[360px] break-words px-3 align-middle">
+                    {log.remark}
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td
+                  className="h-24 px-3 text-center text-sm text-muted-foreground"
+                  colSpan={4}
+                >
+                  처리 로그가 없습니다.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function LogPagination({
+  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="flex flex-wrap items-center gap-1.5"
+        >
+          {!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
+  );
+}

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

@@ -124,7 +124,6 @@ export function UpgradeRequestsSection({
               onClick={() => void handleUpgrade()}
               size="sm"
               type="button"
-              variant="outline"
             >
               <ArrowUp aria-hidden="true" className="size-4" />
               업그레이드

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

@@ -6,7 +6,6 @@ import { buttonVariants } from "@/components/ui/button";
 import { getMaestroDetail } from "@/lib/maestros";
 import {
   formatDate,
-  formatDateTime,
   getAccountTypeLabel,
   getActivateStatusLabel,
 } from "@/lib/utils";
@@ -14,6 +13,7 @@ import { MaestroEditForm } from "./MaestroEditForm";
 import { StudentsSection } from "./StudentsSection";
 import { ExtensionRequestsSection } from "./ExtensionRequestsSection";
 import { UpgradeRequestsSection } from "./UpgradeRequestsSection";
+import { LogsSection } from "./LogsSection";
 
 type MaestroDetailPageProps = {
   params: Promise<{
@@ -109,22 +109,7 @@ export default async function MaestroDetailPage({
         />
       </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>
+      <LogsSection maestroID={maestroID} />
     </section>
   );
 }
@@ -137,59 +122,3 @@ function SummaryCard({ label, value }: { label: string; value: string }) {
     </article>
   );
 }
-
-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/api/maestros/[id]/logs/route.ts

@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+
+import { getMaestroLogs } from "@/lib/maestros";
+import { ApiError } from "@/lib/errors";
+import { withApiHandler } from "@/lib/api-handler";
+
+const CTX = "maestros/[id]/logs";
+
+export const GET = withApiHandler<{ id: string }>(
+  CTX,
+  async (request, { params }) => {
+    const { id } = await params;
+    const maestroID = Number(id);
+
+    if (!Number.isInteger(maestroID) || maestroID <= 0) {
+      throw new ApiError("Invalid maestro id", 400);
+    }
+
+    const url = new URL(request.url);
+    const result = await getMaestroLogs(maestroID, url.searchParams);
+
+    if (!result) {
+      throw new ApiError("Not found", 404);
+    }
+
+    return NextResponse.json(result);
+  }
+);

components/ui/button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+          "border-border bg-background text-foreground hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:

lib/maestros.ts

@@ -75,7 +75,6 @@ export type MaestroDetail = {
     players: number;
     extensionRequests: number;
     upgradeRequests: number;
-    logs: number;
   };
   players: Array<{
     playerID: number;
@@ -97,12 +96,6 @@ export type MaestroDetail = {
     requestedDateTime: string;
     status: number;
   }>;
-  logs: Array<{
-    maestroLogID: number;
-    type: string;
-    logDateTime: string;
-    remark: string;
-  }>;
 };
 
 const activateStatusValues = [
@@ -262,6 +255,86 @@ export async function updateMaestro(
   return { changed: true };
 }
 
+const logPageSizeOptions = [10, 20, 50] as const;
+type LogPageSize = (typeof logPageSizeOptions)[number];
+
+const logSearchSchema = z.object({
+  page: z.coerce.number().int().min(1).catch(1),
+  pageSize: z.coerce
+    .number()
+    .int()
+    .refine((v) => logPageSizeOptions.includes(v as LogPageSize))
+    .catch(10),
+});
+
+export type MaestroLogsResult = {
+  items: Array<{
+    maestroLogID: number;
+    type: string;
+    logDateTime: string;
+    remark: string;
+  }>;
+  page: number;
+  pageSize: number;
+  totalCount: number;
+  totalPages: number;
+};
+
+export async function getMaestroLogs(
+  maestroID: number,
+  rawSearchParams: RawSearchParams = {}
+): Promise<MaestroLogsResult | null> {
+  const t0 = Date.now();
+
+  const maestroExists = await db.maestro.findUnique({
+    where: { MaestroID: maestroID },
+    select: { MaestroID: true },
+  });
+
+  if (!maestroExists) return null;
+
+  const params = logSearchSchema.parse(searchParamsToRecord(rawSearchParams));
+  const skip = (params.page - 1) * params.pageSize;
+
+  const [totalCount, logs] = await Promise.all([
+    db.maestro_log.count({ where: { MaestroID: maestroID } }),
+    db.maestro_log.findMany({
+      where: { MaestroID: maestroID },
+      orderBy: { MaestroLogID: "desc" },
+      skip,
+      take: params.pageSize,
+      select: {
+        MaestroLogID: true,
+        Type: true,
+        LogDateTime: true,
+        Remark: true,
+      },
+    }),
+  ]);
+
+  const totalPages = Math.max(1, Math.ceil(totalCount / params.pageSize));
+
+  logger.debug("maestros/[id]/logs", "fetched", {
+    id: maestroID,
+    page: params.page,
+    totalCount,
+    duration: Date.now() - t0,
+  });
+
+  return {
+    items: logs.map((log) => ({
+      maestroLogID: log.MaestroLogID,
+      type: log.Type.trim(),
+      logDateTime: log.LogDateTime.toISOString(),
+      remark: log.Remark.trim(),
+    })),
+    page: params.page,
+    pageSize: params.pageSize,
+    totalCount,
+    totalPages,
+  };
+}
+
 const studentPageSizeOptions = [10, 20, 50] as const;
 type StudentPageSize = (typeof studentPageSizeOptions)[number];
 
@@ -430,16 +503,13 @@ export async function getMaestroDetail(
     playersCount,
     extensionRequestsCount,
     upgradeRequestsCount,
-    logsCount,
     players,
     extensionRequests,
     upgradeRequests,
-    logs,
   ] = await Promise.all([
     db.player.count({ where: { MaestroID: maestroID } }),
     db.maestro_extension.count({ where: { MaestroID: maestroID } }),
     db.maestro_upgrade.count({ where: { MaestroID: maestroID } }),
-    db.maestro_log.count({ where: { MaestroID: maestroID } }),
     db.player.findMany({
       where: { MaestroID: maestroID },
       orderBy: { PlayerID: "desc" },
@@ -475,17 +545,6 @@ export async function getMaestroDetail(
         Status: true,
       },
     }),
-    db.maestro_log.findMany({
-      where: { MaestroID: maestroID },
-      orderBy: { MaestroLogID: "desc" },
-      take: 30,
-      select: {
-        MaestroLogID: true,
-        Type: true,
-        LogDateTime: true,
-        Remark: true,
-      },
-    }),
   ]);
 
   logger.info("maestros/[id]", "fetched", {
@@ -503,7 +562,6 @@ export async function getMaestroDetail(
       players: playersCount,
       extensionRequests: extensionRequestsCount,
       upgradeRequests: upgradeRequestsCount,
-      logs: logsCount,
     },
     players: players.map((player) => ({
       playerID: player.PlayerID,
@@ -525,12 +583,6 @@ export async function getMaestroDetail(
       requestedDateTime: request.RequestedDateTime.toISOString(),
       status: request.Status,
     })),
-    logs: logs.map((log) => ({
-      maestroLogID: log.MaestroLogID,
-      type: log.Type.trim(),
-      logDateTime: log.LogDateTime.toISOString(),
-      remark: log.Remark.trim(),
-    })),
   };
 }