[Feat] : 관리자 페이지 이전 공지사항들을 조회할 수 있도록 기능 추가하고 백엔드 api와 연동 #677

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: () => <p>Loading ...</p>,
+});
+
+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<IAnnouncementTable>({
+    announcementList: [],
+    totalPage: 0,
+    currentPage: 0,
+  });
+  const [currentPage, setCurrentPage] = useState<number>(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 <div>비어있습니다!</div>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <span className={styles.title}>과거 공지사항</span>
+      </div>
+      <TableContainer className={styles.tableContainer} component={Paper}>
+        <Table className={styles.table} aria-label='customized table'>
+          <TableHead className={styles.tableHeader}>
+            <TableRow>
+              {tableFormat['announcement'].columns.map((columnName) => (
+                <TableCell className={styles.tableHeaderItem} key={columnName}>
+                  {columnName}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody className={styles.tableBody}>
+            {announcementInfo.announcementList.map(
+              (announcement: IAnnouncement, index: number) => (
+                <TableRow key={index}>
+                  {tableFormat['announcement'].columns.map(
+                    (columnName: string, index: number) => {
+                      return columnName == 'content' ? (
+                        <TableCell>
+                          <Quill
+                            className={styles.quillViewer}
+                            readOnly={true}
+                            formats={QUILL_FORMATS}
+                            value={announcement[
+                              columnName as keyof IAnnouncement
+                            ]?.toString()}
+                            theme='bubble'
+                          />
+                        </TableCell>
+                      ) : (
+                        <TableCell className={styles.tableBodyItem} key={index}>
+                          {announcement[
+                            columnName as keyof IAnnouncement
+                          ]?.toString()}
+                        </TableCell>
+                      );
+                    }
+                  )}
+                </TableRow>
+              )
+            )}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      <div className={styles.pageNationContainer}>
+        <PageNation
+          curPage={announcementInfo.currentPage}
+          totalPages={announcementInfo.totalPage}
+          pageChangeHandler={(pageNumber: number) => {
+            setCurrentPage(pageNumber);
+          }}
+        />
+      </div>
+    </div>
+  );
+}

constants/admin/table.ts

@@ -36,4 +36,15 @@ export const tableFormat: TableFormat = {
       value: ['completed', 'notCompleted'],
     },
   },
+  announcement: {
+    name: '과거 공지사항',
+    columns: [
+      'content',
+      'createdTime',
+      'creatorIntraId',
+      'deletedTime',
+      'deleterIntraId',
+      'isDel',
+    ],
+  },
 };

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 (
     <div>
       <AnnounceEdit />
+      <AnnounceList />
     </div>
   );
 }

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;

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 = {