Merge pull request #614 from solid-connection/fix/login-error-toast

🐛 이메일 로그인 실패 시 토스트가 표시되지 않는 문제 수정

Author: manNomi

apps/web/src/apis/Auth/postEmailLogin.ts

@@ -2,20 +2,45 @@ import { useMutation } from "@tanstack/react-query";
 
 import type { AxiosError } from "axios";
 import { useRouter } from "next/navigation";
+import { SKIP_GLOBAL_ERROR_TOAST_META } from "@/lib/react-query/errorToastMeta";
 import { showIconToast } from "@/lib/toast/showIconToast";
 import useAuthStore from "@/lib/zustand/useAuthStore";
 import { getCommunityRedirectOrFallback } from "@/utils/authRedirect";
 import { type AuthRedirectOptions, authApi, type EmailLoginRequest, type EmailLoginResponse } from "./api";
 
+const EMAIL_LOGIN_FAILURE_MESSAGE = "이메일 또는 비밀번호를 확인해주세요.";
+const EMAIL_LOGIN_REQUEST_FAILURE_MESSAGE = "로그인에 실패했습니다. 잠시 후 다시 시도해주세요.";
+
+type EmailLoginErrorResponse = {
+  message?: string;
+};
+
+const getEmailLoginErrorMessage = (error: AxiosError<EmailLoginErrorResponse>) => {
+  const responseMessage = error.response?.data?.message;
+
+  if (responseMessage) {
+    return responseMessage;
+  }
+
+  if (error.response?.status === 401) {
+    return EMAIL_LOGIN_FAILURE_MESSAGE;
+  }
+
+  return EMAIL_LOGIN_REQUEST_FAILURE_MESSAGE;
+};
+
 /**
  * @description 이메일 로그인을 위한 useMutation 커스텀 훅
  */
 const usePostEmailAuth = ({ redirectPath }: AuthRedirectOptions = {}) => {
   const { setAccessToken } = useAuthStore();
   const router = useRouter();
 
-  return useMutation<EmailLoginResponse, AxiosError, EmailLoginRequest>({
+  return useMutation<EmailLoginResponse, AxiosError<EmailLoginErrorResponse>, EmailLoginRequest>({
     mutationFn: (data) => authApi.postEmailLogin(data),
+    // 로그인 API는 publicAxiosInstance를 사용해 전역 401 인터셉터/토스트가 적용되지 않으므로
+    // 전역 에러 토스트를 건너뛰고 이 mutation에서 직접 처리한다.
+    meta: SKIP_GLOBAL_ERROR_TOAST_META,
     onSuccess: (data) => {
       const { accessToken } = data;
 
@@ -31,6 +56,13 @@ const usePostEmailAuth = ({ redirectPath }: AuthRedirectOptions = {}) => {
         router.push(getCommunityRedirectOrFallback(redirectPath));
       }, 100);
     },
+    onError: (error) => {
+      const message = getEmailLoginErrorMessage(error);
+
+      // 로그인 실패는 사용자가 자격증명을 고쳐 곧바로 재시도하는 경우가 많아
+      // 동일 메시지 억제(dedupe)를 끄고 매 시도마다 토스트를 노출한다.
+      showIconToast("logo", message, { dedupe: false });
+    },
   });
 };
 

apps/web/src/app/login/LoginContent.tsx

@@ -48,12 +48,6 @@ const LoginContent = () => {
     postEmailAuth(data);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      handleSubmit(onSubmit)();
-    }
-  };
-
   const handleBack = () => {
     if (window.history.length > 1) {
       router.back();
@@ -97,7 +91,6 @@ const LoginContent = () => {
               {...register("email", {
                 onChange: handleEmailChange,
               })}
-              onKeyDown={handleKeyDown}
             />
             {errors.email && <p className="mt-1 text-red-500 typo-regular-4">{errors.email.message}</p>}
           </div>
@@ -112,7 +105,6 @@ const LoginContent = () => {
               placeholder="비밀번호"
               className="w-full rounded-lg border border-k-100 px-5 py-3 font-serif text-k-400 typo-regular-4 focus:outline-none"
               {...register("password")}
-              onKeyDown={handleKeyDown}
             />
             {errors.password && <p className="mt-1 text-red-500 typo-regular-4">{errors.password.message}</p>}
           </div>

apps/web/src/lib/toast/showIconToast.tsx

@@ -17,12 +17,20 @@ const TOAST_DURATION = 3000;
 const TOAST_COOLDOWN = 3500;
 const activeToastKeys = new Set<string>();
 
-export const showIconToast = (icon: ToastIconKey, message: string) => {
+export type ShowIconToastOptions = {
+  /** 동일한 아이콘+메시지 토스트를 TOAST_COOLDOWN 동안 억제할지 여부 (기본 true) */
+  dedupe?: boolean;
+};
+
+export const showIconToast = (icon: ToastIconKey, message: string, options?: ShowIconToastOptions) => {
   const Icon = ICONS[icon];
   const key = `${icon}:${message}`;
+  const dedupe = options?.dedupe ?? true;
 
-  if (activeToastKeys.has(key)) return;
-  activeToastKeys.add(key);
+  if (dedupe) {
+    if (activeToastKeys.has(key)) return;
+    activeToastKeys.add(key);
+  }
 
   toast.custom(
     () => (
@@ -36,5 +44,7 @@ export const showIconToast = (icon: ToastIconKey, message: string) => {
     { duration: TOAST_DURATION },
   );
 
-  setTimeout(() => activeToastKeys.delete(key), TOAST_COOLDOWN);
+  if (dedupe) {
+    setTimeout(() => activeToastKeys.delete(key), TOAST_COOLDOWN);
+  }
 };