MovieTable-상영일 추가 / custom.scss-table style 살리기

client/src/components/MovieTable/MovieTable.js

@@ -7,6 +7,7 @@ const MovieTable = () => {
                 <tr>
                     <th>제목</th>
                     <th>감독</th>
+                    <th>상영일</th>
                     <th>줄거리</th>
                     <th>포스터</th>
                     <th>스틸컷</th>
@@ -17,13 +18,14 @@ const MovieTable = () => {
                 <tr className={styles.Row} data-bs-toggle="collapse" data-bs-target={"#movie1"}>
                     <td className="d-inline-block d-md-table-cell">블랙위도우</td>
                     <td data-label="- " className={`d-inline-block d-md-table-cell ${styles.data}`}>케이트 쇼트랜드</td>
+                    <td data-label="/ " className={`d-inline-block d-md-table-cell ${styles.data}`}>2021-07-07</td>
                     <td className="d-none d-md-table-cell">O</td>
                     <td className="d-none d-md-table-cell">O</td>
                     <td className="d-none d-md-table-cell">X</td>
                     <td className="d-none d-md-table-cell">X</td>
                 </tr>
                 <tr className={styles.Row}>
-                    <td colSpan="6" className="collapse" id={"movie1"}>
+                    <td colSpan="7" className="collapse" id={"movie1"}>
                         <div className={`d-inline-block d-md-none ${styles.word} mb-2`}>
                             줄거리 - O /
                             포스터 - O /
@@ -31,7 +33,6 @@ const MovieTable = () => {
                             예고편 - X
                         </div>
                         <div className="d-flex justify-content-end">
-                            <button type="button" className="btn btn-primary mx-2">수정</button>
                             <button type="button" className="btn btn-danger">삭제</button>
                         </div>
                     </td>

client/src/scss/custom.scss

@@ -41,17 +41,17 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
   font-style: normal;
 }
 
-// @media (max-width: 767px) {
-//     .carousel-inner .carousel-item > div {
-//         display: none;
-//     }
-//     .carousel-inner .carousel-item > div:first-child {
-//         display: block;
-//     }
-//     .table > :not(caption) > * > * {
-//         border-bottom-width: 0;
-//     }
-// }
+@media (max-width: 767px) {
+    // .carousel-inner .carousel-item > div {
+    //     display: none;
+    // }
+    // .carousel-inner .carousel-item > div:first-child {
+    //     display: block;
+    // }
+    .table > :not(caption) > * > * {
+        border-bottom-width: 0;
+    }
+}
 
 // /* medium and up screens */
 // @media (min-width: 768px) {