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

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

@@ -2,20 +2,30 @@ 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 = "이메일 또는 비밀번호를 확인해주세요.";
+
+type EmailLoginErrorResponse = {
+  message?: string;
+};
+
 /**
  * @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 +41,13 @@ const usePostEmailAuth = ({ redirectPath }: AuthRedirectOptions = {}) => {
         router.push(getCommunityRedirectOrFallback(redirectPath));
       }, 100);
     },
+    onError: (error) => {
+      const message = error.response?.data?.message || EMAIL_LOGIN_FAILURE_MESSAGE;
+
+      // 로그인 실패는 사용자가 자격증명을 고쳐 곧바로 재시도하는 경우가 많아
+      // 동일 메시지 억제(dedupe)를 끄고 매 시도마다 토스트를 노출한다.
+      showIconToast("logo", message, { dedupe: false });
+    },
   });
 };
 

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);
+  }
 };