Merge pull request #161 from codeit-sprint-part3-6team/#59_페이지_대시보드_수정

페이지 대시보드 수정 - 초대내역, 구성원 style 수정

Author: whdjh

package-lock.json

@@ -3,36 +3,34 @@
 	justify-content: space-between;
 	padding-right: 28px;
 	padding-left: 28px;
-	margin-top: 10px;
+  margin-bottom: 16px;
 }
 
 .title {
-  margin-top: 6px;
   font-size: 18px;
   font-weight: 400;
   line-height: 26px;
 }
 
 .line {
-	margin-top: 10px;
+  margin-bottom: 16px;
   border: none;
   border-top: 1px solid var(--gray-bright); 
 }
 
 @media screen and (max-width: 743px) {
   .container {
-    padding-left: 0;
-    padding-right: 0;
-    margin-top: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 10px;
   }
 
   .title {
-    margin-top: 5px;
+    font-size: 14px;
+    line-height: 24px;
   }
 
   .line {
-    margin-top: 5px;
-    font-size: 14px;
-    line-height: 24px;
+    margin-bottom: 10px;
   }
 }

src/components/product/edit/InviteTitle/InviteList.module.css

@@ -12,14 +12,16 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
 }
 
 .title {
 	font-weight: 700;
 	font-size: 24px;
 	line-height: 32px;
-	padding-left: 14px;
-  margin-bottom: 20px;
+	padding-right: 28px;
+  padding-left: 28px;
 }
 
 .button-section {
@@ -65,8 +67,8 @@
 }
 
 .sub-title {
-	margin-top: 20px;
-  margin-left: 15px;
+	margin-top: 32px;
+  margin-left: 28px;
   margin-bottom: 20px;
 	font-weight: 400;
 	font-size: 16px;
@@ -79,10 +81,6 @@
 		width: 544px;
 	}
 
-  .pagination-button {
-    display: none;
-  }
-
 	.sub-title {
 		margin-top: 15px;
 	}
@@ -102,10 +100,12 @@
 
 	.title {
 		font-size: 20px;
+    padding-right: 15px;
+    padding-left: 15px;
+    margin-top: -30px;
 	}
 
   .button-section { 
-    margin-top: 5px;
     flex-direction: column;
     gap: 0;
   }
@@ -123,7 +123,7 @@
   }
 
 	.sub-title {
-		margin-top: -30px;
+		margin-top: -55px;
 		font-weight: 400;
 		font-size: 14px;
 		line-height: 24px;
@@ -132,4 +132,8 @@
   .invite-button-section {
     margin: 8px 0 0 auto;
   }
+
+  .list {
+    margin-top: 45px;
+  }
 }

src/components/product/edit/InviteTitle/InviteTitle.module.css

@@ -125,7 +125,9 @@ export default function InviteTitle() {
       </div>
       <div className={styles['name-section']}>
         <h2 className={styles['sub-title']}>이메일</h2>
-        <InviteList members={members} setMembers={setMembers} />
+        <div className={styles['list']}>
+           <InviteList members={members} setMembers={setMembers} />
+        </div>
       </div>
       <InviteModal
         label="이메일"

src/components/product/edit/InviteTitle/InviteTitle.tsx

@@ -3,7 +3,7 @@
 	justify-content: space-between;
 	padding-right: 28px;
 	padding-left: 28px;
-	margin-top: 10px;
+	margin-bottom: 16px;
 }
 
 .crown {
@@ -13,14 +13,14 @@
 }
 
 .line {
-	margin-top: 10px;
+	margin-bottom: 16px;
   border: none;
   border-top: 1px solid var(--gray-bright); 
 }
 
 @media screen and (max-width: 743px) {
   .container {
-    margin-top: 8px;
+    margin-bottom: 12px;
   }
 
   .crown {
@@ -31,6 +31,6 @@
   }
 
   .line {
-    margin-top: 13px;
+    margin-bottom: 12px;
   }
 }

src/components/product/edit/MemberTitle/MemberList.module.css

@@ -12,14 +12,15 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+  align-items: center;
+  margin-bottom: 27px;
 }
 
 .title {
 	font-weight: 700;
 	font-size: 24px;
 	line-height: 32px;
 	padding-left: 14px;
-  margin-bottom: 20px;
 }
 
 .button {
@@ -39,7 +40,7 @@
 .sub-title {
 	margin-top: 20px;
   margin-left: 15px;
-	margin-bottom: 20px;
+	margin-bottom: 19px;
 	font-weight: 400;
 	font-size: 16px;
 	line-height: 26px;
@@ -64,6 +65,9 @@
 		padding: 20px 16px 20px 16px;
 	}
 
+  .member-section  {
+    margin-bottom: 18px;
+  }
   .page-info {
     margin-right: 10px;
     font-weight: 400;