Feature/role constansts로 빼기 #848

src/components/Layout/Sidebar/Sidebar.tsx

@@ -4,6 +4,7 @@ import { VscBug } from 'react-icons/vsc';
 import { Role } from '@api/dto';
 import CATEGORIES from '@constants/category';
 import { KEEPER_COLOR, SIDEBAR_WIDTH } from '@constants/keeperTheme';
+import { MEMBER_ROLE } from '@constants/member';
 import useCheckAuth from '@hooks/useCheckAuth';
 import CategoryNav from '@components/Navigation/CategoryNav';
 
@@ -13,7 +14,13 @@ interface SidebarProps {
 }
 
 const Sidebar = ({ mobileSidebarOpen, setMobileSidebarOpen }: SidebarProps) => {
-  const executiveRoles: Role[] = ['ROLE_회장', 'ROLE_부회장', 'ROLE_서기', 'ROLE_총무', 'ROLE_사서'];
+  const executiveRoles: Role[] = [
+    MEMBER_ROLE.회장,
+    MEMBER_ROLE.부회장,
+    MEMBER_ROLE.서기,
+    MEMBER_ROLE.총무,
+    MEMBER_ROLE.사서,
+  ];
   const { checkIncludeOneOfAuths } = useCheckAuth();
 
   const theme = useTheme();

src/constants/badge.ts

@@ -9,18 +9,19 @@ import librarianBadge from '@assets/dutyManage/badge_8_librarian.gif';
 import graduateBadge from '@assets/profileBadge/profile_badge_state_graduate.gif';
 import regularBadge from '@assets/profileBadge/profile_badge_state_regular.gif';
 import sleepBadge from '@assets/profileBadge/profile_badge_state_sleep.gif';
+import { MEMBER_ROLE } from './member';
 
 const roles = [
-  { name: 'ROLE_회장', img: chairmanBadge },
-  { name: 'ROLE_부회장', img: viceChairmanBadge },
-  { name: 'ROLE_서기', img: clerkBadge },
-  { name: 'ROLE_총무', img: administratorBadge },
-  { name: 'ROLE_사서', img: librarianBadge },
-  { name: 'ROLE_학술부장', img: studyManagerBadge },
-  { name: 'ROLE_대외부장', img: externalManagerBadge },
-  { name: 'ROLE_FRONT_전산관리자', img: ITManagerBadge },
-  { name: 'ROLE_BACK_전산관리자', img: ITManagerBadge },
-  { name: 'ROLE_INFRA_전산관리자', img: ITManagerBadge },
+  { name: MEMBER_ROLE.회장, img: chairmanBadge },
+  { name: MEMBER_ROLE.부회장, img: viceChairmanBadge },
+  { name: MEMBER_ROLE.서기, img: clerkBadge },
+  { name: MEMBER_ROLE.총무, img: administratorBadge },
+  { name: MEMBER_ROLE.사서, img: librarianBadge },
+  { name: MEMBER_ROLE.학술부장, img: studyManagerBadge },
+  { name: MEMBER_ROLE.대외부장, img: externalManagerBadge },
+  { name: MEMBER_ROLE.FRONT_전산관리자, img: ITManagerBadge },
+  { name: MEMBER_ROLE.BACK_전산관리자, img: ITManagerBadge },
+  { name: MEMBER_ROLE.INFRA_전산관리자, img: ITManagerBadge },
 ];
 
 const types: { [key: string]: string } = { 정회원: regularBadge, 졸업: graduateBadge, 휴면회원: sleepBadge };

src/constants/category.ts

@@ -1,4 +1,5 @@
 import { Role } from '@api/dto';
+import { MEMBER_ROLE } from '@constants/member';
 
 export interface CategoryMenu {
   id: number;
@@ -152,19 +153,19 @@ const CATEGORIES: Category[] = [
         id: 605,
         name: '문제관리',
         path: 'admin/challengeManage',
-        roles: ['ROLE_회장', 'ROLE_출제자'],
+        roles: [MEMBER_ROLE.회장, MEMBER_ROLE.출제자],
       },
       {
         id: 606,
         name: '제출로그',
         path: 'admin/submissions',
-        roles: ['ROLE_회장', 'ROLE_출제자'],
+        roles: [MEMBER_ROLE.회장, MEMBER_ROLE.출제자],
       },
       {
         id: 607,
         name: '대회운영',
         path: 'admin/operation',
-        roles: ['ROLE_회장'],
+        roles: [MEMBER_ROLE.회장],
       },
     ],
   }, */
