+ ![영화 포스터 사진]()
+
+
+
+
+
+ `,
+ );
+
+ const img = modalDiv.querySelector${movieDetailData.title}
++ ${releaseDate} · ${parseGenre(movieDetailData)} +
+
+ 평균
+ 
+ ${movieDetailData.vote_average}
+
+
+ ${movieDetailData.vote_average}
+ +
내 별점
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
줄거리
++ ${movieDetailData.overview} +
+${mostPopularMovie.title}
-
+
`;
banner?.insertAdjacentHTML("beforeend", mostPopularMovieBanner);
diff --git a/src/storage/LocalRatingStorage.ts b/src/storage/LocalRatingStorage.ts
new file mode 100644
index 000000000..9d7c8d638
--- /dev/null
+++ b/src/storage/LocalRatingStorage.ts
@@ -0,0 +1,16 @@
+import { RatingStorage } from "./RatingStorage";
+
+export class LocalRatingStorage implements RatingStorage {
+ private readonly KEY = "movieRatings";
+
+ getRating(movieId: number): number {
+ const ratings = JSON.parse(localStorage.getItem(this.KEY) || "{}");
+ return ratings[movieId] || 0;
+ }
+
+ setRating(movieId: number, score: number): void {
+ const ratings = JSON.parse(localStorage.getItem(this.KEY) || "{}");
+ ratings[movieId] = score;
+ localStorage.setItem(this.KEY, JSON.stringify(ratings));
+ }
+}
diff --git a/src/storage/RatingStorage.ts b/src/storage/RatingStorage.ts
new file mode 100644
index 000000000..1e34313a1
--- /dev/null
+++ b/src/storage/RatingStorage.ts
@@ -0,0 +1,4 @@
+export interface RatingStorage {
+ getRating(movieId: number): number;
+ setRating(movieId: number, score: number): void;
+}
diff --git a/src/utils/scrollObserver.ts b/src/utils/scrollObserver.ts
new file mode 100644
index 000000000..597af2cb3
--- /dev/null
+++ b/src/utils/scrollObserver.ts
@@ -0,0 +1,16 @@
+export const createScrollObserver = (
+ targetElement: HTMLElement,
+ onIntersect: () => void,
+) => {
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ onIntersect();
+ }
+ });
+ });
+
+ observer.observe(targetElement);
+
+ return () => observer.disconnect();
+};
diff --git a/templates/index.html b/templates/index.html
index a4cf088d4..86c7864e0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,7 +4,7 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+