diff --git a/apps/graduate/src/pages/login/api/submitLogin.ts b/apps/graduate/src/pages/login/api/submitLogin.ts index c074c860..a2787d81 100644 --- a/apps/graduate/src/pages/login/api/submitLogin.ts +++ b/apps/graduate/src/pages/login/api/submitLogin.ts @@ -19,7 +19,7 @@ export const useSubmitLogin = ({ onError, }: { onSuccess?: () => void; - onError?: () => void; + onError?: (errorCode: string) => void; }) => { return useMutation({ mutationFn: submitLogin, @@ -29,8 +29,10 @@ export const useSubmitLogin = ({ setRole(response.role); onSuccess?.(); }, - onError: () => { - onError?.(); + onError: (error: unknown) => { + const errorMessage = + error instanceof Error ? error.message : '로그인에 실패했습니다'; + onError?.(errorMessage); }, }); }; diff --git a/apps/graduate/src/pages/login/ui/LoginForm.tsx b/apps/graduate/src/pages/login/ui/LoginForm.tsx index d8a1a468..ab503588 100644 --- a/apps/graduate/src/pages/login/ui/LoginForm.tsx +++ b/apps/graduate/src/pages/login/ui/LoginForm.tsx @@ -1,3 +1,4 @@ +import { useState, useEffect } from 'react'; import { useForm } from 'react-hook-form'; import { Button } from '~/shared/components'; @@ -7,6 +8,8 @@ import type { LoginFormData } from '../model/login'; import * as styles from '../styles/loginForm.css'; export default function LoginForm() { + const [loginError, setLoginError] = useState(null); + const { register, handleSubmit, @@ -18,13 +21,23 @@ export default function LoginForm() { }, }); + useEffect(() => { + if (errors.userId || errors.password) { + setLoginError(null); + } + }, [errors.userId, errors.password]); + const { mutate: submitLogin, isPending } = useSubmitLogin({ onSuccess: () => { window.location.reload(); }, + onError: errorCode => { + setLoginError(errorCode); + }, }); const onSubmit = (data: LoginFormData) => { + setLoginError(null); submitLogin(data); }; @@ -56,6 +69,7 @@ export default function LoginForm() {

{errors.password.message}

)} + {loginError &&

{loginError}

}