[Style] update notification table style #717

- 컨텐츠 영역부분 width 반응형으로 일부 적용 - 홀짝 행별 배경색 변경 - 폰트 크기 단위 rem으로 변경
42organization · Mar 8, 2023 · 3b7ccb3 · 3b7ccb3
1 parent bf82d33
commit 3b7ccb3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 27 deletions.
diff --git a/components/admin/notification/NotificationTable.tsx b/components/admin/notification/NotificationTable.tsx
@@ -13,7 +13,7 @@ import axios from 'axios';
 import PageNation from 'components/Pagination';
 import AdminSearchBar from 'components/admin/common/AdminSearchBar';
 import CreateNotiButton from 'components/admin/notification/CreateNotiButton';
-import style from 'styles/admin/notification/NotificationTable.module.scss';
+import styles from 'styles/admin/notification/NotificationTable.module.scss';
 import instance from 'utils/axios';
 
 interface INotification {
@@ -79,30 +79,33 @@ export default function NotificationTable() {
 
   return (
     <>
-      <div className={style.notificationWrap}>
-        <div className={style.header}>
-          <span className={style.title}>알림 관리</span>
+      <div className={styles.notificationWrap}>
+        <div className={styles.header}>
+          <span className={styles.title}>알림 관리</span>
           <AdminSearchBar initSearch={initSearch} />
           <CreateNotiButton />
         </div>
-        <TableContainer className={style.tableContainer} component={Paper}>
-          <Table className={style.table} aria-label='customized table'>
-            <TableHead className={style.tableHeader}>
+        <TableContainer className={styles.tableContainer} component={Paper}>
+          <Table className={styles.table} aria-label='customized table'>
+            <TableHead className={styles.tableHeader}>
               <TableRow>
                 {tableFormat['notification'].columns.map((columnName) => (
-                  <TableCell className={style.tableHeaderItem} key={columnName}>
+                  <TableCell
+                    className={styles.tableHeaderItem}
+                    key={columnName}
+                  >
                     {columnName}
                   </TableCell>
                 ))}
               </TableRow>
             </TableHead>
-            <TableBody className={style.tableBody}>
+            <TableBody className={styles.tableBody}>
               {notificationInfo.notiList.map((notification: INotification) => (
-                <TableRow key={notification.notiId}>
+                <TableRow key={notification.notiId} className={styles.tableRow}>
                   {tableFormat['notification'].columns.map(
                     (columnName: string, index: number) => {
                       return (
-                        <TableCell className={style.tableBodyItem} key={index}>
+                        <TableCell className={styles.tableBodyItem} key={index}>
                           {notification[
                             columnName as keyof INotification
                           ]?.toString()}
@@ -115,7 +118,7 @@ export default function NotificationTable() {
             </TableBody>
           </Table>
         </TableContainer>
-        <div className={style.pageNationContainer}>
+        <div className={styles.pageNationContainer}>
           <PageNation
             curPage={notificationInfo.currentPage}
             totalPages={notificationInfo.totalPage}

diff --git a/styles/admin/notification/NotificationTable.module.scss b/styles/admin/notification/NotificationTable.module.scss
@@ -1,41 +1,53 @@
 @import 'styles/admin/common/Pagination.module.scss';
+@import 'styles/common.scss';
 
 .notificationWrap {
   width: '100%';
   height: '100%';
 
   .header {
-    width: 700px;
-    margin: 10px auto;
     display: flex;
+    width: 70%;
+    min-width: 700px;
+    margin: 10px auto;
     justify-content: space-between;
     align-items: center;
+    .title {
+      font-weight: 600;
+      font-size: $giant-font;
+      line-height: 150%;
+    }
   }
-  .title {
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 150%;
-  }
+
   .tableContainer {
-    width: 700px;
+    width: 70%;
+    min-width: 700px;
     margin: auto;
     .table {
-      min-width: 700px;
       .tableHeader {
         background-color: lightgray;
         .tableHeaderItem {
-          padding: 10px;
+          padding: 0.7rem;
           text-align: center;
           font-weight: 600;
-          font-size: 14px;
+          font-size: $medium-font;
           line-height: 150%;
         }
       }
       .tableBody {
-        .tableBodyItem {
-          padding: 10px;
-          text-align: center;
-          line-height: 150%;
+        .tableRow {
+          &:nth-child(odd) {
+            background-color: #f9fafb;
+          }
+          &:nth-child(even) {
+            background-color: #fff;
+          }
+          .tableBodyItem {
+            padding: 10px;
+            text-align: center;
+            line-height: 150%;
+            font-size: $medium-font;
+          }
         }
       }
     }