@@ -177,37 +178,37 @@ const CATEGORIES: Category[] = [
         id: 701,
         name: '직책관리',
         path: 'dutyManage',
-        roles: ['ROLE_회장', 'ROLE_부회장'],
+        roles: [MEMBER_ROLE.회장, MEMBER_ROLE.부회장],
       },
       /* {
         id: 702,
         name: '선거관리',
         path: 'electionManage',
-        roles: ['ROLE_회장'],
+        roles: [MEMBER_ROLE.회장],
       }, */
       {
         id: 703,
         name: '도서관리',
         path: 'libraryManage',
-        roles: ['ROLE_회장', 'ROLE_부회장', 'ROLE_사서'],
+        roles: [MEMBER_ROLE.회장, MEMBER_ROLE.부회장, MEMBER_ROLE.사서],
       },
       {
         id: 704,
         name: '세미나관리',
         path: 'seminarManage',
-        roles: ['ROLE_회장', 'ROLE_부회장', 'ROLE_서기'],
+        roles: [MEMBER_ROLE.회장, MEMBER_ROLE.부회장, MEMBER_ROLE.서기],
       },
       {
         id: 705,
         name: '활동인원관리',
         path: 'activeMemberManage',
-        roles: ['ROLE_회장', 'ROLE_부회장', 'ROLE_서기'],
+        roles: [MEMBER_ROLE.회장, MEMBER_ROLE.부회장, MEMBER_ROLE.서기],
       },
       {
         id: 706,
         name: '상벌점관리',
         path: 'meritManage',
-        roles: ['ROLE_회장', 'ROLE_부회장', 'ROLE_서기'],
+        roles: [MEMBER_ROLE.회장, MEMBER_ROLE.부회장, MEMBER_ROLE.서기],
       },
     ],
   },

src/constants/member.ts

@@ -0,0 +1,32 @@
+export const MEMBER_ROLE_PREFIX = 'ROLE_';
+
+// 1.
+export const MEMBER_ROLE = {
+  회장: 'ROLE_회장',
+  부회장: 'ROLE_부회장',
+  서기: 'ROLE_서기',
+  총무: 'ROLE_총무',
+  사서: 'ROLE_사서',
+  학술부장: 'ROLE_학술부장',
+  대외부장: 'ROLE_대외부장',
+  전산관리자: 'ROLE_전산관리자',
+  FRONT_전산관리자: 'ROLE_FRONT_전산관리자',
+  BACK_전산관리자: 'ROLE_BACK_전산관리자',
+  INFRA_전산관리자: 'ROLE_INFRA_전산관리자',
+  회원: 'ROLE_회원',
+  출제자: 'ROLE_출제자',
+} as const;
+
+// 2.
+export const MEMBER_ROLE2 = {
+  회장: `${MEMBER_ROLE_PREFIX}회장`,
+  부회장: `${MEMBER_ROLE_PREFIX}부회장`,
+} as const;
+
+// 3.
+const prefix = (detail: string) => `${MEMBER_ROLE_PREFIX}${detail}`;
+
+export const MEMBER_ROLE3 = {
+  회장: prefix('회장'),
+  부회장: prefix('부회장'),
+} as const;

src/mocks/DutyManageApi.ts

@@ -6,6 +6,7 @@ import ITManagerBadge from '@assets/dutyManage/badge_5_it_manager.gif';
 import clerkBadge from '@assets/dutyManage/badge_6_clerk.gif';
 import administratorBadge from '@assets/dutyManage/badge_7_administrator.gif';
 import librarianBadge from '@assets/dutyManage/badge_8_librarian.gif';
