diff --git a/index.html b/index.html
index d1b854a..7187671 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,26 @@
-
-
-
-
-
- Document
-
-
- 여기에 기본 html 작성
-
+
+
+
+
+ 영화 리스트
+
+
+
+
+
+
+
+
+ 검색 결과가 없습니다.
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..60608ae
--- /dev/null
+++ b/index.js
@@ -0,0 +1,120 @@
+const API_KEY = '0dde63587240e343e46963b140d88bc5';
+const BASE_URL = 'https://api.themoviedb.org/3';
+const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w500';
+
+const searchInput = document.getElementById('search-input');
+const searchButton = document.getElementById('search-button');
+const movieList = document.getElementById('movie-list');
+const noResults = document.getElementById('no-results');
+const loadMoreButton = document.getElementById('load-more');
+
+let currentPage = 1; // 현재 페이지 번호
+let totalPages = 1; // 총 페이지 수
+let currentQuery = ''; // 현재 검색어
+
+// 영화 카드 생성 함수
+const createMovieCard = (movie) => {
+ const { title, poster_path, vote_average } = movie;
+
+ const card = document.createElement('div');
+ card.classList.add('movie-card');
+
+ const img = document.createElement('img');
+ img.src = poster_path ? `${IMAGE_BASE_URL}${poster_path}` : 'placeholder.png';
+ img.alt = title;
+
+ const titleElement = document.createElement('h2');
+ titleElement.textContent = title;
+
+ const voteElement = document.createElement('p');
+ voteElement.textContent = `${vote_average.toFixed(1)}⭐`;
+
+
+ card.appendChild(img);
+ card.appendChild(titleElement);
+ card.appendChild(voteElement);
+
+ return card;
+};
+
+// 영화 렌더링 함수
+const renderMovies = (movies) => {
+ if (currentPage === 1) movieList.innerHTML = ''; //c초기화
+
+ if (movies.length === 0) {
+ noResults.style.display = 'block';
+ loadMoreButton.style.display = 'none';
+ return;
+ }
+
+ noResults.style.display = 'none';
+
+ movies.forEach((movie) => {
+ const movieCard = createMovieCard(movie);
+ movieList.appendChild(movieCard);
+ });
+
+ loadMoreButton.style.display = currentPage < totalPages ? 'block' : 'none';
+};
+
+// 인기 영화
+const fetchPopularMovies = async (page = 1) => {
+ try {
+ const response = await fetch(
+ `${BASE_URL}/movie/popular?api_key=${API_KEY}&language=ko-KR&page=${page}`
+ );
+ const data = await response.json();
+
+ totalPages = data.total_pages;
+ renderMovies(data.results);
+ } catch (error) {
+ console.error('인기 영화를 불러오는 중 오류 발생:', error);
+ }
+};
+
+// 검색 결과
+const fetchSearchMovies = async (query, page = 1) => {
+ try {
+ const response = await fetch(
+ `${BASE_URL}/search/movie?api_key=${API_KEY}&query=${query}&language=ko-KR&page=${page}`
+ );
+ const data = await response.json();
+
+ totalPages = data.total_pages;
+ renderMovies(data.results);
+ } catch (error) {
+ console.error('검색 결과를 불러오는 중 오류 발생:', error);
+ }
+};
+
+// 검색 버튼 클릭
+searchButton.addEventListener('click', () => {
+ const query = searchInput.value.trim();
+ if (!query) {
+ alert('검색어를 입력하세요.');
+ return;
+ }
+
+ currentQuery = query;
+ currentPage = 1;
+ fetchSearchMovies(currentQuery, currentPage);
+});
+
+// 더보기 버튼 클릭
+loadMoreButton.addEventListener('click', () => {
+ if (currentQuery && currentPage < totalPages) {
+ currentPage++;
+ fetchSearchMovies(currentQuery, currentPage);
+ } else if (!currentQuery && currentPage < totalPages) {
+ currentPage++;
+ fetchPopularMovies(currentPage);
+ }
+});
+
+searchInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ searchButton.click();
+ }
+});
+
+fetchPopularMovies();
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..dccb7c9
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,132 @@
+body {
+ font-family: 'Arial', sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #000;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+header {
+ background-color: #333;
+ color: #fff;
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+header h1 {
+ margin: 0;
+ font-size: 24px;
+ color: #F33F3F;
+}
+
+.search-bar {
+ display: flex;
+ align-items: center;
+}
+
+.search-bar input[type="text"] {
+ padding: 10px;
+ border: none;
+ border-radius: 4px 0 0 4px;
+ outline: none;
+}
+
+.search-bar button {
+ padding: 10px 15px;
+ border: none;
+ background-color: #555;
+ color: #fff;
+ border-radius: 0 4px 4px 0;
+ cursor: pointer;
+}
+
+.search-bar button:hover {
+ background-color: #777;
+}
+
+main {
+ padding: 20px;
+}
+
+#movie-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+}
+
+.movie-item {
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+ width: 200px;
+ text-align: center;
+ transition: transform 0.3s;
+}
+
+.movie-item:hover {
+ transform: translateY(-10px);
+}
+
+.movie-item img {
+ width: 100%;
+ height: auto;
+}
+
+.movie-item h3 {
+ margin: 10px 0;
+ font-size: 18px;
+ color: #333;
+}
+
+.movie-item p {
+ margin: 0 0 10px;
+ color: #666;
+}
+
+p{
+ color: #fff;
+}
+
+h2{
+ color: #fff;
+}
+
+img{
+ border-radius: 15px;
+}
+
+#load-more {
+ display: block;
+ margin: 20px auto;
+ padding: 10px 20px;
+ background-color: #333;
+ color: #F33F3F;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+#load-more:hover {
+ background-color: #555;
+}
+
+#no-results {
+ text-align: center;
+ color: #e74c3c;
+ font-size: 18px;
+ margin: 20px 0;
+}