MovieTable - 등록버튼 삭제 및 data에 따른 버튼 및 내용 보여주기

client/src/components/MovieTable/MovieTable.js

@@ -31,16 +31,12 @@ const MovieTable = ({ movieList }) => {
     }
 
     return (
-        <table className={`table text-center ${styles.tableForm}`}>
+        <table className={`table text-center align-middle ${styles.tableForm}`}>
             <thead className={`table-dark ${styles.dNone}`}>
                 <tr>
-                    <th>제목</th>
-                    <th>감독</th>
-                    <th>상영일</th>
-                    <th>줄거리</th>
-                    <th>포스터</th>
-                    <th>스틸컷</th>
-                    <th>예고편</th>
+                    <th className="col-md-5">제목</th>
+                    <th className="col-md-4">감독</th>
+                    <th className="col-md-3">상영일</th>
                 </tr>
             </thead>
             <tbody>
@@ -48,24 +44,15 @@ const MovieTable = ({ movieList }) => {
                     <>
                         <tr className={styles.Row} data-bs-toggle="collapse" data-bs-target={"#movie" + movie.id}>
                             <td className="d-inline-block d-md-table-cell">{movie.title}</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}`}>{movie.release_date}</td>
-                            <td className="d-none d-md-table-cell">{movie.overview !== '' ? 'O' : 'X'}</td>
-                            <td className="d-none d-md-table-cell">{movie.poster_path !== '' ? 'O' : 'X'}</td>
-                            <td className="d-none d-md-table-cell">{movie.backdrop_path !== '' ? 'O' : 'X'}</td>
-                            <td className="d-none d-md-table-cell">{movie.video !== false ? 'O' : 'X'}</td>
+                            <td className="d-none d-md-table-cell">{movie.director}</td>
+                            <td className="d-none d-md-table-cell">{movie.release_date}</td>
                         </tr>
                         <tr className={styles.Row}>
-                            <td colSpan="7" className="collapse" id={"movie" + movie.id}>
-                                <div className={`d-inline-block d-md-none ${styles.word} mb-2`}>
-                                    줄거리 - {movie.overview !== '' ? 'O' : 'X'} /
-                                    포스터 - {movie.poster_path !== '' ? 'O' : 'X'} /
-                                    스틸컷 - {movie.backdrop_path !== '' ? 'O' : 'X'} /
-                                    예고편 - {movie.video !== false ? 'O' : 'X'}
-                                </div>
+                            <td colSpan="3" className="collapse" id={"movie" + movie.id}>
+                                <div className={`d-inline-block d-md-none ${styles.word} mb-2`}>{movie.director} / {movie.release_date}</div>
                                 <div className="d-flex justify-content-end">
                                     {movie.existed ? <button type="button" className="btn btn-danger" onClick={(e) => handleDelete(e, movie.id)}>삭제</button>
-                                    : <button type="button" className="btn btn-primary" onClick={(e) => handleSubmit(e, movie.id)}>등록</button>}
+                                        : <button type="button" className="btn btn-primary" onClick={(e) => handleSubmit(e, movie.id)}>등록</button>}
                                 </div>
                             </td>
                         </tr>

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

@@ -20,11 +20,6 @@
 
         & .Row {
             border-bottom: 2px solid;
-
-            & .data::before {
-                content: attr(data-label);
-                font-weight: bold;
-            }
         }
     }
 };
\ No newline at end of file