+
+
+
+ {children}
+
+ );
+};
+
+export default PageLayout;
\ No newline at end of file
diff --git a/week10/wendy0802/mission1/src/components/movies/MovieCard.tsx b/week10/wendy0802/mission1/src/components/movies/MovieCard.tsx
new file mode 100644
index 00000000..7c931c50
--- /dev/null
+++ b/week10/wendy0802/mission1/src/components/movies/MovieCard.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import type { Movie } from "../../types/movie";
+
+type MovieCardProps = {
+ movie: Movie;
+ onSelect: (movie: Movie) => void;
+};
+
+const MovieCard = ({ movie, onSelect }: MovieCardProps) => {
+ return (
+
+ );
+};
+
+export default React.memo(MovieCard);
diff --git a/week10/wendy0802/mission1/src/components/movies/MovieGrid.tsx b/week10/wendy0802/mission1/src/components/movies/MovieGrid.tsx
new file mode 100644
index 00000000..e40a2d96
--- /dev/null
+++ b/week10/wendy0802/mission1/src/components/movies/MovieGrid.tsx
@@ -0,0 +1,38 @@
+import React, { useMemo } from 'react';
+import MovieCard from './MovieCard';
+import type { Movie } from '../../types/movie';
+
+type MovieGridProps = {
+ movies: Movie[];
+ onSelectMovie: (movie: Movie) => void;
+};
+
+const MovieGrid = ({ movies, onSelectMovie }: MovieGridProps) => {
+ const movieCards = useMemo(
+ () =>
+ movies.map((movie) => (
+
+
+ 영화 검색
++ 검색 결과가 없습니다. +
+ ); + } + + return ( +
+ {movieCards}
+
+ );
+};
+
+export default React.memo(MovieGrid);
\ No newline at end of file
diff --git a/week10/wendy0802/mission1/src/components/movies/MovieModal.tsx b/week10/wendy0802/mission1/src/components/movies/MovieModal.tsx
new file mode 100644
index 00000000..fd3bd984
--- /dev/null
+++ b/week10/wendy0802/mission1/src/components/movies/MovieModal.tsx
@@ -0,0 +1,124 @@
+import React from "react";
+import type { Movie } from "../../types/movie";
+
+type MovieModalProps = {
+ movie: Movie;
+ onClose: () => void;
+};
+
+const MovieModal: React.FC
+
+ );
+};
+
+export default MovieModal;
diff --git a/week10/wendy0802/mission1/src/components/search/SearchForm.tsx b/week10/wendy0802/mission1/src/components/search/SearchForm.tsx
new file mode 100644
index 00000000..a27c9ef4
--- /dev/null
+++ b/week10/wendy0802/mission1/src/components/search/SearchForm.tsx
@@ -0,0 +1,93 @@
+
+import React from "react";
+
+type MovieSearchFormProps = {
+ title: string;
+ includeAdult: boolean;
+ language: string;
+ onChangeTitle: (value: string) => void;
+ onChangeIncludeAdult: (value: boolean) => void;
+ onChangeLanguage: (value: string) => void;
+ onSubmit: () => void;
+};
+
+const MovieSearchForm: React.FC
+
+
+ {movie.backdropUrl || movie.posterUrl ? (
+ 
+ ) : null}
+
+
+
+
+
+
+
+
+ + {movie.title} +
+
+
+
+
+
+
+ {movie.posterUrl ? (
+ 
+ ) : (
+
+
+ No Image
+
+ )}
+
+
+
+
+ {movie.voteAverage.toFixed(1)}
+
+ {movie.voteCount != null && (
+
+ ({movie.voteCount} 평가)
+
+ )}
+
+
+
+
+
+
+ 개봉일
+{movie.releaseDate || "정보 없음"}
+
+
+ + 인기도 +
+
+
+
+
+
+ + 줄거리 +
++ {movie.overview || "등록된 줄거리 정보가 없습니다."} +
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/week10/wendy0802/prac1/src/components/CountButton.tsx b/week10/wendy0802/prac1/src/components/CountButton.tsx
new file mode 100644
index 00000000..b920fd2e
--- /dev/null
+++ b/week10/wendy0802/prac1/src/components/CountButton.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+type CountButtonProps = {
+ onClick: (value: number) => void;
+ value?: number;
+};
+
+const CountButton = ({ onClick, value = 10 }: CountButtonProps) => {
+ return (
+
+ );
+};
+
+export default React.memo(CountButton);
\ No newline at end of file
diff --git a/week10/wendy0802/prac1/src/components/TextInput.tsx b/week10/wendy0802/prac1/src/components/TextInput.tsx
new file mode 100644
index 00000000..d4090ba5
--- /dev/null
+++ b/week10/wendy0802/prac1/src/components/TextInput.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+type TextInputProps = {
+ label: string;
+ value: string;
+ onChange: (value: string) => void;
+};
+
+const TextInput = ({ label, value, onChange }: TextInputProps) => {
+ return (
+
+
+ + 같이 배우는 리액트 useCallback편 +
+ +Count : {count}
+
+