woowacourse · soi-ha · Oct 3, 2024
diff --git a/ssr/apis/constants.js b/ssr/apis/constants.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,
+	},
+};
diff --git a/ssr/apis/movies.js b/ssr/apis/movies.js
@@ -0,0 +1,13 @@
+import { TMDB_MOVIE_LISTS, FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL } from './constants.js';
+
+export const fetchMovies = async (category) => {
+	const response = await fetch(TMDB_MOVIE_LISTS[category], FETCH_OPTIONS);
+
+	return await response.json();
+};
+
+export const fetchMovieDetail = async (movieId) => {
+	const response = await fetch(`${TMDB_MOVIE_DETAIL_URL}${movieId}?language=ko-kr`, FETCH_OPTIONS);
+
+	return await response.json();
+};
diff --git a/ssr/server/index.js b/ssr/server/index.js
@@ -1,9 +1,9 @@
-import "./config.js";
-import express from "express";
-import path from "path";
-import { fileURLToPath } from "url";
+import './config.js';
+import express from 'express';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-import movieRouter from "./routes/index.js";
+import movieRouter from './routes/index.js';
 // import membersRouter from "./routes/members.js"; // 본 미션 참고를 위한 코드이며 사전 미션에서는 사용하지 않습니다.
 
 const app = express();
@@ -12,12 +12,12 @@ const PORT = 3000;
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-app.use("/assets", express.static(path.join(__dirname, "../public")));
+app.use('/assets', express.static(path.join(__dirname, '../public')));
 
-app.use("/", movieRouter);
+app.use('/', movieRouter);
 // app.use("/members", membersRouter); // 본 미션 참고를 위한 코드이며 사전 미션에서는 사용하지 않습니다.
 
 // Start server
 app.listen(PORT, () => {
-  console.log(`Server is running on http://localhost:${PORT}`);
+	console.log(`Server is running on http://localhost:${PORT}`);
 });
diff --git a/ssr/server/routes/index.js b/ssr/server/routes/index.js
@@ -1,21 +1,15 @@
-import { Router } from "express";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
+import { Router } from 'express';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+import renderMovieItemPage from '../../utils/renderMovieItemPage.js';
+import renderModal from '../../utils/renderModal.js';
 
 const router = Router();
 
-router.get("/", (_, res) => {
-  const templatePath = path.join(__dirname, "../../views", "index.html");
-  const moviesHTML = "<p>들어갈 본문 작성</p>";
+router.get(['/', '/now-playing'], (_, res) => renderMovieItemPage(res, 'NOW_PLAYING'));
+router.get('/popular', (_, res) => renderMovieItemPage(res, 'POPULAR'));
+router.get('/top-rated', (_, res) => renderMovieItemPage(res, 'TOP_RATED'));
+router.get('/upcoming', (_, res) => renderMovieItemPage(res, 'UPCOMING'));
 
-  const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
-
-  res.send(renderedHTML);
-});
+router.get('/detail/:id', (req, res) => renderModal(res, req.params.id));
 
 export default router;
