무비차트 DB연동 성공

.gitignore

 /node_modules
-.env.development
+.env.development
\ No newline at end of file
+.env.development.local
+.env.local
\ No newline at end of file

client/src/components/BoxOffice/BoxOffice.js

@@ -37,12 +37,12 @@ const BoxOffice = () => {
 
     return (
         <div className="container text-center my-3">
-            {console.log(TMDB_TopRated_Data)}
+            {console.log(typeof(TMDB_TopRated_Data))}
             <div className="row my-auto justify-content-center">
                 <div id="recipeCarousel" className="carousel slide" data-bs-ride="carousel" data-bs-interval="999999999">
                     <div className={`carousel-inner`} role="listbox">
                         {TMDB_TopRated_Data?
-                        TMDB_TopRated_Data.results.map((moviePoster,index)=>(
+                        TMDB_TopRated_Data.map((moviePoster,index)=>(
                             <div className={`carousel-item ${index===0?"active":""}`}>
                             <div className="col-sm-3">
                                 <div className="card">

client/src/components/MovieChart/MovieChart.js

@@ -14,7 +14,7 @@ const MovieChart = () => {
         try {
             const response = await axios.get(`${baseUrl}/api/movie`)
             console.log(response.data)
-            setTMDB_TopRated_Data([...response.data.results])
+            setTMDB_TopRated_Data([...response.data])
         } catch (error) {
 
         }
@@ -37,7 +37,7 @@ const MovieChart = () => {
                         </Link>
                         <div className="card-body text-light">
                             <marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
-                            <p className="card-text text-center">예매율: {movie.ticket_sales}% | {movie.runtime}분</p>
+                            <p className="card-text text-center">예매율: {movie.ticket_sales}0% | {movie.runtime}분</p>
                             <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                         </div>
                         <button className="btn btn-warning">예매하기</button>

client/src/components/MovieComming/MovieComming.js

+import React,{useState, useEffect} from 'react'
+import axios from 'axios'
+import baseUrl from '../../utils/baseUrl'
+import { Link } from 'react-router-dom';
 import styles from "./movieComming.module.scss"
+
 const MovieComming = () => {
-    const MovieCommingList = [
-        {
-            "src": "/images/movie_image_black.jpg",
-            "title": "블랙위도우",
-            "popularity": 50.98,
-            "release_date": "2021-07-07",
-            "runtime": 134
-        },
-        {
-            "src": "/images/movie_image_limit.jpg",
-            "title": "발신제한",
-            "popularity": 3.22,
-            "release_date": "2021-06-23",
-            "runtime": 94
-        },
-        {
-            "src": "/images/movie_image_everyday.jpg",
-            "title": "우리는 매일매일",
-            "popularity": 2.83,
-            "release_date": "2021-06-30",
-            "runtime": 75
-        },
-        {
-            "src": "/images/movie_image_cruella.jpg",
-            "title": "크루엘라",
-            "popularity": 1.72,
-            "release_date": "2021-05-26",
-            "runtime": 133
+    const [TMDB_UpComming_Data, setTMDB_UpComming_Data] = useState()
+    useEffect(() => {
+        getTMDB_UpComming()
+    }, [])
+
+    async function getTMDB_UpComming() {
+        try {
+            const response = await axios.get(`${baseUrl}/api/movie/upcomming`)
+            console.log(response.data)
+            setTMDB_UpComming_Data([...response.data])
+        } catch (error) {
+
         }
-    ]
+    }
     return (
         <div class="row row-cols-1 row-cols-md-4 g-4">
-            {MovieCommingList.length > 0
+            {TMDB_UpComming_Data
                 ?
-                MovieCommingList.map(movie => (
+                TMDB_UpComming_Data.map(movie => (
                     <div className="card h-100" style={{ backgroundColor: "black" }}>
-                        <img src={movie.src} className={`card-img-top rounded ${styles.poster}`} alt="Movie Poster" />
+                        <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">
-                            <h5 className="card-title text-center">{movie.title}</h5>
-                            <p className="card-text text-center">예매율: {movie.popularity}% | {movie.runtime}분</p>
+                            <marquee onmouseover="this.stop()" className={`h2 card-title text-center ${styles.title}`}>{movie.title}</marquee>
+                            <p className="card-text text-center">{movie.runtime}분</p>
                             <p className="card-text text-center"><small className="text-muted">{movie.release_date} 개봉</small></p>
                         </div>
                         <button className="btn btn-warning">예매하기</button>

client/src/components/MovieComming/movieComming.module.scss

-.poster{
-    opacity: 1;
+.layer{
+    position: relative;
+}
+// .poster{
+//     opacity: 1;
+//     &:hover{
+//         opacity: 0.3;
+//     }
+// }
+.description{
+    position: absolute;
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background-color:rgba(0, 0, 0, 0.6);
+    text-align: center;
+    color:white;
+    //ellipsis
+    text-overflow: ellipsis;
+    white-space: pre-line;
+    display: -webkit-box;
+    -webkit-line-clamp: 9;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
     &:hover{
-        opacity: 0.3;
+        opacity: 1;
     }
 }
\ No newline at end of file

server/controllers/movie.controller.js

 import axios from 'axios'
+import sequelize from 'sequelize';
+const { Op } = sequelize
+import { Movie } from '../db/index.js'
 
 const comparePopularMovie = async (req, res) => {
-    const response = await axios.get('https://api.themoviedb.org/3/movie/popular?api_key=1477348488076cafd4dcf973a314957d&language=ko-KR')
-    const movies = response.data
-    // console.log('movies', movies)
+    const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
+    const movies = responsePopular.data.results
+    const movieIds = []
+    movies.forEach(element => {
+        movieIds.push(element.id)
+    });
+    console.log(movieIds)
     try {
-        res.json(movies)
+        const responseAfterCompare = await Movie.findAll({
+            where: {
+                movieId: {
+                    [Op.or]: movieIds
+                }
+            }
+        })
+        const popularMovieIds = []
+        responseAfterCompare.forEach(el => {
+            popularMovieIds.push(el.movieId)
+        })
+        console.log('popularMovieIds=', popularMovieIds)
+        const m = await Promise.all(
+            popularMovieIds.map(async(el) => {
+                const movie = await axios.get(`https://api.themoviedb.org/3/movie/${el}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
+                return movie.data
+            })
+        )
+        res.json(m)
     } catch (error) {
-        
+        console.log(error)
     }
 }
 
-export default { comparePopularMovie }
+const upcommingMovie = async (req, res) => {
\ No newline at end of file
+    const responsePopular = await axios.get(`https://api.themoviedb.org/3/movie/upcoming?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR&page=1`)
+    const movies = responsePopular.data.results
+    const movieIds = []
+    movies.forEach(element => {
+        movieIds.push(element.id)
+    });
+    console.log(movieIds)
+    try {
+        const responseAfterCompare = await Movie.findAll({
+            where: {
+                movieId: {
+                    [Op.or]: movieIds
+                }
+            }
+        })
+        const popularMovieIds = []
+        responseAfterCompare.forEach(el => {
+            popularMovieIds.push(el.movieId)
+        })
+        console.log('popularMovieIds=', popularMovieIds)
+        const m = await Promise.all(
+            popularMovieIds.map(async(el) => {
+                const movie = await axios.get(`https://api.themoviedb.org/3/movie/${el}?api_key=${process.env.TMDB_APP_KEY}&language=ko-KR`)
+                return movie.data
+            })
+        )
+        res.json(m)
+    } catch (error) {
+        console.log(error)
+    }
+}
+
+export default { comparePopularMovie, upcommingMovie }
\ No newline at end of file

server/index.js

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

server/models/movie.model.js

@@ -12,7 +12,17 @@ const MovieModel = (sequelize) => {
                 autoIncrement: true,
             },
             movieId: {
-                type: DataTypes.INTEGER
+                type: DataTypes.INTEGER,
+                unique: true
+            },
+            ticket_sales:{
+                type: DataTypes.FLOAT,
+                default:0.0
+
+            },
+            vote_average: {
+                type: DataTypes.FLOAT,
+                default:0.0
             }
         },
         {

server/routes/movie.route.js

@@ -8,6 +8,8 @@ router
     .post(movieCtrl.comparePopularMovie)
     .get(movieCtrl.comparePopularMovie)
 
-
+router
+    .route("/upcomming")
+    .get(movieCtrl.upcommingMovie)
 
 export default router;
\ No newline at end of file