[사전 미션 - CSR을 SSR로 재구성하기] - 리안(오혜린) 미션 제출합니다.

csr/src/Constant.js

@@ -1,8 +1,10 @@
 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_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_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",

csr/src/apis/movies.js

@@ -0,0 +1,7 @@
+import { FETCH_OPTIONS, TMDB_MOVIE_LISTS } from "../Constant";
+
+export const fetchMovies = async () => {
+  const response = await fetch(TMDB_MOVIE_LISTS.popular, FETCH_OPTIONS);
+
+  return await response.json();
+};

csr/src/components/Container.jsx

@@ -47,18 +47,28 @@ function Container() {
 
   return (
     <div className="container">
-      <Tab items={Object.values(categories)} onClick={handleTabClick} selectedIndex={focusedIndex} />
+      <Tab
+        items={Object.values(categories)}
+        onClick={handleTabClick}
+        selectedIndex={focusedIndex}
+      />
       <main>
         <section>
           <h2>지금 인기 있는 영화</h2>
           <ul className="thumbnail-list">
-            {lists[focusedIndex].map(({ id, title, vote_average, poster_path }) => (
-              <li key={id}>
-                <Link to={`/detail/${id}`}>
-                  <MovieItem rate={vote_average} title={title} thumbnailUrl={poster_path} />
-                </Link>
-              </li>
-            ))}
+            {lists[focusedIndex].map(
+              ({ id, title, vote_average, poster_path }) => (
+                <li key={id}>
+                  <Link to={`/detail/${id}`}>
+                    <MovieItem
+                      rate={vote_average}
+                      title={title}
+                      thumbnailUrl={poster_path}
+                    />
+                  </Link>
+                </li>
+              )
+            )}
           </ul>
         </section>
       </main>

csr/src/hooks/useMovies.js

@@ -15,7 +15,12 @@ const useMovies = () => {
   const [upcomingMovies, setUpcomingMovies] = useAtom(upcomingMoviesAtom);
   const [focusedIndex, setFocusedIndex] = useAtom(focusedIndexAtom);
 
-  const movieLists = [nowPlayingMovies, popularMovies, topRatedMovies, upcomingMovies];
+  const movieLists = [
+    nowPlayingMovies,
+    popularMovies,
+    topRatedMovies,
+    upcomingMovies,
+  ];
 
   const loadMovies = async (url, setter) => {
     const response = await fetch(url, FETCH_OPTIONS);

ssr/README.md

@@ -25,9 +25,11 @@ npm run dev
   ```js
   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_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_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",
@@ -100,10 +102,14 @@ express 서버에서 `views/index.html` 파일을 활용하여 클라이언트
     const templatePath = path.join(__dirname, "../../views", "index.html");
     let template = fs.readFileSync(templatePath, "utf-8");
 
-    template = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+    template = template.replace(
+      "<!--${MOVIE_ITEMS_PLACEHOLDER}-->",
+      moviesHTML
+    );
     template = template.replace(
       "${background-container}",
-      "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/" + bestMovieItem.background
+      "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/" +
+        bestMovieItem.background
     );
     template = template.replace("${bestMovie.rate}", bestMovieItem.rate);
     template = template.replace("${bestMovie.title}", bestMovieItem.title);
@@ -127,11 +133,15 @@ express 서버에서 `views/index.html` 파일을 활용하여 클라이언트
           <button class="close-modal" id="closeModal"><img src="../images/modal_button_close.png" /></button>
           <div class="modal-container">
             <div class="modal-image">
-              <img src="https://image.tmdb.org/t/p/original/${movieDetail.thumbnail}.jpg" />
+              <img src="https://image.tmdb.org/t/p/original/${
+                movieDetail.thumbnail
+              }.jpg" />
             </div>
             <div class="modal-description">
               <h2>${movieDetail.title}</h2>
-              <p class="category">${movieDetail.releaseYear} · ${movieDetail.genres.join(", ")}</p>
+              <p class="category">${
+                movieDetail.releaseYear
+              } · ${movieDetail.genres.join(", ")}</p>
               <p class="rate"><img src="../images/star_filled.png" class="star" /><span>7.7</span></p>
               <hr />
               <p class="detail">

ssr/server/routes/index.js

@@ -2,20 +2,130 @@ import { Router } from "express";
 import fs from "fs";
 import path from "path";
 import { fileURLToPath } from "url";
+import { fetchMovieDetail, fetchMovies } from "../../src/fetchMovies.js";
+import {
+  renderDetailModal,
+  renderMovieItems,
+  renderTabs,
+} from "../../views/template.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 const router = Router();
 
-router.get("/", (_, res) => {
+const getMovieList = async (category) => {
+  const movieData = await fetchMovies(category);
+  return parseMovies(movieData);
+};
+
+const getMovieDetail = async (movieId) => {
+  const movieDetailData = await fetchMovieDetail(movieId);
+  return parseMovieDetail(movieDetailData);
+};
+
+const renderMoviesPage = async (category) => {
+  const movieList = await getMovieList(category);
+  const templatePath = path.join(__dirname, "../../views", "index.html");
+  let template = fs.readFileSync(templatePath, "utf-8");
+  return renderMoviesTemplate(template, movieList, category);
+};
+
+const renderMoviesDetailPage = async (category, movieId) => {
+  const movieList = await getMovieList(category);
+  const movieDetail = await getMovieDetail(movieId);
+
   const templatePath = path.join(__dirname, "../../views", "index.html");
-  const moviesHTML = "<p>들어갈 본문 작성</p>";
+  let template = fs.readFileSync(templatePath, "utf-8");
+  template = renderMoviesTemplate(template, movieList, category);
+  template = renderModalTemplate(template, movieDetail);
+
+  return template;
+};
+
+export const renderMoviesTemplate = (template, movieList, category) => {
+  const bestMovieItem = movieList[0];
+  const moviesHTML = renderMovieItems(movieList).join("");
+  const tabsHTML = renderTabs(category).join("");
+
+  template = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+  template = template.replace("<!--${TABS_PLACEHOLDER}-->", tabsHTML);
+  template = template.replace(
+    "${background-container}",
+    "https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/" +
+      bestMovieItem.background
+  );
+  template = template.replace("${bestMovie.rate}", bestMovieItem.rate);
+  template = template.replace("${bestMovie.title}", bestMovieItem.title);
+
+  return template;
+};
+
+export const renderModalTemplate = (template, movieDetailItem) => {
+  return template.replace(
+    "<!--${MODAL_AREA}-->",
+    renderDetailModal(movieDetailItem)
+  );
+};
+
+export const parseMovies = async (movieData) => {
+  const formattedMovieData = movieData.results.map((movie) => ({
+    id: movie.id,
+    title: movie.title,
+    thumbnail: movie.poster_path,
+    rate: movie.vote_average,
+    background: movie.backdrop_path,
+  }));
+
+  return formattedMovieData;
+};
+
+export const parseMovieDetail = async (movie) => {
+  return {
+    id: movie.id,
+    title: movie.title,
+    thumbnail: movie.poster_path,
+    releaseYear: movie.release_date,
+    genres: movie.genres.map((genre) => genre.name),
+    description: movie.overview,
+    rate: movie.vote_average,
+  };
+};
+
+const handleMovieRoute = async (res, category) => {
+  try {
+    let template = await renderMoviesPage(category);
+    res.send(template);
+  } catch (error) {
+    console.error("Error rendering page:", error);
+    res.status(500).send("Internal Server Error");
+  }
+};
+
+const handleDetailRoute = async (res, movieId) => {
+  try {
+    const moviesPageTemplate = await renderMoviesDetailPage(
+      "NOW_PLAYING",
+      movieId
+    );
+    res.send(moviesPageTemplate);
+  } catch (error) {
+    console.error("Error rendering page:", error);
+    res.status(500).send("Internal Server Error");
+  }
+};
 
-  const template = fs.readFileSync(templatePath, "utf-8");
-  const renderedHTML = template.replace("<!--${MOVIE_ITEMS_PLACEHOLDER}-->", moviesHTML);
+router.get("/", async (_, res) => handleMovieRoute(res, "NOW_PLAYING"));
+router.get("/now-playing", async (_, res) =>
+  handleMovieRoute(res, "NOW_PLAYING")
+);
+router.get("/popular", async (_, res) => handleMovieRoute(res, "POPULAR"));
+router.get("/top-rated", async (_, res) => handleMovieRoute(res, "TOP_RATED"));
+router.get("/upcoming", async (_, res) => handleMovieRoute(res, "UPCOMING"));
 
-  res.send(renderedHTML);
+router.get("/detail/:id", async (req, res) => {
+  const { id } = req.params;
+  handleDetailRoute(res, id);
 });
 
 export default router;

ssr/src/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/fetchMovies.js

@@ -0,0 +1,21 @@
+import {
+  FETCH_OPTIONS,
+  TMDB_MOVIE_DETAIL_URL,
+  TMDB_MOVIE_LISTS,
+} from "./constant.js";
+
+export const fetchMovies = async (category) => {
+  const endpoint = TMDB_MOVIE_LISTS[category];
+  const response = await fetch(endpoint, FETCH_OPTIONS);
+  return await response.json();
+};
+
+export const fetchMovieDetail = async (id) => {
+  const url = TMDB_MOVIE_DETAIL_URL + id;
+  const params = new URLSearchParams({
+    language: "ko-KR",
+  });
+  const response = await fetch(url + "?" + params, FETCH_OPTIONS);
+
+  return await response.json();
+};

ssr/views/index.html

@@ -14,10 +14,15 @@
   <body>
     <div id="wrap">
       <header>
-        <div class="background-container" style="background-image: url('${background-container}')">
+        <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" />
@@ -32,34 +37,10 @@ <h1 class="logo"><img src="../assets/images/logo.png" alt="MovieList" /></h1>
       <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
-            >
+            <!--${TABS_PLACEHOLDER}-->
           </li>
         </ul>
+
         <main>
           <section>
             <h2>지금 인기 있는 영화</h2>