Merge pull request #98 from sopt-makers/feature-admin_authority

[#96][FEATURE] 계정권한 분리, 디버그 툴 구현
sopt-makers · Dec 1, 2023 · 38dfe91 · 38dfe91
2 parents 580b9bf + 74924a0
commit 38dfe91
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 21 deletions.
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 
+import AdminStatusDevtools from '@/components/devTools/AdminStatus';
 import { destroyToken } from '@/utils/auth';
 
 import { StHeader } from './style';
@@ -14,6 +15,12 @@ function Header() {
 
   return (
     <StHeader>
+      {process.env.NEXT_PUBLIC_API_URL !== 'PRODUCTION' && (
+        <div className="status_devtools">
+          <AdminStatusDevtools />
+        </div>
+      )}
+
       <button onClick={logout}>
         <p>로그아웃</p>
       </button>

diff --git a/src/components/common/Header/style.ts b/src/components/common/Header/style.ts
@@ -16,6 +16,11 @@ export const StHeader = styled.header`
   height: 8rem;
   padding: 0 2.6rem;
 
+  div.status_devtools {
+    width: fit-content;
+    padding: 2rem;
+  }
+
   button {
     width: 10.2rem;
     padding: 0.3rem 0.6rem;

diff --git a/src/components/common/Nav/index.tsx b/src/components/common/Nav/index.tsx
@@ -1,13 +1,20 @@
 import { useRouter } from 'next/router';
-import { Fragment } from 'react';
+import { Fragment, useContext } from 'react';
 
+import { adminStatusContext } from '@/components/devTools/AdminContextProvider';
 import { MENU_LIST } from '@/utils/nav';
 
 import GenerationDropDown from './GenerationDropDown';
 import { StMenu, StNavWrapper, StSoptLogo, StSubMenu } from './style';
 
 function Nav() {
   const router = useRouter();
+  const { status } = useContext(adminStatusContext);
+
+  const filteredMenuList =
+    status === 'MAKERS'
+      ? MENU_LIST.filter((menu) => menu.title === '알림 관리')
+      : MENU_LIST;
 
   const handleSubMenuClick = (path: string) => {
     router.push(path);
@@ -19,7 +26,7 @@ function Nav() {
         <StSoptLogo>SOPT ADMIN</StSoptLogo>
       </header>
       <GenerationDropDown />
-      {MENU_LIST.map((menu) => (
+      {filteredMenuList.map((menu) => (
         <Fragment key={menu.title}>
           <StMenu
             currentPage={

diff --git a/src/components/devTools/AdminContextProvider/index.tsx b/src/components/devTools/AdminContextProvider/index.tsx
@@ -0,0 +1,44 @@
+import {
+  createContext,
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useEffect,
+  useState,
+} from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface AdminStatusContextType {
+  status: string | null;
+  setStatus: Dispatch<SetStateAction<string | null>>;
+}
+
+const defaultContextValue: AdminStatusContextType = {
+  status: 'DEVELOPER',
+  setStatus: () => {},
+};
+
+export const adminStatusContext =
+  createContext<AdminStatusContextType>(defaultContextValue);
+
+export const AdminStatusProvider = (props: Props) => {
+  const { children } = props;
+  const [status, setStatus] = useState<string | null>('NOT_CERTIFIED');
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const savedStatus =
+        sessionStorage.getItem('adminStatus') ?? 'NOT_CERTIFIED';
+      setStatus(savedStatus);
+    }
+  }, []);
+
+  return (
+    <adminStatusContext.Provider value={{ status, setStatus }}>
+      {children}
+    </adminStatusContext.Provider>
+  );
+};
diff --git a/src/components/devTools/AdminStatus/index.tsx b/src/components/devTools/AdminStatus/index.tsx
@@ -0,0 +1,59 @@
+import { useRouter } from 'next/router';
+import { useContext, useEffect, useState } from 'react';
+
+import DropDown from '@/components/common/DropDown';
+import OptionTemplate from '@/components/common/OptionTemplate';
+import Selector from '@/components/common/Selector';
+
+import { adminStatusContext } from '../AdminContextProvider';
+import { StAdminStatusContainer } from './style';
+
+function AdminStatusDevtools() {
+  const router = useRouter();
+  const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
+  const { status, setStatus } = useContext(adminStatusContext);
+
+  const STATUS_SELECTION: ADMIN_STATUS[] = ['SOPT', 'MAKERS'];
+
+  const isAdminStatus = (value: string): value is ADMIN_STATUS => {
+    return [
+      'SUPER_USER',
+      'SOPT',
+      'MAKERS',
+      'NOT_CERTIFIED',
+      'DEVELOPER',
+    ].includes(value);
+  };
+
+  const handleStatusChange = (newStatus: string) => {
+    if (isAdminStatus(newStatus)) {
+      setStatus(newStatus);
+      sessionStorage.setItem('adminStatus', newStatus);
+      if (newStatus === 'MAKERS') {
+        router.push('/alarmAdmin');
+      }
+    } else {
+      console.error('유효하지 않은 권한입니다.');
+    }
+  };
+
+  return (
+    <StAdminStatusContainer>
+      <OptionTemplate title="권한">
+        <Selector
+          content={status}
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        />
+        {isDropdownOpen && (
+          <DropDown
+            type={'select'}
+            list={STATUS_SELECTION}
+            onItemSelected={handleStatusChange}
+          />
+        )}
+      </OptionTemplate>
+    </StAdminStatusContainer>
+  );
+}
+
+export default AdminStatusDevtools;
diff --git a/src/components/devTools/AdminStatus/style.ts b/src/components/devTools/AdminStatus/style.ts
@@ -0,0 +1,5 @@
+import styled from '@emotion/styled';
+
+export const StAdminStatusContainer = styled.div`
+  width: 18.5rem;
+`;
diff --git a/src/hooks/useUnauthorizedStatus.ts b/src/hooks/useUnauthorizedStatus.ts
@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export const useUnauthorizedStatus = (status: ADMIN_STATUS) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (
+      typeof window !== 'undefined' &&
+      sessionStorage.getItem('adminStatus') === status
+    ) {
+      alert('접근 권한이 없는 계정입니다.');
+      router.back();
+    }
+  }, [router, status]);
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -8,6 +8,7 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import { RecoilRoot } from 'recoil';
 
 import Layout from '@/components/common/Layout';
+import { AdminStatusProvider } from '@/components/devTools/AdminContextProvider';
 import global from '@/styles/global';
 import theme from '@/styles/theme';
 import { getToken } from '@/utils/auth';
@@ -35,17 +36,19 @@ export default function App({ Component, pageProps }: AppProps) {
         <title>SOPT Admin</title>
       </Head>
       <QueryClientProvider client={client}>
-        <Hydrate state={pageProps.dehydratedState}>
-          <RecoilRoot>
-            <ThemeProvider theme={theme}>
-              <Global styles={global} />
-              <Layout>
-                <Component {...pageProps} />
-              </Layout>
-            </ThemeProvider>
-          </RecoilRoot>
-        </Hydrate>
-        <ReactQueryDevtools initialIsOpen={false} />
+        <AdminStatusProvider>
+          <Hydrate state={pageProps.dehydratedState}>
+            <RecoilRoot>
+              <ThemeProvider theme={theme}>
+                <Global styles={global} />
+                <Layout>
+                  <Component {...pageProps} />
+                </Layout>
+              </ThemeProvider>
+            </RecoilRoot>
+          </Hydrate>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </AdminStatusProvider>
       </QueryClientProvider>
     </>
   );

diff --git a/src/pages/attendanceAdmin/session/[id].tsx b/src/pages/attendanceAdmin/session/[id].tsx
@@ -18,6 +18,7 @@ import Select from '@/components/session/Select';
 import { PAGE_SIZE } from '@/data/queryData';
 import { attendanceInit, attendanceOptions } from '@/data/sessionData';
 import useObserver from '@/hooks/useObserver';
+import { useUnauthorizedStatus } from '@/hooks/useUnauthorizedStatus';
 import {
   updateMemberAttendStatus,
   updateMemberScore,
@@ -51,6 +52,8 @@ function SessionDetailPage() {
   const [modal, setModal] = useState<number | null>(null);
   const bottomRef: RefObject<HTMLDivElement> = useRef(null);
 
+  useUnauthorizedStatus('MAKERS');
+
   const {
     data: session,
     isLoading: isLoadingSession,
@@ -246,7 +249,7 @@ function SessionDetailPage() {
         return () => closeAttendance();
       default:
         // eslint-disable-next-line prettier/prettier
-        return () => { };
+        return () => {};
     }
   };
 

diff --git a/src/pages/attendanceAdmin/session/index.tsx b/src/pages/attendanceAdmin/session/index.tsx
@@ -2,13 +2,15 @@ import { useEffect, useState } from 'react';
 
 import CreateSessionModal from '@/components/attendanceAdmin/session/CreateSessionModal';
 import SessionList from '@/components/attendanceAdmin/session/SessionList';
-import SessionListFooter from '@/components/attendanceAdmin/session/SessionListFooter';
 import FloatingButton from '@/components/common/FloatingButton';
-import Footer from '@/components/common/Footer';
 import Modal from '@/components/common/modal';
+import { useUnauthorizedStatus } from '@/hooks/useUnauthorizedStatus';
+
 function SessionPage() {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
+  useUnauthorizedStatus('MAKERS');
+
   useEffect(() => {
     if (isModalOpen) {
       document.body.style.overflow = 'hidden';

diff --git a/src/pages/attendanceAdmin/totalScore/index.tsx b/src/pages/attendanceAdmin/totalScore/index.tsx
@@ -1,6 +1,9 @@
 import MemberList from '@/components/attendanceAdmin/totalScore/MemberList';
+import { useUnauthorizedStatus } from '@/hooks/useUnauthorizedStatus';
 
 function TotalScorePage() {
+  useUnauthorizedStatus('MAKERS');
+
   return <MemberList />;
 }
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,14 +3,13 @@ import { colors } from '@sopt-makers/colors';
 import { fonts } from '@sopt-makers/fonts';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 import { SoptMainLogo } from '@/assets/icons/SoptLogos';
 import Button from '@/components/common/Button';
-import Input from '@/components/common/Input';
 import Loading from '@/components/common/Loading';
-import OptionTemplate from '@/components/common/OptionTemplate';
+import { adminStatusContext } from '@/components/devTools/AdminContextProvider';
 import useInput from '@/hooks/useInput';
 import { userLogin } from '@/services/api/auth';
 import { user as userState } from '@/store/globalStore';
@@ -20,6 +19,7 @@ function LoginPage() {
   const router = useRouter();
 
   const setUser = useSetRecoilState(userState);
+  const { status, setStatus } = useContext(adminStatusContext);
 
   const { state, onChange } = useInput<LoginData>({
     email: '',
@@ -44,7 +44,12 @@ function LoginPage() {
         setError({ status: true, message: result.message });
       } else {
         setUser(result);
-        router.replace('/attendanceAdmin/session');
+        setStatus(result.adminStatus);
+        router.replace(
+          result.adminStatus !== 'MAKERS'
+            ? '/attendanceAdmin/session'
+            : '/alarmAdmin',
+        );
       }
     }
   };

diff --git a/src/store/globalStore.ts b/src/store/globalStore.ts
@@ -1,9 +1,10 @@
-import { atom } from 'recoil';
+import { atom, DefaultValue, selector } from 'recoil';
 
 export const user = atom<User>({
   key: 'userData',
   default: {
     id: 0,
+    adminStatus: 'NOT_CERTIFIED',
     name: '',
   },
 });
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -6,6 +6,12 @@ declare global {
   type SESSION_STATUS = 'BEFORE' | 'FIRST' | 'SECOND' | 'END';
   type AlarmDropdownType = 'part' | 'target' | 'generation' | 'targetSelector';
   type ALARM_STATUS = '전체' | '발송 전' | '발송 후';
+  type ADMIN_STATUS =
+    | 'SUPER_USER'
+    | 'SOPT'
+    | 'MAKERS'
+    | 'NOT_CERTIFIED'
+    | 'DEVELOPER';
 
   /* 에러 */
   interface LoginError {
@@ -141,6 +147,7 @@ declare global {
   /* 어드민 */
   interface User {
     id: number;
+    adminStatus: ADMIN_STATUS;
     name: string;
   }