[FE] 일반로그인시에 리액트쿼리로 invalidate하고 에러메시지 정상표시안되던 현상을 해결한다. (#916)

frontend/src/apis/fetcher.ts

@@ -80,12 +80,13 @@ const fetcher = {
     return request({ url, method: 'GET', headers });
   },
 
-  post({ url, body, headers }: FetchProps) {
+  post({ url, body, headers, ...rest }: FetchProps) {
     return request({
       url,
       method: 'POST',
       body,
       headers: { ...headers, 'Content-Type': 'application/json' },
+      ...rest,
     });
   },
 

frontend/src/apis/url.ts

@@ -23,7 +23,7 @@ export const ENDPOINT = {
   ARTICLES: '/articles',
   ARTICLE_ID: (id: number) => `/articles/${id}`,
   // kakao login
-  LOGIN: '/oauth/login',
+  OAUTH_LOGIN: '/oauth/login',
   // basic login
   REGISTER: '/v1/local-auth/register',
   SIGN_IN: '/v1/local-auth/login',

frontend/src/apis/user.ts

@@ -2,8 +2,8 @@ import fetcher from '@/apis/fetcher';
 import { BASE_URL, ENDPOINT } from '@/apis/url';
 import { User, UserTokenValid } from '@/types/user';
 
-export const postLogin = async (code: string, redirectUri: string) => {
-  const response = await fetcher.post({ url: BASE_URL + ENDPOINT.LOGIN, body: { code, redirectUri } });
+export const postOAuthLogin = async (code: string, redirectUri: string) => {
+  const response = await fetcher.post({ url: BASE_URL + ENDPOINT.OAUTH_LOGIN, body: { code, redirectUri } });
   return response;
 };
 
@@ -52,9 +52,9 @@ export const postSignUp = async ({ name, email, password }: { name: string; emai
 };
 
 export const postSignIn = async ({ email, password }: { email: string; password: string }) => {
-  return await fetch(`${BASE_URL}${ENDPOINT.SIGN_IN}`, {
-    method: 'POST',
-    body: JSON.stringify({ email, password }),
+  return await fetcher.post({
+    url: `${BASE_URL}${ENDPOINT.SIGN_IN}`,
+    body: { email, password },
     credentials: 'include',
     headers: { 'Content-Type': 'application/json' },
   });

frontend/src/hooks/query/useAddUserQuery.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { postLogin } from '@/apis/user';
+import { postOAuthLogin } from '@/apis/user';
 import { QUERY_KEYS } from '@/constants/queryKeys';
 
 interface MutationVariables {
@@ -11,7 +11,7 @@ interface MutationVariables {
 const useAddUserQuery = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: ({ code, redirectUri }: MutationVariables) => postLogin(code, redirectUri),
+    mutationFn: ({ code, redirectUri }: MutationVariables) => postOAuthLogin(code, redirectUri),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
     },

frontend/src/hooks/query/usePostSignInQuery.ts

@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
+import { postSignIn } from '@/apis/user';
+import { QUERY_KEYS } from '@/constants/queryKeys';
+import { ROUTE_PATH } from '@/constants/routePath';
+
+const usePostSignInQuery = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: postSignIn,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.AUTH] });
+      navigate(ROUTE_PATH.home);
+    },
+  });
+};
+
+export default usePostSignInQuery;

frontend/src/pages/SignInPage.tsx

@@ -2,12 +2,13 @@ import styled from '@emotion/styled';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { getUserInfo, postSignIn } from '@/apis/user';
+import { getUserInfo } from '@/apis/user';
 import { BangBangIcon, BangGgoodTextIcon } from '@/assets/assets';
 import Button from '@/components/_common/Button/Button';
 import FormField from '@/components/_common/FormField/FormField';
 import Header from '@/components/_common/Header/Header';
 import { ROUTE_PATH } from '@/constants/routePath';
+import usePostSignInQuery from '@/hooks/query/usePostSignInQuery';
 import useToast from '@/hooks/useToast';
 import useValidateInput from '@/hooks/useValidateInput';
 import { flexCenter, title3, title4 } from '@/styles/common';
@@ -39,32 +40,29 @@ const SignInPage = () => {
 
   const disabled = !isEmailValidated || !isPasswordValidated;
 
-  const handleSubmit = async () => {
-    const response = await postSignIn({ email, password });
-    if (response.status === 200) {
-      const result = await getUserInfo();
-      showToast({ message: `${result?.userName}님, 환영합니다.`, type: 'confirm' });
-      return navigate(ROUTE_PATH.home);
-    } else {
-      const errorData = await response.json();
-      const errorMessage = errorData.message;
-      setPostErrorMessage(errorMessage);
-    }
-  };
+  const { mutate: signIn } = usePostSignInQuery();
+  const handleSubmit = async () =>
+    await signIn(
+      { email, password },
+      {
+        onSuccess: async () => {
+          const result = await getUserInfo();
+          showToast({ message: `${result?.userName}님, 환영합니다.`, type: 'confirm' });
+          return navigate(ROUTE_PATH.home);
+        },
+        onError: error => setPostErrorMessage(error.message),
+      },
+    );
 
   const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.keyCode === 13 && !disabled) {
+    if (event.key === 'Enter' && !disabled) {
       handleSubmit();
     }
   };
 
-  const handleMoveSignUp = () => {
-    navigate(ROUTE_PATH.signUp);
-  };
+  const handleMoveSignUp = () => navigate(ROUTE_PATH.signUp);
 
-  const handleClickBackward = () => {
-    navigate(ROUTE_PATH.root);
-  };
+  const handleClickBackward = () => navigate(ROUTE_PATH.root);
 
   return (
     <>