Merge pull request #280 from devpalsPlus/feat/#279

pages>login>LoginSuccess.tsx 모달 변경, 디펜던시 추가 (#issue 279)

Author: YouD0313

src/constants/authConstants.ts

@@ -3,6 +3,10 @@ import naver from '../assets/naver.svg';
 import google from '../assets/google.svg';
 import github from '../assets/github.svg';
 
+export const AUTH_MESSAGE = {
+  isNotToken: '로그인 토큰이 존재하지 않습니다.',
+};
+
 export const ERROR_MESSAGES = {
   EMAIL_REQUIRED: '이메일을 입력해주세요.',
   INVALID_EMAIL: '유효한 이메일을 입력해주세요.',

src/pages/login/LoginSuccess.tsx

@@ -4,11 +4,15 @@ import useAuthStore from '../../store/authStore';
 import { ROUTES } from '../../constants/routes';
 import * as S from './Login.styled';
 import { Spinner } from '../../components/common/loadingSpinner/LoadingSpinner.styled';
+import Modal from '../../components/common/modal/Modal';
+import { useModal } from '../../hooks/useModal';
+import { AUTH_MESSAGE } from '../../constants/authConstants';
 
 function LoginSuccess() {
   const [searchParams] = useSearchParams();
   const { storeLogin } = useAuthStore.getState();
   const navigate = useNavigate();
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
 
   useEffect(() => {
     const accessToken = searchParams.get('accessToken');
@@ -18,14 +22,19 @@ function LoginSuccess() {
       localStorage.setItem('accessToken', accessToken);
       navigate(ROUTES.main);
     } else {
-      alert('로그인 토큰이 존재하지 않습니다.');
-      navigate(ROUTES.login);
+      handleModalOpen(AUTH_MESSAGE.isNotToken);
+      setTimeout(() => {
+        navigate(ROUTES.login);
+      }, 1000);
     }
-  }, []);
+  }, [searchParams, storeLogin, handleModalOpen, navigate]);
 
   return (
     <S.LoginSuccessContainer>
       <Spinner />
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
     </S.LoginSuccessContainer>
   );
 }