diff --git a/src/app/(protected)/mypage/page.tsx b/src/app/(protected)/mypage/page.tsx
index 4cf7e50..4ebb22f 100644
--- a/src/app/(protected)/mypage/page.tsx
+++ b/src/app/(protected)/mypage/page.tsx
@@ -14,6 +14,7 @@ import {
   UpdateUserRequest,
   UploadProfileImageResponse,
 } from "@/features/users/types";
+import { getPwConfirmError, getPwError, PasswordToggle } from "@/components/form/PasswordInput";
 import { useQueryClient } from "@tanstack/react-query";
 
 export default function AccountPage() {
@@ -31,6 +32,11 @@ export default function AccountPage() {
   const [newPw, setNewPw] = useState("");
   const [confirmPw, setConfirmPw] = useState("");
   const [error, setError] = useState<string | undefined>(undefined);
+  const [confirmError, setConfirmError] = useState<string | undefined>(undefined);
+
+  const [showCur, setShowCur] = useState(false);
+  const [showNew, setShowNew] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
 
   const [saving, setSaving] = useState(false);
   const [changing, setChanging] = useState(false);
@@ -64,9 +70,8 @@ export default function AccountPage() {
   };
 
   // 블러 시 비밀번호 검사
-  const onBlurConfirm = () => {
-    setError(!confirmPw || confirmPw === newPw ? undefined : "비밀번호가 일치하지 않습니다.");
-  };
+  const onBlurNew = () => setError(getPwError(newPw));
+  const onBlurConfirm = () => setConfirmError(getPwConfirmError(newPw, confirmPw));
 
   // 프로필 저장 버튼 활성화 조건
   const canSaveProfile = useMemo(() => {
@@ -78,8 +83,8 @@ export default function AccountPage() {
 
   // 비밀번호 변경 버튼 활성화 조건
   const canChange = useMemo(
-    () => curPw.length > 0 && newPw.length > 0 && confirmPw.length > 0 && !error,
-    [curPw, newPw, confirmPw, error],
+    () => curPw.length > 0 && newPw.length > 0 && confirmPw.length > 0 && !error && !confirmError,
+    [curPw, newPw, confirmPw, error, confirmError],
   );
 
   // 프로필 저장 로직
@@ -130,6 +135,7 @@ export default function AccountPage() {
       setNewPw("");
       setConfirmPw("");
       setError(undefined);
+      setConfirmError(undefined);
     } catch (e) {
       const msg = e instanceof Error ? e.message : "비밀번호 변경 실패";
       if (msg.includes("현재 비밀번호")) {
@@ -229,49 +235,86 @@ export default function AccountPage() {
             label="현재 비밀번호"
             className="[&>label]:text-brand-gray-700 [&>label]:text-lg"
           >
-            <Input
-              type="password"
-              name="current-password"
-              autoComplete="current-password"
-              value={curPw}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCurPw(e.target.value)}
-              placeholder="비밀번호 입력"
-            />
+            <div className="relative">
+              <Input
+                id="currentPw"
+                type={showCur ? "text" : "password"}
+                name="current-password"
+                autoComplete="current-password"
+                value={curPw}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCurPw(e.target.value)}
+                placeholder="비밀번호 입력"
+                rightIcon={
+                  <PasswordToggle
+                    show={showCur}
+                    onToggle={() => setShowCur((s) => !s)}
+                    controlsId="currentPw"
+                  />
+                }
+              />
+            </div>
           </Field>
           <Field
             id="newPw"
             label="새 비밀번호"
+            error={error}
             className="[&>label]:text-brand-gray-700 [&>label]:text-lg"
           >
-            <Input
-              type="password"
-              name="new-password"
-              autoComplete="new-password"
-              value={newPw}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setNewPw(e.target.value)}
-              placeholder="새 비밀번호 입력"
-            />
+            <div className="relative">
+              <Input
+                id="newPw"
+                type={showNew ? "text" : "password"}
+                name="new-password"
+                autoComplete="new-password"
+                value={newPw}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setNewPw(e.target.value);
+                  setError(getPwError(e.target.value));
+                }}
+                onBlur={onBlurNew}
+                aria-invalid={!!error}
+                className={error ? "border-red-500" : ""}
+                placeholder="새 비밀번호 입력"
+                rightIcon={
+                  <PasswordToggle
+                    show={showNew}
+                    onToggle={() => setShowNew((s) => !s)}
+                    controlsId="newPw"
+                  />
+                }
+              />
+            </div>
           </Field>
           <Field
             id="confirmPw"
             label="새 비밀번호 확인"
-            error={error}
+            error={confirmError}
             className="[&>label]:text-brand-gray-700 [&>label]:text-lg"
           >
-            <Input
-              type="password"
-              name="new-password-confirm"
-              autoComplete="new-password-confirm"
-              value={confirmPw}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-                setConfirmPw(e.target.value);
-                if (error) setError(undefined);
-              }}
-              onBlur={onBlurConfirm}
-              aria-invalid={!!error}
-              className={error ? "border-red-500" : ""}
-              placeholder="새 비밀번호 입력"
-            />
+            <div className="relative">
+              <Input
+                id="confirmPw"
+                type={showConfirm ? "text" : "password"}
+                name="new-password-confirm"
+                autoComplete="new-password-confirm"
+                value={confirmPw}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setConfirmPw(e.target.value);
+                  if (confirmError) setConfirmError(undefined);
+                }}
+                onBlur={onBlurConfirm}
+                aria-invalid={!!confirmError}
+                className={confirmError ? "border-red-500" : ""}
+                placeholder="새 비밀번호 입력"
+                rightIcon={
+                  <PasswordToggle
+                    show={showConfirm}
+                    onToggle={() => setShowConfirm((s) => !s)}
+                    controlsId="confirmPw"
+                  />
+                }
+              />
+            </div>
           </Field>
 
           <MyButton
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
index 9a34a64..3cae7de 100644
--- a/src/app/(public)/login/page.tsx
+++ b/src/app/(public)/login/page.tsx
@@ -9,6 +9,7 @@ import Field from "@/components/form/Field";
 import Input from "@/components/form/Input";
 import MyButton from "@/components/common/Button";
 import { profileAvatar } from "@/features/users/profileAvatar";
