diff --git a/src/assets/svg/error/auth-error.svg b/src/assets/svg/error/auth-error.svg
new file mode 100644
index 00000000..6a164071
--- /dev/null
+++ b/src/assets/svg/error/auth-error.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M8.99909 6.74981V8.24981M8.99909 11.2498H9.00659M3.80309 14.2498H14.1951C15.3501 14.2498 16.0716 12.9996 15.4941 11.9998L10.2981 2.99981C9.72059 2.00006 8.27759 2.00006 7.70009 2.99981L2.50409 11.9998C1.92659 12.9996 2.64809 14.2498 3.80309 14.2498Z" stroke="#F7941E" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/src/page/Auth/FindPassword/SendAuthNumber/SendAuthNumber.module.scss b/src/page/Auth/FindPassword/SendAuthNumber/SendAuthNumber.module.scss
index e30531b8..ae3d1172 100644
--- a/src/page/Auth/FindPassword/SendAuthNumber/SendAuthNumber.module.scss
+++ b/src/page/Auth/FindPassword/SendAuthNumber/SendAuthNumber.module.scss
@@ -33,6 +33,14 @@
     &--auth {
       width: 255px;
     }
+
+    &--error {
+      border: 1px solid #f7941e;
+    }
+
+    &--normal {
+      border: 1px solid #d2dae2;
+    }
   }
 
   &__label {
@@ -46,6 +54,14 @@
     flex-direction: column;
     gap: 8px;
   }
