들어갈 본문 작성
"; +router.get('/', async (_, res) => { + try { + const movies = await fetchMovies(TMDB_MOVIE_LISTS.POPULAR); // Fetch movie data from API - const template = fs.readFileSync(templatePath, "utf-8"); - const renderedHTML = template.replace("", moviesHTML); + const templatePath = path.join(__dirname, '../../views', 'index.html'); + const template = fs.readFileSync(templatePath, 'utf-8'); - res.send(renderedHTML); + const renderedHTML = renderMovieItemPage(movies); + + res.send(renderedHTML); + } catch (error) { + console.error('Error fetching movies:', error); + res.status(500).send('Error rendering the page'); + } +}); + +router.get('/now-playing', async (_, res) => { + try { + const movies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING); + + const templatePath = path.join(__dirname, '../../views', 'index.html'); + const template = fs.readFileSync(templatePath, 'utf-8'); + + const renderedHTML = renderMovieItemPage(movies); + + res.send(renderedHTML); + } catch (error) { + console.error('Error fetching movies:', error); + res.status(500).send('Error rendering the page'); + } +}); + +router.get('/popular', async (_, res) => { + try { + const movies = await fetchMovies(TMDB_MOVIE_LISTS.POPULAR); + + const templatePath = path.join(__dirname, '../../views', 'index.html'); + const template = fs.readFileSync(templatePath, 'utf-8'); + + const renderedHTML = renderMovieItemPage(movies); + + res.send(renderedHTML); + } catch (error) { + console.error('Error fetching movies:', error); + res.status(500).send('Error rendering the page'); + } +}); + +router.get('/top-rated', async (_, res) => { + try { + const movies = await fetchMovies(TMDB_MOVIE_LISTS.TOP_RATED); + + const __filename = fileURLToPath(import.meta.url); + const __dirname = path.dirname(__filename); + + const templatePath = path.join(__dirname, '../../views', 'index.html'); + const template = fs.readFileSync(templatePath, 'utf-8'); + + const renderedHTML = renderMovieItemPage(movies); + + res.send(renderedHTML); + } catch (error) { + console.error('Error fetching movies:', error); + res.status(500).send('Error rendering the page'); + } +}); + +router.get('/upcoming', async (_, res) => { + try { + const movies = await fetchMovies(TMDB_MOVIE_LISTS.UPCOMING); + + const __filename = fileURLToPath(import.meta.url); + const __dirname = path.dirname(__filename); + + const templatePath = path.join(__dirname, '../../views', 'index.html'); + const template = fs.readFileSync(templatePath, 'utf-8'); + + const renderedHTML = renderMovieItemPage(movies); + + res.send(renderedHTML); + } catch (error) { + console.error('Error fetching movies:', error); + res.status(500).send('Error rendering the page'); + } +}); + +router.get('/detail/:id', async (req, res) => { + try { + const movieId = req.params.id; + const moviesData = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING); + const movieDetail = await fetchMovieDetail(movieId); + const modalHTML = renderModal(movieDetail, moviesData); + + res.send(modalHTML); + } catch (error) { + console.error('Error fetching movie details:', error); + res.status(500).send('Error fetching movie details'); + } }); export default router; diff --git a/ssr/src/api/movie.js b/ssr/src/api/movie.js new file mode 100644 index 0000000..34b04f6 --- /dev/null +++ b/ssr/src/api/movie.js @@ -0,0 +1,26 @@ +import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL } from '../constants/constant.js'; + +export const fetchMovies = async (url) => { + const response = await fetch(url, FETCH_OPTIONS); + return await response.json(); // Parse and return the response JSON +}; + +export const fetchMovieDetail = async (movieId) => { + const url = `${TMDB_MOVIE_DETAIL_URL}${movieId}?language=ko-KR`; + + const response = await fetch(url, FETCH_OPTIONS); + if (!response.ok) { + throw new Error('Failed to fetch movie details'); + } + + const data = await response.json(); + return { + title: data.title, + releaseYear: data.release_date.split('-')[0], + genres: data.genres.map((genre) => genre.name), + description: data.overview, + poster_path: data.poster_path + ? `https://image.tmdb.org/t/p/original${data.poster_path}` + : '', + }; +}; diff --git a/ssr/src/constants/constant.js b/ssr/src/constants/constant.js new file mode 100644 index 0000000..8b31402 --- /dev/null +++ b/ssr/src/constants/constant.js @@ -0,0 +1,22 @@ +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, + }, +}; diff --git a/ssr/src/templates/renderModal.js b/ssr/src/templates/renderModal.js new file mode 100644 index 0000000..68a06ac --- /dev/null +++ b/ssr/src/templates/renderModal.js @@ -0,0 +1,42 @@ +import { renderMovieItemPage } from './renderMovieItemPage.js'; + +export const renderModal = (movieDetail, moviesData) => { + const moviesPageTemplate = renderMovieItemPage(moviesData); + return moviesPageTemplate.replace( + '', + /*html*/ ` +${ + movieDetail.releaseYear + } · ${movieDetail.genres.join(', ')}
+
7.7
+ ${movieDetail.description} +
+
+ 
${vote_average}
+
@@ -76,5 +81,34 @@