fix: 로그인 되지 않던 이슈 해결 (#432)

* refactor: 렌더링 이후에 api 호출하도록 변경

* refactor: 로그인 했을 경우 Success, Error callback 작성

frontend/src/hooks/queries/auth/useLogin.ts

@@ -1,15 +1,31 @@
 import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import useAddToast from 'hooks/@common/useAddToast';
 import AuthAPI from 'apis/auth';
 import throwOnInvalidStatus from 'utils/throwOnInvalidStatus';
+import { URL_PATH } from 'constants/index';
 
-const useLogin = () =>
-  useMutation<null, Error, string>({
+const useLogin = () => {
+  const navigation = useNavigate();
+  const addToast = useAddToast();
+
+  return useMutation<null, Error, string>({
     mutationFn: async (code: string) => {
       const response = await AuthAPI.getSessionId(code);
 
       throwOnInvalidStatus(response);
       return null;
     },
+
+    onSuccess: () => {
+      navigation(URL_PATH.reminder, { replace: true });
+    },
+
+    onError: (error) => {
+      addToast({ type: 'error', message: error.message, time: 3000 });
+      navigation(URL_PATH.login, { replace: true });
+    },
   });
+};
 
 export default useLogin;

frontend/src/pages/auth/Login/Authorization.tsx

@@ -1,18 +1,19 @@
 import { useEffect } from 'react';
-import { Navigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
+import Loading from 'pages/@common/Loading';
 import useLogin from 'hooks/queries/auth/useLogin';
-import { URL_PATH } from 'constants/index';
 
 const Authorization = () => {
   const [searchParams] = useSearchParams();
   const code = searchParams.get('code');
+
   const { mutate: login } = useLogin();
 
   useEffect(() => {
     login(code ?? '');
   }, [code, login]);
 
-  return <Navigate to={URL_PATH.reminder} replace />;
+  return <Loading />;
 };
 
 export default Authorization;