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

페이지 대시보드 수정과 랜딩페이지 className 컨벤션으로 수정

Author: whdjh

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

@@ -1,4 +1,4 @@
-.title_container {
+.title-container {
 	width: 620px; 
 	height: 477px;
 	border-radius: 16px;
@@ -8,7 +8,7 @@
 	gap: 10px;
 }
 
-.member_section {
+.member-section {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -21,27 +21,27 @@
 	padding-left: 14px;
 }
 
-.button_section {
+.button-section {
 	display: flex;
   text-align: center;
   align-items: center;
   justify-content: center;
   gap: 20px;
 }
 
-.page_info {
+.page-info {
   margin-right: 20px;
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;
 }
 
-.invite_button_section {
+.invite-button-section {
   margin-top: 3px;
   display: block;
 }
 
-.invite_button {
+.invite-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -57,12 +57,12 @@
   color: var(--white);
 }
 
-.plus_button {
+.plus-button {
   width: 11.33px;
   height: 11.33px;
 }
 
-.sub_title {
+.sub-title {
 	margin-top: 20px;
 	font-weight: 400;
 	font-size: 16px;
@@ -71,54 +71,54 @@
 }
 
 @media screen and (max-width: 1199px) {
-	.title_container {
+	.title-container {
 		width: 544px;
 	}
 
-  .pagination_button {
+  .pagination-button {
     display: none;
   }
 
-	.sub_title {
+	.sub-title {
 		margin-top: 15px;
 	}
 }
 
 @media screen and (max-width: 743px) {
-	.title_container {
+	.title-container {
 		width: 284px;
 		height: 406px;
 		border-radius: 8px;
 		padding: 20px 16px 20px 16px;
 	}
 
-  .pagination_button {
+  .pagination-button {
     display: block;
   }
 
 	.title {
 		font-size: 20px;
 	}
 
-  .button_section { 
+  .button-section { 
     margin-top: 5px;
     flex-direction: column;
     gap: 0;
   }
 
-  .page_info {
+  .page-info {
     margin-right: 10px;
     font-weight: 400;
     font-size: 12px;
     line-height: 18px;
   }
 
-  .invite_button {
+  .invite-button {
     font-size: 12px;
     line-height: 18.71px;
   }
 
-	.sub_title {
+	.sub-title {
 		margin-top: 0px;
 		font-weight: 400;
 		font-size: 14px;

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

@@ -68,12 +68,12 @@ export default function InviteTitle() {
   };
 
   return (
-    <section className={styles.title_container}>
-      <div className={styles.member_section}>
+    <section className={styles['title-container']}>
+      <div className={styles['member-section']}>
         <h1 className={styles.title}>초대 내역</h1>
-        <div className={styles.button_section}>
-          <div className={styles.pagination_button}>
-            <span className={styles.page_info}>
+        <div className={styles['button-section']}>
+          <div className={styles['pagination-button']}>
+            <span className={styles['page-info']}>
               {totalPages} 페이지 중 {currentPage}
             </span>
             <CDSButton
@@ -87,19 +87,19 @@ export default function InviteTitle() {
               disabled={currentPage === totalPages}
             />
           </div>
-          <div className={styles.invite_button_section}>
+          <div className={styles['invite-button-section']}>
             <button
               type="button"
-              className={styles.invite_button}
+              className={styles['invite-button']}
               onClick={() => setIsModalOpen(true)}
             >
-              <WhitePlus className={styles.plus_button} /> 초대하기
+              <WhitePlus className={styles['plus-button']} /> 초대하기
             </button>
           </div>
         </div>
       </div>
-      <div className={styles.name_section}>
-        <h2 className={styles.sub_title}>이메일</h2>
+      <div className={styles['name-section']}>
+        <h2 className={styles['sub-title']}>이메일</h2>
         <InviteList members={members} />
       </div>
       <div>

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

@@ -1,4 +1,4 @@
-.title_container {
+.title-container {
 	width: 620px; 
 	height: 344px;
 	border-radius: 16px;
@@ -8,13 +8,13 @@
 	gap: 10px
 }
 
-.header_section {
+.header-section {
 	display: flex;
 	flex-direction: column;
 	gap: 40px;
 }
 
-.header_top {
+.header-top {
 	display: flex;
 	flex-direction: column;
 	gap: 24px;
@@ -26,37 +26,31 @@
 	line-height: 32px;
 }
 
-.sub_container {
+.sub-container {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
 
-.sub_title {
-	font-weight: 500;
-	font-size: 16px;
-	line-height: 26px;
-}
-
 .button {
 	width: 564px;
 }
 
 @media screen and (max-width: 1199px) {
-	.title_container {
+	.title-container {
 		width: 544px;
 	}
 }
 
 @media screen and (max-width: 743px) {
-	.title_container {
+	.title-container {
 		width: 284px;
 		height: 312px;
 		border-radius: 8px;
 		padding: 20px 16px 20px 16px;
 	}
 
-	.header_section {
+	.header-section {
 		gap: 32px;
 	}
 }

src/components/product/edit/MainTitle/MainTitle.tsx

@@ -35,11 +35,11 @@ export default function MainTitle({ dashboardtitle }: MainTitleProps) {
   };
 
   return (
-    <div className={styles.title_container}>
-      <div className={styles.header_section}>
-        <div className={styles.header_top}>
+    <div className={styles['title-container']}>
+      <div className={styles['header-section']}>
+        <div className={styles['header-top']}>
           <h1 className={styles.title}>{dashboardtitle}</h1>
-          <div className={styles.sub_container}>
+          <div className={styles['sub-container']}>
             <TitleTagInput
               label="대시보드 이름"
               placeholder="제목을 입력해주세요."
@@ -54,7 +54,7 @@ export default function MainTitle({ dashboardtitle }: MainTitleProps) {
             />
           </div>
         </div>
-        <div className={styles.sheader_button}>
+        <div className={styles['sheader-button']}>
           <CDSButton btnType="auth" onClick={handleEditClick}>
             변경
           </CDSButton>

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

@@ -1,4 +1,4 @@
-.title_container {
+.title-container {
 	width: 620px; 
 	height: 404px;
 	border-radius: 16px;
@@ -8,7 +8,7 @@
 	gap: 10px
 }
 
-.member_section {
+.member-section {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -28,14 +28,14 @@
   justify-content: center;
 }
 
-.page_info {
+.page-info {
   margin-right: 20px;
   font-weight: 400;
   font-size: 14px;
   line-height: 24px;
 }
 
-.sub_title {
+.sub-title {
 	margin-top: 20px;
 	margin-bottom: 10px;
 	font-weight: 400;
@@ -45,24 +45,24 @@
 }
 
 @media screen and (max-width: 1199px) {
-	.title_container {
+	.title-container {
 		width: 544px;
 	}
 
-	.sub_title {
+	.sub-title {
 		margin-top: 15px;
 	}
 }
 
 @media screen and (max-width: 743px) {
-	.title_container {
+	.title-container {
 		width: 284px;
 		height: 337px;
 		border-radius: 8px;
 		padding: 20px 16px 20px 16px;
 	}
 
-  .page_info {
+  .page-info {
     margin-right: 10px;
     font-weight: 400;
     font-size: 12px;
@@ -73,7 +73,7 @@
 		font-size: 20px;
 	}
 
-	.sub_title {
+	.sub-title {
 		margin-top: 10px;
 		font-weight: 400;
 		font-size: 14px;

src/components/product/edit/MemberTitle/MemberTitle.tsx

@@ -41,11 +41,11 @@ export default function MemberTitle() {
   };
 
   return (
-    <section className={styles.title_container}>
-      <div className={styles.member_section}>
+    <section className={styles['title-container']}>
+      <div className={styles['member-section']}>
         <h1 className={styles.title}>구성원</h1>
         <div className={styles.button}>
-          <span className={styles.page_info}>
+          <span className={styles['page-info']}>
             {totalPages} 페이지 중 {currentPage}
           </span>
           <CDSButton
@@ -60,8 +60,8 @@ export default function MemberTitle() {
           />
         </div>
       </div>
-      <div className={styles.name_section}>
-        <h2 className={styles.sub_title}>이름</h2>
+      <div className={styles['name-section']}>
+        <h2 className={styles['sub-title']}>이름</h2>
         <MemberList members={members} />
       </div>
     </section>