diff --git a/ssr/utils/renderModal.js b/ssr/utils/renderModal.js
@@ -0,0 +1,56 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { fetchMovieDetail } from '../apis/movies.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const renderModal = async (res, movieId) => {
+	const templatePath = path.join(__dirname, '../views', 'index.html');
+	const movieDetail = await fetchMovieDetail(movieId);
+
+	let template = fs.readFileSync(templatePath, 'utf-8');
+
+	template = template.replace(
+		'<!--${MODAL_AREA}-->',
+		/*html*/ `
+	    <div class="modal-background active" id="modalBackground">
+	      <div class="modal">
+	      <button class="close-modal" id="closeModal"><img src="../assets/images/modal_button_close.png" /></button>
+	      <div class="modal-container">
+	        <div class="modal-image">
+	          <img src="https://image.tmdb.org/t/p/original/${movieDetail.poster_path}.jpg" />
+	        </div>
+	        <div class="modal-description">
+	          <h2>${movieDetail.title}</h2>
+	          <p class="category">${movieDetail.release_date.substring(0, 4)} · ${movieDetail.genres
+			.map((genre) => genre.name)
+			.join(', ')}</p>
+	          <p class="rate"><img src="../assets/images/star_filled.png" class="star" /><span>7.7</span></p>
+	          <hr />
+	          <p class="detail">
+	            ${movieDetail.overview}
+	          </p>
+	        </div>
+	      </div>
+	    </div>
+	  </div>
+	  <!-- 모달 창 닫기 스크립트 -->
+	  <script>
+	    const modalBackground = document.getElementById("modalBackground");
+	    const closeModal = document.getElementById("closeModal");
+	    document.addEventListener("DOMContentLoaded", () => {
+	      closeModal.addEventListener("click", () => {
+	        modalBackground.classList.remove("active");
+	      });
+	    });
+	  </script>
+	`
+	);
+
+	res.send(template);
+};
+
+export default renderModal;
diff --git a/ssr/utils/renderMovieItemPage.js b/ssr/utils/renderMovieItemPage.js
@@ -0,0 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+import { fetchMovies } from '../apis/movies.js';
+import { renderMovieItems } from './renderMovieItems.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const TITLE_BY_MOVIE_LIST = {
+	POPULAR: '지금 인기 있는 영화',
+	NOW_PLAYING: '지금 상영중인 영화',
+	TOP_RATED: '평점 높은 영화',
+	UPCOMING: '상영 예정인 영화',
+};
+
+const renderMovieItemPage = async (res, category) => {
+	const templatePath = path.join(__dirname, '../views', 'index.html');
+	const movieItems = await fetchMovies(category);
+	const bestMovieItem = movieItems.results[0];
+
+	const moviesHTML = renderMovieItems(movieItems.results).join('');
+
+	let template = fs.readFileSync(templatePath, 'utf-8');
+
+	template = template.replace(
+		'${background-container}',
+		'https://image.tmdb.org/t/p/w1920_and_h800_multi_faces' + bestMovieItem.backdrop_path
+	);
+	template = template.replace('${bestMovie.rate}', bestMovieItem.vote_average);
+	template = template.replace('${bestMovie.title}', bestMovieItem.title);
+
+	template = template.replace('<!--${MOVIE_ITEMS_TITLE_PLACEHOLDER}-->', TITLE_BY_MOVIE_LIST[category]);
+	template = template.replace('<!--${MOVIE_ITEMS_PLACEHOLDER}-->', moviesHTML);
+
+	res.send(template);
+};
+
+export default renderMovieItemPage;
diff --git a/ssr/utils/renderMovieItems.js b/ssr/utils/renderMovieItems.js
@@ -0,0 +1,21 @@
+export const renderMovieItems = (movieItems = []) =>
+	movieItems.map(
+		({ id, title, poster_path, vote_average }) => /*html*/ `
+    <li>
+      <a href="/detail/${id}">
+        <div class="item">
+          <img
+            class="thumbnail"
+            src="https://media.themoviedb.org/t/p/w440_and_h660_face/${poster_path}"
+            alt="${title}"
+          />
+          <div class="item-desc">
+
+            <p class="rate"><img src="../assets/images/star_empty.png" class="star" /><span>${vote_average}</span></p>
+            <strong>${title}</strong>
+          </div>
+        </div>
+      </a>
+    </li>
+    `
+	);
diff --git a/ssr/views/index.html b/ssr/views/index.html
@@ -1,80 +1,81 @@
 <!DOCTYPE html>
 <html lang="ko">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="../assets/styles/reset.css" />
