ux수정 (#issue 272)

src/components/common/ProtectRoute.tsx

@@ -1,16 +1,38 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import useAuthStore from '../../store/authStore';
 import { Navigate } from 'react-router-dom';
+import { useModal } from '../../hooks/useModal';
+import Modal from './modal/Modal';
+import { MODAL_MESSAGE } from '../../constants/modalMessage';
 interface ProtectRouteProps extends PropsWithChildren {
   redirectUrl: string;
 }
 
 const ProtectRoute = ({ children, redirectUrl }: ProtectRouteProps) => {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
+  const [shouldRedirect, setShouldRedirect] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      handleModalOpen(MODAL_MESSAGE.isNotLoggedIn);
+      const timer = setTimeout(() => setShouldRedirect(true), 1000);
+      return () => clearTimeout(timer);
+    } else {
+      setShouldRedirect(false);
+    }
+  }, [isLoggedIn, handleModalOpen]);
 
   if (!isLoggedIn) {
-    alert('로그인이 필요한 서비스입니다.');
-    return <Navigate to={redirectUrl} replace />;
+    if (shouldRedirect) {
+      return <Navigate to={redirectUrl} replace />;
+    }
+
+    return (
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
+    );
   }
 
   return <>{children}</>;

src/components/mypage/activityLog/ActivityLog.tsx

@@ -2,9 +2,5 @@ import { ACTIVITY_FILTER } from '../../../constants/myPageFilter';
 import ContentTab from '../ContentTab';
 
 export default function ActivityLog() {
-  return (
-    <>
-      <ContentTab $justifyContent='space-around' filter={ACTIVITY_FILTER} />
-    </>
-  );
+  return <ContentTab $justifyContent='space-around' filter={ACTIVITY_FILTER} />;
 }