diff --git a/frontend/app/(main)/mail/imap/page.tsx b/frontend/app/(main)/mail/imap/page.tsx index cf734b8a..e67a5c94 100644 --- a/frontend/app/(main)/mail/imap/page.tsx +++ b/frontend/app/(main)/mail/imap/page.tsx @@ -25,6 +25,10 @@ import { } from "@/components/ui/alert-dialog"; import { toast } from "sonner"; import { Switch } from "@/components/ui/switch"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; +import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"; +import { cn } from "@/lib/utils"; +import { ChevronsUpDown, Check } from "lucide-react"; import { ResizablePanelGroup, ResizablePanel, @@ -85,6 +89,15 @@ import { } from "@/lib/api/userMail"; const ComposeDialogDynamic = dynamic(() => import("./ComposeDialog"), { ssr: false }); +const IMAP_PRESETS = [ + { label: "직접 입력", value: "custom", host: "", port: 993, useTls: true }, + { label: "Gmail", value: "gmail", host: "imap.gmail.com", port: 993, useTls: true }, + { label: "Naver", value: "naver", host: "imap.naver.com", port: 993, useTls: true }, + { label: "Outlook / Hotmail", value: "outlook", host: "outlook.office365.com", port: 993, useTls: true }, + { label: "Kakao", value: "kakao", host: "imap.kakao.com", port: 993, useTls: true }, + { label: "Daum", value: "daum", host: "imap.daum.net", port: 993, useTls: true }, +]; + const DEFAULT_FORM: CreateUserMailAccountDto = { displayName: "", email: "", @@ -131,6 +144,7 @@ export default function ImapMailPage() { const [pendingDeleteMail, setPendingDeleteMail] = useState(null); const [pendingDeleteAccount, setPendingDeleteAccount] = useState(null); const [showPassword, setShowPassword] = useState(false); + const [hostPopoverOpen, setHostPopoverOpen] = useState(false); const detailCacheRef = useRef>(new Map()); const prefetchingRef = useRef>(new Set()); @@ -416,6 +430,7 @@ export default function ImapMailPage() { setForm(DEFAULT_FORM); setTestResult(null); setShowPassword(false); + setHostPopoverOpen(false); setShowDialog(true); } @@ -913,11 +928,46 @@ export default function ImapMailPage() {
- setForm((p) => ({ ...p, host: e.target.value }))} - placeholder="imap.gmail.com" - /> + + + + + + + setForm((p) => ({ ...p, host: v }))} + /> + + 직접 입력한 값을 사용합니다 + + {IMAP_PRESETS.filter((p) => p.value !== "custom").map((preset) => ( + { + setForm((p) => ({ ...p, host: preset.host, port: preset.port, useTls: preset.useTls })); + setHostPopoverOpen(false); + }} + > + +
+
{preset.label}
+
{preset.host}
+
+
+ ))} +
+
+
+
+