-    <link rel="stylesheet" href="../assets/styles/main.css" />
-    <link rel="stylesheet" href="../assets/styles/modal.css" />
-    <link rel="stylesheet" href="../assets/styles/tab.css" />
-    <link rel="stylesheet" href="../assets/styles/thumbnail.css" />
-    <script src="./"></script>
-    <title>영화 리뷰</title>
-  </head>
-  <body>
-    <div id="wrap">
-      <header>
-        <div class="background-container" style="background-image: url('${background-container}')">
-          <div class="overlay" aria-hidden="true"></div>
-          <div class="top-rated-container">
-            <h1 class="logo"><img src="../assets/images/logo.png" alt="MovieList" /></h1>
-            <div class="top-rated-movie">
-              <div class="rate">
-                <img src="../assets/images/star_empty.png" class="star" />
-                <span class="rate-value">${bestMovie.rate}</span>
-              </div>
-              <div class="title">${bestMovie.title}</div>
-              <button class="primary detail">자세히 보기</button>
-            </div>
-          </div>
-        </div>
-      </header>
-      <div class="container">
-        <ul class="tab">
-          <li>
-            <a href="/now-playing">
-              <div class="tab-item">
-                <h3>상영 중</h3>
-              </div></a
-            >
-          </li>
-          <li>
-            <a href="/popular"
-              ><div class="tab-item">
-                <h3>인기순</h3>
-              </div></a
-            >
-          </li>
-          <li>
-            <a href="/top-rated"
-              ><div class="tab-item">
-                <h3>평점순</h3>
-              </div></a
-            >
-          </li>
-          <li>
-            <a href="/upcoming"
-              ><div class="tab-item">
-                <h3>상영 예정</h3>
-              </div></a
-            >
-          </li>
-        </ul>
-        <main>
-          <section>
-            <h2>지금 인기 있는 영화</h2>
-            <ul class="thumbnail-list">
-              <!--${MOVIE_ITEMS_PLACEHOLDER}-->
-            </ul>
-          </section>
-        </main>
-      </div>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href="../assets/styles/reset.css" />
+		<link rel="stylesheet" href="../assets/styles/main.css" />
+		<link rel="stylesheet" href="../assets/styles/modal.css" />
+		<link rel="stylesheet" href="../assets/styles/tab.css" />
+		<link rel="stylesheet" href="../assets/styles/thumbnail.css" />
+		<script src="./"></script>
+		<title>영화 리뷰</title>
+	</head>
+	<body>
+		<div id="wrap">
+			<header>
+				<div class="background-container" style="background-image: url('${background-container}')">
+					<div class="overlay" aria-hidden="true"></div>
+					<div class="top-rated-container">
+						<h1 class="logo"><img src="../assets/images/logo.png" alt="MovieList" /></h1>
+						<div class="top-rated-movie">
+							<div class="rate">
+								<img src="../assets/images/star_empty.png" class="star" />
+								<span class="rate-value">${bestMovie.rate}</span>
+							</div>
+							<div class="title">${bestMovie.title}</div>
+							<button class="primary detail">자세히 보기</button>
+						</div>
+					</div>
+				</div>
+			</header>
+			<div class="container">
+				<ul class="tab">
+					<li>
+						<a href="/now-playing">
+							<div class="tab-item">
+								<h3>상영 중</h3>
+							</div></a
+						>
+					</li>
+					<li>
+						<a href="/popular"
+							><div class="tab-item">
+								<h3>인기순</h3>
+							</div></a
+						>
+					</li>
+					<li>
+						<a href="/top-rated"
+							><div class="tab-item">
+								<h3>평점순</h3>
+							</div></a
+						>
+					</li>
+					<li>
+						<a href="/upcoming"
+							><div class="tab-item">
+								<h3>상영 예정</h3>
+							</div></a
+						>
+					</li>
+				</ul>
+				<main>
+					<section>
+						<!-- <h2>지금 인기 있는 영화</h2> -->
+						<h2><!--${MOVIE_ITEMS_TITLE_PLACEHOLDER}--></h2>
+						<ul class="thumbnail-list">
+							<!--${MOVIE_ITEMS_PLACEHOLDER}-->
+						</ul>
+					</section>
+				</main>
+			</div>
 
-      <footer class="footer">
-        <p>&copy; 우아한테크코스 All Rights Reserved.</p>
-        <p><img src="../assets/images/woowacourse_logo.png" width="180" /></p>
-      </footer>
-    </div>
-    <!--${MODAL_AREA}-->
-  </body>
+			<footer class="footer">
+				<p>&copy; 우아한테크코스 All Rights Reserved.</p>
+				<p><img src="../assets/images/woowacourse_logo.png" width="180" /></p>
+			</footer>
+		</div>
+		<!--${MODAL_AREA}-->
+	</body>
 </html>