관리자 권한 판별 라우터, 사이드바 레이아웃 (#issue 317)

src/App.tsx

@@ -1,10 +1,10 @@
-import AppRoutes from './routes/AppRoutes';
 import { ThemeProvider } from 'styled-components';
 import { GlobalStyle } from './style/global';
 import { defaultTheme } from './style/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SearchFilteringProvider } from './context/SearchFilteringContext';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import MergeRoutes from './routes/MergeRoutes';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -22,7 +22,7 @@ function App() {
       <SearchFilteringProvider>
         <GlobalStyle />
         <QueryClientProvider client={queryClient}>
-          <AppRoutes />
+          <MergeRoutes />
           <ReactQueryDevtools initialIsOpen={false} />
         </QueryClientProvider>
       </SearchFilteringProvider>

src/api/http.api.ts

@@ -67,7 +67,6 @@ export const createClient = (config?: AxiosRequestConfig) => {
         // }
 
         logout();
-        useAuthStore.persist.clearStorage();
         window.location.href = '/login';
         return Promise.reject(error);
       }

src/components/common/admin/sidebar/AdminSidebar.styled.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+export const SidebarContainer = styled.section`
+  height: 100vh;
+  padding: 1rem;
+  width: 15rem;
+  border-right: 1px solid ${({ theme }) => theme.color.grey};
+`;
+
+export const SidebarLogoWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+  margin: 0 1.5rem 1.5rem 0;
+`;
+
+export const SidebarLogoImg = styled.img`
+  width: 5rem;
+`;
+
+export const LogoutButton = styled.button`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0.3rem;
+`;
+
+export const LogoutImg = styled.img`
+  width: 2rem;
+  filter: invert(70%);
+`;
+
+export const LogoutSpan = styled.span`
+  font-size: 0.5rem;
+  color: ${({ theme }) => theme.color.deepGrey};
+  margin-left: -7px;
+`;
+
+export const MovedListContainerAll = styled.nav`
+  margin-top: 1.5rem;
+  display: grid;
+  gap: 1.5rem;
+`;

src/components/common/admin/sidebar/AdminSidebar.tsx

@@ -0,0 +1,44 @@
+import { SIDEBAR_LIST } from '../../../../constants/admin/sidebar';
+import * as S from './AdminSidebar.styled';
+import logo from '../../../../assets/mainlogo.svg';
+import logoutIcon from '../../../../assets/logout.svg';
+import AdminSidebarList from './sidebarList/AdminSidebarList';
+import ContentBorder from '../../contentBorder/ContentBorder';
+import useAuthStore from '../../../../store/authStore';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '../../../../constants/routes';
+
+export default function AdminSidebar() {
+  const navigate = useNavigate();
+  const logout = useAuthStore((state) => state.logout);
+
+  const handleClickLogout = () => {
+    logout();
+    setTimeout(() => {
+      navigate(ROUTES.main);
+    }, 1000);
+  };
+
+  return (
+    <S.SidebarContainer>
+      <S.SidebarLogoWrapper>
+        <S.SidebarLogoImg src={logo} alt='logo' />
+        <S.LogoutButton
+          type='button'
+          onClick={handleClickLogout}
+          aria-label='관리자 로그아웃'
+          title='로그아웃'
+        >
+          <S.LogoutImg src={logoutIcon} alt='logout icon' />
+          <S.LogoutSpan>Logout</S.LogoutSpan>
+        </S.LogoutButton>
+      </S.SidebarLogoWrapper>
+      <ContentBorder />
+      <S.MovedListContainerAll>
+        <AdminSidebarList title='' list={SIDEBAR_LIST.main} />
+        <AdminSidebarList title='서비스 관리' list={SIDEBAR_LIST.service} />
+        <AdminSidebarList title='사용자 관리' list={SIDEBAR_LIST.user} />
+      </S.MovedListContainerAll>
+    </S.SidebarContainer>
+  );
+}

src/components/common/admin/sidebar/sidebarList/AdminSidebarList.styled.ts

@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const MovedListContainer = styled.nav``;
+
+export const MovedListLink = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.8rem;
+
+  &:hover {
+    color: ${({ theme }) => theme.color.deepGrey};
+  }
+`;
+
+export const MovedListIcon = styled.div`
+  display: flex;
+  align-items: center;
+
+  svg {
+    width: 1.5rem;
+  }
+`;
+
+export const MovedList = styled.div`
+  font-size: 1.2rem;
+`;
+
+export const MovedListTitleWrapper = styled.div``;
+
+export const MovedListTitle = styled.h3`
+  padding: 0.5rem;
+  color: ${({ theme }) => theme.color.deepGrey};
+`;

src/components/common/admin/sidebar/sidebarList/AdminSidebarList.tsx

@@ -0,0 +1,54 @@
+import * as S from './AdminSidebarList.styled';
+import {
+  ArrowRightStartOnRectangleIcon,
+  ChatBubbleBottomCenterTextIcon,
+  EnvelopeIcon,
+  ExclamationTriangleIcon,
+  HomeIcon,
+  MegaphoneIcon,
+  PhotoIcon,
+  TagIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline';
+
+const iconMap = {
+  mainPage: <HomeIcon />,
+  movedSite: <ArrowRightStartOnRectangleIcon />,
+  notice: <MegaphoneIcon />,
+  banner: <PhotoIcon />,
+  tags: <TagIcon />,
+  allUser: <UserGroupIcon />,
+  reports: <ExclamationTriangleIcon />,
+  inquiries: <EnvelopeIcon />,
+  manage: <ChatBubbleBottomCenterTextIcon />,
+};
+
+type IconKey = keyof typeof iconMap;
+
+interface AdminSidebarListProps {
+  title: string;
+  list: readonly { name: IconKey; title: string; router: string }[];
+}
+
+export default function AdminSidebarList({
+  title,
+  list,
+}: AdminSidebarListProps) {
+  return (
+    <S.MovedListContainer>
+      <S.MovedListTitleWrapper>
+        {title && <S.MovedListTitle>{title}</S.MovedListTitle>}
+      </S.MovedListTitleWrapper>
+      {list.map((item) => (
+        <S.MovedListLink
+          to={item.router}
+          target={item.name.includes('movedSite') ? '_blank' : '_self'}
+          key={item.name}
+        >
+          <S.MovedListIcon>{iconMap[item.name]}</S.MovedListIcon>
+          <S.MovedList>{item.title}</S.MovedList>
+        </S.MovedListLink>
+      ))}
+    </S.MovedListContainer>
+  );
+}

src/components/common/header/Header.tsx

@@ -17,7 +17,7 @@ import { formatImgPath } from '../../../util/formatImgPath';
 // import { useEffect } from 'react';
 // import { testLiveAlarm } from '../../../api/alarm.api';
 import { useMyProfileInfo } from '../../../hooks/user/useMyInfo';
-import { ROUTES } from '../../../constants/user/routes';
+import { ROUTES } from '../../../constants/routes';
 
 function Header() {
   const location = useLocation();
@@ -26,6 +26,12 @@ function Header() {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const { myData, isLoading } = useMyProfileInfo();
 
+  const handleClickLogout = () => {
+    userLogout();
+    useAuthStore.persist.clearStorage();
+    localStorage.clear();
+  };
+
   // const { signalData, setSignalData } = useNotification();
 
   // useEffect(() => {
@@ -100,7 +106,7 @@ function Header() {
                 <Link to='#' onClick={(e) => e.preventDefault()}>
                   <S.Item
                     aria-label='클릭시 로그아웃 됩니다.'
-                    onClick={userLogout}
+                    onClick={handleClickLogout}
                   >
                     로그아웃
                   </S.Item>

src/components/common/header/Notification/Notification.tsx

@@ -5,7 +5,7 @@ import LoadingSpinner from '../../loadingSpinner/LoadingSpinner';
 import useAlarmList from '../../../../hooks/user/useAlarmList';
 import arrow_right from '../../../../assets/ArrowRight.svg';
 import { useNavigate } from 'react-router-dom';
-import { ROUTES } from '../../../../constants/user/routes';
+import { ROUTES } from '../../../../constants/routes';
 
 const Notification = () => {
   const navigate = useNavigate();

src/components/user/comment/commentComponent/commentComponent/CommentComponent.tsx

@@ -4,7 +4,7 @@ import chat from '../../../../../assets/chat.svg';
 import { Link } from 'react-router-dom';
 import CommentInput from '../../commentInput/CommentInput';
 import type { CommentType } from '../../../../../models/comment';
-import { ROUTES } from '../../../../../constants/user/routes';
+import { ROUTES } from '../../../../../constants/routes';
 import Avatar from '../../../../common/avatar/Avatar';
 
 interface CommentComponentProps {

src/components/user/comment/replyComponent/ReplyComponent.tsx

@@ -8,7 +8,7 @@ import CommentInput from '../commentInput/CommentInput';
 import useGetReply from '../../../../hooks/user/CommentHooks/useGetReply';
 import LoadingSpinner from '../../../common/loadingSpinner/LoadingSpinner';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '../../../../constants/user/routes';
+import { ROUTES } from '../../../../constants/routes';
 import dropdownButton from '../../../../assets/dropdownButton.svg';
 
 interface ReplyComponentProps {

src/components/user/customerService/MoveInquiredLink.tsx

@@ -1,5 +1,5 @@
 import { useLocation } from 'react-router-dom';
-import { ROUTES } from '../../../constants/user/routes';
+import { ROUTES } from '../../../constants/routes';
 import * as S from './MoveInquiredLink.styled';
 
 export default function MovedInquiredLink() {

src/components/user/customerService/noticeDetail/bottom/button/ListButton.tsx

@@ -1,4 +1,4 @@
-import { ROUTES } from '../../../../../../constants/user/routes';
+import { ROUTES } from '../../../../../../constants/routes';
 import ContentBorder from '../../../../../common/contentBorder/ContentBorder';
 import * as S from './ListButton.styled';
 

src/components/user/customerService/noticeDetail/bottom/button/OtherNoticeButton.tsx

@@ -1,4 +1,4 @@
-import { ROUTES } from '../../../../../../constants/user/routes';
+import { ROUTES } from '../../../../../../constants/routes';
 import type { OtherNotice } from '../../../../../../models/customerService';
 import { formatDate } from '../../../../../../util/format';
 import * as S from './OtherNoticeButton.styled';

src/components/user/home/projectCardLists/ProjectCardLists.tsx

@@ -3,7 +3,7 @@ import { useProjectCardListData } from '../../../../hooks/user/useProjectCardLis
 import CardList from './cardList/CardList';
 import * as S from './ProjectCardLists.styled';
 import { Link } from 'react-router-dom';
-import { ROUTES } from '../../../../constants/user/routes';
+import { ROUTES } from '../../../../constants/routes';
 import EmptyLoading from '../../../common/emptyLoading/EmptyLoading';
 import NoResult from '../../../common/noResult/NoResult';
 import { useSaveSearchFiltering } from '../../../../hooks/user/useSaveSearchFiltering';

src/components/user/manageProjects/Card.tsx

@@ -2,7 +2,7 @@ import * as S from './Card.styled';
 import type { ManagedProject } from '../../../models/manageMyProject';
 import AvatarList from '../../common/avatar/AvatarList';
 import { formatDate } from '../../../util/formatDate';
-import { ROUTES } from '../../../constants/user/routes';
+import { ROUTES } from '../../../constants/routes';
 interface CardProps {
   project: ManagedProject;
 }

src/components/user/manageProjects/CardList.tsx

@@ -2,7 +2,7 @@ import * as S from './CardList.styled';
 import type { ManagedProject } from '../../../models/manageMyProject';
 import Card from './Card';
 import CreateButton from '../../../assets/createProjectButton.svg';
-import { ROUTES } from '../../../constants/user/routes';
+import { ROUTES } from '../../../constants/routes';
 
 interface CardListProps {
   projects: ManagedProject[];

src/components/user/mypage/ContentTab.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import * as S from './ContentTab.styled';
 import { Link, Outlet, useLocation } from 'react-router-dom';
-import { ROUTES } from '../../../constants/user/routes';
+import { ROUTES } from '../../../constants/routes';
 import ScrollWrapper from './ScrollWrapper';
 import MovedInquiredLink from '../customerService/MoveInquiredLink';
 

src/components/user/mypage/joinedProject/MyJoinProjects.tsx

@@ -4,7 +4,7 @@ import Project from './Project';
 import Spinner from '../Spinner';
 import ScrollWrapper from '../ScrollWrapper';
 import { useMyJoinedProjectList } from '../../../../hooks/user/useMyInfo';
-import { ROUTES } from '../../../../constants/user/routes';
+import { ROUTES } from '../../../../constants/routes';
 import NoContent from '../../../common/noContent/NoContent';
 
 const MyJoinProjects = () => {

src/components/user/mypage/joinedProject/Project.tsx

@@ -2,7 +2,7 @@ import * as S from './Project.styled';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
 import type { JoinedProject } from '../../../../models/userProject';
 import beginner from '../../../../assets/beginner.svg';
-import { ROUTES } from '../../../../constants/user/routes';
+import { ROUTES } from '../../../../constants/routes';
 
 interface ProjectProps {
   project: JoinedProject;

src/components/user/mypage/myProfile/MyProfile.tsx

@@ -7,7 +7,7 @@ import { useRef } from 'react';
 import ScrollWrapper from '../ScrollWrapper';
 import { useModal } from '../../../../hooks/useModal';
 import { useMyProfileInfo } from '../../../../hooks/user/useMyInfo';
-import { ROUTES } from '../../../../constants/user/routes';
+import { ROUTES } from '../../../../constants/routes';
 import Modal from '../../../common/modal/Modal';
 
 const MyProfile = () => {

src/components/user/mypage/myProfile/editProfile/EditProfile.tsx

@@ -13,7 +13,7 @@ import type { UserInfo } from '../../../../../models/userInfo';
 import { useSearchFilteringSkillTag } from '../../../../../hooks/user/useSearchFilteringSkillTag';
 import { useEditMyProfileInfo } from '../../../../../hooks/user/useMyInfo';
 import useNickNameVerification from '../../../../../hooks/user/useNicknameVerification';
-import { ROUTES } from '../../../../../constants/user/routes';
+import { ROUTES } from '../../../../../constants/routes';
 import Button from '../../../../common/Button/Button';
 import {
   ERROR_MESSAGES,

src/components/user/mypage/myProfile/profile/Profile.tsx

@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 import MyProfileWrapper from '../MyProfileWrapper';
 import type { UserInfo } from '../../../../../models/userInfo';
 import { PROFILE_DEFAULT_MESSAGE } from '../../../../../constants/user/myPageProfile';
-import { ROUTES } from '../../../../../constants/user/routes';
+import { ROUTES } from '../../../../../constants/routes';
 import 'chart.js/auto';
 import { chartOptions } from '../../../../../constants/evaluationChartData';
 

src/components/user/mypage/notifications/appliedProjects/AppliedProjects.tsx

@@ -4,7 +4,7 @@ import Spinner from '../../Spinner';
 import AppliedProjectsStatus from './appliedProjectsStatus/AppliedProjectsStatus';
 import NoContent from '../../../../common/noContent/NoContent';
 import { useMyAppliedStatusList } from '../../../../../hooks/user/useMyInfo';
-import { ROUTES } from '../../../../../constants/user/routes';
+import { ROUTES } from '../../../../../constants/routes';
 
 export default function AppliedProjects() {
   const { myAppliedStatusListData, isLoading } = useMyAppliedStatusList();