[사전 미션 - 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": "NODE_TLS_REJECT_UNAUTHORIZED=1 node server/index.js",
+    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=1 nodemon server/index.js --watch"
   },
   "type": "module",
   "dependencies": {

ssr/server/HTMLgenerator.js

@@ -0,0 +1,63 @@
+import { TMDB_THUMBNAIL_URL } from "./constants.js";
+
+export const generateMovieItems = (movies = []) => {
+  return movies
+    .map(({ id, title, vote_average, poster_path }) => {
+      /*html*/
+      return `
+          <li key="${id}">
+            <a href="/detail/${id}">
+              <div class="item">
+                <img class="thumbnail" src="${TMDB_THUMBNAIL_URL}/${poster_path}" alt="${title}" />
+                <div class="item-desc">
+                  <p class="rate">
+                    <img src="./assets/images/star_filled.png" class="star" />
+                    <span>${vote_average.toFixed(1)}</span>
+                  </p>
+                  <strong>${title}</strong>
+                </div>
+              </div>
+            </a>
+          </li>
+        `;
+    })
+    .join("");
+};
+
+export const generateMovieModal = (movieInfo = {}) => {
+  const {
+    title,
+    poster_path,
+    genres = [],
+    vote_average = 0,
+    overview,
+  } = movieInfo;
+
+  /*html*/
+  return `
+    <div class="modal-background active" id="modalBackground">
+      <div class="modal">
+        <button class="close-modal" id="closeModal" onClick="location.href='/'">
+          <img src="/assets/images/modal_button_close.png">
+        </button>
+        <div class="modal-container">
+          <div class="modal-image">
+            <img src="${TMDB_THUMBNAIL_URL}${poster_path}" alt="${title}">
+          </div>
+          <div class="modal-description">
+            <h2>${title}</h2>
+            <p class="category">${genres.map(({ name }) => name).join(", ")}</p>
+            <p class="rate">
+              <img src="/assets/images/star_empty.png" class="star">
+              <span>${vote_average.toFixed(1)}</span> 
+            </p>
+            <hr>
+            <p class="detail">
+              ${overview}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+};

ssr/server/apis/movies.js

@@ -0,0 +1,21 @@
+import {
+  TMDB_MOVIE_LISTS,
+  FETCH_OPTIONS,
+  TMDB_MOVIE_DETAIL_URL,
+} from "../constants.js";
+
+export const fetchMovieItems = async (category = "nowPlaying") => {
+  const url = TMDB_MOVIE_LISTS[category];
+  const response = await fetch(url, FETCH_OPTIONS);
+  const data = await response.json();
+
+  return data.results;
+};
+
+export const fetchMovieDetail = async (id) => {
+  const url = `${TMDB_MOVIE_DETAIL_URL}${id}?language=ko-KR`;
+  const response = await fetch(url, FETCH_OPTIONS);
+  const data = await response.json();
+
+  return data;
+};

ssr/server/constants.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",
+  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.VITE_TMDB_TOKEN,
+  },
+};

ssr/server/routes/index.js

@@ -2,20 +2,73 @@ import { Router } from "express";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import { generateMovieItems, generateMovieModal } from "../HTMLgenerator.js";
+import { fetchMovieDetail, fetchMovieItems } from "../apis/movies.js";
+import { TMDB_BANNER_URL } from "../constants.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const router = Router();
 
-router.get("/", (_, res) => {
+const renderMovieItemsHTML = (movies) => {
   const templatePath = path.join(__dirname, "../../views", "index.html");
-  const moviesHTML = "<p>들어갈 본문 작성</p>";
+  const template = fs.readFileSync(templatePath, "utf-8");
+
+  const movieItemsHTML = generateMovieItems(movies);
+  return template
+    .replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", movieItemsHTML)
+    .replace("${bestMovie.title}", movies[0].title)
+    .replace("${bestMovie.rate}", movies[0].vote_average.toFixed(1))
+    .replace(
+      "${background-container}",
+      `${TMDB_BANNER_URL}/${movies[0].backdrop_path}`
+    );
+};
 
+const renderMovieModalDetailHTML = (movie) => {
+  const templatePath = path.join(__dirname, "../../views", "index.html");
   const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
 
-  res.send(renderedHTML);
+  const movieModalDetailHTML = generateMovieModal(movie);
+  return template.replace("<!--${MODAL_AREA}-->", movieModalDetailHTML);
+};
+
+router.get("/", async (_, res) => {
+  const movies = await fetchMovieItems();
+
+  res.send(renderMovieItemsHTML(movies));
+});
+
+router.get("/now-playing", async (_, res) => {
+  const movies = await fetchMovieItems("nowPlaying");
+
+  res.send(renderMovieItemsHTML(movies));
+});
+
+router.get("/popular", async (_, res) => {
+  const movies = await fetchMovieItems("popular");
+
+  res.send(renderMovieItemsHTML(movies));
+});
+
+router.get("/top-rated", async (_, res) => {
+  const movies = await fetchMovieItems("topRated");
+
+  res.send(renderMovieItemsHTML(movies));
+});
+
+router.get("/upcoming", async (_, res) => {
+  const movies = await fetchMovieItems("upcoming");
+
+  res.send(renderMovieItemsHTML(movies));
+});
+
+router.get("/detail/:id", async (req, res) => {
+  const movieId = req.params.id;
+  const movieDetail = await fetchMovieDetail(movieId);
+
+  res.send(renderMovieModalDetailHTML(movieDetail));
 });
 
 export default router;