[Style] : 관리자 페이지 이전 공지사항들을 조회 테이블 css 작업 #677

components/admin/announcement/AnnounceList.tsx

@@ -1,8 +1,8 @@
 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 PageNation from 'components/Pagination';
+import { tableFormat } from 'constants/admin/table';
 import { QUILL_FORMATS } from 'types/quillTypes';
 import {
   Paper,
@@ -13,8 +13,8 @@ import {
   TableHead,
   TableRow,
 } from '@mui/material';
-import { tableFormat } from '../../../constants/admin/table';
-import PageNation from '../../Pagination';
+import 'react-quill/dist/quill.snow.css';
+import 'react-quill/dist/quill.bubble.css';
 import styles from 'styles/admin/announcement/AnnounceList.module.scss';
 
 const Quill = dynamic(() => import('react-quill'), {
@@ -48,7 +48,7 @@ export default function AnnounceList() {
   const getAnnouncements = useCallback(async () => {
     try {
       const res = await instance.get(
-        `pingpong/admin/announcement?page=${currentPage}&size=10`
+        `pingpong/admin/announcement?page=${currentPage}&size=5`
       );
       console.log(res.data);
       setAnnouncementInfo({ ...res.data });

pages/admin/announcement.tsx

@@ -1,9 +1,9 @@
 import AnnounceEdit from 'components/admin/announcement/AnnounceEdit';
 import AnnounceList from 'components/admin/announcement/AnnounceList';
-
+import styles from 'styles/admin/announcement/announcement.module.scss';
 export default function Announcement() {
   return (
-    <div>
+    <div className={styles.container}>
       <AnnounceEdit />
       <AnnounceList />
     </div>

styles/admin/announcement/AnnounceList.module.scss

@@ -2,18 +2,22 @@
 @import 'styles/admin/common/Pagination.module.scss';
 
 .container {
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem;
   width: 100%;
+  max-width: 61.5rem;
   height: 100%;
 }
 
 .quillViewer {
   width: 100%;
-  min-width: 10rem;
-  max-width: 15rem;
+  max-width: 16rem;
   height: 100%;
   max-height: 19rem;
+  margin: 0.5rem;
+  padding: 0;
   overflow-y: scroll;
-  margin: 1rem 0;
   color: black;
 }
 
@@ -25,47 +29,41 @@
 
 .quillViewer::-webkit-scrollbar-thumb {
   border-radius: 10px;
-  background: white;
+  background: $gray;
 }
 
 .header {
-  width: 700px;
-  margin: 10px auto;
+  width: 100%;
+  padding: 0.5rem 1rem;
   display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
 .title {
-  font-weight: 600;
-  font-size: 18px;
+  font-weight: 700;
+  font-size: $big-font;
   line-height: 150%;
 }
 
 .tableContainer {
-  width: 700px;
-  margin: auto;
-
   .table {
-    min-width: 700px;
-
     .tableHeader {
       background-color: lightgray;
 
       .tableHeaderItem {
-        padding: 10px;
+        padding: 0.5rem;
         text-align: center;
         font-weight: 600;
-        font-size: 14px;
+        font-size: $small-font;
         line-height: 150%;
       }
     }
 
     .tableBody {
       .tableBodyItem {
-        padding: 10px;
+        padding: 0.5rem;
         text-align: center;
-        line-height: 150%;
+        font-size: $small-font;
+        line-height: 100%;
       }
     }
   }

styles/admin/announcement/announcement.module.scss

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}