[사전 미션 - CSR을 SSR로 재구성하기] - 썬데이(김유선) 미션 제출합니다.

ssr/package.json

@@ -4,16 +4,17 @@
   "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": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 node server/index.js",
+    "dev": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 nodemon server/index.js --watch"
   },
   "type": "module",
   "dependencies": {
     "express": "^4.18.2",
     "node-fetch": "^3.3.2"
   },
   "devDependencies": {
-    "nodemon": "^3.1.6",
-    "dotenv": "^16.0.0"
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.0.0",
+    "nodemon": "^3.1.6"
   }
 }

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,9 +12,9 @@ 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

ssr/server/routes/index.js

@@ -1,21 +1,115 @@
-import { Router } from "express";
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
+import { Router } from 'express';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { fetchMovieDetail, fetchMovies } from '../../src/api/movie.js';
+import { renderMovieItemPage } from '../../src/templates/renderMovieItemPage.js';
+import { TMDB_MOVIE_LISTS } from '../../src/constants/constant.js';
+import { renderModal } from '../../src/templates/renderModal.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>";
+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("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", 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;

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}`
+      : '',
+  };
+};

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,
+  },
+};

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(
+    '<!--${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=${movieDetail.poster_path} />
+          </div>
+          <div class="modal-description">
+            <h2>${movieDetail.title}</h2>
+            <p class="category">${
+              movieDetail.releaseYear
+            } · ${movieDetail.genres.join(', ')}</p>
+            <p class="rate"><img src="../assets/images/star_filled.png" class="star" /><span>7.7</span></p>
+            <hr />
+            <p class="detail">
+              ${movieDetail.description}
+            </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");
+          window.location.href = '/now-playing';
+        });
+      });
+    </script>
+  `,
+  );
+};