woowacourse · chlwlstlf · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024
diff --git 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": "set NODE_TLS_REJECT_UNAUTHORIZED=0 && node server/index.js",
+    "dev": "set NODE_TLS_REJECT_UNAUTHORIZED=0 && nodemon server/index.js --watch"
   },
   "type": "module",
   "dependencies": {

diff --git a/ssr/server/api.js b/ssr/server/api.js
@@ -0,0 +1,13 @@
+import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL } from "./constant.js";
+
+export const fetchMovies = async (url) => {
+  const response = await fetch(url, FETCH_OPTIONS);
+
+  return await response.json();
+};
+
+export const fetchMovieDetail = async (movieId) => {
+  const response = await fetch(TMDB_MOVIE_DETAIL_URL + movieId, FETCH_OPTIONS);
+
+  return await response.json();
+};
diff --git a/ssr/server/constant.js b/ssr/server/constant.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/server/routes/index.js b/ssr/server/routes/index.js
@@ -1,21 +1,29 @@
 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 { fetchMovieDetail, fetchMovies } from "../api.js";
+import { renderMovieItemModal, renderMovieItemPage } from "./render.js";
+import { TMDB_MOVIE_LISTS } from "../constant.js";
 
 const router = Router();
 
-router.get("/", (_, res) => {
-  const templatePath = path.join(__dirname, "../../views", "index.html");
-  const moviesHTML = "<p>들어갈 본문 작성</p>";
-
-  const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+const handleMovieRoute = async (res, movieListUrl, currentTab) => {
+  const movies = await fetchMovies(movieListUrl);
+  const renderedHTML = renderMovieItemPage(movies.results, currentTab);
+  res.send(renderedHTML);
+};
 
+const handleDetailMovieRoute = async (req, res) => {
+  const movieId = req.params.id;
+  const movies = await fetchMovies(TMDB_MOVIE_LISTS.NOW_PLAYING);
+  const movieDetail = await fetchMovieDetail(movieId);
+  const renderedHTML = renderMovieItemModal(movies.results, movieDetail);
   res.send(renderedHTML);
-});
+};
+
+router.get("/", (req, res) => handleMovieRoute(res, TMDB_MOVIE_LISTS.NOW_PLAYING, req.path));
+router.get("/popular", (req, res) => handleMovieRoute(res, TMDB_MOVIE_LISTS.POPULAR, req.path));
+router.get("/now-playing", (req, res) => handleMovieRoute(res, TMDB_MOVIE_LISTS.NOW_PLAYING, req.path));
+router.get("/top-rated", (req, res) => handleMovieRoute(res, TMDB_MOVIE_LISTS.TOP_RATED, req.path));
+router.get("/upcoming", (req, res) => handleMovieRoute(res, TMDB_MOVIE_LISTS.UPCOMING, req.path));
+router.get("/detail/:id", handleDetailMovieRoute);
 
 export default router;
diff --git a/ssr/server/routes/render.js b/ssr/server/routes/render.js
@@ -0,0 +1,110 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// 탭 섹션 렌더링
+export const renderTabSection = (currentTab) => {
+  const tabs = [
+    { label: "상영 중", href: "/now-playing" },
+    { label: "인기순", href: "/popular" },
+    { label: "평점순", href: "/top-rated" },
+    { label: "상영 예정", href: "/upcoming" },
+  ];
+
+  return tabs
+    .map(
+      (tab) => `
+      <li>
+        <a href="${tab.href}">
+          <div class="tab-item ${tab.href === currentTab ? "selected" : ""}">
+            <h3>${tab.label}</h3>
+          </div>
+        </a>
+      </li>
+      `
+    )
+    .join("");
+};
+
+// 영화 목록 렌더링
+export const renderMovieItems = (movieItems = []) =>
+  movieItems
+    .map(
+      ({ id, title, backdrop_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/${backdrop_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>
+    `
+    )
+    .join("");
+
+// 영화 페이지 렌더링
+export const renderMovieItemPage = (moviesData, currentTab) => {
+  const bestMovieItem = moviesData[0];
+  const moviesHTML = renderMovieItems(moviesData);
+
+  const templatePath = path.join(__dirname, "../../views", "index.html");
+  let template = fs.readFileSync(templatePath, "utf-8");
+
+  template = template.replace("<!--${TAB_ITEMS}-->", renderTabSection(currentTab));
+  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_PLACEHOLDER}-->", moviesHTML);
+
+  return template;
+};
+
+// 모달 렌더링
+export const renderMovieItemModal = (moviesData, movieDetailItem) => {
+  const moviesPageTemplate = renderMovieItemPage(moviesData);
+  return moviesPageTemplate.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/${movieDetailItem.backdrop_path}.jpg" />
+          </div>
+          <div class="modal-description">
+            <h2>${movieDetailItem.title}</h2>
+            <p class="category">${movieDetailItem.release_date.substring(0, 4)} · ${movieDetailItem.genres.join(", ")}</p>
+            <p class="rate"><img src="../assets/images/star_filled.png" class="star" /><span>${movieDetailItem.vote_average}</span></p>
+            <hr />
+            <p class="detail">
+              ${movieDetailItem.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>
+  `
+  );
+};
diff --git a/ssr/views/index.html b/ssr/views/index.html
@@ -2,25 +2,56 @@
 <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>
+    <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"
+    />
     <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="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>
+            <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" />
+                <img
+                  src="../assets/images/star_empty.png"
+                  class="star"
+                />
                 <span class="rate-value">${bestMovie.rate}</span>
               </div>
               <div class="title">${bestMovie.title}</div>
@@ -31,34 +62,7 @@ <h1 class="logo"><img src="../assets/images/logo.png" alt="MovieList" /></h1>
       </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>
+          <!--${TAB_ITEMS}-->
         </ul>
         <main>
           <section>
@@ -72,7 +76,12 @@ <h2>지금 인기 있는 영화</h2>
 
       <footer class="footer">
         <p>&copy; 우아한테크코스 All Rights Reserved.</p>
-        <p><img src="../assets/images/woowacourse_logo.png" width="180" /></p>
+        <p>
+          <img
+            src="../assets/images/woowacourse_logo.png"
+            width="180"
+          />
+        </p>
       </footer>
     </div>
     <!--${MODAL_AREA}-->