From ce1c99d3efb4d8196d69a942b35dc2b2c489a13a Mon Sep 17 00:00:00 2001 From: chysis Date: Wed, 2 Oct 2024 23:52:58 +0900 Subject: [PATCH 01/13] =?UTF-8?q?fix:=20NODE=5FTLS=5FREJECT=5FUNAUTHORIZED?= =?UTF-8?q?=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/package-lock.json | 84 +++++++++++++++++++++++++++++++++++++++++++ ssr/package.json | 9 ++--- 2 files changed, 89 insertions(+), 4 deletions(-) diff --git a/ssr/package-lock.json b/ssr/package-lock.json index a73fb42..e3e83dd 100644 --- a/ssr/package-lock.json +++ b/ssr/package-lock.json @@ -12,6 +12,7 @@ "node-fetch": "^3.3.2" }, "devDependencies": { + "cross-env": "^7.0.3", "dotenv": "^16.0.0", "nodemon": "^3.1.6" } @@ -197,6 +198,38 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "node_modules/cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "dependencies": { + "cross-spawn": "^7.0.1" + }, + "bin": { + "cross-env": "src/bin/cross-env.js", + "cross-env-shell": "src/bin/cross-env-shell.js" + }, + "engines": { + "node": ">=10.14", + "npm": ">=6", + "yarn": ">=1" + } + }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, "node_modules/data-uri-to-buffer": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", @@ -625,6 +658,12 @@ "node": ">=0.12.0" } }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -829,6 +868,15 @@ "node": ">= 0.8" } }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/path-to-regexp": { "version": "0.1.10", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz", @@ -1019,6 +1067,27 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/side-channel": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", @@ -1146,6 +1215,21 @@ "engines": { "node": ">= 8" } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } } } } diff --git a/ssr/package.json b/ssr/package.json index db1a534..ff8de99 100644 --- a/ssr/package.json +++ b/ssr/package.json @@ -4,8 +4,8 @@ "description": "SSR 렌더링으로 영화 목록 불러오기", "main": "server/index.js", "scripts": { - "start": "NODE_TLS_REJECT_UNAUTHORIZED=0 node server/index.js", - "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 nodemon server/index.js --watch" + "start": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 node server/index.js", + "dev": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 nodemon server/index.js --watch" }, "type": "module", "dependencies": { @@ -13,7 +13,8 @@ "node-fetch": "^3.3.2" }, "devDependencies": { - "nodemon": "^3.1.6", - "dotenv": "^16.0.0" + "cross-env": "^7.0.3", + "dotenv": "^16.0.0", + "nodemon": "^3.1.6" } } From f708a4744ceb8e42c72cb080deea2ac9703b0e86 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 00:36:40 +0900 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20=EC=83=81=EC=88=98=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/server/constants/movies.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 ssr/server/constants/movies.js diff --git a/ssr/server/constants/movies.js b/ssr/server/constants/movies.js new file mode 100644 index 0000000..fa8eb6b --- /dev/null +++ b/ssr/server/constants/movies.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', + nowPlaying: BASE_URL + '/now_playing?language=ko-KR&page=1', + topRated: 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 4ae39b468863017d0009c9be00ca5ba7e1ebd61c Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:05:04 +0900 Subject: [PATCH 03/13] =?UTF-8?q?feat:=20=EC=98=81=ED=99=94=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EB=B6=88=EB=9F=AC=EC=98=A4?= =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/apis/movies.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 ssr/server/apis/movies.js diff --git a/ssr/server/apis/movies.js b/ssr/server/apis/movies.js new file mode 100644 index 0000000..15291d2 --- /dev/null +++ b/ssr/server/apis/movies.js @@ -0,0 +1,15 @@ +import { FETCH_OPTIONS, TMDB_MOVIE_LISTS } from '../constants/movies.js'; + +const loadMovies = async (url) => { + const response = await fetch(url, FETCH_OPTIONS); + const data = await response.json(); + + return data.results; +}; + +const loadPopularMovies = async () => await loadMovies(TMDB_MOVIE_LISTS.popular); +const loadNowPlayingMovies = async () => await loadMovies(TMDB_MOVIE_LISTS.nowPlaying); +const loadTopRatedMovies = async () => await loadMovies(TMDB_MOVIE_LISTS.topRated); +const loadUpcomingMovies = async () => await loadMovies(TMDB_MOVIE_LISTS.upcoming); + +export { loadPopularMovies, loadNowPlayingMovies, loadTopRatedMovies, loadUpcomingMovies }; From 014921c969adb59b07ddb627c58feee1cb8ac8d5 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:05:29 +0900 Subject: [PATCH 04/13] =?UTF-8?q?feat:=20=EA=B0=9C=EB=B3=84=20=EC=98=81?= =?UTF-8?q?=ED=99=94=20=EC=95=84=EC=9D=B4=ED=85=9C=EC=9D=84=20=EB=B0=98?= =?UTF-8?q?=ED=99=98=ED=95=98=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/utils/renderMovieItem.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 ssr/server/utils/renderMovieItem.js diff --git a/ssr/server/utils/renderMovieItem.js b/ssr/server/utils/renderMovieItem.js new file mode 100644 index 0000000..8625ae3 --- /dev/null +++ b/ssr/server/utils/renderMovieItem.js @@ -0,0 +1,26 @@ +import { TMDB_THUMBNAIL_URL } from '../constants/movies.js'; + +const renderMovieItem = (movie) => { + const thumbnailFullUrl = TMDB_THUMBNAIL_URL + '/' + movie.poster_path; + + const StarEmptyImgSrc = './assets/images/star_empty.png'; + + return /* html */ ` +
  • + +
    + ${movie.title} +
    +

    + + ${movie.vote_average} +

    + ${movie.title} +
    +
    +     +
    • + `; +}; + +export default renderMovieItem; From 8d669e937317199e8072aac76dab5c4047f4ac14 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:37:25 +0900 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=EA=B0=81=20=ED=83=AD=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=83=81=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/constants/tabList.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 ssr/server/constants/tabList.js diff --git a/ssr/server/constants/tabList.js b/ssr/server/constants/tabList.js new file mode 100644 index 0000000..ff90890 --- /dev/null +++ b/ssr/server/constants/tabList.js @@ -0,0 +1,6 @@ +export const TAB_LIST = [ + { name: 'now-playing', description: '상영 중' }, + { name: 'popular', description: '인기순' }, + { name: 'top-rated', description: '평점순' }, + { name: 'upcoming', description: '상영 예정' }, +]; From 0e745a4efd3e9aaa4f068b1c8653b0c74da9a88d Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:37:55 +0900 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=ED=83=AD=20=EB=A9=94=EB=89=B4?= =?UTF-8?q?=EB=A5=BC=20=EB=8F=99=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=ED=95=98=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/utils/renderTabMenu.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 ssr/server/utils/renderTabMenu.js diff --git a/ssr/server/utils/renderTabMenu.js b/ssr/server/utils/renderTabMenu.js new file mode 100644 index 0000000..32e8902 --- /dev/null +++ b/ssr/server/utils/renderTabMenu.js @@ -0,0 +1,17 @@ +import { TAB_LIST } from '../constants/tabList.js'; + +const renderTabMenu = (currentEndpoint) => { + return TAB_LIST.map((tab) => { + return /* html */ ` +
  • + +
    +

    ${tab.description}

    +
    +     +
    • + `; + }); +}; + +export default renderTabMenu; From c0027d0a6574ad65696b9ec009e059c46c3d9f15 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:49:23 +0900 Subject: [PATCH 07/13] =?UTF-8?q?feat:=20=ED=83=AD=20=EB=B3=84=20HTML?= =?UTF-8?q?=EB=A5=BC=20=EC=83=9D=EC=84=B1=ED=95=98=EB=8A=94=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/utils/generateMovieList.js | 48 +++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 ssr/server/utils/generateMovieList.js diff --git a/ssr/server/utils/generateMovieList.js b/ssr/server/utils/generateMovieList.js new file mode 100644 index 0000000..d0abf5a --- /dev/null +++ b/ssr/server/utils/generateMovieList.js @@ -0,0 +1,48 @@ +import { loadNowPlayingMovies, loadPopularMovies, loadTopRatedMovies, loadUpcomingMovies } from '../apis/movies.js'; +import { TAB_LIST } from '../constants/tabList.js'; +import fs from 'fs'; +import path from 'path'; +import { fileURLToPath } from 'url'; +import renderMovieItem from './renderMovieItem.js'; +import renderTabMenu from './renderTabMenu.js'; +import { TMDB_BANNER_URL } from '../constants/movies.js'; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +const generateMovieList = async (selectedTab = 'now-playing') => { + const templatePath = path.join(__dirname, '../../views', 'index.html'); + + const template = fs.readFileSync(templatePath, 'utf-8'); + + const movieLists = await Promise.all([ + loadNowPlayingMovies(), + loadPopularMovies(), + loadTopRatedMovies(), + loadUpcomingMovies(), + ]); + + const FocusedIndex = TAB_LIST.findIndex((tab) => tab.name === selectedTab); + + const bestMovie = movieLists[FocusedIndex][0]; + const bestMovieRate = bestMovie.vote_average.toFixed(1); + const bestMovieTitle = bestMovie.title; + const bestMovieBackgroundImageSrc = TMDB_BANNER_URL + bestMovie.backdrop_path; + + const moviesHTML = movieLists[FocusedIndex].map((movie) => { + return renderMovieItem(movie); + }).join(''); + + const tabHTML = renderTabMenu(`${selectedTab}`).join(''); + + const movieListHTML = template + .replace('${bestMovie.rate}', bestMovieRate) + .replace('${bestMovie.title}', bestMovieTitle) + .replace('${background-container}', bestMovieBackgroundImageSrc) + .replace('', moviesHTML) + .replace('', tabHTML); + + return movieListHTML; +}; + +export default generateMovieList; From f05760b9a6e9fda2c89ac55324ee3192d8bdb0d7 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:52:33 +0900 Subject: [PATCH 08/13] =?UTF-8?q?chore:=20=EC=98=81=ED=99=94=20=ED=8F=89?= =?UTF-8?q?=EC=A0=90=20=EC=86=8C=EC=88=98=EC=A0=90=20=ED=95=9C=20=EC=9E=90?= =?UTF-8?q?=EB=A6=AC=EA=B9=8C=EC=A7=80=20=EB=B0=98=EC=98=AC=EB=A6=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/utils/renderMovieItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ssr/server/utils/renderMovieItem.js b/ssr/server/utils/renderMovieItem.js index 8625ae3..09da4e3 100644 --- a/ssr/server/utils/renderMovieItem.js +++ b/ssr/server/utils/renderMovieItem.js @@ -13,7 +13,7 @@ const renderMovieItem = (movie) => {

    - ${movie.vote_average} + ${movie.vote_average.toFixed(1)}

    ${movie.title}
    From 64fc601d28c2765a10b7e0d1bef456294e40370b Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:52:53 +0900 Subject: [PATCH 09/13] =?UTF-8?q?fix:=20=EC=88=98=EC=A0=95=ED=95=9C=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=EB=AA=85=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/utils/renderTabMenu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ssr/server/utils/renderTabMenu.js b/ssr/server/utils/renderTabMenu.js index 32e8902..576698f 100644 --- a/ssr/server/utils/renderTabMenu.js +++ b/ssr/server/utils/renderTabMenu.js @@ -4,7 +4,7 @@ const renderTabMenu = (currentEndpoint) => { return TAB_LIST.map((tab) => { return /* html */ `
  • - +

    ${tab.description}

    From d36ffa5f2679c40dbb608f1f601cbbffbe900e37 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 02:53:13 +0900 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20=ED=83=AD=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=8B=9C=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/routes/index.js | 39 ++++++++++++++++++++++++++------------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/ssr/server/routes/index.js b/ssr/server/routes/index.js index 84d32f2..45136f4 100644 --- a/ssr/server/routes/index.js +++ b/ssr/server/routes/index.js @@ -1,19 +1,34 @@ -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 { Router } from 'express'; +import generateMovieList from '../utils/generateMovieList.js'; const router = Router(); -router.get("/", (_, res) => { - const templatePath = path.join(__dirname, "../../views", "index.html"); - const moviesHTML = "

    들어갈 본문 작성

    "; +router.get('/', async (_, res) => { + const renderedHTML = await generateMovieList(); + + res.send(renderedHTML); +}); + +router.get('/now-playing', async (_, res) => { + const renderedHTML = await generateMovieList('now-playing'); + + res.send(renderedHTML); +}); + +router.get('/popular', async (_, res) => { + const renderedHTML = await generateMovieList('popular'); + + res.send(renderedHTML); +}); + +router.get('/top-rated', async (_, res) => { + const renderedHTML = await generateMovieList('top-rated'); + + res.send(renderedHTML); +}); - const template = fs.readFileSync(templatePath, "utf-8"); - const renderedHTML = template.replace("", moviesHTML); +router.get('/upcoming', async (_, res) => { + const renderedHTML = await generateMovieList('upcoming'); res.send(renderedHTML); }); From a49b9e1b516198a27da977b69e4414dd5f0b760d Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 03:10:51 +0900 Subject: [PATCH 11/13] =?UTF-8?q?feat:=20=EC=98=81=ED=99=94=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=B6=88=EB=9F=AC?= =?UTF-8?q?=EC=98=A4=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/apis/details.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 ssr/server/apis/details.js diff --git a/ssr/server/apis/details.js b/ssr/server/apis/details.js new file mode 100644 index 0000000..b73236a --- /dev/null +++ b/ssr/server/apis/details.js @@ -0,0 +1,13 @@ +import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL } from '../constants/movies.js'; + +const loadMovieDetail = async (id) => { + const url = TMDB_MOVIE_DETAIL_URL + id; + const params = new URLSearchParams({ + language: 'ko-KR', + }); + const response = await fetch(url + '?' + params, FETCH_OPTIONS); + + return await response.json(); +}; + +export default loadMovieDetail; From 7d8e213afc4a528b41c254232a251c6fd8ae80d5 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 15:08:48 +0900 Subject: [PATCH 12/13] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=EC=9D=84=20?= =?UTF-8?q?=EB=B0=98=ED=99=98=ED=95=98=EB=8A=94=20=ED=95=A8=EC=88=98=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EB=B0=8F=20=EC=83=81=EC=84=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/server/routes/index.js | 14 ++++++++++++ ssr/server/utils/renderModal.js | 39 +++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 ssr/server/utils/renderModal.js diff --git a/ssr/server/routes/index.js b/ssr/server/routes/index.js index 45136f4..def8d9d 100644 --- a/ssr/server/routes/index.js +++ b/ssr/server/routes/index.js @@ -1,5 +1,7 @@ import { Router } from 'express'; import generateMovieList from '../utils/generateMovieList.js'; +import loadMovieDetail from '../apis/details.js'; +import renderModal from '../utils/renderModal.js'; const router = Router(); @@ -33,4 +35,16 @@ router.get('/upcoming', async (_, res) => { res.send(renderedHTML); }); +router.get('/detail/:movieId', async (req, res) => { + const movieId = req.params.movieId; + const movieDetail = await loadMovieDetail(movieId); + + const renderedHTML = (await generateMovieList('now-playing')).replace( + '', + renderModal(movieDetail) + ); + + res.send(renderedHTML); +}); + export default router; diff --git a/ssr/server/utils/renderModal.js b/ssr/server/utils/renderModal.js new file mode 100644 index 0000000..dbff189 --- /dev/null +++ b/ssr/server/utils/renderModal.js @@ -0,0 +1,39 @@ +import { TMDB_ORIGINAL_URL } from '../constants/movies.js'; + +const renderModal = (detail) => { + const bannerUrl = TMDB_ORIGINAL_URL + detail.poster_path; + const releaseYear = detail.release_date.split('-')[0]; + const genres = detail.genres.map((genre) => genre.name).join(', '); + + const CloseButtonImageSrc = '../assets/images/modal_button_close.png'; + const StarEmptyImageSrc = '../assets/images/star_empty.png'; + + return /* html */ ` + + `; +}; + +export default renderModal; From 10b391611f082ace6c4e3819b349940dffdb7b00 Mon Sep 17 00:00:00 2001 From: chysis Date: Thu, 3 Oct 2024 15:09:06 +0900 Subject: [PATCH 13/13] =?UTF-8?q?chore:=20=ED=95=98=EB=93=9C=EC=BD=94?= =?UTF-8?q?=EB=94=A9=EB=90=9C=20=ED=83=AD=20=EB=B6=80=EB=B6=84=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ssr/views/index.html | 29 +---------------------------- 1 file changed, 1 insertion(+), 28 deletions(-) diff --git a/ssr/views/index.html b/ssr/views/index.html index a052396..908ae86 100644 --- a/ssr/views/index.html +++ b/ssr/views/index.html @@ -31,34 +31,7 @@

    MovieList