diff --git a/components/admin/announcement/AnnounceList.tsx b/components/admin/announcement/AnnounceList.tsx
new file mode 100644
index 000000000..27fd05e2b
--- /dev/null
+++ b/components/admin/announcement/AnnounceList.tsx
@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import instance from 'utils/axios';
+import 'react-quill/dist/quill.snow.css';
+import 'react-quill/dist/quill.bubble.css';
+import { QUILL_FORMATS } from 'types/quillTypes';
+import {
+ Paper,
+ Table,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+} from '@mui/material';
+import { tableFormat } from '../../../constants/admin/table';
+import PageNation from '../../Pagination';
+import styles from 'styles/admin/announcement/AnnounceList.module.scss';
+
+const Quill = dynamic(() => import('react-quill'), {
+ ssr: false,
+ loading: () =>
Loading ...
,
+});
+
+interface IAnnouncement {
+ content: string;
+ creatorIntraId: string;
+ deleterIntraId: string;
+ deletedTime: Date;
+ createdTime: Date;
+ isDel: boolean;
+}
+
+interface IAnnouncementTable {
+ announcementList: IAnnouncement[];
+ totalPage: number;
+ currentPage: number;
+}
+
+export default function AnnounceList() {
+ const [announcementInfo, setAnnouncementInfo] = useState({
+ announcementList: [],
+ totalPage: 0,
+ currentPage: 0,
+ });
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const getAnnouncements = useCallback(async () => {
+ try {
+ const res = await instance.get(
+ `pingpong/admin/announcement?page=${currentPage}&size=10`
+ );
+ console.log(res.data);
+ setAnnouncementInfo({ ...res.data });
+ } catch (e) {
+ console.error('MS01');
+ }
+ }, [currentPage]);
+
+ useEffect(() => {
+ getAnnouncements();
+ }, [getAnnouncements]);
+
+ if (announcementInfo.announcementList.length === 0) {
+ return 비어있습니다!
;
+ }
+
+ return (
+
+
+ 과거 공지사항
+
+
+
+
+
+ {tableFormat['announcement'].columns.map((columnName) => (
+
+ {columnName}
+
+ ))}
+
+
+
+ {announcementInfo.announcementList.map(
+ (announcement: IAnnouncement, index: number) => (
+
+ {tableFormat['announcement'].columns.map(
+ (columnName: string, index: number) => {
+ return columnName == 'content' ? (
+
+
+
+ ) : (
+
+ {announcement[
+ columnName as keyof IAnnouncement
+ ]?.toString()}
+
+ );
+ }
+ )}
+
+ )
+ )}
+
+
+
+
+
{
+ setCurrentPage(pageNumber);
+ }}
+ />
+
+
+ );
+}
diff --git a/constants/admin/table.ts b/constants/admin/table.ts
index e24af43da..2e7aaeba8 100644
--- a/constants/admin/table.ts
+++ b/constants/admin/table.ts
@@ -36,4 +36,15 @@ export const tableFormat: TableFormat = {
value: ['completed', 'notCompleted'],
},
},
+ announcement: {
+ name: '과거 공지사항',
+ columns: [
+ 'content',
+ 'createdTime',
+ 'creatorIntraId',
+ 'deletedTime',
+ 'deleterIntraId',
+ 'isDel',
+ ],
+ },
};
diff --git a/pages/admin/announcement.tsx b/pages/admin/announcement.tsx
index 927ac85b0..d996a723e 100644
--- a/pages/admin/announcement.tsx
+++ b/pages/admin/announcement.tsx
@@ -1,9 +1,11 @@
import AnnounceEdit from 'components/admin/announcement/AnnounceEdit';
+import AnnounceList from 'components/admin/announcement/AnnounceList';
export default function Announcement() {
return (
);
}
diff --git a/styles/admin/announcement/AnnounceList.module.scss b/styles/admin/announcement/AnnounceList.module.scss
new file mode 100644
index 000000000..c178a0865
--- /dev/null
+++ b/styles/admin/announcement/AnnounceList.module.scss
@@ -0,0 +1,74 @@
+@import 'styles/common.scss';
+@import 'styles/admin/common/Pagination.module.scss';
+
+.container {
+ width: 100%;
+ height: 100%;
+}
+
+.quillViewer {
+ width: 100%;
+ min-width: 10rem;
+ max-width: 15rem;
+ height: 100%;
+ max-height: 19rem;
+ overflow-y: scroll;
+ margin: 1rem 0;
+ color: black;
+}
+
+.quillViewer::-webkit-scrollbar {
+ display: inherit;
+ width: 5px;
+ height: 1rem;
+}
+
+.quillViewer::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: white;
+}
+
+.header {
+ width: 700px;
+ margin: 10px auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.title {
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 150%;
+}
+
+.tableContainer {
+ width: 700px;
+ margin: auto;
+
+ .table {
+ min-width: 700px;
+
+ .tableHeader {
+ background-color: lightgray;
+
+ .tableHeaderItem {
+ padding: 10px;
+ text-align: center;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 150%;
+ }
+ }
+
+ .tableBody {
+ .tableBodyItem {
+ padding: 10px;
+ text-align: center;
+ line-height: 150%;
+ }
+ }
+ }
+}
+
+@include pagination;
diff --git a/types/admin/tableTypes.ts b/types/admin/tableTypes.ts
index b22e4da2c..44af3784d 100644
--- a/types/admin/tableTypes.ts
+++ b/types/admin/tableTypes.ts
@@ -1,4 +1,8 @@
-export type TableName = 'notification' | 'userInfo' | 'feedback';
+export type TableName =
+ | 'notification'
+ | 'userInfo'
+ | 'feedback'
+ | 'announcement';
export type EtcType = 'button' | 'toggle';
export type TableFormat = {