마에스트로 상세 화면에 [연장] 신청 버튼 추가

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

@@ -0,0 +1,144 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { Plus } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { formatDateTime, getAccountTypeLabel, getRequestStatusLabel } from "@/lib/utils";
+import type { MaestroDetail } from "@/lib/maestros";
+
+type ExtensionRequestsSectionProps = {
+  maestroID: number;
+  accountType: number;
+  totalCount: number;
+  extensionRequests: MaestroDetail["extensionRequests"];
+};
+
+export function ExtensionRequestsSection({
+  maestroID,
+  accountType,
+  totalCount,
+  extensionRequests,
+}: ExtensionRequestsSectionProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [isCreating, setIsCreating] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const isDisabled = isCreating || isPending;
+
+  async function handleCreate() {
+    if (!window.confirm("연장 신청을 등록하시겠습니까?")) return;
+
+    setIsCreating(true);
+    setErrorMessage("");
+
+    try {
+      const response = await fetch(
+        `/api/maestros/${maestroID}/extension-requests`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ accountType }),
+        }
+      );
+
+      const body = (await response.json().catch(() => null)) as {
+        message?: string;
+      } | null;
+
+      if (!response.ok) {
+        throw new Error(body?.message ?? "연장 신청 등록에 실패했습니다.");
+      }
+
+      startTransition(() => {
+        router.refresh();
+      });
+    } catch (error) {
+      setErrorMessage(
+        error instanceof Error ? error.message : "연장 신청 등록에 실패했습니다."
+      );
+    } finally {
+      setIsCreating(false);
+    }
+  }
+
+  return (
+    <section className="rounded-lg border bg-background p-5">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <h2 className="text-base font-semibold">연장 신청 이력</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            전체 {totalCount.toLocaleString()}건 중 최근 20건
+          </p>
+        </div>
+        <div className="flex flex-col items-end gap-1">
+          <Button
+            disabled={isDisabled}
+            onClick={() => void handleCreate()}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            <Plus aria-hidden="true" className="size-4" />
+            연장
+          </Button>
+          {errorMessage ? (
+            <p className="text-xs text-destructive">{errorMessage}</p>
+          ) : null}
+        </div>
+      </div>
+      <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">
+                {["신청ID", "계정 유형", "신청일시", "상태"].map((header) => (
+                  <th
+                    className="h-10 px-3 text-left text-xs font-medium text-muted-foreground"
+                    key={header}
+                  >
+                    {header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {extensionRequests.length > 0 ? (
+                extensionRequests.map((request) => (
+                  <tr
+                    className="border-b last:border-b-0"
+                    key={request.maestroExtensionID}
+                  >
+                    <td className="h-11 px-3 align-middle">
+                      {request.maestroExtensionID}
+                    </td>
+                    <td className="h-11 px-3 align-middle">
+                      {getAccountTypeLabel(request.accountType)}
+                    </td>
+                    <td className="h-11 px-3 align-middle">
+                      {formatDateTime(request.requestedDateTime)}
+                    </td>
+                    <td className="h-11 px-3 align-middle">
+                      {getRequestStatusLabel(request.status)}
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td
+                    className="h-24 px-3 text-center text-sm text-muted-foreground"
+                    colSpan={4}
+                  >
+                    연장 신청 이력이 없습니다.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -13,6 +13,7 @@ import {
 } from "@/lib/utils";
 import { MaestroEditForm } from "./MaestroEditForm";
 import { StudentsSection } from "./StudentsSection";
+import { ExtensionRequestsSection } from "./ExtensionRequestsSection";
 
 type MaestroDetailPageProps = {
   params: Promise<{
@@ -92,23 +93,12 @@ export default async function MaestroDetailPage({
       <StudentsSection maestroID={maestroID} />
 
       <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>
+        <ExtensionRequestsSection
+          accountType={maestro.accountType}
+          extensionRequests={detail.extensionRequests}
+          maestroID={maestroID}
+          totalCount={detail.counts.extensionRequests}
+        />
 
         <section className="rounded-lg border bg-background p-5">
           <h2 className="text-base font-semibold">업그레이드 신청 이력</h2>

app/api/maestros/[id]/extension-requests/route.ts

@@ -0,0 +1,54 @@
+import { z } from "zod";
+import { NextResponse } from "next/server";
+
+import { createExtensionRequest } from "@/lib/extension-requests";
+import { ApiError } from "@/lib/errors";
+import { withApiHandler } from "@/lib/api-handler";
+import { logger } from "@/lib/logger";
+import { ACCOUNT_TYPES } from "@/lib/constants";
+
+const CTX = "maestros/[id]/extension-requests";
+
+const paidAccountTypeValues = [
+  ACCOUNT_TYPES.BASIC_20,
+  ACCOUNT_TYPES.STANDARD_50,
+  ACCOUNT_TYPES.PRO_100,
+  ACCOUNT_TYPES.SCHOOL_500,
+  ACCOUNT_TYPES.SCHOOL_1000,
+] as const;
+
+const postBodySchema = z.object({
+  accountType: z.coerce
+    .number()
+    .int()
+    .refine((v) => (paidAccountTypeValues as readonly number[]).includes(v)),
+});
+
+export const POST = withApiHandler<{ id: string }>(
+  CTX,
+  async (request, { params, t0 }) => {
+    const { id } = await params;
+    const maestroID = Number(id);
+
+    if (!Number.isInteger(maestroID) || maestroID <= 0) {
+      throw new ApiError("Invalid maestro id", 400);
+    }
+
+    const body = postBodySchema.safeParse(
+      await request.json().catch(() => ({}))
+    );
+    if (!body.success) {
+      throw new ApiError("Invalid request body", 400);
+    }
+
+    const result = await createExtensionRequest(maestroID, body.data.accountType);
+
+    logger.info(CTX, "created", {
+      maestroID,
+      maestroExtensionID: result.maestroExtensionID,
+      duration: Date.now() - t0,
+    });
+
+    return NextResponse.json(result, { status: 201 });
+  }
+);