78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { User, USER_STATUS_LABELS } from "@/types/user";
|
|
|
|
interface UserStatusConfirmDialogProps {
|
|
user: User | null;
|
|
newStatus: string;
|
|
isOpen: boolean;
|
|
onConfirm: () => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
/**
|
|
* 사용자 상태 변경 확인 모달
|
|
*/
|
|
export function UserStatusConfirmDialog({
|
|
user,
|
|
newStatus,
|
|
isOpen,
|
|
onConfirm,
|
|
onCancel,
|
|
}: UserStatusConfirmDialogProps) {
|
|
if (!user) return null;
|
|
|
|
// 현재 상태와 새로운 상태의 텍스트 및 색상
|
|
const currentStatusText = USER_STATUS_LABELS[user.status as keyof typeof USER_STATUS_LABELS] || user.status;
|
|
const newStatusText = USER_STATUS_LABELS[newStatus as keyof typeof USER_STATUS_LABELS] || newStatus;
|
|
|
|
const currentStatusColor = user.status === "active" ? "text-blue-600" : "text-gray-600";
|
|
const newStatusColor = newStatus === "active" ? "text-blue-600" : "text-gray-600";
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>사용자 상태 변경</DialogTitle>
|
|
<DialogDescription>사용자의 상태를 변경하시겠습니까?</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="py-4">
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground w-16 text-sm">사용자:</span>
|
|
<span className="font-medium">
|
|
{user.userName} ({user.userId})
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground w-16 text-sm">상태 변경:</span>
|
|
<div className="flex items-center gap-2">
|
|
<span className={`font-medium ${currentStatusColor}`}>{currentStatusText}</span>
|
|
<span className="text-muted-foreground">→</span>
|
|
<span className={`font-medium ${newStatusColor}`}>{newStatusText}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={onCancel}>
|
|
취소
|
|
</Button>
|
|
<Button onClick={onConfirm} className={newStatus === "active" ? "bg-blue-500 hover:bg-blue-600" : ""}>
|
|
변경
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|