diff --git a/src/components/NeedAuth/NeedAuth.tsx b/src/components/NeedAuth/NeedAuth.tsx new file mode 100644 index 00000000..60d7c1e0 --- /dev/null +++ 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 ( + +

접근 권한이 없습니다

+
+ ); +}; + +export default NeedAuth; diff --git a/src/components/NeedAuth/NeedLogin.tsx b/src/components/NeedAuth/NeedLogin.tsx new file mode 100644 index 00000000..d8be796f --- /dev/null +++ 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 ( + +

로그인 후 이용해주세요

+
+ ); +}; + +export default NeedLogin; diff --git a/src/hooks/useCheckAuth.ts b/src/hooks/useCheckAuth.ts index 7eb5076e..1b00a7ed 100644 --- 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 index 945b38e8..8d4813f0 100644 --- 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: , + element: ( + + + + ), }, ], }, @@ -66,7 +72,11 @@ const useMainRouter = () => children: [ { path: 'dutyManage', - element: , + element: ( + + + + ), }, /* { path: 'electionManage', @@ -74,19 +84,35 @@ const useMainRouter = () => }, */ { path: 'libraryManage/*', - element: , + element: ( + + + + ), }, { path: 'seminarManage', - element: , + element: ( + + + + ), }, { path: 'activeMemberManage', - element: , + element: ( + + + + ), }, { path: 'meritManage', - element: , + element: ( + + + + ), }, ], }, @@ -95,29 +121,53 @@ const useMainRouter = () => children: [ { path: ':categoryName', - element: , + element: ( + + + + ), }, { path: 'write/:categoryName', - element: , + element: ( + + + + ), }, { path: 'view/:postId', - element: , + element: ( + + + + ), }, ], }, { path: 'study', - element: , + element: ( + + + + ), }, { path: 'library', - element: , + element: ( + + + + ), }, { path: 'seminar', - element: , + element: ( + + + + ), }, /* { path: 'election', @@ -125,11 +175,19 @@ const useMainRouter = () => }, */ { path: 'rank', - element: , + element: ( + + + + ), }, { path: 'game', - element: , + element: ( + + + + ), }, /* { path: 'ctf',