+import { MEMBER_ROLE } from '@constants/member';
 
 interface RoleDutyList {
   jobName: string;
@@ -82,14 +83,16 @@ const roleDutyListInfo: RoleDutyList[] = [
 ];
 
 const roles = [
-  { name: 'ROLE_회장', img: chairmanBadge },
-  { name: 'ROLE_부회장', img: viceChairmanBadge },
-  { name: 'ROLE_대외부장', img: externalManagerBadge },
-  { name: 'ROLE_학술부장', img: studyManagerBadge },
-  { name: 'ROLE_전산관리자', img: ITManagerBadge },
-  { name: 'ROLE_서기', img: clerkBadge },
-  { name: 'ROLE_총무', img: administratorBadge },
-  { name: 'ROLE_사서', img: librarianBadge },
+  { name: MEMBER_ROLE.회장, img: chairmanBadge },
+  { name: MEMBER_ROLE.부회장, img: viceChairmanBadge },
+  { name: MEMBER_ROLE.대외부장, img: externalManagerBadge },
+  { name: MEMBER_ROLE.학술부장, img: studyManagerBadge },
+  { name: MEMBER_ROLE.FRONT_전산관리자, img: ITManagerBadge },
+  { name: MEMBER_ROLE.BACK_전산관리자, img: ITManagerBadge },
+  { name: MEMBER_ROLE.INFRA_전산관리자, img: ITManagerBadge },
+  { name: MEMBER_ROLE.서기, img: clerkBadge },
+  { name: MEMBER_ROLE.총무, img: administratorBadge },
+  { name: MEMBER_ROLE.사서, img: librarianBadge },
 ];
 
 export type JobInfoType = {

src/pages/Library/Library.tsx

@@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography';
 import { BookListSearch } from '@api/dto';
 import { useGetExecutiveInfoQuery } from '@api/dutyManageApi';
 import { useGetBookListQuery, useRequestBorrowBookMutation, useGetBookBorrowsQuery } from '@api/libraryApi';
+import { MEMBER_ROLE } from '@constants/member';
 import usePagination from '@hooks/usePagination';
 import StandardTablePagination from '@components/Pagination/StandardTablePagination';
 import PageTitle from '@components/Typography/PageTitle';
@@ -28,7 +29,7 @@ const Library = () => {
   const { data: executiveInfos } = useGetExecutiveInfoQuery();
   const { mutate: RequestBorrowBook } = useRequestBorrowBookMutation();
 
-  const librarian = executiveInfos?.find((role) => role.jobName === 'ROLE_사서')?.realName || '';
+  const librarian = executiveInfos?.find((role) => role.jobName === MEMBER_ROLE.사서)?.realName || '';
 
   const handleRequestBook = (bookId: number) => {
     RequestBorrowBook(bookId, {

src/pages/Profile/Section/BadgeSection.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Tooltip } from '@mui/material';
 import { Role, RoleInfo } from '@api/dto';
 import { roles, types } from '@constants/badge';
+import { MEMBER_ROLE_PREFIX, MEMBER_ROLE } from '@constants/member';
 
 interface FollowListProps {
   memberType: string;
@@ -13,7 +14,7 @@ const BadgeSection = ({ memberType, memberJobs }: FollowListProps) => {
 
   useEffect(() => {
     const updatedMemberJobInfo = memberJobs
-      .filter((job) => job !== 'ROLE_회원' && job !== 'ROLE_출제자')
+      .filter((job) => job !== MEMBER_ROLE.회원 && job !== MEMBER_ROLE.출제자)
       .map((job) => {
         const filteredRole = roles.find((role) => role.name === job);
         return {
@@ -27,7 +28,7 @@ const BadgeSection = ({ memberType, memberJobs }: FollowListProps) => {
   return (
     <div className="flex h-8 flex-wrap items-center space-x-2 overflow-y-auto md:h-10">
       {MemberJobInfo.map((job: RoleInfo) => (
-        <Tooltip key={job.name} title={job.name.replace('ROLE_', '')} placement="top">
+        <Tooltip key={job.name} title={job.name.replace(MEMBER_ROLE_PREFIX, '')} placement="top">
           <img src={job.img} alt="" className="h-8 w-8 md:h-10 md:w-10" />
         </Tooltip>
       ))}

src/pages/Profile/Tab/BookTab/BookTab.tsx

@@ -7,6 +7,7 @@ import {
   useCancleReturnBookMutation,
   useCancleBorrowBookMutation,
 } from '@api/libraryApi';
+import { MEMBER_ROLE } from '@constants/member';
 import BookCard from './Card/BookCard';
 import BookGuide from './Guide/BookGuide';
 
@@ -20,7 +21,7 @@ const BookTab = () => {
   const { mutate: cancleReturnBookMutation } = useCancleReturnBookMutation();
   const { mutate: cancleBorrowBookMutation } = useCancleBorrowBookMutation();
 
-  const librarian = executiveInfos?.find((role) => role.jobName === 'ROLE_사서')?.realName || '';
+  const librarian = executiveInfos?.find((role) => role.jobName === MEMBER_ROLE.사서)?.realName || '';
 
   const borrowLength = borrowedBookListData?.content?.filter((bookInfo) => bookInfo.status === '대출대기').length;
   const returnLength = borrowedBookListData?.content?.filter((bookInfo) => bookInfo.status === '반납대기').length;

src/pages/admin/DutyManage/Button/DutyProfileButton.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, Typography } from '@mui/material';
 import { useGetExecutiveInfoQuery } from '@api/dutyManageApi';
+import { MEMBER_ROLE } from '@constants/member';
 import muiTheme from '@constants/muiTheme';
 import { convertJobName } from '@mocks/DutyManageApi';
 
@@ -21,7 +22,7 @@ const DutyProfileButton = ({ jobName, badgeImage, setTooltipOpen, toggleModalOpe
     toggleModalOpen();
   };
 
-  if (jobName === 'ROLE_전산관리자') {
+  if (jobName === MEMBER_ROLE.전산관리자) {
     return (
       <div className="flex w-[120px] flex-col items-center">
         <Typography variant="h3" sx={{ fontWeight: 600, color: 'white' }}>

src/pages/admin/DutyManage/DutyManage.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
+import { MEMBER_ROLE } from '@constants/member';
 import PageTitle from '@components/Typography/PageTitle';
-
 import DutyProfileTooltip from './Tooltip/DutyProfileTooltip';
 
 const jobNameArray = [
-  { key: 1, jobName: 'ROLE_학술부장' },
-  { key: 2, jobName: 'ROLE_대외부장' },
-  { key: 3, jobName: 'ROLE_전산관리자' },
-  { key: 4, jobName: 'ROLE_서기' },
-  { key: 5, jobName: 'ROLE_사서' },
-  { key: 6, jobName: 'ROLE_총무' },
+  { key: 1, jobName: MEMBER_ROLE.학술부장 },
+  { key: 2, jobName: MEMBER_ROLE.대외부장 },
+  { key: 3, jobName: MEMBER_ROLE.전산관리자 },
+  { key: 4, jobName: MEMBER_ROLE.서기 },
+  { key: 5, jobName: MEMBER_ROLE.사서 },
+  { key: 6, jobName: MEMBER_ROLE.총무 },
 ];
 
 const ITjobNameArray = [
-  { key: 1, jobName: 'ROLE_FRONT_전산관리자' },
-  { key: 2, jobName: 'ROLE_BACK_전산관리자' },
-  { key: 3, jobName: 'ROLE_INFRA_전산관리자' },
+  { key: 1, jobName: MEMBER_ROLE.FRONT_전산관리자 },
+  { key: 2, jobName: MEMBER_ROLE.BACK_전산관리자 },
+  { key: 3, jobName: MEMBER_ROLE.INFRA_전산관리자 },
 ];
 
 const MiddleBar = () => {
@@ -66,7 +66,7 @@ const ViceChairman = () => {
           </div>
         </div>
         <div className="absolute left-[40%] translate-y-2">
-          <DutyProfileTooltip jobName="ROLE_부회장" />
+          <DutyProfileTooltip jobName={MEMBER_ROLE.부회장} />
         </div>
       </div>
     </div>
@@ -78,7 +78,7 @@ const DutyManage = () => {
     <div>
       <PageTitle>직책관리</PageTitle>
       <div className="flex flex-col items-center">
-        <DutyProfileTooltip jobName="ROLE_회장" />
+        <DutyProfileTooltip jobName={MEMBER_ROLE.회장} />
         <ViceChairman />
 
         <MiddleBar />

src/pages/admin/DutyManage/Tooltip/DutyProfileTooltip.tsx

@@ -3,6 +3,7 @@ import { Typography } from '@mui/material';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import { VscSearch } from 'react-icons/vsc';
+import { MEMBER_ROLE } from '@constants/member';
 import muiTheme from '@constants/muiTheme';
 import { roleDutyListInfo, roles } from '@mocks/DutyManageApi';
 
@@ -50,13 +51,8 @@ const DutyProfileTooltip = ({ jobName }: DutyProfileTooltipProps) => {
   const [tooltipOpen, setTooltipOpen] = useState(false);
   const [modalOpen, toggleModalOpen] = useReducer((prev) => !prev, false);
 
-  let badgeImage;
-  if (jobName.search('전산관리자') !== -1) {
-    badgeImage = roles.find((role) => role.name === 'ROLE_전산관리자')?.img;
-  } else {
-    badgeImage = roles.find((role) => role.name === jobName)?.img;
-  }
-
+  const badgeImage = roles.find((role) => role.name === jobName)?.img;
+  // NOTE jobName으로는 "ROLE_전산관리자" 내려오지만, roles에는 존재하지 않습니다! 세부적인 전산관리자(프론트, 백, 인프라)만 존재합니다
   return (
     <div className="relative z-10">
       <DutyProfileButton
@@ -65,7 +61,7 @@ const DutyProfileTooltip = ({ jobName }: DutyProfileTooltipProps) => {
         setTooltipOpen={setTooltipOpen}
         toggleModalOpen={toggleModalOpen}
       />
-      {jobName !== 'ROLE_전산관리자' ? (
+      {jobName !== MEMBER_ROLE.전산관리자 && (
         <>
           <DescriptionRoleDutyTooltip
             title={tooltipContent(jobName)}
@@ -85,7 +81,7 @@ const DutyProfileTooltip = ({ jobName }: DutyProfileTooltipProps) => {
             badgeImage={badgeImage}
           />
         </>
-      ) : null}
+      )}
     </div>
   );
 };

src/pages/senimarAttend/SenimarAttend.tsx

@@ -8,6 +8,7 @@ import {
   useGetRecentlyDoneSeminarInfoQuery,
   useGetRecentlyUpcomingSeminarInfoQuery,
 } from '@api/seminarApi';
+import { MEMBER_ROLE } from '@constants/member';
 import useCheckAuth from '@hooks/useCheckAuth';
 import memberState from '@recoil/member.recoil';
 import starterState from '@recoil/seminarStarter.recoil';
@@ -30,7 +31,7 @@ const SeminarAttend = () => {
   const { data: availableSeminarData } = useGetAvailableSeminarInfoQuery();
 
   const { checkIncludeOneOfAuths } = useCheckAuth();
-  const authorizedMember = checkIncludeOneOfAuths(['ROLE_회장', 'ROLE_부회장', 'ROLE_서기']);
+  const authorizedMember = checkIncludeOneOfAuths([MEMBER_ROLE.회장, MEMBER_ROLE.부회장, MEMBER_ROLE.서기]);
   const startMember: number | undefined = useRecoilValue(starterState);
   const member: MemberInfo | null = useRecoilValue(memberState);