`;
+ }
+ );
+
+ const renderedHTML = template
+ .replace("", headerHTML)
+ .replace(/\$\{sectionTitle\}/g, sectionTitles[currentPath])
+ .replace("", moviesHTML);
+
+ res.send(renderedHTML);
+ } catch (error) {
+ console.error(error.message);
+ res.status(500).send("Internal Server Error");
+ }
+};
+
+const renderMovieDetailPage = async (req, res) => {
+ const id = req.params.id;
+
+ try {
+ const templatePath = path.join(__dirname, "../../views", "index.html");
+
+ const movieDetail = await fetchMovieDetails(id);
+ const movieDetailHTML = renderMovieDetails(movieDetail);
+
+ let template = fs.readFileSync(templatePath, "utf-8");
+
+ const renderedHTML = template.replace(
+ "",
+ movieDetailHTML
+ );
+
+ res.send(renderedHTML);
+ } catch (error) {
+ console.error(error.message);
+ res.status(500).send("Internal Server Error");
+ }
+};
+
+router.get("/", renderMoviePage);
+router.get("/now-playing", renderMoviePage);
+router.get("/popular", renderMoviePage);
+router.get("/top-rated", renderMoviePage);
+router.get("/upcoming", renderMoviePage);
+router.get("/detail/:id", renderMovieDetailPage);
export default router;
diff --git a/ssr/server/src/api/movie.js b/ssr/server/src/api/movie.js
new file mode 100644
index 0000000..20555e2
--- /dev/null
+++ b/ssr/server/src/api/movie.js
@@ -0,0 +1,46 @@
+import {
+ FETCH_OPTIONS,
+ TMDB_MOVIE_DETAIL_URL,
+ TMDB_MOVIE_LISTS,
+} from "../constant.js";
+
+export const fetchPopularMovieItems = async () => {
+ const response = await fetch(TMDB_MOVIE_LISTS.POPULAR, FETCH_OPTIONS);
+
+ const data = await response.json();
+
+ return data.results;
+};
+
+export const fetchNowPlayingMovieItems = async () => {
+ const response = await fetch(TMDB_MOVIE_LISTS.NOW_PLAYING, FETCH_OPTIONS);
+
+ const data = await response.json();
+
+ return data.results;
+};
+
+export const fetchTopRatedMovieItems = async () => {
+ const response = await fetch(TMDB_MOVIE_LISTS.TOP_RATED, FETCH_OPTIONS);
+
+ const data = await response.json();
+
+ return data.results;
+};
+
+export const fetchUpcomingMovieItems = async () => {
+ const response = await fetch(TMDB_MOVIE_LISTS.UPCOMING, FETCH_OPTIONS);
+
+ const data = await response.json();
+
+ return data.results;
+};
+
+export const fetchMovieDetails = 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.results;
+};
diff --git a/ssr/server/src/constant.js b/ssr/server/src/constant.js
new file mode 100644
index 0000000..b26b9a7
--- /dev/null
+++ b/ssr/server/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,
+ },
+};
diff --git a/ssr/server/src/render/renderHeader.js b/ssr/server/src/render/renderHeader.js
new file mode 100644
index 0000000..0af3c8c
--- /dev/null
+++ b/ssr/server/src/render/renderHeader.js
@@ -0,0 +1,27 @@
+import { round } from "../../../../csr/src/utils.js";
+
+export const renderHeader = ({ id, title, backdrop_path, vote_average }) => {
+ return /*html*/ `
+
+
+ `;
+};
diff --git a/ssr/server/src/render/renderMovieDetails.js b/ssr/server/src/render/renderMovieDetails.js
new file mode 100644
index 0000000..f4d187a
--- /dev/null
+++ b/ssr/server/src/render/renderMovieDetails.js
@@ -0,0 +1,38 @@
+import { TMDB_THUMBNAIL_URL } from "../constant.js";
+
+export const renderMovieDetails = (movieDetail = {}) => {
+ const {
+ title,
+ genres = [],
+ vote_average = 0,
+ poster_path,
+ overview,
+ } = movieDetail;
+
+ return /*html*/ `
+
+
+
+ `
+ )
+ .join("");
diff --git a/ssr/views/index.html b/ssr/views/index.html
index a052396..482c342 100644
--- a/ssr/views/index.html
+++ b/ssr/views/index.html
@@ -13,34 +13,19 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+`;
+};
diff --git a/ssr/server/src/render/renderMovieItems.js b/ssr/server/src/render/renderMovieItems.js
new file mode 100644
index 0000000..3808113
--- /dev/null
+++ b/ssr/server/src/render/renderMovieItems.js
@@ -0,0 +1,25 @@
+import { round } from "../../../../csr/src/utils.js";
+
+export const renderMovieItems = (movieItems = []) =>
+ movieItems
+ .map(
+ ({ id, title, poster_path, vote_average }) => /*html*/ `
+
+
+
+
+
+
+ 
+
+
+
+
+ ${title}
+${genres.map(({ name }) => name).join(", ")}
+
+ 
+ ${vote_average.toFixed(1)}
+
+
+ ${overview} +
+
+ 
+
+
+
+
+
+ 
+ ${round(vote_average, 1)}
-
-
+
-
-
-
-
-
- 
-
-
-
- ${bestMovie.rate}
-
-
- ${bestMovie.rate}
- ${bestMovie.title}
-
-