summaryrefslogtreecommitdiff
path: root/lib/email-whitelist/table/delete-whitelist-dialog.tsx
diff options
context:
space:
mode:
authorjoonhoekim <26rote@gmail.com>2025-10-15 21:38:21 +0900
committerjoonhoekim <26rote@gmail.com>2025-10-15 21:38:21 +0900
commita070f833d132e6370311c0bbdad03beb51d595df (patch)
tree9184292e4c2631ee0c7a7247f9728fc26de790f1 /lib/email-whitelist/table/delete-whitelist-dialog.tsx
parent280a2628df810dc157357e0e4d2ed8076d020a2c (diff)
(김준회) 이메일 화이트리스트 (SMS 우회) 기능 추가 및 기존 로그인 과정 통합
Diffstat (limited to 'lib/email-whitelist/table/delete-whitelist-dialog.tsx')
-rw-r--r--lib/email-whitelist/table/delete-whitelist-dialog.tsx137
1 files changed, 137 insertions, 0 deletions
diff --git a/lib/email-whitelist/table/delete-whitelist-dialog.tsx b/lib/email-whitelist/table/delete-whitelist-dialog.tsx
new file mode 100644
index 00000000..c01e675b
--- /dev/null
+++ b/lib/email-whitelist/table/delete-whitelist-dialog.tsx
@@ -0,0 +1,137 @@
+// delete-whitelist-dialog.tsx
+"use client"
+
+import * as React from "react"
+import { Loader, Trash } from "lucide-react"
+import { toast } from "sonner"
+
+import { Button } from "@/components/ui/button"
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+import { type EmailWhitelist } from "../service"
+
+import { deleteEmailWhitelistAction } from "../service"
+
+interface DeleteWhitelistDialogProps
+ extends React.ComponentPropsWithRef<typeof Dialog> {
+ whitelists: EmailWhitelist[]
+ showTrigger?: boolean
+ onSuccess?: () => void
+}
+
+export function DeleteWhitelistDialog({
+ whitelists,
+ showTrigger = true,
+ onSuccess,
+ ...props
+}: DeleteWhitelistDialogProps) {
+ const [isDeletePending, startDeleteTransition] = React.useTransition()
+
+ const isMultiple = whitelists.length > 1
+ const whitelistInfo = isMultiple ? `${whitelists.length}개 도메인` : whitelists[0]?.domain
+
+ function onDelete() {
+ startDeleteTransition(async () => {
+ const ids = whitelists.map(w => w.id)
+ const { error } = await deleteEmailWhitelistAction(ids)
+
+ if (error) {
+ toast.error(error)
+ return
+ }
+
+ props.onOpenChange?.(false)
+ onSuccess?.()
+ toast.success(
+ isMultiple
+ ? `${whitelists.length}개 도메인이 삭제되었습니다`
+ : "도메인이 삭제되었습니다"
+ )
+ })
+ }
+
+ return (
+ <Dialog {...props}>
+ {showTrigger && (
+ <DialogTrigger asChild>
+ <Button
+ variant="outline"
+ size="sm"
+ className="text-destructive hover:text-destructive"
+ >
+ <Trash className="mr-2 size-4" aria-hidden="true" />
+ 삭제
+ </Button>
+ </DialogTrigger>
+ )}
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>화이트리스트 도메인 삭제 확인</DialogTitle>
+ <DialogDescription>
+ 정말로 <strong>{whitelistInfo}</strong>을(를) 삭제하시겠습니까?
+ {!isMultiple && (
+ <>
+ <br />
+ 이 작업은 되돌릴 수 없습니다.
+ </>
+ )}
+ </DialogDescription>
+ </DialogHeader>
+
+ {/* 삭제될 도메인 목록 표시 */}
+ {whitelists.length > 0 && (
+ <div className="rounded-lg bg-muted p-3 max-h-40 overflow-y-auto">
+ <h4 className="text-sm font-medium mb-2">삭제될 항목</h4>
+ <div className="space-y-1">
+ {whitelists.map((whitelist) => {
+ const displayValue = whitelist.email || whitelist.domain || '';
+ const isEmail = displayValue.includes('@');
+
+ return (
+ <div key={whitelist.id} className="text-xs text-muted-foreground">
+ <div className="font-medium font-mono">
+ {isEmail ? displayValue : `@${displayValue}`}
+ </div>
+ {whitelist.description && (
+ <div className="text-xs">{whitelist.description}</div>
+ )}
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ )}
+
+ <DialogFooter>
+ <Button
+ variant="outline"
+ onClick={() => props.onOpenChange?.(false)}
+ disabled={isDeletePending}
+ >
+ 취소
+ </Button>
+ <Button
+ variant="destructive"
+ onClick={onDelete}
+ disabled={isDeletePending}
+ >
+ {isDeletePending && (
+ <Loader
+ className="mr-2 size-4 animate-spin"
+ aria-hidden="true"
+ />
+ )}
+ {isMultiple ? `${whitelists.length}개 삭제` : "삭제"}
+ </Button>
+ </DialogFooter>
+ </DialogContent>
+ </Dialog>
+ )
+}