깃머지 에러수정

client/src/App.js

@@ -22,9 +22,9 @@ function App() {
   const store = {role, setRole};
   
   return (
-    <div className="" style={{ backgroundColor: "black" }}>
+    <div style={{ backgroundColor: "black" }}>
       <AppContext.Provider value={store}>
-        <Router style={{ backgroundColor: "black" }}>
+        <Router style={{ backgroundColor: "black"}}>
           <SubNav />
           <Header />
           <MainNav />
@@ -34,6 +34,7 @@ function App() {
             <Route path="/signup" component={SignupPage} />
             <Route path="/movielist" component={MovieListPage} />
             <Route path="/movie/:movieId" component={MoviePage} />
+            <Route path="/ticket/seat" component={TicketingSeatPage} />
             <Route path="/ticket" component={TicketingPage} />
             <Route path="/search" component={SearchPage} />
             <Route path="/admin" component={AdminPage} />

client/src/apis/cinema.api.js

 import axios from "axios";
-import baseUrl from "../utils/baseUrl.js";
+import {baseUrl} from "../utils/baseUrl.js";
 
 const getInfo = async () => {
     const { data } = await axios.get(`${baseUrl}/api/cinema`)

client/src/apis/movie.api.js

@@ -12,8 +12,9 @@ const getAllfromTM = async () => {
     return data
 }
 const getMoviesfromTM = async (category) => {
+    console.log(category)
     const response = await axios.get(`${baseUrl}/api/movie/showmovies/${category}`)
-    // console.log(response.data)
+    console.log(response.data)
     return response.data
 }
 const getMovieInfofromTM = async (id) => {

client/src/components/MovieComing.js

+import { useState, useEffect } from 'react'
+import movieApi from "../apis/movie.api.js"
+// import MovieCard from "./MovieCard/index.js"
+import { Link } from 'react-router-dom'
+import styles from './MovieCard/MovieCard.js'
+import catchErrors from '../utils/catchErrors.js'
+
+const MovieComing = () => {
+    const [TMDB_UpComing_Data, setTMDB_UpComing_Data] = useState([])
+    const [error, setError] = useState("")
+    const category = "upcoming"
+
+    useEffect(() => {
+        getTMDB_UpComing()
+    }, [])
+
+    async function getTMDB_UpComing() {
+        try {
+            setError("")
+            const response = await movieApi.getMoviesfromTM(category)
+            setTMDB_UpComing_Data([...response])
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
+    return (
+        <>
+            {TMDB_UpComing_Data.length !== 0 ?
+                <div className="row row-cols-1 row-cols-md-4 g-4">
+                    {/* <MovieCard list={TMDB_UpComing_Data} /> */}
+                    {TMDB_UpComing_Data.map(movie => (
+                        <div className="card h-100" style={{ backgroundColor: "black" }}>
+                            <Link to={{
+                                pathname: `/movie/${movie.id}`,
+                                state: {
+                                    ...movie
+                                }
+                            }} className={`${styles.layer}`} >
+                                <img src={`https://image.tmdb.org/t/p/original${movie.poster_path}`} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
+                                <div className={`${styles.description}`}>{movie.overview}</div>
+                            </Link>
+                            <div className="card-body text-light">
+                                <marquee className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
+                                <p className={`card-text text-center ${styles.txt}`}>예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
+                                <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
+                            </div>
+                            <Link to={{
+                                pathname: `/ticket`,
+                                state: { movieId: movie.id, }
+                            }} className="text-center">
+                                <button className="btn btn-warning">예매하기</button>
+                            </Link>
+                        </div>
+                    ))}
+                </div>
+                : <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
+            }
+        </>
+    )
+}
+
+export default MovieComing
\ No newline at end of file

client/src/components/MovieComming.js

-import { useState, useEffect } from 'react'
-import movieApi from "../apis/movie.api.js"
-import MovieCard from "./MovieCard/index.js"
-import catchErrors from '../utils/catchErrors.js'
-
-const MovieComming = () => {
-    const [TMDB_UpComming_Data, setTMDB_UpComming_Data] = useState([])
-    const [error, setError] = useState("")
-    const category = "upcoming"
-
-    useEffect(() => {
-        getTMDB_UpComming()
-    }, [])
-
-    async function getTMDB_UpComming() {
-        try {
-            setError("")
-            const response = await movieApi.getfromTM(category)
-            setTMDB_UpComming_Data([...response])
-        } catch (error) {
-            catchErrors(error, setError)
-        }
-    }
-
-    return (
-        <>
-            {TMDB_UpComming_Data.length !== 0 ?
-                <div className="row row-cols-1 row-cols-md-4 g-4">
-                    <MovieCard list={TMDB_UpComming_Data} />
-                </div>
-                : <h2 className="text-white text-center my-5">영화정보를 로딩할 수 없습니다.</h2>
-            }
-        </>
-    )
-}
-
-export default MovieComming
\ No newline at end of file

client/src/components/MovieTable/MovieTable.js

@@ -31,7 +31,7 @@ const MovieTable = ({ movieList }) => {
     }
 
     return (
-        <table className={`table text-center align-middle ${styles.tableForm}`}>
+        <table style={{ color:"white" }} className={`table text-center align-middle ${styles.tableForm}`}>
             <thead className={`table-dark ${styles.dNone}`}>
                 <tr>
                     <th className="col-md-5">제목</th>

client/src/components/Navs/SubNav.js

-import React from "react";
+import {useEffect, useContext} from "react";
 import { AppContext } from "../../App";
+import authApi from '../../apis/auth.api'
 
 const SubNav = () => {
-    const store = React.useContext(AppContext);
+    const store = useContext(AppContext);
 
     useEffect(() => {
         window.localStorage.setItem("user", JSON.stringify(store.role));
     }, [store]);
 
-    const handleOnClick = () => {
+    const handleOnClick = async() => {
         store.setRole("user");
         await authApi.logout();
     }

client/src/components/Video.js

@@ -18,7 +18,7 @@ const Video = (props) => {
         <div>
             {videoUrls.length > 0
                 ? videoUrls.map(el => (
-                    <div className="my-5">
+                    <div className="mt-5 pb-5">
                         <p>{el.name}</p>
                         <div class="ratio ratio-16x9">
                             <iframe src={`https://www.youtube.com/embed/${el.key}`} title="YouTube video" allowfullscreen></iframe>

client/src/pages/MovieListPage.js

 import { useState } from 'react'
 import MovieChart from '../components/MovieChart.js'
-import MovieComming from '../components/MovieComming.js'
+import MovieComing from '../components/MovieComing.js'
 
 const MovieListPage = () => {
     const [state, setState] = useState(true)
@@ -22,7 +22,7 @@ const MovieListPage = () => {
                     <MovieChart />
                 </div>
                 <div className="tab-pane fade" id="moviecomming" role="tabpanel" aria-labelledby="moviecomming-tab">
-                    <MovieComming />
+                    <MovieComing />
                 </div>
             </div>
         </div>

client/src/pages/MoviePage.js

@@ -96,7 +96,7 @@ const MoviePage = ({ location }) => {
                 </div>
             </div>
             <div className="">
-                <ul className="nav nav-tabs justify-content-center my-4 border-0" id="myTab" role="tablist">
+                <ul className="nav nav-tabs justify-content-center mt-4 border-0" id="myTab" role="tablist">
                     <li className="nav-item" role="presentation">
                         <button className="nav-link active mx-auto" style={{ color: "white", borderColor: "black", backgroundColor: "black", borderBottom: state === 0 ? "3px solid" : "none", borderBottomColor: state === 0 ? "#FEDC00" : "black" }} id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true" onClick={() => setState(0)}>상세정보</button>
                     </li>

server/controllers/movie.controller.js

@@ -5,59 +5,18 @@ import { Movie } from '../db/index.js'
 
 const getMovieByCategory = async (req, res, next, category) => {
     try {
-        const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/${category}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
-        const TMDBmovies = responsePopular.data.results
-        console.log(TMDBmovies)
-        const TMDBmovieIds = []
-        TMDBmovies.forEach(element => {
-            TMDBmovieIds.push(element.id)
-        });
-        // console.log(TMDBmovieIds)
-        const responseAfterCompare = await Movie.findAll({
-            where: {
-                movieId: {
-                    [Op.or]: TMDBmovieIds
-                }
-            }
-        })
-        const movieIds = []
-        responseAfterCompare.forEach(el => {
-            movieIds.push(el.movieId)
-        })
-        // console.log('movieIds=', movieIds)
-        req.movieIds = movieIds
-        next()
-    } catch (error) {
-        console.log(error)
-    }
-}
-
-const getMovieById = async (req, res) => {
-    try {
-        const movieIds = req.movieIds
-        console.log(movieIds)
-        const elements = await Promise.all(
-            movieIds.map(async (movieId) => {
-                const movie = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
-                return movie.data
-            })
-        )  
-        console.log(elements)
-        res.json(elements)
-    } catch (error) {
-        return res.status(500).send(error.message || "영화 가져오기 중 에러 발생");
-    }
-}
-
-const getMovieByCategory = async (req, res, next, category) => {
-    try {
+        console.log(category)
         const TMDBmovieIds = []
         const movieIds = []
+        console.log(process.env.TMDB_APP_KEY)
         const response = await axios.get(`https://api.themoviedb.org/3/movie/${category}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&page=1`)
+        console.log(response.data)
         const TMDBmovies = response.data.results
+
         TMDBmovies.forEach(element => {
             TMDBmovieIds.push(element.id)
         })
+        console.log(TMDBmovies)
         const responseAfterCompare = await Movie.findAll({
             where: {
                 movieId: {
@@ -137,7 +96,8 @@ const getAllMovie = async (req, res, next) => {
         const { pageNum } = req.query
         const now = new Date()
         const monthAgo = new Date(now.setMonth(now.getMonth() - 1)).toJSON().split(/T/)[0]
-        const response = await axios.get(`https://api.themoviedb.org/3/discover/movie?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&region=KR&sort_by=release_date.asc&release_date.gte=${monthAgo}&page=${pageNum}`)
+        // const response = await axios.get(`https://api.themoviedb.org/3/discover/movie?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&region=KR&sort_by=release_date.asc&release_date.gte=${monthAgo}&page=${pageNum}`)
+        const response = await axios.get(`https://api.themoviedb.org/3/discover/movie?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&region=KR&sort_by=release_date.asc&release_date.gte=${monthAgo}&page=6`)
         req.TMDBmovies = response.data.results
         next()
     } catch (error) {

server/controllers/user.controller.js

@@ -2,7 +2,7 @@ import jwt from "jsonwebtoken";
 import config from "../config/app.config.js";
 import { User, Role } from '../db/index.js'
 
-const login = async(req, res) => {
+const login = async (req, res) => {
     try {
         const { id, password } = req.body;
         //사용자 존재 확인
@@ -47,21 +47,21 @@ const login = async(req, res) => {
 
 }
 
-const logout = async(req, res) => {
-    try{
+const logout = async (req, res) => {
+    try {
         res.cookie()
-    }catch(error) {
+    } catch (error) {
         console.error(error);
         return res.status(500).send("로그인 에러");
     }
 
-
+}
 const compareId = async (req, res) => {
     const id = req.params.userId;
-    const userid = await User.findOne({where:{userId: id}});
-        if(userid !== null){
+    const userid = await User.findOne({ where: { userId: id } });
+    if (userid !== null) {
         return res.json(true);
-    }else{
+    } else {
         return res.json(false);
     }
 }
@@ -71,11 +71,11 @@ const signup = async (req, res) => {
     // 휴대폰 중복 확인
     const userMbnum = String(req.body.userMbnum);
     try {
-        const mbnum  = await User.findOne({ where: { phoneNumber: userMbnum } });
+        const mbnum = await User.findOne({ where: { phoneNumber: userMbnum } });
         if (mbnum) {
             return res.status(422).send(`이미 있는 휴대폰번호입니다.`);
         }
-        const role = await Role.findOne({ where: {name: "user"} })
+        const role = await Role.findOne({ where: { name: "user" } })
         const newUser = await User.create({
             userId: userId,
             nickname: userNickName,
@@ -94,6 +94,7 @@ const signup = async (req, res) => {
 
 export default {
     login,
+    logout,
     compareId,
     signup
 }

server/index.js

@@ -10,7 +10,7 @@ dotenv.config({
 });
 
 sequelize
-    .sync({ force: false })
+    .sync({ force: true })
     .then(async () => {
         await Promise.all(
             Object.keys(ROLE_NAME).map((name) => {