+
+ );
+};
+
+export default Modal;
diff --git a/Week10/sheepyis/Mission/src/components/movie/item-movie.tsx b/Week10/sheepyis/Mission/src/components/movie/item-movie.tsx
new file mode 100644
index 00000000..c6f02b52
--- /dev/null
+++ b/Week10/sheepyis/Mission/src/components/movie/item-movie.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import type { Movie } from "../../types/movie";
+
+interface ItemMovieProps {
+ movie: Movie;
+ onClick: (movie: Movie) => void;
+}
+
+const ItemMovie: React.FC
+
+
+
+
+ 
+
+
+
+
+
+ {movie.title}
+{movie.original_title}
+
+ 
+
+
+
+
+
+
+
+
+
+ + {movie.vote_average.toFixed(1)} +
+ ({movie.vote_count.toLocaleString()} 평가) +
+
+
+
+ 개봉일
+
+
+ {movie.release_date}
+
+ 인기도
+
+
+ {movie.popularity.toLocaleString()}
+
+ 줄거리
+
+ {movie.overview}
+
+
+ IMDb에서 검색
+
+
+
+ onClick(movie)}>
+
+
+ );
+};
+
+export default ItemMovie;
diff --git a/Week10/sheepyis/Mission/src/components/movie/list-movie.tsx b/Week10/sheepyis/Mission/src/components/movie/list-movie.tsx
new file mode 100644
index 00000000..0d5f74bd
--- /dev/null
+++ b/Week10/sheepyis/Mission/src/components/movie/list-movie.tsx
@@ -0,0 +1,23 @@
+import ItemMovie from "./item-movie";
+import type { Movie } from "../../types/movie";
+
+interface ListMovieProps {
+ data: Movie[];
+ onClick: (movie: Movie) => void;
+}
+
+const ListMovie: React.FC{movie.vote_average.toFixed(1)}
+
+
+
+ {movie.title}
+{movie.release_date}
++ {movie.overview} +
+영화 데이터가 없습니다.
; + } + + return ( +
+ {data.map((movie) => (
+
+ );
+};
+
+export default ListMovie;
\ No newline at end of file
diff --git a/Week10/sheepyis/Mission/src/components/search/search.tsx b/Week10/sheepyis/Mission/src/components/search/search.tsx
new file mode 100644
index 00000000..8bce9f81
--- /dev/null
+++ b/Week10/sheepyis/Mission/src/components/search/search.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import type { MovieSearchParams } from "../../types/movie";
+
+interface SearchProps {
+ onSearch: (params: MovieSearchParams) => void;
+}
+
+const Search: React.FC
+
+ );
+};
+
+export default React.memo(Search);
diff --git a/Week10/sheepyis/Mission/src/hooks/useGet.tsx b/Week10/sheepyis/Mission/src/hooks/useGet.tsx
new file mode 100644
index 00000000..8752e6f6
--- /dev/null
+++ b/Week10/sheepyis/Mission/src/hooks/useGet.tsx
@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { API } from "../apis/axios";
+
+export function useGet
+
+
+
+
+ 영화 제목
+ setQuery(e.target.value)} /> +
+
+ 옵션
+ +
+
+
+
+ 언어
+ +
+
+ )
+}
+
+export default RootLayout;
\ No newline at end of file
diff --git a/Week10/sheepyis/Mission/src/main.tsx b/Week10/sheepyis/Mission/src/main.tsx
new file mode 100644
index 00000000..8f0d28b4
--- /dev/null
+++ b/Week10/sheepyis/Mission/src/main.tsx
@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ );
+};
+
+export default MoviePage;
diff --git a/Week10/sheepyis/Mission/src/routes/router.tsx b/Week10/sheepyis/Mission/src/routes/router.tsx
new file mode 100644
index 00000000..c6c94735
--- /dev/null
+++ b/Week10/sheepyis/Mission/src/routes/router.tsx
@@ -0,0 +1,18 @@
+import { createBrowserRouter } from "react-router-dom"
+import RootLayout from "../layout/root-layout";
+import MoviePage from "../pages/movie";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: