[FIX] (#10) - fix modal style

CBNU-AACP · Sep 14, 2021 · 2309210 · 2309210
1 parent 4bfab25
commit 2309210
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 17 deletions.
diff --git a/src/components/addmemberList/modal/index.jsx b/src/components/addmemberList/modal/index.jsx
@@ -206,7 +206,7 @@ export default function AddmemberModal({ courseId, submitted, cookies }) {
     )
 
   const body = ( // 모달에 들어갈 내용
-    <div className="modal">
+    <div className={classes.paper}>
       <div className="col-md-8">
         <div className="input-group mb-3">
           <input
@@ -223,7 +223,7 @@ export default function AddmemberModal({ courseId, submitted, cookies }) {
           </div>
         </div>
       </div>
-      <div style={{ height: '30vh', width: '100%' }}>
+      <div style={{ width: '100%' }}>
         {rows.length !== 0 ? (
           <div>
             <DataGrid
@@ -269,7 +269,7 @@ export default function AddmemberModal({ courseId, submitted, cookies }) {
         </button>
         <p className="plustext">학생명단을 등록 및 수정하려면 버튼을 눌러주세요.</p>
       </div>
-      <Modal open={open} onClose={handleClose}>
+      <Modal className="frame" open={open} onClose={handleClose}>
         {body}
       </Modal>
     </StyledAddmemberModal>

diff --git a/src/components/addmemberList/modal/style.jsx b/src/components/addmemberList/modal/style.jsx
@@ -1,20 +1,40 @@
 import styled from 'styled-components'
 
 const Addmembermodal = styled.div`
-  .modal{
-    top: 50%,
-    left: 50%,
-    -webkit-transform: translate(-50%, -50%),
-    -ms-transform: translate(-50%, -50%),
-    -moz-transform: translate(-50%, -50%),
-    -o-transform: translate(-50%, -50%),
-    transform: translate(-50%, -50%),
-    position: absolute,
-    width: 60vw,
-    maxWidth: 100%,
-    height: 45vh,
-    backgroundColor: white,
-    padding: spacing(2, 4, 3),
+  .plusdiv {
+    display: flex;
+    .plusbutton {
+      padding: 0;
+      display: flex;
+      .plus {
+        width: 30px;
+        height: 30px;
+      }
+      .plus:hover {
+        color: green;
+      }
+    }
+    .plustext {
+      display: inline;
+      margin: auto 0;
+    }
+  }
+  .frame{
+    .modal{
+      top: 50%,
+      left: 50%,
+      -webkit-transform: translate(-50%, -50%),
+      -ms-transform: translate(-50%, -50%),
+      -moz-transform: translate(-50%, -50%),
+      -o-transform: translate(-50%, -50%),
+      transform: translate(-50%, -50%),
+      position: absolute,
+      width: 60vw,
+      maxWidth: 100%,
+      height: 45vh,
+      backgroundColor: white,
+      padding: spacing(2, 4, 3)},
+    }
   }
 `