관리자 공지사항 페이지, 컴포넌트 분리 (#issue 331)

src/components/admin/adminNotice/AdminNoticeList.styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { SpinnerWrapperStyled } from '../../user/mypage/Spinner.styled';
+
+export const SpinnerWrapper = styled(SpinnerWrapperStyled)`
+  width: 100%;
+`;
+
+export const NoticeItemWrapper = styled.section`
+  display: flex;
+  justify-content: center;
+`;

src/pages/admin/adminNotice/adminNoticeList/AdminNoticeList.tsx → src/components/admin/adminNotice/AdminNoticeList.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
-import SearchBar from '../../../../components/admin/searchBar/SearchBar';
-import NoticeItem from '../../../user/customerService/notice/noticeItem/NoticeItem';
+import SearchBar from '../../../components/common/admin/searchBar/SearchBar';
 import * as S from './AdminNoticeList.styled';
-import type { NoticeSearch } from '../../../../models/customerService';
-import { useGetNotice } from '../../../../hooks/user/useGetNotice';
+import type { NoticeSearch } from '../../../models/customerService';
+import { useGetNotice } from '../../../hooks/user/useGetNotice';
 import { useSearchParams } from 'react-router-dom';
-import { Spinner } from '../../../../components/common/loadingSpinner/LoadingSpinner.styled';
-import Pagination from '../../../../components/common/pagination/Pagination';
+import Pagination from '../../../components/common/pagination/Pagination';
+import Spinner from '../../../components/user/mypage/Spinner';
+import NoticeItem from '../../../pages/user/customerService/notice/noticeItem/NoticeItem';
 
 export default function AdminNoticeList() {
   const [noticeSearch, setNoticeSearch] = useState<NoticeSearch>({

src/pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWrite.styled.ts → src/components/admin/adminNotice/AdminNoticeWrite.styled.ts

@@ -9,8 +9,8 @@ import {
   Content,
   SendButtonWrapper,
   SendButton,
-} from '../../../../components/user/customerService/inquiry/Inquiry.styled';
-import { SpinnerWrapperStyled } from '../../../../components/user/mypage/Spinner.styled';
+} from '../../../components/user/customerService/inquiry/Inquiry.styled';
+import { SpinnerWrapperStyled } from '../../../components/user/mypage/Spinner.styled';
 
 export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 

src/pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWrite.tsx → src/components/admin/adminNotice/AdminNoticeWrite.tsx

@@ -1,13 +1,13 @@
-import { INQUIRY_MESSAGE } from '../../../../constants/user/customerService';
+import { INQUIRY_MESSAGE } from '../../../constants/user/customerService';
 import * as S from './AdminNoticeWrite.styled';
 import React, { useEffect, useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
-import { useModal } from '../../../../hooks/useModal';
-import Modal from '../../../../components/common/modal/Modal';
-import type { WriteBody } from '../../../../models/customerService';
-import { useAdminNotice } from '../../../../hooks/admin/useAdminNotice';
-import { useGetNoticeDetail } from '../../../../hooks/user/useGetNoticeDetail';
-import Spinner from '../../../../components/user/mypage/Spinner';
+import { useModal } from '../../../hooks/useModal';
+import Modal from '../../../components/common/modal/Modal';
+import type { WriteBody } from '../../../models/customerService';
+import { useAdminNotice } from '../../../hooks/admin/useAdminNotice';
+import { useGetNoticeDetail } from '../../../hooks/user/useGetNoticeDetail';
+import Spinner from '../../../components/user/mypage/Spinner';
 
 export default function AdminNoticeWrite() {
   const location = useLocation();

src/components/admin/searchBar/SearchBar.tsx → src/components/common/admin/searchBar/SearchBar.tsx

@@ -1,11 +1,11 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { MODAL_MESSAGE_CUSTOMER_SERVICE } from '../../../constants/user/customerService';
+import { MODAL_MESSAGE_CUSTOMER_SERVICE } from '../../../../constants/user/customerService';
 import * as S from './SearchBar.styled';
 import { useState } from 'react';
 import { useLocation, useSearchParams } from 'react-router-dom';
-import { useModal } from '../../../hooks/useModal';
-import Modal from '../../common/modal/Modal';
-import { ADMIN_ROUTE } from '../../../constants/routes';
+import { useModal } from '../../../../hooks/useModal';
+import Modal from '../../modal/Modal';
+import { ADMIN_ROUTE } from '../../../../constants/routes';
 
 interface SearchBarProps {
   onGetKeyword: (keyword: string) => void;

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

@@ -9,10 +9,12 @@ import ListButton from './bottom/button/ListButton';
 
 interface NoticeDetailBundleProps {
   $width: string;
+  $isAdmin?: boolean;
 }
 
 export default function NoticeDetailBundle({
   $width,
+  $isAdmin = false,
 }: NoticeDetailBundleProps) {
   const location = useLocation();
   const { noticeId } = useParams();
@@ -24,7 +26,7 @@ export default function NoticeDetailBundle({
 
   if (isLoading) {
     return (
-      <S.SpinnerWrapper>
+      <S.SpinnerWrapper $isAdmin={$isAdmin}>
         <Spinner />
       </S.SpinnerWrapper>
     );

src/components/user/mypage/Spinner.styled.ts

@@ -26,8 +26,8 @@ export const Circle = styled.div<{ $size: string; $color: string }>`
   animation: ${spin} 1s linear infinite;
 `;
 
-export const SpinnerWrapperStyled = styled.div`
-  width: 100vw;
+export const SpinnerWrapperStyled = styled.div<{ $isAdmin?: boolean }>`
+  width: ${({ $isAdmin }) => ($isAdmin ? '100%' : '100vw')};
   height: 60vh;
   display: flex;
   justify-content: center;

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

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { SpinnerWrapperStyled } from '../../../components/user/mypage/Spinner.styled';
+import { SpinnerWrapperStyled } from '../../components/user/mypage/Spinner.styled';
 
 export const SpinnerWrapper = styled(SpinnerWrapperStyled)``;
 

src/pages/admin/CommonAdminPage.tsx

@@ -0,0 +1,16 @@
+import { Outlet } from 'react-router-dom';
+import AdminTitle from '../../components/common/admin/title/AdminTitle';
+import * as S from './CommonAdminPage.styled';
+
+interface CommonAdminPageProps {
+  title: string;
+}
+
+export default function CommonAdminPage({ title }: CommonAdminPageProps) {
+  return (
+    <S.AdminNoticeContainer>
+      <AdminTitle title={title} />
+      <Outlet />
+    </S.AdminNoticeContainer>
+  );
+}

src/pages/admin/adminNotice/AdminNotice.tsx

@@ -1,12 +1,5 @@
-import { Outlet } from 'react-router-dom';
-import AdminTitle from '../../../components/common/admin/title/AdminTitle';
-import * as S from './AdminNotice.styled';
+import CommonAdminPage from '../commonAdminPage';
 
 export default function AdminNotice() {
-  return (
-    <S.AdminNoticeContainer>
-      <AdminTitle title='공지사항' />
-      <Outlet />
-    </S.AdminNoticeContainer>
-  );
+  return <CommonAdminPage title='공지사항' />;
 }

src/pages/admin/adminNotice/adminNoticeList/AdminNoticeListPage.tsx

@@ -0,0 +1,5 @@
+import AdminNoticeList from '../../../../components/admin/adminNotice/AdminNoticeList';
+
+export default function AdminNoticeListPage() {
+  return <AdminNoticeList />;
+}

src/pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWritePage.tsx

@@ -0,0 +1,5 @@
+import AdminNoticeWrite from '../../../../components/admin/adminNotice/AdminNoticeWrite';
+
+export default function AdminNoticeWritePage() {
+  return <AdminNoticeWrite />;
+}

src/pages/admin/adminNoticeDetail/AdminNoticeDetail.tsx

@@ -1,5 +1,8 @@
 import NoticeDetailBundle from '../../../components/user/customerService/noticeDetail/NoticeDetailBundle';
+import useAuthStore from '../../../store/authStore';
 
 export default function AdminNoticeDetail() {
-  return <NoticeDetailBundle $width='90%' />;
+  const isAdmin = useAuthStore((state) => state.userData?.admin) ?? false;
+
+  return <NoticeDetailBundle $width='90%' $isAdmin={isAdmin} />;
 }

src/routes/AdminRoutes.tsx

@@ -9,10 +9,11 @@ const Sidebar = lazy(
 const Main = lazy(() => import('../pages/admin/adminMain/AdminMain'));
 const Notice = lazy(() => import('../pages/admin/adminNotice/AdminNotice'));
 const NoticeList = lazy(
-  () => import('../pages/admin/adminNotice/adminNoticeList/AdminNoticeList')
+  () => import('../pages/admin/adminNotice/adminNoticeList/AdminNoticeListPage')
 );
 const NoticeWrite = lazy(
-  () => import('../pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWrite')
+  () =>
+    import('../pages/admin/adminNotice/adminNoticeWrite/AdminNoticeWritePage')
 );
 const NoticeDetail = lazy(
   () => import('../pages/admin/adminNoticeDetail/AdminNoticeDetail')