Merge pull request #80 from codeit-sprint-part3-6team/#75_페이지_나의대시보드

#75 나의 대시보드 페이지 반응형 디자인

Author: dlwnsl

src/components/common/sidebar/.gitkeep

@@ -1,7 +1,11 @@
+.dashboard-container {
+  max-width: 1022px;
+  margin-left: 340px;
+}
+
 .dashboard-list {
   max-width: 1022px;
   padding-top: 40px;
-  margin-left: 340px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 13px;
@@ -22,11 +26,11 @@
 }
 
 .pagination {
-  margin-left: 340px;
   margin-top: 12px;
   display: flex;
   align-items: center;
   gap: 16px;
+  justify-content: flex-end;
 }
 
 .pagination-text {
@@ -36,24 +40,28 @@
 }
 
 @media screen and (max-width: 1199px) {
+  .dashboard-container {
+    margin-left: 200px;
+  }
   .dashboard-list {
     max-width: 504px;
-    margin-left: 200px;
     grid-template-columns: repeat(2, 1fr);
   }
 
   .pagination {
-    margin-left: 200px;
+    max-width: 504px;
   }
 }
 
 @media screen and (max-width: 743px) {
-  .dashboard-list {
+  .dashboard-container {
     margin-left: 90px;
+  }
+  .dashboard-list {
     grid-template-columns: repeat(1, 1fr);
   }
 
   .pagination {
-    margin-left: 90px;
+    max-width: 260px;
   }
 }

src/components/product/mydashboard/DashboardList.module.css

@@ -38,45 +38,56 @@
   margin-top: 24px;
   margin-left: 340px;
   background-color: var(--white);
-  width: 1022px;
+  max-width: 1022px;
 }
 
 .table {
-  width: 1022px;
-  padding: 0 76px;
+  width: 100%;
+  border-collapse: collapse;
+  padding-left: 60px;
 }
 
-.table-head {
-  width: 798px;
-  display: flex;
-  justify-content: space-between;
+.table-head th,
+.table-body td {
+  text-align: left;
+  padding: 20px 76px;
+  border-bottom: 1px solid var(--gray-bright);
 }
 
-.table-title {
+.table-head th:nth-child(3),
+.table-body td:nth-child(3) {
+  text-align: center;
+  justify-content: center;
+}
+
+.table-head th {
   font-size: 16px;
   font-weight: 400;
   color: var(--gray-dark);
-  text-align: left;
-  padding-bottom: 20px;
 }
 
-.table-body {
-  width: 860px;
-  display: flex;
-  gap: 235px;
-}
-
-.table-content {
+.table-body td {
   font-size: 16px;
   font-weight: 400;
   color: var(--black-medium);
-  margin-bottom: 30px;
+}
+
+.table-content-title {
+  display: none;
+}
+
+.invitation-btn {
+  display: flex;
+  gap: 10px;
+}
+
+.table-body tr:last-child td {
+  border-bottom: none; /* 마지막 줄은 선 제거 */
 }
 
 .invitation-btn {
   display: flex;
   gap: 10px;
-  margin-left: 40px;
   font-weight: 500;
 }
 
@@ -85,11 +96,94 @@
     max-width: 504px;
     margin-left: 200px;
   }
+
+  .table {
+    max-width: 450px;
+    margin-left: 28px;
+  }
+
+  .table-head th,
+  .table-body td {
+    padding: 20px 0;
+  }
+
+  .head {
+    padding: 18px 28px;
+    margin-top: 48px;
+  }
 }
 
 @media screen and (max-width: 743px) {
   .invitation-container {
     max-width: 260px;
     margin-left: 90px;
   }
+
+  .head {
+    padding: 24px 16px;
+    margin-top: 24px;
+  }
+
+  .table-content-title {
+    display: flex;
+    gap: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--gray-dark);
+    width: 38px;
+  }
+
+  .table-content {
+    display: flex;
+    gap: 24px;
+  }
+
+  .table-body td {
+    border: none;
+    margin-bottom: 3px;
+  }
+}
+
+@media screen and (max-width: 743px) {
+  .table {
+    display: block; /* 테이블 레이아웃을 블록으로 변경 */
+    width: 100%;
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .table-head {
+    display: none; /* 헤더는 모바일에서 숨김 */
+  }
+
+  .table-body {
+    display: flex;
+    flex-direction: column; /* 세로 카드 구조 */
+    width: 100%;
+    margin-bottom: 8px;
+    padding: 10px 16px;
+    background-color: var(--white);
+    border-bottom: 1px solid var(--gray-bright);
+  }
+
+  .table-body tr {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 12px;
+  }
+
+  .table-body td {
+    display: flex;
+    padding: 4px 0;
+    font-size: 14px;
+    color: var(--black-medium);
+  }
+
+  /* 수락/거절 버튼 */
+  .invitation-btn {
+    justify-content: flex-start;
+    margin-top: 10px;
+  }
 }

src/components/product/mydashboard/InvitationList.module.css

@@ -141,10 +141,16 @@ export default function InvitationList() {
             {invitations.map((invite) => (
               <tr key={invite.id} className={styles['table-body']}>
                 <td className={styles['table-content']}>
-                  {invite.dashboard.title}
+                  <span className={styles['table-content-title']}>이름</span>
+                  <span className={styles['table-content-dashboard']}>
+                    {invite.dashboard.title}
+                  </span>
                 </td>
                 <td className={styles['table-content']}>
-                  {invite.inviter.nickname}
+                  <span className={styles['table-content-title']}>초대자</span>
+                  <span className={styles['table-content-dashbaord']}>
+                    {invite.inviter.nickname}
+                  </span>
                 </td>
                 <td className={styles['invitation-btn']}>
                   {invite.inviteAccepted ? (