+ setSelectedMovie(null)} // 닫기 버튼 누르면 null로 변경
+ />
+ )}
+
+ );
+}
+
+export default App;
\ No newline at end of file
diff --git a/week10/src/assets/hero.png b/week10/src/assets/hero.png
new file mode 100644
index 00000000..02251f4b
Binary files /dev/null and b/week10/src/assets/hero.png differ
diff --git a/week10/src/assets/react.svg b/week10/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/week10/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/week10/src/assets/vite.svg b/week10/src/assets/vite.svg
new file mode 100644
index 00000000..5101b674
--- /dev/null
+++ b/week10/src/assets/vite.svg
@@ -0,0 +1 @@
+
diff --git a/week10/src/components/MovieCard.tsx b/week10/src/components/MovieCard.tsx
new file mode 100644
index 00000000..fd28704e
--- /dev/null
+++ b/week10/src/components/MovieCard.tsx
@@ -0,0 +1,27 @@
+import type { Movie } from '../types/movie';
+
+interface MovieCardProps {
+ movie: Movie;
+ onClick: (movie: Movie) => void;
+}
+
+const MovieCard = ({ movie, onClick }: MovieCardProps) => {
+ return (
+
+
+ {/* 1. 검색 폼 컴포넌트 */}
+
+
+ {/* 3. 상세 정보 모달 컴포넌트 */}
+ {selectedMovie && (
+
+ {movies.map((movie) => (
+
+
+ {movies.length === 0 && (
+ 위 검색창에서 영화를 검색해보세요!
+ )} + onClick(movie)}
+ className="bg-white rounded-lg shadow cursor-pointer hover:scale-105 transition-transform overflow-hidden"
+ >
+ 
+
+ );
+};
+
+export default MovieCard;
\ No newline at end of file
diff --git a/week10/src/components/MovieModal.tsx b/week10/src/components/MovieModal.tsx
new file mode 100644
index 00000000..bcf8e07b
--- /dev/null
+++ b/week10/src/components/MovieModal.tsx
@@ -0,0 +1,56 @@
+import type { Movie } from '../types/movie';
+
+interface MovieModalProps {
+ movie: Movie;
+ onClose: () => void;
+}
+
+const MovieModal = ({ movie, onClose }: MovieModalProps) => {
+ return (
+
+
+ {movie.title}
+⭐ {movie.vote_average}
+
+
+ );
+};
+
+export default MovieModal;
\ No newline at end of file
diff --git a/week10/src/components/SearchForm.tsx b/week10/src/components/SearchForm.tsx
new file mode 100644
index 00000000..20690033
--- /dev/null
+++ b/week10/src/components/SearchForm.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+interface SearchFormProps {
+ query: string;
+ setQuery: (val: string) => void;
+ includeAdult: boolean;
+ setIncludeAdult: (val: boolean) => void;
+ language: string;
+ setLanguage: (val: string) => void;
+ onSearch: (e: React.FormEvent
+
+
+
+
+
+
+
+
+
+ {movie.title}
+ +
+ ⭐ 평점: {movie.vote_average.toFixed(1)}
+ 📅 개봉: {movie.release_date}
+
+
+ + {movie.overview || "줄거리가 제공되지 않습니다."} +
+ +
+
+
+
+