검색 중...
} + {error &&{error}
} + {!loading && searched && movies.length === 0 && ( +검색 결과가 없습니다.
+ )} + +
+ {moviesWithPoster.map((movie) => (
+
+
+
+ {loading &&
+
+ {selectedMovie && (
+
+ );
+}
+
+export default App;
diff --git a/week10/src/api/tmdb.ts b/week10/src/api/tmdb.ts
new file mode 100644
index 00000000..6c320496
--- /dev/null
+++ b/week10/src/api/tmdb.ts
@@ -0,0 +1,26 @@
+import type { SearchResponse } from '../types/movie';
+
+const TMDB_KEY = import.meta.env.VITE_TMDB_KEY as string;
+const BASE_URL = 'https://api.themoviedb.org/3';
+
+export async function searchMovies(
+ query: string,
+ language: string,
+ includeAdult: boolean
+): Promise onClick(movie)}>
+
+ );
+});
+
+MovieCard.displayName = 'MovieCard';
+export default MovieCard;
diff --git a/week10/src/components/MovieModal.tsx b/week10/src/components/MovieModal.tsx
new file mode 100644
index 00000000..18ba941c
--- /dev/null
+++ b/week10/src/components/MovieModal.tsx
@@ -0,0 +1,88 @@
+import { memo } from 'react';
+import type { Movie } from '../types/movie';
+
+interface Props {
+ movie: Movie;
+ onClose: () => void;
+}
+
+const POSTER_BASE = 'https://image.tmdb.org/t/p/w342';
+const BACKDROP_BASE = 'https://image.tmdb.org/t/p/w780';
+
+const MovieModal = memo(({ movie, onClose }: Props) => {
+ const imdbUrl = `https://www.imdb.com/find?q=${encodeURIComponent(movie.title)}`;
+
+ return (
+
+ {movie.poster_path ? (
+ 
+ ) : (
+
+ 이미지 없음
+ )}
+ {movie.vote_average.toFixed(1)}
+
+
+ {movie.title}
+{movie.release_date}
+{movie.overview}
+
+
+ );
+});
+
+MovieModal.displayName = 'MovieModal';
+export default MovieModal;
diff --git a/week10/src/components/SearchForm.tsx b/week10/src/components/SearchForm.tsx
new file mode 100644
index 00000000..95884d79
--- /dev/null
+++ b/week10/src/components/SearchForm.tsx
@@ -0,0 +1,73 @@
+import { memo } from 'react';
+import type { ChangeEvent, FormEvent } from 'react';
+
+interface Props {
+ query: string;
+ onQueryChange: (value: string) => void;
+ includeAdult: boolean;
+ onIncludeAdultChange: (value: boolean) => void;
+ language: string;
+ onLanguageChange: (value: string) => void;
+ onSubmit: (e: FormEvent) => void;
+}
+
+const SearchForm = memo(({
+ query,
+ onQueryChange,
+ includeAdult,
+ onIncludeAdultChange,
+ language,
+ onLanguageChange,
+ onSubmit,
+}: Props) => {
+ return (
+
+ );
+});
+
+SearchForm.displayName = 'SearchForm';
+export default SearchForm;
diff --git a/week10/src/index.css b/week10/src/index.css
new file mode 100644
index 00000000..b5bb7d79
--- /dev/null
+++ b/week10/src/index.css
@@ -0,0 +1,104 @@
+:root {
+ --text: #6b6375;
+ --text-h: #08060d;
+ --bg: #fff;
+ --border: #e5e4e7;
+ --code-bg: #f4f3ec;
+ --accent: #aa3bff;
+ --accent-bg: rgba(170, 59, 255, 0.1);
+ --accent-border: rgba(170, 59, 255, 0.5);
+ --social-bg: rgba(244, 243, 236, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+ --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+ --mono: ui-monospace, Consolas, monospace;
+
+ font: 18px/145% var(--sans);
+ letter-spacing: 0.18px;
+ color-scheme: light dark;
+ color: var(--text);
+ background: var(--bg);
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ @media (max-width: 1024px) {
+ font-size: 16px;
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --text: #9ca3af;
+ --text-h: #f3f4f6;
+ --bg: #16171d;
+ --border: #2e303a;
+ --code-bg: #1f2028;
+ --accent: #c084fc;
+ --accent-bg: rgba(192, 132, 252, 0.15);
+ --accent-border: rgba(192, 132, 252, 0.5);
+ --social-bg: rgba(47, 48, 58, 0.5);
+ --shadow:
+ rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+ }
+
+ #social .button-icon {
+ filter: invert(1) brightness(2);
+ }
+}
+
+#root {
+ width: 100%;
+ min-height: 100svh;
+}
+
+body {
+ margin: 0;
+}
+
+h1,
+h2 {
+ font-family: var(--heading);
+ font-weight: 500;
+ color: var(--text-h);
+}
+
+h1 {
+ font-size: 56px;
+ letter-spacing: -1.68px;
+ margin: 32px 0;
+ @media (max-width: 1024px) {
+ font-size: 36px;
+ margin: 20px 0;
+ }
+}
+h2 {
+ font-size: 24px;
+ line-height: 118%;
+ letter-spacing: -0.24px;
+ margin: 0 0 8px;
+ @media (max-width: 1024px) {
+ font-size: 20px;
+ }
+}
+p {
+ margin: 0;
+}
+
+code,
+.counter {
+ font-family: var(--mono);
+ display: inline-flex;
+ border-radius: 4px;
+ color: var(--text-h);
+}
+
+code {
+ font-size: 15px;
+ line-height: 135%;
+ padding: 4px 8px;
+ background: var(--code-bg);
+}
diff --git a/week10/src/main.tsx b/week10/src/main.tsx
new file mode 100644
index 00000000..bef5202a
--- /dev/null
+++ b/week10/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+ e.stopPropagation()}>
+
+
+ {movie.backdrop_path && (
+
+
+ 
+
+ )}
+
+
+
+ {movie.title}
+ {movie.original_title && movie.original_title !== movie.title && ( +{movie.original_title}
+ )} + +
+
+
+
+ {movie.poster_path ? (
+
+ ) : (
+
+
+ 이미지 없음
+ )}
+
+
+
+ {movie.vote_average.toFixed(1)}
+ ({movie.vote_count.toLocaleString()}명 평가)
+
+
+
+ 개봉일
+ {movie.release_date || '정보 없음'}
+
+
+
+ 인기도
+ {movie.popularity.toFixed(1)}
+
+
+
+ 줄거리
+
+ + {movie.overview || '줄거리 정보가 없습니다.'} +
+
+
+ IMDb에서 검색
+
+
+
+