From e31cfba014f74b0b84ef2920040ac7020a783d6a Mon Sep 17 00:00:00 2001
From: syc0123 <yechul.shin@gmail.com>
Date: Wed, 1 Apr 2026 14:45:59 +0900
Subject: [PATCH] =?UTF-8?q?[RAPID-micro]=20=EB=A9=94=EC=9D=BC=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20UX=20=EA=B0=9C=EC=84=A0:=20=EB=B9=84=EB=B0=80?=
 =?UTF-8?q?=EB=B2=88=ED=98=B8=20=ED=86=A0=EA=B8=80,=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=20=EB=B9=88=20=EA=B2=B0=EA=B3=BC,=20=EC=9D=B4=EB=A9=94?=
 =?UTF-8?q?=EC=9D=BC=E2=86=92=EC=82=AC=EC=9A=A9=EC=9E=90=EB=AA=85=20?=
 =?UTF-8?q?=EC=9E=90=EB=8F=99=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/app/(main)/mail/imap/page.tsx | 31 +++++++++++++++++++-------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/app/(main)/mail/imap/page.tsx b/frontend/app/(main)/mail/imap/page.tsx
index 9ef1a057..cf734b8a 100644
--- a/frontend/app/(main)/mail/imap/page.tsx
+++ b/frontend/app/(main)/mail/imap/page.tsx
@@ -55,6 +55,8 @@ import {
   FolderOpen,
   Send,
   Download,
+  Eye,
+  EyeOff,
 } from "lucide-react";
 import DOMPurify from "isomorphic-dompurify";
 import {
@@ -128,6 +130,7 @@ export default function ImapMailPage() {
   const [composeSending, setComposeSending] = useState(false);
   const [pendingDeleteMail, setPendingDeleteMail] = useState<ReceivedMail | null>(null);
   const [pendingDeleteAccount, setPendingDeleteAccount] = useState<UserMailAccount | null>(null);
+  const [showPassword, setShowPassword] = useState(false);
 
   const detailCacheRef = useRef<Map<string, MailDetail>>(new Map());
   const prefetchingRef = useRef<Set<string>>(new Set());
@@ -412,6 +415,7 @@ export default function ImapMailPage() {
     setEditingAccount(null);
     setForm(DEFAULT_FORM);
     setTestResult(null);
+    setShowPassword(false);
     setShowDialog(true);
   }
 
@@ -428,6 +432,7 @@ export default function ImapMailPage() {
       password: "",
     });
     setTestResult(null);
+    setShowPassword(false);
     setShowDialog(true);
   }
 
@@ -661,7 +666,7 @@ export default function ImapMailPage() {
                 ) : filteredMails.length === 0 ? (
                   <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-2">
                     <Inbox className="h-8 w-8 opacity-30" />
-                    <p className="text-sm">메일이 없습니다</p>
+                    <p className="text-sm">{searchTerm ? `"${searchTerm}" 검색 결과가 없습니다` : "메일이 없습니다"}</p>
                   </div>
                 ) : (
                   <>
@@ -901,7 +906,7 @@ export default function ImapMailPage() {
               <Input
                 type="email"
                 value={form.email}
-                onChange={(e) => setForm((p) => ({ ...p, email: e.target.value }))}
+                onChange={(e) => setForm((p) => ({ ...p, email: e.target.value, username: e.target.value }))}
                 placeholder="user@example.com"
               />
             </div>
@@ -937,12 +942,22 @@ export default function ImapMailPage() {
             </div>
             <div className="space-y-1">
               <Label className="text-xs">비밀번호 {editingAccount && "(변경 시에만 입력)"}</Label>
-              <Input
-                type="password"
-                value={form.password}
-                onChange={(e) => setForm((p) => ({ ...p, password: e.target.value }))}
-                placeholder="••••••••"
-              />
+              <div className="relative">
+                <Input
+                  type={showPassword ? "text" : "password"}
+                  value={form.password}
+                  onChange={(e) => setForm((p) => ({ ...p, password: e.target.value }))}
+                  placeholder="••••••••"
+                  className="pr-9"
+                />
+                <button
+                  type="button"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  onClick={() => setShowPassword((v) => !v)}
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
+              </div>
             </div>
             {editingAccount && (
               <div>