diff --git a/frontend/app/(main)/mail/imap/page.tsx b/frontend/app/(main)/mail/imap/page.tsx index 4dc6362f..ccdeb317 100644 --- a/frontend/app/(main)/mail/imap/page.tsx +++ b/frontend/app/(main)/mail/imap/page.tsx @@ -129,6 +129,7 @@ export default function ImapMailPage() { const [searchTerm, setSearchTerm] = useState(""); const [saving, setSaving] = useState(false); const [saveError, setSaveError] = useState(null); + const [formErrors, setFormErrors] = useState>>({}); // New states const [folders, setFolders] = useState([]); @@ -432,6 +433,7 @@ export default function ImapMailPage() { setTestResult(null); setShowPassword(false); setHostPopoverOpen(false); + setFormErrors({}); setShowDialog(true); } @@ -461,6 +463,14 @@ export default function ImapMailPage() { } async function handleSave() { + const errors: typeof formErrors = {}; + if (!form.displayName.trim()) errors.displayName = "표시 이름을 입력하세요."; + if (!form.email.trim()) errors.email = "이메일 주소를 입력하세요."; + if (!form.host.trim()) errors.host = "IMAP 호스트를 입력하세요."; + if (!form.username.trim()) errors.username = "사용자명을 입력하세요."; + if (!editingAccount && !form.password.trim()) errors.password = "비밀번호를 입력하세요."; + if (Object.keys(errors).length > 0) { setFormErrors(errors); return; } + setFormErrors({}); setSaving(true); setSaveError(null); try { @@ -914,18 +924,22 @@ export default function ImapMailPage() { setForm((p) => ({ ...p, displayName: e.target.value }))} + onChange={(e) => { setForm((p) => ({ ...p, displayName: e.target.value })); setFormErrors((p) => ({ ...p, displayName: undefined })); }} placeholder="내 Gmail" + className={formErrors.displayName ? "border-destructive" : ""} /> + {formErrors.displayName &&

{formErrors.displayName}

}
setForm((p) => ({ ...p, email: e.target.value, username: e.target.value }))} + onChange={(e) => { setForm((p) => ({ ...p, email: e.target.value, username: e.target.value })); setFormErrors((p) => ({ ...p, email: undefined })); }} placeholder="user@example.com" + className={formErrors.email ? "border-destructive" : ""} /> + {formErrors.email &&

{formErrors.email}

}
@@ -944,7 +958,7 @@ export default function ImapMailPage() { setForm((p) => ({ ...p, host: v }))} + onValueChange={(v) => { setForm((p) => ({ ...p, host: v })); setFormErrors((p) => ({ ...p, host: undefined })); }} /> 직접 입력한 값을 사용합니다 @@ -970,6 +984,7 @@ export default function ImapMailPage() { + {formErrors.host &&

{formErrors.host}

}
@@ -988,9 +1003,11 @@ export default function ImapMailPage() { setForm((p) => ({ ...p, username: e.target.value }))} + onChange={(e) => { setForm((p) => ({ ...p, username: e.target.value })); setFormErrors((p) => ({ ...p, username: undefined })); }} placeholder="user@example.com" + className={formErrors.username ? "border-destructive" : ""} /> + {formErrors.username &&

{formErrors.username}

}
@@ -998,10 +1015,10 @@ export default function ImapMailPage() { setForm((p) => ({ ...p, password: e.target.value }))} + onChange={(e) => { setForm((p) => ({ ...p, password: e.target.value })); setFormErrors((p) => ({ ...p, password: undefined })); }} onKeyDown={(e) => { if (e.key === "Enter") handleSave(); }} placeholder="••••••••" - className="pr-9" + className={`pr-9 ${formErrors.password ? "border-destructive" : ""}`} />
+ {formErrors.password &&

{formErrors.password}

}
{editingAccount && (