+
+  &__error {
+    display: flex;
+    color: #f7941e;
+    font-size: 12px;
+    align-items: center;
+    gap: 8px;
+  }
 }
 
 .auth-button {
diff --git a/src/page/Auth/FindPassword/SendAuthNumber/index.tsx b/src/page/Auth/FindPassword/SendAuthNumber/index.tsx
index 3c9ad4ed..f33a0de0 100644
--- a/src/page/Auth/FindPassword/SendAuthNumber/index.tsx
+++ b/src/page/Auth/FindPassword/SendAuthNumber/index.tsx
@@ -1,6 +1,7 @@
 import { Outlet } from 'react-router-dom';
 import { ReactComponent as KoinLogo } from 'assets/svg/auth/koin-logo.svg';
-import { useState } from 'react';
+import { ReactComponent as ErrorIcon } from 'assets/svg/error/auth-error.svg';
+import { useEffect, useState } from 'react';
 import cn from 'utils/ts/className';
 import { useVerifyEmail, useSubmit } from 'query/auth';
 import useEmailAuthStore from 'store/useEmailAuth';
@@ -10,7 +11,19 @@ export default function FindPassword() {
   const { email, setEmail } = useEmailAuthStore();
   const [verify, setVerify] = useState('');
   const { verifyEmail } = useVerifyEmail();
-  const submit = useSubmit();
+  const { authNumber } = useSubmit();
+
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      sessionStorage.removeItem('email-storage');
+      setEmail('');
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [setEmail]);
 
   return (
     <>
@@ -24,6 +37,8 @@ export default function FindPassword() {
                 className={cn({
                   [styles.form__input]: true,
                   [styles['form__input--auth']]: true,
+                  [styles['form__input--error']]: verifyEmail.errorMessage,
+                  [styles['form__input--normal']]: verifyEmail.isSuccess,
                 })}
                 onChange={(e) => setEmail(e.target.value)}
                 type="text"
@@ -38,21 +53,36 @@ export default function FindPassword() {
                 {verifyEmail.isSuccess ? '재발송' : '인증번호 발송'}
               </button>
             </div>
+            {!verifyEmail.isSuccess && (
+            <span className={styles.form__error}>
+              {verifyEmail.errorMessage && <ErrorIcon />}
+              {verifyEmail.errorMessage}
+            </span>
+            )}
           </label>
           <label className={styles.form__label} htmlFor="auth-num">
             인증번호 보내기
             <input
-              className={styles.form__input}
+              className={cn({
+                [styles.form__input]: true,
+                [styles['form__input--error']]: authNumber.errorMessage,
+              })}
               type="text"
               id="auth-num"
               onChange={(e) => setVerify(e.target.value)}
             />
+            {!authNumber.isSuccess && (
+            <span className={styles.form__error}>
+              {authNumber.errorMessage && <ErrorIcon />}
+              {authNumber.errorMessage}
+            </span>
+            )}
           </label>
           <button
             type="submit"
             onClick={(e) => {
               e.preventDefault();
-              submit({ email, verify });
+              authNumber.submit({ email, verify });
             }}
             className={styles.submit}
             disabled={!verifyEmail.isSuccess}
diff --git a/src/query/auth.ts b/src/query/auth.ts
index 62499e35..600bc6e4 100644
--- a/src/query/auth.ts
+++ b/src/query/auth.ts
@@ -3,7 +3,9 @@ import {
   postLogin, findPasswordVerify, findPassword, newPassword,
 } from 'api/auth';
 import { getMyShopList } from 'api/shop';
+import axios, { AxiosError } from 'axios';
 import { LoginForm } from 'model/auth';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import usePrevPathStore from 'store/path';
 
@@ -12,6 +14,21 @@ interface VerifyInput {
   verify: string;
 }
 
+interface ErrorResponse {
+  response: undefined | {
+    message: string;
+    data: {
+      code: number;
+      message: string;
+      violations: {
+        field: string;
+        message: string;
+      }[];
+    }
+  }
+  message: string;
+}
+
 export const useLogin = () => {
   const navigate = useNavigate();
   const { setPrevPath } = usePrevPathStore((state) => state);
@@ -45,15 +62,26 @@ export const useLogin = () => {
 };
 
 export const useVerifyEmail = () => {
+  const [errorMessage, setErrorMessage] = useState('');
   const { mutate, isPending, isSuccess } = useMutation({
     mutationFn: (emailInput: string) => findPasswordVerify({ email: emailInput }),
+    onError: (error: AxiosError<ErrorResponse>) => {
+      if (axios.isAxiosError(error)) {
+        setErrorMessage(error.response?.data.message || error.message);
+      }
+    },
   });
-  return { verifyEmail: { mutate, isPending, isSuccess } };
+  return {
+    verifyEmail: {
+      mutate, isPending, isSuccess, errorMessage,
+    },
+  };
 };
 
 export const useSubmit = () => {
+  const [errorMessage, setErrorMessage] = useState('');
   const navigate = useNavigate();
-  const { mutate: submit } = useMutation({
+  const { mutate: submit, isSuccess, isError } = useMutation({
     mutationFn: ({
       email,
       verify,
@@ -62,11 +90,18 @@ export const useSubmit = () => {
     onSuccess: () => {
       navigate('/new-password', { state: { 'find-password': true }, replace: true });
     },
-    onError: () => {
-      // TODO: 이메일 인증 실패 시 UI 처리 필요
+    onError: (error: ErrorResponse) => {
+      setErrorMessage(error.response?.data?.message || error.message);
+      if (axios.isAxiosError(error)) {
+        setErrorMessage(error.response?.data?.violations[0] || error.response?.data.message);
+      }
     },
   });
-  return submit;
+  return {
+    authNumber: {
+      submit, isSuccess, isError, errorMessage,
+    },
+  };
 };
 
 export const useNewPassword = () => {
diff --git a/src/utils/ts/className.ts b/src/utils/ts/className.ts
index 36f2b608..0d6ba3c6 100644
--- a/src/utils/ts/className.ts
+++ b/src/utils/ts/className.ts
@@ -1,5 +1,5 @@
 interface ClassName {
-  [key: string]: boolean;
+  [key: string]: boolean | string;
 }
 
 const classNames = (className: ClassName) => Object.entries(className)