+import { getPwError, PasswordToggle } from "@/components/form/PasswordInput";
 
 type Errors = { email?: string; password?: string };
 const trueEmail = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v.trim());
@@ -39,11 +40,7 @@ export default function LoginPage() {
 
   // 블러 시 비밀번호 검사
   const validatePwOnBlur = () => {
-    setErrors((s) => ({
-      ...s,
-      password:
-        !values.password || values.password.length >= 8 ? undefined : "8자 이상 작성해 주세요.",
-    }));
+    setErrors((s) => ({ ...s, password: getPwError(values.password) }));
   };
 
   const canSubmit = trueEmail(values.email) && values.password.length >= 8;
@@ -51,13 +48,14 @@ export default function LoginPage() {
 
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (submitting) return;
+    setSubmitting(true);
     validateEmailOnBlur();
     validatePwOnBlur();
     if (!canSubmit) return;
 
     try {
       // 로그인 성공
-      setSubmitting(true);
 
       const res = await fetch("/api/login", {
         method: "POST",
@@ -74,7 +72,6 @@ export default function LoginPage() {
       } catch (e) {
         console.warn("프로필 기본 이미지 적용 실패:", e);
       }
-
       router.replace("/mydashboard");
     } catch (err: unknown) {
       // 로그인 실패
@@ -83,6 +80,9 @@ export default function LoginPage() {
       window.alert(message);
     } finally {
       setSubmitting(false);
+      // alert 닫힌 뒤 재제출 방지
+      (document.activeElement as HTMLElement | null)?.blur();
+      setValues((s) => ({ ...s, password: "" }));
     }
   };
 
@@ -108,6 +108,7 @@ export default function LoginPage() {
         <Field id="password" label="비밀번호" error={errors.password}>
           <div className="relative">
             <Input
+              id="password"
               aria-invalid={!!errors.password}
               aria-errormessage="password-error"
               type={showPw ? "text" : "password"}
@@ -115,22 +116,14 @@ export default function LoginPage() {
               value={values.password}
               onChange={onchange("password")}
               onBlur={validatePwOnBlur}
+              rightIcon={
+                <PasswordToggle
+                  show={showPw}
+                  onToggle={() => setShowPw((v) => !v)}
+                  controlsId="password"
+                />
+              }
             />
-            <button
-              type="button"
-              onClick={() => setShowPw((s) => !s)}
-              aria-pressed={showPw}
-              aria-controls="password"
-              aria-label={showPw ? "비밀번호 숨기기" : "비밀번호 보기"}
-              className="absolute top-1/2 right-3 flex h-6 w-6 -translate-y-1/2 items-center justify-center text-gray-500"
-            >
-              <Image
-                src={showPw ? "/icons/icon-eye-close.svg" : "/icons/icon-eye-open.svg"}
-                alt="눈 아이콘"
-                width={24}
-                height={24}
-              />
-            </button>
           </div>
         </Field>
 
diff --git a/src/app/(public)/signup/page.tsx b/src/app/(public)/signup/page.tsx
index bdd4c55..cfb6b28 100644
--- a/src/app/(public)/signup/page.tsx
+++ b/src/app/(public)/signup/page.tsx
@@ -11,6 +11,8 @@ import MyButton from "@/components/common/Button";
 import { Modal, ModalContext, ModalFooter } from "@/components/modal/Modal";
 import { signup } from "@/features/users/api";
 
+import { PasswordToggle, getPwError, getPwConfirmError } from "@/components/form/PasswordInput";
+
 type Errors = { email?: string; nickname?: string; password?: string; confirm?: string };
 type Keys = "email" | "nickname" | "password" | "confirm";
 
@@ -32,12 +34,11 @@ export default function SignupPage() {
   const [errors, setErrors] = useState<Errors>({});
   const [showPw, setShowPw] = useState(false);
   const [submitting, setSubmitting] = useState(false);
-  // 중복 이메일 모달 상태
   const [dupModal, setDupModal] = useState(false);
 
+  // 공통 onChange
   const onChange = (k: Keys) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const v = e.target.value;
-    // 이전 상태(s)를 받아서 복사 후 [k] 자리에 덮어씀
     setValues((s) => ({ ...s, [k]: v }));
     setErrors((s) => ({ ...s, [k]: undefined }));
   };
@@ -46,93 +47,70 @@ export default function SignupPage() {
     setValues((s) => ({ ...s, agree: e.target.checked }));
   };
 
-  // 블러 시 이메일 검사
-  const onBlurEmail = () => {
-    // 기존 에러 객체 s 복사 후 email 필드만 새로운 값으로 갱신
+  // Blur 검증
+  const onBlurEmail = () =>
     setErrors((s) => ({
       ...s,
       email:
         !values.email || trueEmail(values.email) ? undefined : "이메일 형식으로 작성해 주세요.",
     }));
-  };
 
-  // 블러 시 닉네임 검사
-  const onBlurNickname = () => {
+  const onBlurNickname = () =>
     setErrors((s) => ({
       ...s,
       nickname:
         !values.nickname || values.nickname.length <= MAX_NICK
           ? undefined
-          : "열 자 이하로 작성해주세요.",
+          : "열 자 이하로 작성해 주세요.",
     }));
-  };
 
-  // 블러 시 비밀번호 검사
-  const onBlurPw = () => {
+  const onBlurPw = () =>
     setErrors((s) => ({
       ...s,
       password:
-        !values.password || values.password.length >= MIN_PW
-          ? undefined
-          : "8자 이상 작성해 주세요.",
+        getPwError(values.password) ?? // 길이 등 공통 규칙
+        (values.password.length > 0 && values.password.length < MIN_PW
+          ? "8자 이상 작성해 주세요."
+          : undefined),
     }));
-  };
 
-  // 비밀번호 일치 확인 여부
-  const onBlurConfirm = () => {
+  const onBlurConfirm = () =>
     setErrors((s) => ({
       ...s,
-      confirm:
-        !values.confirm || values.confirm === values.password
-          ? undefined
-          : "비밀번호가 일치하지 않습니다.",
+      confirm: getPwConfirmError(values.password, values.confirm),
     }));
-  };
 
-  // 가입하기 버튼 활성화 조건
+  // 버튼 활성화 조건
   const activeButton = useMemo(() => {
     const okEmail = trueEmail(values.email);
     const okNickname = values.nickname.length > 0 && values.nickname.length <= MAX_NICK;
-    const okPw = values.password.length >= MIN_PW;
-    const okConfirm = values.confirm.length > 0 && values.confirm === values.password;
+    const okPw = values.password.length >= MIN_PW && !getPwError(values.password);
+    const okConfirm =
+      values.confirm.length > 0 && !getPwConfirmError(values.password, values.confirm);
     return okEmail && okNickname && okPw && okConfirm;
   }, [values]);
 
   const canSubmit = activeButton && values.agree && !submitting;
 
-  const pwToggle = (controlsId: string) => (
-    <button
-      type="button"
-      onClick={() => setShowPw((s) => !s)}
-      aria-pressed={showPw}
-      aria-controls={controlsId}
-      aria-label={showPw ? "비밀번호 숨기기" : "비밀번호 보기"}
-      className="top 1/2 itmes-center absolute right-0.5 flex h-6 w-6 -translate-y-1/2 justify-center text-gray-500"
-    >
-      <Image
-        src={showPw ? "/icons/icon-eye-close.svg" : "/icons/icon-eye-open.svg"}
-        alt="눈 아이콘"
-        width={24}
-        height={24}
-      />
-    </button>
-  );
-
+  // 제출
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    if (submitting) return;
+    setSubmitting(true);
+
     onBlurEmail();
     onBlurNickname();
     onBlurPw();
     onBlurConfirm();
-
-    if (!activeButton || !values.agree) return;
-
-    setSubmitting(true);
+    if (!activeButton || !values.agree) {
+      setSubmitting(false);
+      return;
+    }
 
     try {
       await signup({
-        email: values.email,
-        nickname: values.nickname,
+        email: values.email.trim(),
+        nickname: values.nickname.trim(),
         password: values.password,
       });
 
@@ -145,14 +123,15 @@ export default function SignupPage() {
           : undefined;
       const message = err instanceof Error ? err.message : "회원가입에 실패했습니다.";
 
-      // 409: 이미 사용중인 이메일 → 모달
       if (status === 409 || message.includes("이미 사용중인")) {
         setDupModal(true);
       } else {
-        alert(message); // 400 등 다른 메시지 그대로 표시 (예: 이메일 형식으로 작성해주세요.)
+        alert(message);
       }
     } finally {
       setSubmitting(false);
+      // 재제출 방지
+      setTimeout(() => (document.activeElement as HTMLElement | null)?.blur(), 0);
     }
   };
 
@@ -161,13 +140,16 @@ export default function SignupPage() {
       <Link href="/" className="mb-3 flex flex-col items-center gap-[5px]" aria-label="홈으로 이동">
         <Image src="/images/img-logo-large.svg" alt="Taskify 텍스트 로고" width={300} height={60} />
       </Link>
+
       <p className="mb-[30px] text-center text-xl text-[var(--text-primary)]">
         첫 방문을 환영합니다!
       </p>
 
       <form ref={formRef} onSubmit={onSubmit} className="w-full space-y-8">
+        {/* 이메일 */}
         <Field id="email" label="이메일" error={errors.email}>
           <Input
+            id="email"
             type="email"
             placeholder="이메일을 입력해 주세요."
             value={values.email}
@@ -175,8 +157,11 @@ export default function SignupPage() {
             onBlur={onBlurEmail}
           />
         </Field>
+
+        {/* 닉네임 */}
         <Field id="nickname" label="닉네임" error={errors.nickname}>
           <Input
+            id="nickname"
             type="text"
             placeholder="닉네임을 입력해 주세요"
             value={values.nickname}
@@ -184,9 +169,12 @@ export default function SignupPage() {
             onBlur={onBlurNickname}
           />
         </Field>
+
+        {/* 비밀번호 */}
         <Field id="password" label="비밀번호" error={errors.password}>
           <div className="relative">
             <Input
+              id="password"
               aria-invalid={!!errors.password}
               aria-errormessage="password-error"
               type={showPw ? "text" : "password"}
@@ -194,25 +182,41 @@ export default function SignupPage() {
               value={values.password}
               onChange={onChange("password")}
               onBlur={onBlurPw}
-              rightIcon={pwToggle("password")}
+              rightIcon={
+                <PasswordToggle
+                  show={showPw}
+                  onToggle={() => setShowPw((s) => !s)}
+                  controlsId="password"
+                />
+              }
             />
           </div>
         </Field>
+
+        {/* 비밀번호 확인 */}
         <Field id="confirm" label="비밀번호 확인" error={errors.confirm}>
           <div className="relative">
             <Input
-              aria-invalid={!!errors.password}
-              aria-errormessage="password-error"
+              id="confirm"
+              aria-invalid={!!errors.confirm}
+              aria-errormessage="confirm-error"
               type={showPw ? "text" : "password"}
               placeholder="비밀번호를 한번 더 입력해 주세요"
               value={values.confirm}
               onChange={onChange("confirm")}
               onBlur={onBlurConfirm}
-              rightIcon={pwToggle("confirm")}
+              rightIcon={
+                <PasswordToggle
+                  show={showPw}
+                  onToggle={() => setShowPw((s) => !s)}
+                  controlsId="confirm"
+                />
+              }
             />
           </div>
         </Field>
 
+        {/* 약관 동의 */}
         <label className="flex items-center gap-2 text-[16px] text-[var(--text-primary)]">
           <input
             type="checkbox"
@@ -229,12 +233,13 @@ export default function SignupPage() {
             formRef.current?.requestSubmit();
           }}
           color={canSubmit ? "buttonBlue" : "buttonGrey"}
-          className={`h-[50px] w-full ${!canSubmit ? "pointer-events-none" : ""}`}
+          className="h-[50px] w-full"
         >
           {submitting ? "가입 중" : "가입하기"}
         </MyButton>
       </form>
 
+      {/* 하단 링크 */}
       <div className="mt-6 text-center text-[16px] text-[var(--text-primary)]">
         이미 회원이신가요?
         <Link
@@ -245,6 +250,7 @@ export default function SignupPage() {
         </Link>
       </div>
 
+      {/* 중복 이메일 모달 */}
       {dupModal && (
         <Modal open={true} isOpenModal={setDupModal} size="sm">
           <ModalContext>
@@ -254,7 +260,7 @@ export default function SignupPage() {
             <MyButton
               onClick={() => setDupModal(false)}
               color="buttonBlue"
-              className={`h-[50px] w-full text-white`}
+              className="h-[50px] w-full text-white"
             >
               확인
             </MyButton>
diff --git a/src/components/form/PasswordInput.tsx b/src/components/form/PasswordInput.tsx
new file mode 100644
index 0000000..7df625b
--- /dev/null
+++ b/src/components/form/PasswordInput.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import Image from "next/image";
+
+export const MIN_PASSWORD_LEN = 8;
+
+export function getPwError(pw: string, min = MIN_PASSWORD_LEN): string | undefined {
+  if (!pw) return undefined;
+  return pw.length >= min ? undefined : `8자 이상 작성해 주세요.`;
+}
+
+export function getPwConfirmError(pw: string, confirm: string): string | undefined {
+  if (!confirm) return undefined;
+  return pw === confirm ? undefined : "비밀번호가 일치하지 않습니다.";
+}
+
+type ToggleProps = {
+  show: boolean;
+  onToggle: () => void;
+  controlsId: string;
+  className?: string;
+  toggleOn?: string;
+  toggleOff?: string;
+  size?: "sm" | "md";
+};
+
+export function PasswordToggle({
+  show,
+  onToggle,
+  controlsId,
+  className = "",
+  toggleOn = "비밀번호 숨기기",
+  toggleOff = "비밀번호 보기",
+  size = "md",
+}: ToggleProps) {
+  const box = size === "sm" ? "h-5 w-5" : "h-6 w-6";
+  const icon = size === "sm" ? 18 : 24;
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      aria-pressed={show}
+      aria-controls={controlsId}
+      className={`absolute top-1/2 right-0.5 flex -translate-y-1/2 items-center justify-center text-gray-500 ${box} ${className}`}
+    >
+      <Image
+        src={show ? "/icons/icon-eye-close.svg" : "/icons/icon-eye-open.svg"}
+        alt="비밀번호 토글"
+        width={icon}
+        height={icon}
+      />
+    </button>
+  );
+}
diff --git a/src/features/users/profileAvatar.ts b/src/features/users/profileAvatar.ts
index 76ff0b8..cd35949 100644
--- a/src/features/users/profileAvatar.ts
+++ b/src/features/users/profileAvatar.ts
@@ -1,5 +1,6 @@
 import { getMe, updateMe, uploadProfileImage } from "./api";
 
+// 닉네임 첫 글자를 알파벳으로 변환해주는 함수
 function getInitialLetter(nickname: string): string {
   const ch = (nickname ?? "").trim().charAt(0);
   if (!ch) return "?";
@@ -33,6 +34,7 @@ function getInitialLetter(nickname: string): string {
   return "?";
 }
 
+// 알파벳별 색상 추출
 const LETTER_COLOR: Record<string, string> = {
   A: "#93C5FD",
   B: "#93C5AA",
@@ -63,6 +65,7 @@ const LETTER_COLOR: Record<string, string> = {
 };
 const colorByLetter = (l: string) => LETTER_COLOR[l.toUpperCase()] ?? "#CBD5E1";
 
+// 원형 배경 + 이니셜 그려서 PNG blob 생성
 async function makeAvatarBlob(letter: string, color: string, size = 256): Promise<Blob> {
   const canvas = document.createElement("canvas");
   const dpr = Math.min(window.devicePixelRatio || 1, 2);
@@ -85,7 +88,7 @@ async function makeAvatarBlob(letter: string, color: string, size = 256): Promis
 const flagKey = (userId: string | number) => `profileSeeded:${String(userId)}`;
 
 export async function profileAvatar() {
-  const me = await getMe();
+  const me = await getMe(); // 내 정보 조회
   if (!me?.id) return;
 
   if (me.profileImageUrl) return;
@@ -97,12 +100,12 @@ export async function profileAvatar() {
 
   const fd = new FormData();
   fd.append("image", blob, "avatar.png");
-  const res = await uploadProfileImage(fd);
+  const res = await uploadProfileImage(fd); // POST /users/me/image 업로드, URL 획득
   if (res?.profileImageUrl) {
     await updateMe({
       nickname: me.nickname,
       profileImageUrl: res.profileImageUrl,
     });
-    localStorage.setItem(flagKey(me.id), "1");
+    localStorage.setItem(flagKey(me.id), "1"); // PUT /users/me에 profileImageUrl 저장
   }
 }