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