관리자 라우터, 사이드바 outlet 세팅 (#issue 321)

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

@@ -1,7 +1,16 @@
 import styled from 'styled-components';
 
-export const SidebarContainer = styled.section`
+export const LayoutContainer = styled.div`
   height: 100vh;
+  display: flex;
+`;
+
+export const ContainerArea = styled.section`
+  flex: 1;
+  padding: 2rem;
+`;
+
+export const SidebarContainer = styled.section`
   padding: 1rem;
   width: 15rem;
   border-right: 1px solid ${({ theme }) => theme.color.grey};

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

@@ -5,40 +5,53 @@ 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 { Outlet, useNavigate } from 'react-router-dom';
 import { ROUTES } from '../../../../constants/routes';
+import { useModal } from '../../../../hooks/useModal';
+import Modal from '../../modal/Modal';
+import { MODAL_MESSAGE } from '../../../../constants/user/modalMessage';
 
 export default function AdminSidebar() {
   const navigate = useNavigate();
   const logout = useAuthStore((state) => state.logout);
+  const { isOpen, message, handleModalOpen, handleModalClose } = useModal();
 
   const handleClickLogout = () => {
-    logout();
+    handleModalOpen(MODAL_MESSAGE.needAuth);
     setTimeout(() => {
+      logout();
       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>
+    <S.LayoutContainer>
+      <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>
+      <S.ContainerArea>
+        <Outlet />
+      </S.ContainerArea>
+      <Modal isOpen={isOpen} onClose={handleModalClose}>
+        {message}
+      </Modal>
+    </S.LayoutContainer>
   );
 }

src/components/common/admin/title/AdminTitle.styled.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const TitleContainer = styled.header``;
+
+export const TitleWrapper = styled.div`
+  margin-bottom: 2rem;
+`;
+
+export const Title = styled.h1``;

src/components/common/admin/title/AdminTitle.tsx

@@ -0,0 +1,17 @@
+import ContentBorder from '../../contentBorder/ContentBorder';
+import * as S from './AdminTitle.styled';
+
+interface AdminTitleProps {
+  title: string;
+}
+
+export default function AdminTitle({ title }: AdminTitleProps) {
+  return (
+    <S.TitleContainer>
+      <S.TitleWrapper>
+        <S.Title>{title}</S.Title>
+      </S.TitleWrapper>
+      <ContentBorder />
+    </S.TitleContainer>
+  );
+}

src/components/user/customerService/CustomerServiceHeader.tsx

@@ -1,8 +1,8 @@
 import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/outline';
 import * as S from './CustomerServiceHeader.styled';
 import MovedInquiredLink from './MoveInquiredLink';
-import { Outlet, useLocation, useSearchParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { Outlet, useSearchParams } from 'react-router-dom';
+import { useState } from 'react';
 import Modal from '../../common/modal/Modal';
 import { useModal } from '../../../hooks/useModal';
 import { MODAL_MESSAGE_CUSTOMER_SERVICE } from '../../../constants/user/customerService';

src/components/user/customerService/noticeDetail/NoticeDetailBundle.tsx

@@ -33,7 +33,7 @@ export default function NoticeDetailBundle() {
           createdAt=''
           viewCount={0}
         />
-        <ListButton />
+        <ListButton keyword='' />
       </S.Container>
     );
   }

src/pages/admin/adminAllUser/AdminAllUser.tsx

@@ -0,0 +1,3 @@
+export default function AdminAllUser() {
+  return <div></div>;
+}

src/pages/admin/adminBanner/AdminBanner.tsx

@@ -0,0 +1,3 @@
+export default function AdminBanner() {
+  return <div></div>;
+}

src/pages/admin/adminInquiries/AdminInquiries.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const AdminInquiriesContainer = styled.div``;

src/pages/admin/adminInquiries/AdminInquiries.tsx

@@ -0,0 +1,5 @@
+import * as S from './AdminInquires.styled';
+
+export default function AdminInquires() {
+  return <S.AdminInquiriesContainer></S.AdminInquiriesContainer>;
+}

src/pages/admin/adminMain/AdminMain.tsx

@@ -0,0 +1,3 @@
+export default function AdminMain() {
+  return <div></div>;
+}

src/pages/admin/adminManage/AdminManage.tsx

@@ -0,0 +1,3 @@
+export default function AdminManage() {
+  return <div></div>;
+}

src/pages/admin/adminNotice/AdminNotice.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

src/pages/admin/adminNotice/AdminNotice.tsx

@@ -0,0 +1,12 @@
+import AdminTitle from '../../../components/common/admin/title/AdminTitle';
+import * as S from './AdminNotice.styled';
+
+export default function AdminNotice() {
+  console.log('공지사항 렌더');
+
+  return (
+    <S.Container>
+      <AdminTitle title='공지사항' />
+    </S.Container>
+  );
+}

src/pages/admin/adminReports/AdminReports.tsx

@@ -0,0 +1,3 @@
+export default function AdminReports() {
+  return <div></div>;
+}

src/pages/admin/adminTags/AdminTags.tsx

@@ -0,0 +1,3 @@
+export default function AdminTags() {
+  return <div></div>;
+}

src/routes/AdminRoutes.tsx

@@ -6,6 +6,16 @@ import ProtectAdminRoute from './ProtectAdminRoute';
 const Sidebar = lazy(
   () => import('../components/common/admin/sidebar/AdminSidebar')
 );
+const Main = lazy(() => import('../pages/admin/adminMain/AdminMain'));
+const Notice = lazy(() => import('../pages/admin/adminNotice/AdminNotice'));
+const Banner = lazy(() => import('../pages/admin/adminBanner/AdminBanner'));
+const Tags = lazy(() => import('../pages/admin/adminTags/AdminTags'));
+const AllUser = lazy(() => import('../pages/admin/adminAllUser/AdminAllUser'));
+const Reports = lazy(() => import('../pages/admin/adminReports/AdminReports'));
+const Inquiries = lazy(
+  () => import('../pages/admin/adminInquiries/AdminInquiries')
+);
+const Manage = lazy(() => import('../pages/admin/adminManage/AdminManage'));
 
 export const AdminRoutes = () => {
   const routeList = [
@@ -16,6 +26,37 @@ export const AdminRoutes = () => {
           <Sidebar />
         </ProtectAdminRoute>
       ),
+      children: [
+        { index: true, element: <Main /> },
+        {
+          path: ADMIN_ROUTE.notice,
+          element: <Notice />,
+        },
+        {
+          path: ADMIN_ROUTE.banner,
+          element: <Banner />,
+        },
+        {
+          path: ADMIN_ROUTE.tags,
+          element: <Tags />,
+        },
+        {
+          path: ADMIN_ROUTE.allUser,
+          element: <AllUser />,
+        },
+        {
+          path: ADMIN_ROUTE.reports,
+          element: <Reports />,
+        },
+        {
+          path: ADMIN_ROUTE.inquiries,
+          element: <Inquiries />,
+        },
+        {
+          path: ADMIN_ROUTE.manage,
+          element: <Manage />,
+        },
+      ],
     },
   ];