MovieTable

client/src/components/MovieTable/MovieTable.js

+import styles from "./movie-table.module.scss";
+
+const MovieTable = () => {
+    return (
+        <table className={`table text-center ${styles.tableForm}`}>
+            <thead className={`table-dark ${styles.dNone}`}>
+                <tr>
+                    <th>제목</th>
+                    <th>감독</th>
+                    <th>줄거리</th>
+                    <th>포스터</th>
+                    <th>스틸컷</th>
+                    <th>예고편</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr className={styles.Row} data-bs-toggle="collapse" data-bs-target={"#movie"}>
+                    <td className={styles.dInLine}>블랙위도우</td>
+                    <td data-label="- " className={`${styles.data} ${styles.dInLine}`}>케이트 쇼트랜드</td>
+                    <td className={styles.dNone}>O</td>
+                    <td className={styles.dNone}>O</td>
+                    <td className={styles.dNone}>X</td>
+                    <td className={styles.dNone}>X</td>
+                </tr>
+                <tr>
+                    <div className="collapse" id={"movie"}>
+                        <td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>줄거리 - O</td>
+                        <td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>포스터 - O</td>
+                        <td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>스틸컷 - X</td>
+                        <td className={`${styles.data} ${styles.allDNone} ${styles.dInLine}`}>예고편 - X</td>
+                        <div className="d-flex justify-content-end mt-1">
+                            <button type="button" className="btn btn-primary mx-2">수정</button>
+                            <button type="button" className="btn btn-danger">삭제</button>
+                        </div>
+                    </div>
+                </tr>
+            </tbody>
+        </table>
+    )
+}
+
+export default MovieTable
\ No newline at end of file

client/src/components/MovieTable/index.js

+export { default } from "./MovieTable"
\ No newline at end of file

client/src/components/MovieTable/movie-table.module.scss

+.Row:hover {
+    background: rgba(0, 0, 0, 0.075);
+}
+
+.allDNone {
+    display: none;
+}
+
+@media screen and (max-width: 767px) {
+    .tableForm {
+        border-top: 2px solid;
+
+        & .dNone {
+            display: none;
+            border: 0;
+        }
+
+        & .dInLine {
+            display: inline-block;
+        }
+
+        & .Row {
+            border-bottom: 2px solid;
+
+            & .data::before {
+                content: attr(data-label);
+                font-weight: bold;
+            }
+        }
+    }
+};
\ No newline at end of file

client/src/scss/custom.scss

@@ -48,6 +48,9 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
     .carousel-inner .carousel-item > div:first-child {
         display: block;
     }
+    .table > :not(caption) > * > * {
+        border-bottom-width: 0;
+    }
 }
 
 /* medium and up screens */
@@ -67,8 +70,4 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 .carousel-inner .carousel-item-end,
 .carousel-inner .carousel-item-start { 
   transform: translateX(0);
-}
-
-// .nav-link{
-//   color: yellow;
-// }
\ No newline at end of file
+}
\ No newline at end of file