최초커밋

frontend/components/admin/UserStatusConfirmDialog.tsx

@@ -0,0 +1,69 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { User } 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 statusText = newStatus === "active" ? "활성" : "비활성";
+  const statusColor = 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-2">
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-sm">사용자:</span>
+              <span className="font-medium">
+                {user.user_name} ({user.user_id})
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-muted-foreground text-sm">변경할 상태:</span>
+              <span className={`font-medium ${statusColor}`}>{statusText}</span>
+            </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>
+  );
+}