From 5a55488e53d68f2485471ca6feada78d7e6410bc Mon Sep 17 00:00:00 2001
From: Raehyeon Jeong <raehy19@gmail.com>
Date: Fri, 24 Feb 2023 16:50:21 +0900
Subject: [PATCH] =?UTF-8?q?[Style]=20:=20=EA=B4=80=EB=A6=AC=EC=9E=90=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4=EC=A0=84=20=EA=B3=B5?=
 =?UTF-8?q?=EC=A7=80=EC=82=AC=ED=95=AD=EB=93=A4=EC=9D=84=20=EC=A1=B0?=
 =?UTF-8?q?=ED=9A=8C=20=ED=85=8C=EC=9D=B4=EB=B8=94=20css=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=20#677?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/announcement/AnnounceList.tsx       | 10 +++---
 pages/admin/announcement.tsx                  |  4 +--
 .../announcement/AnnounceList.module.scss     | 36 +++++++++----------
 .../announcement/announcement.module.scss     |  4 +++
 4 files changed, 28 insertions(+), 26 deletions(-)
 create mode 100644 styles/admin/announcement/announcement.module.scss

diff --git a/components/admin/announcement/AnnounceList.tsx b/components/admin/announcement/AnnounceList.tsx
index 27fd05e2b..6e0bb954b 100644
--- a/components/admin/announcement/AnnounceList.tsx
+++ b/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 });
diff --git a/pages/admin/announcement.tsx b/pages/admin/announcement.tsx
index d996a723e..3e1859d29 100644
--- a/pages/admin/announcement.tsx
+++ b/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>
diff --git a/styles/admin/announcement/AnnounceList.module.scss b/styles/admin/announcement/AnnounceList.module.scss
index c178a0865..d098d7e7c 100644
--- a/styles/admin/announcement/AnnounceList.module.scss
+++ b/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%;
       }
     }
   }
diff --git a/styles/admin/announcement/announcement.module.scss b/styles/admin/announcement/announcement.module.scss
new file mode 100644
index 000000000..a386e82a0
--- /dev/null
+++ b/styles/admin/announcement/announcement.module.scss
@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}