openModal(item)}
+ >
+ 
+
+
+ );
+}
+export default memo(MovieList, (prev, next) => {
+ return JSON.stringify(prev.item) === JSON.stringify(next.item);
+});
diff --git a/sona/week10/mission-z/src/components/MovieModal.tsx b/sona/week10/mission-z/src/components/MovieModal.tsx
new file mode 100644
index 00000000..847bad92
--- /dev/null
+++ b/sona/week10/mission-z/src/components/MovieModal.tsx
@@ -0,0 +1,97 @@
+import { useModalStore } from "../hooks/useModalStore";
+
+export default function MovieModal() {
+ const { selectedMovie, modalClose, isOpen } = useModalStore();
+ const imageBaseUrl = "https://image.tmdb.org/t/p/w500";
+ const fallbackImage = "https://via.placeholder.com/640x480";
+
+ if (!isOpen || !selectedMovie) return null;
+
+ return (
+ <>
+
+
+
+ {item.title}
+{item.release_date}
+{item.overview}
+
+ {item.vote_average.toFixed(1)}
+
+
+
+
+ );
+}
diff --git a/sona/week10/mission-z/src/constants/movie.ts b/sona/week10/mission-z/src/constants/movie.ts
new file mode 100644
index 00000000..f99a50d9
--- /dev/null
+++ b/sona/week10/mission-z/src/constants/movie.ts
@@ -0,0 +1,10 @@
+export const LANGUAGE_OPTIONS = [
+ {
+ value: "ko-KR",
+ label: "한국어",
+ },
+ {
+ value: "en-US",
+ label: "English",
+ },
+];
diff --git a/sona/week10/mission-z/src/hooks/useFetch.ts b/sona/week10/mission-z/src/hooks/useFetch.ts
new file mode 100644
index 00000000..3c228cfc
--- /dev/null
+++ b/sona/week10/mission-z/src/hooks/useFetch.ts
@@ -0,0 +1,31 @@
+import type { AxiosRequestConfig } from "axios";
+import { useEffect, useState } from "react";
+import { axiosClient } from "../apis/axiosClient";
+
+const useFetch =
+ {/* 상단 백드롭 이미지 */}
+
+
+
+
+
+
+ {/* 상세 정보 */}
+
+
+ {selectedMovie.title}
++ {selectedMovie.original_title} ( + {selectedMovie.original_language.toUpperCase()}) +
+
+
+
+
+
+ + {selectedMovie.vote_average.toFixed(1)}{" "} + + ({selectedMovie.vote_count} 평가) + +
+
+
+ 개봉일
+{selectedMovie.release_date}
+
+
+ 인기도
+{selectedMovie.popularity.toFixed(1)}
+
+
+ 줄거리
++ {selectedMovie.overview} +
+
+
+ IMDb에서 검색
+
+
+
+
+ {isLoading &&
+ );
+}
diff --git a/sona/week10/mission-z/src/types/movie.ts b/sona/week10/mission-z/src/types/movie.ts
new file mode 100644
index 00000000..54a9f4b0
--- /dev/null
+++ b/sona/week10/mission-z/src/types/movie.ts
@@ -0,0 +1,29 @@
+export type Movie = {
+ adult: boolean;
+ backdrop_path: string | null;
+ genre_ids: number[];
+ id: number;
+ original_language: string;
+ original_title: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ release_date: string;
+ title: string;
+ video: boolean;
+ vote_average: number;
+ vote_count: number;
+};
+
+export type MovieResponse = {
+ page: string;
+ results: Movie[];
+ total_pages: number;
+ total_results: number;
+};
+
+export type MovieFilterT = {
+ query: string;
+ include_adult: boolean;
+ language: string;
+};
diff --git a/sona/week10/mission-z/src/vite-env.d.ts b/sona/week10/mission-z/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/sona/week10/mission-z/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// 로딩 중
} + {error &&{error}
} + +
+ {data?.results.map((movie) => (
+
+