Merge pull request #893 from KEEPER31337/feature/어드민페이지_URL로_접근가능_#888

Feature/어드민페이지 url로 접근가능 #888
KEEPER31337 · Mar 28, 2024 · 6f79dbc · 6f79dbc
2 parents d9e5175 + cae9db2
commit 6f79dbc
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 15 deletions.
diff --git a/src/components/NeedAuth/NeedAuth.tsx b/src/components/NeedAuth/NeedAuth.tsx
@@ -0,0 +1,30 @@
+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;
+  roles?: Role[];
+}
+
+const NeedAuth = ({ children, roles = [] }: NeedLoginProps) => {
+  const { checkIncludeOneOfAuths } = useCheckAuth();
+  const navigate = useNavigate();
+
+  const onClose = () => {
+    navigate('/');
+  };
+
+  if (checkIncludeOneOfAuths([...roles, 'ROLE_회장', 'ROLE_부회장'])) {
+    return children;
+  }
+  return (
+    <ConfirmModal open onClose={onClose} title="권한이 필요한 서비스입니다">
+      <p>접근 권한이 없습니다</p>
+    </ConfirmModal>
+  );
+};
+
+export default NeedAuth;
diff --git a/src/components/NeedAuth/NeedLogin.tsx b/src/components/NeedAuth/NeedLogin.tsx
@@ -0,0 +1,28 @@
+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;
+}
+
+const NeedLogin = ({ children }: NeedLoginProps) => {
+  const { checkLogin } = useCheckAuth();
+  const navigate = useNavigate();
+
+  const onClose = () => {
+    navigate('/login');
+  };
+
+  if (checkLogin()) {
+    return children;
+  }
+  return (
+    <ConfirmModal open onClose={onClose} title="로그인이 필요한 서비스입니다">
+      <p>로그인 후 이용해주세요</p>
+    </ConfirmModal>
+  );
+};
+
+export default NeedLogin;
diff --git a/src/hooks/useCheckAuth.ts b/src/hooks/useCheckAuth.ts
@@ -6,6 +6,10 @@ import memberState from '@recoil/member.recoil';
 const useCheckAuth = () => {
   const member: MemberInfo | null = useRecoilValue(memberState);
 
+  const checkLogin = useMemo(() => {
+    return () => member !== null;
+  }, [member]);
+
   const checkAuth = useMemo(() => {
     return (requiredRole: Role) => member?.memberJobs?.includes(requiredRole);
   }, [member]);
@@ -16,7 +20,7 @@ const useCheckAuth = () => {
 
   const checkIsMyId = (id: number) => member?.memberId === id;
 
-  return { checkAuth, checkIncludeOneOfAuths, checkIsMyId };
+  return { checkLogin, checkAuth, checkIncludeOneOfAuths, checkIsMyId };
 };
 
 export default useCheckAuth;
diff --git a/src/router/useMainRouter.tsx b/src/router/useMainRouter.tsx
@@ -22,6 +22,8 @@ import SeminarAttend from '@pages/senimarAttend/SenimarAttend';
 import FitContainer from '@components/Layout/Container/FitContainer';
 import FullContainer from '@components/Layout/Container/FullContainer';
 import MainLayout from '@components/Layout/MainLayout';
+import NeedAuth from '@components/NeedAuth/NeedAuth';
+import NeedLogin from '@components/NeedAuth/NeedLogin';
 
 const useMainRouter = () =>
   useRoutes([
@@ -54,7 +56,11 @@ const useMainRouter = () =>
             },
             {
               path: 'profile/:memberId/*',
-              element: <Profile />,
+              element: (
+                <NeedLogin>
+                  <Profile />
+                </NeedLogin>
+              ),
             },
           ],
         },
@@ -66,27 +72,47 @@ const useMainRouter = () =>
               children: [
                 {
                   path: 'dutyManage',
-                  element: <DutyManage />,
+                  element: (
+                    <NeedAuth>
+                      <DutyManage />
+                    </NeedAuth>
+                  ),
                 },
                 /* {
                   path: 'electionManage',
                   element: <div />,
                 }, */
                 {
                   path: 'libraryManage/*',
-                  element: <LibraryManage />,
+                  element: (
+                    <NeedAuth roles={['ROLE_사서']}>
+                      <LibraryManage />
+                    </NeedAuth>
+                  ),
                 },
                 {
                   path: 'seminarManage',
-                  element: <SeminarManage />,
+                  element: (
+                    <NeedAuth roles={['ROLE_서기']}>
+                      <SeminarManage />
+                    </NeedAuth>
+                  ),
                 },
                 {
                   path: 'activeMemberManage',
-                  element: <ActiveMemberManage />,
+                  element: (
+                    <NeedAuth roles={['ROLE_서기']}>
+                      <ActiveMemberManage />
+                    </NeedAuth>
+                  ),
                 },
                 {
                   path: 'meritManage',
-                  element: <MeritManage />,
+                  element: (
+                    <NeedAuth roles={['ROLE_서기']}>
+                      <MeritManage />
+                    </NeedAuth>
+                  ),
                 },
               ],
             },
@@ -95,41 +121,73 @@ const useMainRouter = () =>
               children: [
                 {
                   path: ':categoryName',
-                  element: <BoardList />,
+                  element: (
+                    <NeedLogin>
+                      <BoardList />
+                    </NeedLogin>
+                  ),
                 },
                 {
                   path: 'write/:categoryName',
-                  element: <BoardWrite />,
+                  element: (
+                    <NeedLogin>
+                      <BoardWrite />
+                    </NeedLogin>
+                  ),
                 },
                 {
                   path: 'view/:postId',
-                  element: <BoardView />,
+                  element: (
+                    <NeedLogin>
+                      <BoardView />
+                    </NeedLogin>
+                  ),
                 },
               ],
             },
             {
               path: 'study',
-              element: <Study />,
+              element: (
+                <NeedLogin>
+                  <Study />
+                </NeedLogin>
+              ),
             },
             {
               path: 'library',
-              element: <Library />,
+              element: (
+                <NeedLogin>
+                  <Library />
+                </NeedLogin>
+              ),
             },
             {
               path: 'seminar',
-              element: <SeminarAttend />,
+              element: (
+                <NeedLogin>
+                  <SeminarAttend />
+                </NeedLogin>
+              ),
             },
             /* {
               path: 'election',
               element: <div />,
             }, */
             {
               path: 'rank',
-              element: <Rank />,
+              element: (
+                <NeedLogin>
+                  <Rank />
+                </NeedLogin>
+              ),
             },
             {
               path: 'game',
-              element: <Game />,
+              element: (
+                <NeedLogin>
+                  <Game />
+                </NeedLogin>
+              ),
             },
             /* {
               path: 'ctf',