마에스트로 상세 화면에 [업그레이드] 버튼 추가

2026-07-02 21:51:09 +09:00
parent 7669e9d0de
commit 2d9b8d0624
4 changed files with 294 additions and 18 deletions
@@ -0,0 +1,191 @@
+"use client";
+
+import { useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowUp } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { ACCOUNT_TYPES } from "@/lib/constants";
+import { formatDateTime, getAccountTypeLabel, getRequestStatusLabel } from "@/lib/utils";
+import type { MaestroDetail } from "@/lib/maestros";
+
+type UpgradeRequestsSectionProps = {
+  maestroID: number;
+  accountType: number;
+  totalCount: number;
+  upgradeRequests: MaestroDetail["upgradeRequests"];
+};
+
+const upgradeOptions = [
+  { value: ACCOUNT_TYPES.BASIC_20, label: "1만원 (20명)" },
+  { value: ACCOUNT_TYPES.STANDARD_50, label: "2만원 (50명)" },
+  { value: ACCOUNT_TYPES.PRO_100, label: "3만원 (100명)" },
+  { value: ACCOUNT_TYPES.SCHOOL_500, label: "4만원 (500명)" },
+  { value: ACCOUNT_TYPES.SCHOOL_1000, label: "5만원 (1,000명)" },
+] as const;
+
+const selectClass =
+  "h-9 rounded-md border bg-background px-3 text-sm outline-none transition-colors focus:border-ring focus:ring-3 focus:ring-ring/30 disabled:opacity-50";
+
+export function UpgradeRequestsSection({
+  maestroID,
+  accountType,
+  totalCount,
+  upgradeRequests,
+}: UpgradeRequestsSectionProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [isCreating, setIsCreating] = useState(false);
+  const [selectedAccountType, setSelectedAccountType] = useState<number | null>(null);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const isUpgradeEnabled =
+    selectedAccountType !== null && selectedAccountType > accountType;
+  const isDisabled = isCreating || isPending;
+
+  async function handleUpgrade() {
+    if (selectedAccountType === null) return;
+    if (!window.confirm("업그레이드 신청을 등록하시겠습니까?")) return;
+
+    setIsCreating(true);
+    setErrorMessage("");
+
+    try {
+      const response = await fetch(
+        `/api/maestros/${maestroID}/upgrade-requests`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ requestedAccountType: selectedAccountType }),
+        }
+      );
+
+      const body = (await response.json().catch(() => null)) as {
+        message?: string;
+      } | null;
+
+      if (!response.ok) {
+        throw new Error(body?.message ?? "업그레이드 신청 등록에 실패했습니다.");
+      }
+
+      setSelectedAccountType(null);
+      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">
+          <div className="flex items-center gap-2">
+            <select
+              className={selectClass}
+              disabled={isDisabled}
+              onChange={(e) =>
+                setSelectedAccountType(
+                  e.target.value === "" ? null : Number(e.target.value)
+                )
+              }
+              value={selectedAccountType ?? ""}
+            >
+              <option value="">요금제 선택</option>
+              {upgradeOptions.map((opt) => (
+                <option
+                  disabled={opt.value <= accountType}
+                  key={opt.value}
+                  value={opt.value}
+                >
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+            <Button
+              disabled={isDisabled || !isUpgradeEnabled}
+              onClick={() => void handleUpgrade()}
+              size="sm"
+              type="button"
+              variant="outline"
+            >
+              <ArrowUp aria-hidden="true" className="size-4" />
+              업그레이드
+            </Button>
+          </div>
+          {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>
+              {upgradeRequests.length > 0 ? (
+                upgradeRequests.map((request) => (
+                  <tr
+                    className="border-b last:border-b-0"
+                    key={request.maestroUpgradeID}
+                  >
+                    <td className="h-11 px-3 align-middle">
+                      {request.maestroUpgradeID}
+                    </td>
+                    <td className="h-11 px-3 align-middle">
+                      {getAccountTypeLabel(request.registeredAccountType)}
+                    </td>
+                    <td className="h-11 px-3 align-middle">
+                      {getAccountTypeLabel(request.requestedAccountType)}
+                    </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={5}
+                  >
+                    업그레이드 신청 이력이 없습니다.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -9,11 +9,11 @@ import {
  formatDateTime,
  getAccountTypeLabel,
  getActivateStatusLabel,
-  getRequestStatusLabel,
 } from "@/lib/utils";
 import { MaestroEditForm } from "./MaestroEditForm";
 import { StudentsSection } from "./StudentsSection";
 import { ExtensionRequestsSection } from "./ExtensionRequestsSection";
+import { UpgradeRequestsSection } from "./UpgradeRequestsSection";

 type MaestroDetailPageProps = {
  params: Promise<{
@@ -100,23 +100,12 @@ export default async function MaestroDetailPage({
          totalCount={detail.counts.extensionRequests}
        />

-        <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>
+        <UpgradeRequestsSection
+          accountType={maestro.accountType}
+          maestroID={maestroID}
+          totalCount={detail.counts.upgradeRequests}
+          upgradeRequests={detail.upgradeRequests}
+        />
      </div>

      <section className="rounded-lg border bg-background p-5">