상영시간표 완료

client/src/components/Admin/TimeTable.js

 import { useState, useEffect } from "react";
+import { useHistory } from "react-router-dom";
 import moment from 'moment';
 import HorizontalCalender from "../Calender/HorizontalCalender.js";
 import timetableApi from "../../apis/timetable.api.js";
@@ -9,6 +10,7 @@ const TimeTable = ({ ticketInfo = { movieId: 0 }, setTicketInfo }) => {
     const [selectDate, setSelectDate] = useState(moment().format('YYYY-MM-DD'))
     const [timeList, setTimeList] = useState([])
     const [error, setError] = useState("")
+    const history = useHistory()
 
     useEffect(() => {
         getTimeTable(selectDate, ticketInfo.movieId)
@@ -52,7 +54,7 @@ const TimeTable = ({ ticketInfo = { movieId: 0 }, setTicketInfo }) => {
             timetableId: time.id,
             time: time.date.split('T')[0] + " " + hours + ":" + mins,
             selectedTheater: time.theater.theaterName,
-            theaterId:time.theaterId,
+            theaterId: time.theaterId,
             partTime: time.partTime,
             week: time.week
         })
@@ -62,30 +64,28 @@ const TimeTable = ({ ticketInfo = { movieId: 0 }, setTicketInfo }) => {
         <>
             <HorizontalCalender selectDate={selectDate} setSelectDate={setSelectDate} />
             {timeList.length !== 0 ?
-                timeList.map(el => <div className="mt-4">
+                timeList.map(el => <div className={"mt-4" + (/theater/g.test(history.location.pathname) ? " text-start" : "")}>
                     <h5 className="mb-0">{el.theaterName} 관 / <p className="d-inline fs-6 mb-0">{el.theaterTypeName}</p></h5>
                     {el.timetable.map(time => {
-                        if (ticketInfo.movieId !== 0)
+                        if (/ticket/g.test(history.location.pathname))
                             return <div className="d-inline-flex m-2">
                                 <div className={`card text-dark ${styles.cursor}`} onClick={() => handleClick(time)}>
-                                    <div className="card-body py-1"><img src={`${time.partTime==="morning"?'/images/sun.svg': time.partTime==="night"?'/images/moon.svg' :'...'} `} style={{width:'20px'}} alt=""/>{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
+                                    <div className="card-body py-1"><img src={`${time.partTime === "morning" ? '/images/sun.svg' : time.partTime === "night" ? '/images/moon.svg' : '...'} `} style={{ width: '20px' }} alt="" />{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
                                     <div className="card-footer text-center py-1">{time.theater.rows * time.theater.columns - time.reservations} / {time.theater.rows * time.theater.columns}</div>
                                 </div>
                             </div>
                         else return <div className="d-inline-flex flex-column m-2">
-                            <div className="d-flex justify-content-end">
+                            {/theater/g.test(history.location.pathname) ? null : <div className="d-flex justify-content-end">
                                 <button type="button" className={`btn btn-dark btn-sm shadow-none ${styles.customBtn}`} onClick={() => deleteTime(time.id)}>X</button>
-                            </div>
-                            <div className="card">
+                            </div>}
+                            <div className={"card" + (/theater/g.test(history.location.pathname) ? " text-dark" : "")}>
                                 <div className="card-body py-1">{moment(time.start_time).format('HH:mm')} ~ {moment(time.end_time).format('HH:mm')}</div>
                                 <div className="card-footer text-center py-1">{time.title}</div>
                             </div>
                         </div>
                     })}
                 </div>)
-                : <p className="text-center mt-5 mb-0">서버에 저장되어 있는 상영시간표가 존재하지 않습니다.
-                    {/* <br />아래의 양식을 작성해 새로운 상영시간표를 등록해주세요. */}
-                </p>}
+                : <p className="text-center mt-5 mb-0">서버에 저장되어 있는 상영시간표가 존재하지 않습니다.</p>}
         </>
     )
 }

client/src/pages/TheaterPage.js

 import { useState, useEffect } from 'react'
-import TicketFeeTable from '../components/Admin/TicketFeeTable'
 import TheaterInfo from '../components/TheaterInfo'
+import TimeTable from "../components/Admin/TimeTable"
+import TicketFeeTable from '../components/Admin/TicketFeeTable'
 import cinemaApi from "../apis/cinema.api.js"
 import theaterApi from '../apis/theater.api.js'
 import catchErrors from "../utils/catchErrors.js"
@@ -38,7 +39,7 @@ const TheaterPage = () => {
     }
 
     return (
-        <>
+        <div className="pb-5">
             <div>
                 <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
                     <li className="nav-item" role="presentation">
@@ -57,7 +58,11 @@ const TheaterPage = () => {
                     <TheaterInfo />
                 </div>
                 <div className="tab-pane fade" id="stillcut" role="tabpanel" aria-labelledby="stillcut-tab">
-                    <div className="pb-5">상영시간표</div>
+                    <div className="d-flex justify-content-center">
+                        <div className="col-12 col-md-10 col-lg-9 px-3 px-md-0">
+                            <TimeTable />
+                        </div>
+                    </div>
                 </div>
                 <div className="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
                     <div className="d-flex justify-content-center">
@@ -74,7 +79,7 @@ const TheaterPage = () => {
                     </div>
                 </div>
             </div>
-        </>
+        </div>
     )
 }