feat : 권한이 없을 시 ConfirmModal 추가

- #888

src/components/NeedAuth/NeedAuth.tsx

@@ -1,7 +1,8 @@
-import { useEffect } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Role } from '@api/dto';
 import useCheckAuth from '@hooks/useCheckAuth';
+import ConfirmModal from '@components/Modal/ConfirmModal';
 
 interface NeedLoginProps {
   children: JSX.Element;
@@ -12,16 +13,18 @@ const NeedAuth = ({ children, roles }: NeedLoginProps) => {
   const { checkIncludeOneOfAuths } = useCheckAuth();
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (!checkIncludeOneOfAuths(roles)) {
-      navigate('/');
-    }
-  }, [checkIncludeOneOfAuths(roles)]);
+  const onClose = () => {
+    navigate('/');
+  };
 
   if (checkIncludeOneOfAuths(roles)) {
     return children;
   }
-  return null;
+  return (
+    <ConfirmModal open onClose={onClose} title="권한이 필요한 서비스입니다">
+      <p>접근 권한이 없습니다</p>
+    </ConfirmModal>
+  );
 };
 
 export default NeedAuth;

src/components/NeedAuth/NeedLogin.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import useCheckAuth from '@hooks/useCheckAuth';
+import ConfirmModal from '@components/Modal/ConfirmModal';
 
 interface NeedLoginProps {
   children: JSX.Element;
@@ -10,16 +11,18 @@ const NeedLogin = ({ children }: NeedLoginProps) => {
   const { checkLogin } = useCheckAuth();
   const navigate = useNavigate();
 
-  useEffect(() => {
-    if (!checkLogin()) {
-      navigate('/login');
-    }
-  }, [checkLogin()]);
+  const onClose = () => {
+    navigate('/login');
+  };
 
   if (checkLogin()) {
     return children;
   }
-  return null;
+  return (
+    <ConfirmModal open onClose={onClose} title="로그인이 필요한 서비스입니다">
+      <p>로그인 후 이용해주세요</p>
+    </ConfirmModal>
+  );
 };
 
 export default NeedLogin;