[사전 미션 - CSR을 SSR로 재구성하기] - 월하(남수민) 미션 제출합니다.

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": {
@@ -16,4 +16,4 @@
     "nodemon": "^3.1.6",
     "dotenv": "^16.0.0"
   }
-}
+}

ssr/server/routes/index.js

@@ -1,21 +1,14 @@
 import { Router } from "express";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
+import { renderMovieDetail, renderMovieList } from "../../src/render.js";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
 
 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);
-
-  res.send(renderedHTML);
-});
+router.get("/", renderMovieList);
+router.get("/now-playing", renderMovieList);
+router.get("/popular", renderMovieList);
+router.get("/top-rated", renderMovieList);
+router.get("/upcoming", renderMovieList);
+router.get("/detail/:id", renderMovieDetail);
 
 export default router;

ssr/src/api.js

@@ -0,0 +1,13 @@
+import { FETCH_OPTIONS, TMDB_MOVIE_DETAIL_URL, TMDB_MOVIE_LISTS } from "./constant.js";
+
+export const fetchMovieList = async (listType) => {
+  const response = await fetch(TMDB_MOVIE_LISTS[listType], FETCH_OPTIONS);
+
+  return await response.json();
+};
+
+export const fetchMovieDetail = async (id) => {
+  const response = await fetch(`${TMDB_MOVIE_DETAIL_URL}${id}?language=ko-KR`, FETCH_OPTIONS);
+
+  return await response.json();
+};

ssr/src/constant.js

@@ -0,0 +1,28 @@
+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,
+  },
+};
+
+export const URL_TO_MOVIE_LIST = {
+  "/": "NOW_PLAYING",
+  "/now-playing": "NOW_PLAYING",
+  "/popular": "POPULAR",
+  "/top-rated": "TOP_RATED",
+  "/upcoming": "UPCOMING",
+};

ssr/src/html.js

@@ -0,0 +1,74 @@
+import { TMDB_THUMBNAIL_URL } from "./constant.js";
+
+export const getMovieListHTML = (movieItems = []) => movieItems.map(
+  ({ id, title, backdrop_path: thumbnail, vote_average: rate }) => /*html*/ `
+    <li>
+      <a href="/detail/${id}">
+        <div class="item">
+          <img
+            class="thumbnail"
+            src="https://media.themoviedb.org/t/p/w440_and_h660_face/${thumbnail}"
+            alt="${title}"
+          />
+          <div class="item-desc">
+            <p class="rate"><img src="/assets/images/star_empty.png" class="star" /><span>${rate}</span></p>
+            <strong>${title}</strong>
+          </div>
+        </div>
+      </a>
+    </li>
+    `
+).join('');
+
+export const getMovieDetailHTML = (movieDetail) => /*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="${TMDB_THUMBNAIL_URL}${movieDetail.poster_path}.jpg" />
+        </div>
+        <div class="modal-description">
+          <h2>${movieDetail.title}</h2>
+          <p class="category">
+            ${movieDetail.release_date.split("-")[0]} · ${movieDetail.genres.map((genre) => genre.name).join(", ")}
+          </p>
+          <p class="rate"><img src="/assets/images/star_filled.png" class="star" />
+            <span>${movieDetail.vote_average}</span>
+          </p>
+          <hr />
+          <p class="detail">
+            ${movieDetail.overview}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- 모달 창 닫기 스크립트 -->
+  <script>
+    const modalBackground = document.getElementById("modalBackground");
+    const closeModal = document.getElementById("closeModal");
+    const previousPath = new URL(document.referrer).pathname;
+
+    const updateTabSelection = (path) => {
+      const tabItems = document.querySelectorAll(".tab-item");
+      tabItems.forEach((item) => {
+        const link = item.closest("a");
+        const isSelected = link.getAttribute("href") === path;
+        const isRootPath = link.getAttribute("href") === "/now-playing" && path === "/";
+
+        item.classList.remove("selected");
+        if (isSelected || isRootPath) {
+          item.classList.add("selected");
+        }
+      });
+    }
+    document.addEventListener("DOMContentLoaded", () => {
+      closeModal.addEventListener("click", () => {
+        modalBackground.classList.remove("active");
+        history.replaceState({}, '', previousPath);
+        updateTabSelection(previousPath);
+      });
+    });
+  </script>
+  `;

ssr/src/render.js

@@ -0,0 +1,33 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { getMovieDetailHTML, getMovieListHTML } from "../src/html.js";
+import { fetchMovieDetail, fetchMovieList } from "../src/api.js";
+import { URL_TO_MOVIE_LIST } from "./constant.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const renderMovieList = async (req, res) => {
+  const templatePath = path.join(__dirname, "../views", "index.html");
+  const movieListType = URL_TO_MOVIE_LIST[req.url];
+
+  const movieList = (await fetchMovieList(movieListType)).results;
+  const movieListHTML = getMovieListHTML(movieList);
+  const template = fs.readFileSync(templatePath, "utf-8");
+  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", movieListHTML);
+
+  res.send(renderedHTML);
+};
+
+export const renderMovieDetail = async (req, res) => {
+  const templatePath = path.join(__dirname, "../views", "index.html");
+  const { id } = req.params;
+
+  const movieDetail = await fetchMovieDetail(id);
+  const movieDetailHTML = getMovieDetailHTML(movieDetail);
+  const template = fs.readFileSync(templatePath, "utf-8");
+  const renderedHTML = template.replace("<!--${MODAL_AREA}-->", movieDetailHTML);
+
+  res.send(renderedHTML);
+};