movie 서버 등록 및 TMDB upcoming data 가져오기

client/src/apis/movie.api.js

+import axios from "axios";
+import { baseUrl, TMDBUrl } from "../utils/baseUrl";
+
+const getUpcomingfromTM = async () => {
+    const { data } = await axios.get(`${TMDBUrl}/upcoming?api_key=${process.env.REACT_APP_TMDB_API_KEY}&language=ko-KR`)
+    return data.results
+}
+
+const submit = async (movieId) => {
+    const { data } = await axios.post(`${baseUrl}/api/movie/${movieId}`)
+    console.log("data==",data)
+}
+
+const movieApi = {
+    getUpcomingfromTM,
+    submit
+}
+
+export default movieApi
\ No newline at end of file

client/src/components/Admin/MovieEdit.js

+import { useState, useEffect } from "react";
 import Search from "../Search";
 import MovieTable from "../MovieTable";
 import Pagination from "../Pagination";
+import movieApi from "../../apis/movie.api.js";
+import catchErrors from "../../utils/catchErrors.js";
 import styles from "./admin.module.scss";
 
 const MovieEdit = () => {
+    const [movieList, setMovieList] = useState([])
+    const [error, setError] = useState("")
+
+    useEffect(() => {
+        getMovieList()
+    }, [])
+
+    async function getMovieList() {
+        try {
+            setError("");
+            const getMovieList = await movieApi.getUpcomingfromTM()
+            setMovieList(getMovieList)
+        } catch (error) {
+            catchErrors(error, setError)
+        }
+    }
+
     return (
         <>
+        {console.log("List==",movieList)}
             <div className="d-flex justify-content-end mb-3">
                 <Search type="admin" />
             </div>
-            <MovieTable />
+            <MovieTable movieList={movieList} />
             <div className="d-flex flex-wrap">
                 <Pagination />
                 <div className="d-flex justify-content-end col-12 col-md-4 my-2">

client/src/components/MovieTable/MovieTable.js

+import { useState } from "react";
+import movieApi from "../../apis/movie.api.js";
+import catchErrors from "../../utils/catchErrors.js";
 import styles from "./movie-table.module.scss";
 
-const MovieTable = () => {
+const MovieTable = ({ movieList }) => {
+    const [error, setError] = useState("")
+
+    async function handleClick(e, movieId) {
+        e.preventDefault();
+        try {
+            setError("");
+            await movieApi.submit(movieId)
+            alert("서버 등록이 완료되었습니다.")
+        } catch (error) {
+            catchErrors(error, setError);
+        }
+    }
+
     return (
         <table className={`table text-center ${styles.tableForm}`}>
             <thead className={`table-dark ${styles.dNone}`}>
@@ -15,28 +31,32 @@ const MovieTable = () => {
                 </tr>
             </thead>
             <tbody>
-                <tr className={styles.Row} data-bs-toggle="collapse" data-bs-target={"#movie1"}>
-                    <td className="d-inline-block d-md-table-cell">블랙위도우</td>
+                {movieList?.map(movie =>
+                    <>
+                        <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}`}>2021-07-07</td>
-                    <td className="d-none d-md-table-cell">O</td>
-                    <td className="d-none d-md-table-cell">O</td>
-                    <td className="d-none d-md-table-cell">X</td>
-                    <td className="d-none d-md-table-cell">X</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>
                         </tr>
                         <tr className={styles.Row}>
-                    <td colSpan="7" className="collapse" id={"movie1"}>
+                            <td colSpan="7" className="collapse" id={"movie" + movie.id}>
                                 <div className={`d-inline-block d-md-none ${styles.word} mb-2`}>
-                            줄거리 - O /
-                            포스터 - O /
-                            스틸컷 - X /
-                            예고편 - X
+                                    줄거리 - {movie.overview !== '' ? 'O' : 'X'} /
+                                    포스터 - {movie.poster_path !== '' ? 'O' : 'X'} /
+                                    스틸컷 - {movie.backdrop_path !== '' ? 'O' : 'X'} /
+                                    예고편 - {movie.video !== false ? 'O' : 'X'}
                                 </div>
                                 <div className="d-flex justify-content-end">
-                            <button type="button" className="btn btn-danger">삭제</button>
+                                    <button type="button" className="btn btn-primary" onClick={(e) => handleClick(e, movie.id)}>등록</button>
+                                    {/* <button type="button" className="btn btn-danger">삭제</button> */}
                                 </div>
                             </td>
                         </tr>
+                    </>)}
             </tbody>
         </table>
     )

client/src/utils/catchErrors.js

+const catchErrors = (error, displayError) => {
+    let errorMsg
+    if (error.response) {
+        errorMsg = error.response.data
+        console.log('Error response:', errorMsg)
+    } else if (error.request) {
+        errorMsg = error.request
+        console.log('Error request:', errorMsg)
+    } else {
+        errorMsg = error.message
+        console.log('Error message:', errorMsg)
+    }
+    displayError(errorMsg)
+}
+
+export default catchErrors
\ No newline at end of file

server/controllers/movie.controller.js

 import axios from 'axios'
+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
@@ -10,4 +12,17 @@ const comparePopularMovie = async (req, res) => {
     }
 }
 
-export default { comparePopularMovie }
+const create = async (req, res) => {
\ No newline at end of file
+    try {
+        const { movieId } = req.params
+        const newMovie = await Movie.create({ movieId: movieId });
+        return res.json(newMovie);
+    } catch (error) {
+        return res.status(500).send(error.message || "영화 등록 중 에러 발생");
+    }
+}
+
+export default {
+    comparePopularMovie,
+    create,
+}
\ No newline at end of file

server/models/movie.model.js

@@ -12,7 +12,8 @@ const MovieModel = (sequelize) => {
                 autoIncrement: true,
             },
             movieId: {
-                type: DataTypes.INTEGER
+                type: DataTypes.INTEGER,
+                unique: true,
             }
         },
         {

server/routes/movie.route.js

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