"use client"; import { useRouter } from "next/navigation"; import { useEffect, useRef, useState } from "react"; import type { KavenixAdminDnsRecord } from "@/lib/kavenix-admin"; type KavenixDomainDnsPopoverProps = { domain: string; domainId: number; dkimEnabled: boolean; domainStatus: "pending" | "verified" | "failed"; lastCheckedAt: string | null; records: KavenixAdminDnsRecord[]; }; type VerificationResponse = { message?: string; ok?: boolean; verified?: boolean; }; type DkimRegenerationResponse = { message?: string; ok?: boolean; }; type DkimUsageResponse = { message?: string; ok?: boolean; }; type PopoverPosition = { left: number; top: number; }; function InfoIcon({ className }: { className?: string }) { return ( ); } function CloseIcon({ className }: { className?: string }) { return ( ); } function formatCheckedAt(value: string | null) { if (!value) { return "검증 전"; } const date = new Date(value); if (Number.isNaN(date.getTime())) { return "검증 전"; } return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}.${String( date.getDate(), ).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String( date.getMinutes(), ).padStart(2, "0")}`; } function statusMeta(status: "pending" | "verified" | "failed") { if (status === "verified") { return { className: "bg-[#edf9ef] text-[#20733a]", label: "정상" }; } if (status === "failed") { return { className: "bg-[#fff1f1] text-[#d23f3f]", label: "불일치" }; } return { className: "bg-[#f4f7fb] text-[#667792]", label: "확인 전" }; } export function KavenixDomainDnsPopover({ domain, domainId, dkimEnabled: initialDkimEnabled, domainStatus, lastCheckedAt, records, }: KavenixDomainDnsPopoverProps) { const router = useRouter(); const rootRef = useRef(null); const buttonRef = useRef(null); const [open, setOpen] = useState(false); const [position, setPosition] = useState(null); const [verificationMessage, setVerificationMessage] = useState(null); const [verifying, setVerifying] = useState(false); const [dkimEnabled, setDkimEnabled] = useState(initialDkimEnabled); const [updatingDkimUsage, setUpdatingDkimUsage] = useState(false); const [dkimUsageMessage, setDkimUsageMessage] = useState(null); const [dkimKeySize, setDkimKeySize] = useState<1024 | 2048>(2048); const [dkimMessage, setDkimMessage] = useState(null); const [reissuingDkim, setReissuingDkim] = useState(false); const domainStatusMeta = statusMeta(domainStatus); function updatePosition() { const rect = buttonRef.current?.getBoundingClientRect(); if (!rect) { return; } const popoverWidth = Math.min(460, window.innerWidth - 24); setPosition({ left: Math.min(Math.max(12, rect.left), window.innerWidth - popoverWidth - 12), top: rect.bottom + 8, }); } function togglePopover() { if (open) { setOpen(false); return; } updatePosition(); setOpen(true); } async function verifyConnection() { if (verifying) { return; } setVerifying(true); setVerificationMessage(null); try { const response = await fetch(`/api/kavenix/domains/${domainId}/verify`, { method: "POST", }); const payload = (await response.json()) as VerificationResponse; if (!response.ok || payload.ok !== true) { throw new Error(payload.message || "연결 상태 확인에 실패했습니다."); } setVerificationMessage( payload.message || (payload.verified ? "연결이 정상입니다." : "점검을 완료했습니다. 불일치한 항목을 확인해 주세요."), ); router.refresh(); } catch (error) { setVerificationMessage( error instanceof Error ? error.message : "연결 상태 확인에 실패했습니다.", ); } finally { setVerifying(false); } } async function reissueDkim() { if (reissuingDkim) { return; } if ( !window.confirm( `${domain}의 DKIM 키를 ${dkimKeySize}-bit로 다시 발급할까요?\n\n기존 DKIM 키는 즉시 교체됩니다. 팝업에 표시되는 새 TXT 값을 DNS에 반영한 뒤 연결 상태를 다시 확인해야 합니다.`, ) ) { return; } setReissuingDkim(true); setDkimMessage(null); try { const response = await fetch(`/api/kavenix/domains/${domainId}/dkim`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ keySize: dkimKeySize }), }); const payload = (await response.json()) as DkimRegenerationResponse; if (!response.ok || payload.ok !== true) { throw new Error(payload.message || "DKIM 키 재발급에 실패했습니다."); } setDkimMessage(payload.message || "DKIM 키를 새로 발급했습니다."); router.refresh(); } catch (error) { setDkimMessage( error instanceof Error ? error.message : "DKIM 키 재발급에 실패했습니다.", ); } finally { setReissuingDkim(false); } } async function toggleDkimUsage() { if (updatingDkimUsage) { return; } const nextDkimEnabled = !dkimEnabled; if ( !nextDkimEnabled && !window.confirm( `${domain}에서 DKIM 검증을 건너뛸까요?\n\nSPF와 DMARC는 계속 필요하며, 외부 수신처에서 스팸 또는 반송될 가능성이 높아질 수 있습니다.`, ) ) { return; } setUpdatingDkimUsage(true); setDkimUsageMessage(null); try { const response = await fetch(`/api/kavenix/domains/${domainId}/dkim-usage`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ enabled: nextDkimEnabled }), }); const payload = (await response.json()) as DkimUsageResponse; if (!response.ok || payload.ok !== true) { throw new Error(payload.message || "DKIM 사용 설정을 변경하지 못했습니다."); } setDkimEnabled(nextDkimEnabled); setDkimUsageMessage(payload.message || "DKIM 사용 설정을 변경했습니다."); router.refresh(); } catch (error) { setDkimUsageMessage( error instanceof Error ? error.message : "DKIM 사용 설정을 변경하지 못했습니다.", ); } finally { setUpdatingDkimUsage(false); } } useEffect(() => { if (!open) { return; } const handlePointerDown = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) { setOpen(false); } }; const handleViewportChange = () => updatePosition(); document.addEventListener("pointerdown", handlePointerDown); window.addEventListener("resize", handleViewportChange); window.addEventListener("scroll", handleViewportChange, true); return () => { document.removeEventListener("pointerdown", handlePointerDown); window.removeEventListener("resize", handleViewportChange); window.removeEventListener("scroll", handleViewportChange, true); }; }, [open]); return (

{open && position ? ( ) : null}

); }