From 77d6ed86858054c1d803bcf23af30ebf2ee721fb Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Thu, 3 Oct 2024 19:16:33 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20URL=20=EC=83=81=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/api/url.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 ssr/server/api/url.js diff --git a/ssr/server/api/url.js b/ssr/server/api/url.js new file mode 100644 index 0000000..3082683 --- /dev/null +++ b/ssr/server/api/url.js @@ -0,0 +1,20 @@ +export const BASE_URL = "https://api.themoviedb.org/3/movie"; + +export const TMDB_THUMBNAIL_URL = "https://media.themoviedb.org/t/p/w440_and_h660_face/"; +export const TMDB_ORIGINAL_URL = "https://image.tmdb.org/t/p/original/"; +export const TMDB_BANNER_URL = "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/"; +export const TMDB_MOVIE_LISTS = { + POPULAR: BASE_URL + "/popular?language=ko-KR&page=1", + NOW_PLAYING: BASE_URL + "/now_playing?language=ko-KR&page=1", + TOP_RATED: BASE_URL + "/top_rated?language=ko-KR&page=1", + UPCOMING: BASE_URL + "/upcoming?language=ko-KR&page=1", +}; +export const TMDB_MOVIE_DETAIL_URL = "https://api.themoviedb.org/3/movie/"; + +export const FETCH_OPTIONS = { + method: "GET", + headers: { + accept: "application/json", + Authorization: "Bearer " + process.env.TMDB_TOKEN, + }, +}; From c16b1a66706f390eac5c6b87af4d2a0608d2bfff Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Thu, 3 Oct 2024 19:18:50 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EC=98=81=ED=99=94=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=EC=9D=84=20=EB=B6=88=EB=9F=AC=EC=98=A4=EB=8A=94=20fet?= =?UTF-8?q?ch=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/api/movies.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 ssr/server/api/movies.js diff --git a/ssr/server/api/movies.js b/ssr/server/api/movies.js new file mode 100644 index 0000000..1a2f51b --- /dev/null +++ b/ssr/server/api/movies.js @@ -0,0 +1,8 @@ +import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL } from "./url.js"; + +export const fetchMovies = async (url) => { + const response = await fetch(url, FETCH_OPTIONS); + + const data = await response.json(); + return data.results; +}; From 1000efef0b9076c7d76f3d9fd2696bd7ca8b9f6f Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Thu, 3 Oct 2024 19:21:01 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20renderMovieList=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/services/renderMovieList.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 ssr/server/services/renderMovieList.js diff --git a/ssr/server/services/renderMovieList.js b/ssr/server/services/renderMovieList.js new file mode 100644 index 0000000..3d49c22 --- /dev/null +++ b/ssr/server/services/renderMovieList.js @@ -0,0 +1,21 @@ +export const renderMovieList = (movieItems = []) => { + return movieItems.map( + ({ id, title, vote_average, poster_path }) => ` +
  • + +
    + ${title} +
    +

    ${vote_average}

    + ${title} +
    +
    +     +
    • + ` + ); +}; From 4d94cb9ce4495e5f72cb0f55dd37122c7d5bfc47 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Thu, 3 Oct 2024 19:22:08 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20renderMoviePage=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/services/renderMoviePage.js | 27 ++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 ssr/server/services/renderMoviePage.js diff --git a/ssr/server/services/renderMoviePage.js b/ssr/server/services/renderMoviePage.js new file mode 100644 index 0000000..d19509d --- /dev/null +++ b/ssr/server/services/renderMoviePage.js @@ -0,0 +1,27 @@ +import fs from "fs"; +import path from "path"; +import { fileURLToPath } from "url"; + +import { renderMovieList } from "./renderMovieList.js"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export const renderMoviePage = (moviesData) => { + const moviesParsed = renderMovieList(moviesData); + const bestMovieItem = moviesData[0]; + const moviesHTML = moviesParsed.join(""); + + const templatePath = path.join(__dirname, "../../views", "index.html"); + let template = fs.readFileSync(templatePath, "utf-8"); + + template = template.replace("", moviesHTML); + template = template.replace( + "${background-container}", + "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/" + bestMovieItem.poster_path + ); + template = template.replace("${bestMovie.rate}", bestMovieItem.vote_average); + template = template.replace("${bestMovie.title}", bestMovieItem.title); + + return template; +}; From 1abbc861010bdd0506c3503569fa8b11a62f2042 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Thu, 3 Oct 2024 19:23:55 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/routes/index.js | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/ssr/server/routes/index.js b/ssr/server/routes/index.js index 84d32f2..d2bf545 100644 --- a/ssr/server/routes/index.js +++ b/ssr/server/routes/index.js @@ -1,21 +1,35 @@ import { Router } from "express"; -import fs from "fs"; -import path from "path"; -import { fileURLToPath } from "url"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); +import { fetchMovies, fetchMovieDetails } from "../api/movies.js"; +import { renderMoviePage } from "../services/renderMoviePage.js"; +import { TMDB_MOVIE_LISTS } from "../api/url.js"; const router = Router(); -router.get("/", (_, res) => { - const templatePath = path.join(__dirname, "../../views", "index.html"); - const moviesHTML = "

    들어갈 본문 작성

    "; +export const renderMovieListPage = async (listType, res) => { + const moviesData = await fetchMovies(listType); + const movieListHTML = renderMoviePage(moviesData); + + res.send(movieListHTML); +}; - const template = fs.readFileSync(templatePath, "utf-8"); - const renderedHTML = template.replace("", moviesHTML); +router.get("/", async (req, res) => { + renderMovieListPage(TMDB_MOVIE_LISTS.POPULAR, res); +}); + +router.get("/now-playing", (req, res) => { + renderMovieListPage(TMDB_MOVIE_LISTS.NOW_PLAYING, res); +}); + +router.get("/popular", (req, res) => { + renderMovieListPage(TMDB_MOVIE_LISTS.POPULAR, res); +}); + +router.get("/top-rated", (req, res) => { + renderMovieListPage(TMDB_MOVIE_LISTS.TOP_RATED, res); +}); - res.send(renderedHTML); +router.get("/upcoming", (req, res) => { + renderMovieListPage(TMDB_MOVIE_LISTS.UPCOMING, res); }); export default router; From 25ea1a047659299314f37d6692e281029ba87a22 Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Thu, 3 Oct 2024 19:25:28 +0900 Subject: [PATCH 6/7] =?UTF-8?q?design:=20=ED=83=AD=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C,=20selected=20=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/views/index.html | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/ssr/views/index.html b/ssr/views/index.html index a052396..9ddcb6f 100644 --- a/ssr/views/index.html +++ b/ssr/views/index.html @@ -77,4 +77,27 @@

    지금 인기 있는 영화

    + From 35af3550832164899ec58d2624902df9e1e1d41a Mon Sep 17 00:00:00 2001 From: soosoo22 Date: Thu, 3 Oct 2024 19:25:58 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=EC=98=81=ED=99=94=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=ED=85=9C=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C,=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=9D=84=EC=9A=B0=EA=B8=B0=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/api/movies.js | 7 +++++ ssr/server/routes/index.js | 10 +++++++ ssr/server/services/renderModal.js | 44 ++++++++++++++++++++++++++++++ 3 files changed, 61 insertions(+) create mode 100644 ssr/server/services/renderModal.js diff --git a/ssr/server/api/movies.js b/ssr/server/api/movies.js index 1a2f51b..c5c3f4f 100644 --- a/ssr/server/api/movies.js +++ b/ssr/server/api/movies.js @@ -6,3 +6,10 @@ export const fetchMovies = async (url) => { const data = await response.json(); return data.results; }; + +export const fetchMovieDetails = async (movieId) => { + const response = await fetch(`${TMDB_MOVIE_DETAIL_URL}${movieId}?language=ko-KR`, FETCH_OPTIONS); + const data = await response.json(); + + return data; +}; diff --git a/ssr/server/routes/index.js b/ssr/server/routes/index.js index d2bf545..1b389ee 100644 --- a/ssr/server/routes/index.js +++ b/ssr/server/routes/index.js @@ -2,6 +2,7 @@ import { Router } from "express"; import { fetchMovies, fetchMovieDetails } from "../api/movies.js"; import { renderMoviePage } from "../services/renderMoviePage.js"; import { TMDB_MOVIE_LISTS } from "../api/url.js"; +import { renderModal } from "../services/renderModal.js"; const router = Router(); @@ -32,4 +33,13 @@ router.get("/upcoming", (req, res) => { renderMovieListPage(TMDB_MOVIE_LISTS.UPCOMING, res); }); +router.get("/detail/:movieId", async (req, res) => { + const movieId = req.params.movieId; + const moviesData = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING); + const movieDetailItem = await fetchMovieDetails(movieId); + + const renderedHTML = renderModal(moviesData, movieDetailItem); + res.send(renderedHTML); +}); + export default router; diff --git a/ssr/server/services/renderModal.js b/ssr/server/services/renderModal.js new file mode 100644 index 0000000..d316331 --- /dev/null +++ b/ssr/server/services/renderModal.js @@ -0,0 +1,44 @@ +import { renderMoviePage } from "./renderMoviePage.js"; + +export const renderModal = (moviesData, movieDetailItem) => { + const moviesPageTemplate = renderMoviePage(moviesData); + + return moviesPageTemplate.replace( + "", + /*html*/ ` + + + + ` + ); +};