feat(ai-character): 관리자 인증 셸 구현

src/shared/ui/confirm-deactivate-dialog.tsx

@@ -0,0 +1,38 @@
+import { useModalFocus } from "@/shared/ui/use-modal-focus";
+
+export type ConfirmDeactivateDialogProps = {
+  readonly impactDescription: string;
+  readonly onCancel: () => void;
+  readonly onConfirm: () => void;
+  readonly open: boolean;
+  readonly targetName: string;
+};
+
+export function ConfirmDeactivateDialog({ impactDescription, onCancel, onConfirm, open, targetName }: ConfirmDeactivateDialogProps) {
+  const { dialogRef, trapFocus } = useModalFocus<HTMLElement>(open);
+
+  if (!open) {
+    return null;
+  }
+
+  const title = `${targetName} 비활성화 확인`;
+
+  return (
+    <div className="fixed inset-0 z-modal grid place-items-center bg-background/80 p-4">
+      <section aria-modal="true" className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-6" onKeyDown={trapFocus} ref={dialogRef} role="alertdialog" aria-label={title}>
+        <div className="flex flex-col gap-2">
+          <h2 className="text-xl font-semibold">{title}</h2>
+          <p className="text-sm text-muted-foreground">{impactDescription}</p>
+        </div>
+        <div className="flex justify-end gap-2">
+          <button className="rounded-md border border-input bg-card px-4 py-2 font-semibold hover:bg-accent" onClick={onCancel} type="button">
+            취소
+          </button>
+          <button className="rounded-md border border-input bg-primary px-4 py-2 font-semibold text-primary-foreground hover:bg-[var(--button-bg-hover)] active:bg-[var(--button-bg-active)]" onClick={onConfirm} type="button">
+            비활성화
+          </button>
+        </div>
+      </section>
+    </div>
+  );
+}