Merge branch 'kimpen'

client/src/App.js

@@ -37,7 +37,7 @@ function App() {
               <Route path="/movielist" component={MovieListPage} />
               <Route path="/movie/:movieId" component={MoviePage} />
               <Route path="/mypage" component={MyPage} />
-              <Route path="/guest" component={GuestPage}/>
+              <Route path="/guest" component={GuestPage} />
               <Route path="/ticket/seat" component={TicketingSeatPage} />
               <Route path="/ticket" component={TicketingPage} />
               <Route path="/payment" component={PaymentPage} />
@@ -47,7 +47,6 @@ function App() {
               <Route path="/search" component={SearchPage} />
             </Switch>
           </div>
-
         </Switch>
       </Router>
     </AuthProvider>

client/src/components/Admin/TimeTable.js

@@ -65,8 +65,7 @@ const TimeTable = ({ ticketInfo = { movieId: 0 }, setTicketInfo }) => {
                 timeList.map(el => <div className="mt-4">
                     <h5 className="mb-0">{el.theaterName} 관 / <p className="d-inline fs-6 mb-0">{el.theaterTypeName}</p></h5>
                     {el.timetable.map(time => {
-                        console.log("timetable==", time)
-                        if (ticketInfo)
+                        if (ticketInfo.movieId !== 0)
                             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>

client/src/components/BoxOffice/BoxOffice.js

+import { Link } from "react-router-dom"
+
 const BoxOffice = ({ TMDB_TopRated_Data }) => {
 
     return (
         <div className="container text-center my-3">
+            <h2 className="fw-bold text-white text-center my-5">BoxOffice</h2>
             {console.log(TMDB_TopRated_Data)}
             <div id="carouselExampleControls" className="carousel slide" data-bs-ride="carousel">
                 <div className="carousel-inner">
                     {TMDB_TopRated_Data.length > 0
                         ?
-                        TMDB_TopRated_Data.map((movie, index) => {
+                        TMDB_TopRated_Data.map((movie, index) =>
                             <div className={`carousel-item ${index === 0 ? " active" : ""}`}>
-                                {console.log(movie.poster_path)}
-                                <img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className="d-block w-100" alt="Movie Poster" />
+                                <Link to={{
+                                    pathname: `/movie/${movie.id}`,
+                                    state: {
+                                        ...movie
+                                    }
+                                }}
+                                >
+                                    <img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} style={{ width: "200px" }} className="" alt="Movie Poster" />
+
+                                </Link>
+                                <div className="mt-1 text-white">{index + 1}위</div>
                             </div>
-                        })
+                        )
                         :
                         <div className="carousel-item">
                             {console.log("스틸컷 불러오기 오류")}

client/src/components/Collection.js

@@ -23,7 +23,7 @@ const Collection = ({ TMDB_TopRated_Data }) => {
     return (
         <>
             <h2 className="fw-bold text-white text-center my-5">Movie Collection</h2>
-            <div className="d-flex justify-content-sm-center" style={{ marginBottom: "8rem" }}>
+            <div className="row justify-content-sm-center" style={{ marginBottom: "8rem" }}>
                 <div className="col-sm-8">
                     {videoUrls.length > 0
                         ?

client/src/components/PrivateRoute.js

+import { Redirect, Route } from "react-router-dom";
+import authApi from "../apis/auth.api.js";
+import { useAuth } from "../context/auth_context";
+import ErrorPage from "../pages/ErrorPage";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+
+    return (
+        <Route
+            {...rest}
+            render={(props) => {
+                if (user.id) {
+                    if (rest.role) {
+                        if (rest.role === user.role) {
+                            return <Component {...props} />;
+                        } else {
+                            return <ErrorPage />
+                        }
+                    } else {
+                        return <Component {...props} />
+                    }
+                } else {
+                    alert("로그인이 필요한 기능입니다.")
+                    return <Redirect to="/login" />;
+                }
+            }}
+        />
+    );
+};
+
+export default PrivateRoute
\ No newline at end of file

client/src/pages/ErrorPage.js

+const ErrorPage = () => {
+    return (
+        <div className="bg-white" id="notfound">
+            <div className="notfound">
+                <div className="notfound-404" style={{ backgroundImage: `url(/images/emoji.png)` }}></div>
+                <h1>404</h1>
+                <h2>Oops! Page Not Be Found</h2>
+                <p>Sorry but the page you are looking for does not exist, have been removed. name changed or is temporarily unavailable</p>
+                <a href="/">Back to homepage</a>
+            </div>
+        </div>
+    )
+}
+
+export default ErrorPage
\ No newline at end of file

client/src/pages/TicketingSeatPage.js

@@ -121,18 +121,17 @@ const TicketingSeatPage = ({ location }) => {
                         <h3 className="py-2 text-white text-center" style={{ border: "3px solid #000000", borderBottom: "3px solid #FEDC00" }}>좌석선택</h3>
                     </div>
                 </div>
-                <div className="row justify-content-center my-3">
-                    <div className="col-sm-4 mb-4">
-                        <div className="row text-end justify-content-sm-end">
-                            <div className="col-sm-6 me-5" >
+                <div className="d-flex flex-md-row flex-column-reverse justify-content-center my-3">
+                    <div className="col-md-4 mb-4">
+                        <div className="d-flex flex-column flex-sm-row flex-md-column justify-content-center text-sm-end text-center me-md-5">
                             <div>
-                                    <span className="my-1">일반</span>
+                                <p className="d-inline-block col-3 col-sm-auto mb-0">일반</p>
                                 <span>
                                     <CountButton name="adult" count={count} setCount={setCount} />
                                 </span>
                             </div>
                             <div>
-                                    <span className="my-1">청소년</span>
+                                <p className="d-inline-block col-3 col-sm-auto mb-0">청소년</p>
                                 <span>
                                     {ticketInfo.adult
                                         ?
@@ -143,25 +142,24 @@ const TicketingSeatPage = ({ location }) => {
                                 </span>
                             </div>
                             <div>
-                                    <span className="my-1">경로우대</span>
+                                <p className="d-inline-block col-3 col-sm-auto mb-0">경로우대</p>
                                 <span>
                                     <CountButton name="senior" count={count} setCount={setCount} />
                                 </span>
                             </div>
                         </div>
                     </div>
-                    </div>
-                    <div className="col-sm-5 mb-4 p-2 text-center" style={{ backgroundColor: '#252525' }}>
+                    <div className="col-md-5 mb-4 p-2 text-center" style={{ backgroundColor: '#252525' }}>
                         <div>{ticketInfo.cinema} | {ticketInfo.selectedTheater}관</div>
                         <div>{ticketInfo.title}</div>
                         <div>{ticketInfo.time}</div>
                     </div>
                 </div>
-                <div className="row justify-content-center border p-5 ">
-                    <div className="col-md-8">
+                <div className="d-flex flex-column align-items-center border p-5">
+                    <div className="col-md-8 col-lg-7">
                         <SeatTable count={count} setSelectedSeats={setSelectedSeats} selectedSeats={selectedSeats} theaterInfo={theaterInfo} reservedSeats={reservedSeats} />
                     </div>
-                    <div className="col-md-4 mt-5">
+                    <div className="col-auto mt-5">
                         <div>
                             <button className={styles.on} style={{ height: '1rem', width: '1rem' }} disabled></button>
                             <span> 선택됨</span>

client/src/scss/custom.scss

@@ -80,3 +80,94 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 .page-link:hover, .page-link:focus {
     background-color: #fff;
 }
+
+#notfound {
+    position: relative;
+    height: 100vh;
+}
+  
+#notfound .notfound {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+}
+  
+.notfound {
+    max-width: 560px;
+    width: 100%;
+    padding-left: 160px;
+    line-height: 1.1;
+}
+  
+.notfound .notfound-404 {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: inline-block;
+    width: 140px;
+    height: 140px;
+    background-size: cover;
+}
+  
+.notfound .notfound-404:before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-transform: scale(2.4);
+        -ms-transform: scale(2.4);
+            transform: scale(2.4);
+    border-radius: 50%;
+    background-color: #f2f5f8;
+    z-index: -1;
+}
+  
+.notfound h1 {
+    font-family: 'Nunito', sans-serif;
+    font-size: 65px;
+    font-weight: 700;
+    margin-top: 0px;
+    margin-bottom: 10px;
+    color: #151723;
+    text-transform: uppercase;
+}
+  
+.notfound h2 {
+    font-family: 'Nunito', sans-serif;
+    font-size: 21px;
+    font-weight: 400;
+    margin: 0;
+    text-transform: uppercase;
+    color: #151723;
+}
+  
+.notfound p {
+    font-family: 'Nunito', sans-serif;
+    color: #999fa5;
+    font-weight: 400;
+}
+  
+.notfound a {
+    font-family: 'Nunito', sans-serif;
+    display: inline-block;
+    font-weight: 700;
+    border-radius: 40px;
+    text-decoration: none;
+    color: #388dbc;
+}
+  
+@media screen and (max-width: 767px) {
+    .notfound .notfound-404 {
+      width: 110px;
+      height: 110px;
+    }
+
+    .notfound {
+      padding-left: 15px;
+      padding-right: 15px;
+      padding-top: 110px;
+    }
+}
\ No newline at end of file

server/controllers/timetable.controller.js

@@ -8,7 +8,7 @@ const getAll = async (req, res) => {
         const selectDate = new Date(when)
         let findAll = null
         const theaterArr = []
-        findAll = movieId ? await TimeTable.findAll({ where: { date: selectDate, movieId: movieId }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theaterId", "ASC"], ["start_time", "ASC"]], include: [Theater] })
+        findAll = movieId !== "0" ? await TimeTable.findAll({ where: { date: selectDate, movieId: movieId }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theaterId", "ASC"], ["start_time", "ASC"]], include: [Theater] })
             : await TimeTable.findAll({ where: { date: selectDate }, attributes: { exclude: ['createdAt', 'updatedAt'] }, order: [["theaterId", "ASC"], ["start_time", "ASC"]], include: [Theater] })
         findAll.forEach(async (element) => {
             if (!theaterArr.includes(element.theaterId)) theaterArr.push(element.theaterId)
@@ -65,9 +65,13 @@ const submit = async (req, res) => {
             await Promise.all(
                 theater.map(async (theater) => {
                     let partTime = ""
-                    if ('06:00' <= theater.start && theater.start < '10:00') partTime = "morning"
-                    else if ('00:00' <= theater.start < '06:00') partTime = "night"
-                    else partTime = "day"
+                    if ('06:00' <= theater.start && theater.start < '10:00') {
+                        partTime = "morning"
+                    } else if ('00:00' <= theater.start && theater.start < '06:00') {
+                        partTime = "night"
+                    } else {
+                        partTime = "day"
+                    }
                     await TimeTable.create({ theaterId: theater.theater, movieId, title, release_date, date: curDate, start_time: getTime(theater.start), end_time: getTime(theater.start, runtime), partTime: partTime, week: (day === 0 || day === 6) ? "weekend" : "weekdays" })
                 })
             )