+ 로딩중 ㄱㄷ
+
+ )}
+
+
+ );
+};
+
+export default MovieCard;
diff --git a/Week10/src/components/MovieFilter.tsx b/Week10/src/components/MovieFilter.tsx
new file mode 100644
index 00000000..b31b6f78
--- /dev/null
+++ b/Week10/src/components/MovieFilter.tsx
@@ -0,0 +1,84 @@
+import { memo, useState } from 'react';
+
+import Input from '@/components/Input';
+import LanguageSelector from '@/components/LanguageSelector';
+import SelectBox from '@/components/SelectBox';
+import { LANGUAGE_OPTIONS, LANGUAGE_OPTIONS_VALUES } from '@/constants/movie';
+import type { MovieFiters, MovieLanguage } from '@/types/Movie';
+
+interface MovieFilterProps {
+ onChange: (filter: MovieFiters) => void;
+}
+
+function MovieFilter({ onChange }: MovieFilterProps) {
+ const [query, setQuery] = useState
+ })
+
+ {movie.vote_average.toFixed(1)}
+
+
+
+
+ + {movie.title} +
+{movie.release_date}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 검색 결과가 없습니다.
+
+ );
+
+ return (
+ <>
+ setSelectedMovie(movie)}
+ className="cursor-pointer"
+ >
+
+ ))}
+
+
,
+ document.body,
+ );
+};
+
+export default MovieModal;
diff --git a/Week10/src/components/SelectBox.tsx b/Week10/src/components/SelectBox.tsx
new file mode 100644
index 00000000..d7f0a589
--- /dev/null
+++ b/Week10/src/components/SelectBox.tsx
@@ -0,0 +1,34 @@
+import type { ReactElement } from 'react';
+
+interface SelectBoxProps {
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ label: string;
+ id?: string;
+ className?: string;
+}
+
+function SelectBox({
+ checked,
+ onChange,
+ label,
+ id = 'checkbox',
+ className,
+}: SelectBoxProps): ReactElement {
+ return (
+ e.stopPropagation()}
+ >
+ {/* 닫기 버튼 */}
+
+
+ {/* 배경 이미지 */}
+
+
+
+
+
+
+ 
+
+
+ {/* 콘텐츠 */}
+
+
+
+
+ {movie.title}
+{movie.original_title}
+
+
+
+
+ {movie.vote_average.toFixed(1)}
+
+
+ ({movie.vote_count.toLocaleString()}명 평가)
+
+
+
+
+
+
+
+ 개봉일:
+ {movie.release_date}
+
+
+ 인기도:
+ {movie.popularity.toLocaleString()}
+
+
+ {movie.overview || '줄거리 정보가 없습니다.'}
+
+
+
+
+ IMDb에서 검색
+
+
+
+
+ onChange(e.target.checked)}
+ className="text-blue-600 bg-gray-200 border-gray-300 rounded size-4 focus:ring-blue-500"
+ />
+
+
+ );
+}
+
+export default SelectBox;
diff --git a/Week10/src/constants/api.ts b/Week10/src/constants/api.ts
new file mode 100644
index 00000000..044f5ba1
--- /dev/null
+++ b/Week10/src/constants/api.ts
@@ -0,0 +1,5 @@
+export const TMDB_BASE_URL = 'https://api.themoviedb.org/3';
+export const TMDB_AUTH_TOKEN = `Bearer ${import.meta.env.VITE_TMDB_KEY}`;
+export const TMDB_API_PATHS = {
+ SEARCH_MOVIE: '/search/movie',
+} as const;
diff --git a/Week10/src/constants/movie.ts b/Week10/src/constants/movie.ts
new file mode 100644
index 00000000..84e5aa41
--- /dev/null
+++ b/Week10/src/constants/movie.ts
@@ -0,0 +1,30 @@
+import type { MovieLanguage } from '@/types/Movie';
+
+export const LANGUAGE_OPTIONS_VALUES: Record<
+ 'KOREAN' | 'ENGLISH' | 'JAPANESE',
+ MovieLanguage
+> = {
+ KOREAN: 'ko-KR',
+ ENGLISH: 'en-US',
+ JAPANESE: 'ja-JP',
+};
+
+export const LANGUAGE_OPTIONS = [
+ { value: 'ko-KR', label: '한국어' },
+ { value: 'en-US', label: 'English' },
+ { value: 'ja-JP', label: '니혼말' },
+];
+
+export const IMAGE_BASE = 'https://image.tmdb.org/t/p';
+export const IMAGE_SIZE = {
+ SMALL: 'w185',
+ MEDIUM: 'w342',
+ LARGE: 'w500',
+ XL: 'w780',
+ ORIGINAL: 'original',
+} as const;
+
+export type ImageSize = keyof typeof IMAGE_SIZE;
+
+export const getPosterUrl = (path: string, size: ImageSize = 'LARGE') =>
+ `${IMAGE_BASE}/${IMAGE_SIZE[size]}${path}`;
diff --git a/Week10/src/hooks/useFetch.ts b/Week10/src/hooks/useFetch.ts
new file mode 100644
index 00000000..ed813e67
--- /dev/null
+++ b/Week10/src/hooks/useFetch.ts
@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+import type { AxiosRequestConfig } from 'axios';
+
+import axiosClient from '@/apis/axiosClinet';
+
+export const useFetch = 에러 ㅅㄱㅇ
;
+
+ return (
+