Phase 6. 업그레이드 신청 관리 구현
This commit is contained in:
@@ -0,0 +1,217 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Check, X } from "lucide-react";
|
||||
import { useState, useTransition } from "react";
|
||||
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { ACTIVATE_STATUSES, REQUEST_STATUSES } from "@/lib/constants";
|
||||
import type { UpgradeRequestListItem } from "@/lib/upgrade-requests";
|
||||
import {
|
||||
formatDate,
|
||||
formatDateTime,
|
||||
getAccountTypeLabel,
|
||||
getActivateStatusLabel,
|
||||
getRequestStatusLabel,
|
||||
getTrialAccountTypeLabel,
|
||||
} from "@/lib/utils";
|
||||
|
||||
type UpgradeRequestsTableProps = {
|
||||
data: UpgradeRequestListItem[];
|
||||
};
|
||||
|
||||
export function UpgradeRequestsTable({ data }: UpgradeRequestsTableProps) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border bg-background">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[1080px] border-collapse text-sm">
|
||||
<thead className="bg-muted/60">
|
||||
<tr className="border-b">
|
||||
<HeaderCell>신청ID</HeaderCell>
|
||||
<HeaderCell>마에스트로</HeaderCell>
|
||||
<HeaderCell>현재 상태</HeaderCell>
|
||||
<HeaderCell>현재 계정</HeaderCell>
|
||||
<HeaderCell>요청 계정</HeaderCell>
|
||||
<HeaderCell>추가 금액</HeaderCell>
|
||||
<HeaderCell>신청일시</HeaderCell>
|
||||
<HeaderCell>만료일</HeaderCell>
|
||||
<HeaderCell>처리 상태</HeaderCell>
|
||||
<HeaderCell>처리</HeaderCell>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.length > 0 ? (
|
||||
data.map((request) => (
|
||||
<tr
|
||||
className="border-b last:border-b-0"
|
||||
key={request.maestroUpgradeID}
|
||||
>
|
||||
<BodyCell>
|
||||
<span className="font-mono text-xs tabular-nums">
|
||||
{request.maestroUpgradeID}
|
||||
</span>
|
||||
</BodyCell>
|
||||
<BodyCell>
|
||||
<Link
|
||||
className={buttonVariants({
|
||||
variant: "link",
|
||||
size: "sm",
|
||||
className: "h-auto p-0 font-medium",
|
||||
})}
|
||||
href={`/maestros/${request.maestroID}`}
|
||||
>
|
||||
{request.maestroName}
|
||||
</Link>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
MaestroID {request.maestroID}
|
||||
</p>
|
||||
</BodyCell>
|
||||
<BodyCell>
|
||||
{getActivateStatusLabel(request.registeredActivateStatus)}
|
||||
</BodyCell>
|
||||
<BodyCell>{getRegisteredAccountLabel(request)}</BodyCell>
|
||||
<BodyCell>
|
||||
{getAccountTypeLabel(request.requestedAccountType)}
|
||||
</BodyCell>
|
||||
<BodyCell>
|
||||
<span className="tabular-nums">
|
||||
{request.additionalPrice.toLocaleString()}원
|
||||
</span>
|
||||
</BodyCell>
|
||||
<BodyCell>
|
||||
{formatDateTime(request.requestedDateTime)}
|
||||
</BodyCell>
|
||||
<BodyCell>
|
||||
{formatDate(request.availableActivateDateTime)}
|
||||
</BodyCell>
|
||||
<BodyCell>{getRequestStatusLabel(request.status)}</BodyCell>
|
||||
<BodyCell>
|
||||
<UpgradeRequestActions request={request} />
|
||||
</BodyCell>
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td
|
||||
className="h-28 px-3 text-center text-sm text-muted-foreground"
|
||||
colSpan={10}
|
||||
>
|
||||
조건에 맞는 업그레이드 신청이 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UpgradeRequestActions({
|
||||
request,
|
||||
}: {
|
||||
request: UpgradeRequestListItem;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [errorMessage, setErrorMessage] = useState("");
|
||||
const isRequested = request.status === REQUEST_STATUSES.REQUESTED;
|
||||
|
||||
if (!isRequested) {
|
||||
return <span className="text-xs text-muted-foreground">처리 완료</span>;
|
||||
}
|
||||
|
||||
async function submitAction(action: "approve" | "reject") {
|
||||
const actionLabel = action === "approve" ? "승인" : "거절";
|
||||
const confirmed = window.confirm(
|
||||
`${request.maestroName} 업그레이드 신청을 ${actionLabel}하시겠습니까?`
|
||||
);
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
setErrorMessage("");
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/upgrade-requests/${request.maestroUpgradeID}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action }),
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
const body = (await response.json().catch(() => null)) as {
|
||||
message?: string;
|
||||
} | null;
|
||||
|
||||
throw new Error(
|
||||
body?.message ?? "업그레이드 신청 처리에 실패했습니다."
|
||||
);
|
||||
}
|
||||
|
||||
startTransition(() => {
|
||||
router.refresh();
|
||||
});
|
||||
} catch (error) {
|
||||
setErrorMessage(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "업그레이드 신청 처리에 실패했습니다."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
disabled={isPending}
|
||||
onClick={() => void submitAction("approve")}
|
||||
size="sm"
|
||||
type="button"
|
||||
>
|
||||
<Check className="size-4" aria-hidden="true" />
|
||||
승인
|
||||
</Button>
|
||||
<Button
|
||||
disabled={isPending}
|
||||
onClick={() => void submitAction("reject")}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
<X className="size-4" aria-hidden="true" />
|
||||
거절
|
||||
</Button>
|
||||
</div>
|
||||
{errorMessage ? (
|
||||
<p className="max-w-56 text-xs text-destructive">{errorMessage}</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getRegisteredAccountLabel(request: UpgradeRequestListItem) {
|
||||
if (request.registeredActivateStatus === ACTIVATE_STATUSES.TRIAL) {
|
||||
return getTrialAccountTypeLabel(request.registeredAccountType);
|
||||
}
|
||||
|
||||
return getAccountTypeLabel(request.registeredAccountType);
|
||||
}
|
||||
|
||||
function HeaderCell({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<th className="h-10 px-3 text-left text-xs font-medium text-muted-foreground">
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
}
|
||||
|
||||
function BodyCell({ children }: { children: React.ReactNode }) {
|
||||
return <td className="h-12 px-3 align-middle">{children}</td>;
|
||||
}
|
||||
Reference in New Issue
Block a user