BCSDLab-Edu · kwondaehyun830 · Nov 20, 2024
diff --git a/index.html b/index.html
@@ -1,12 +1,26 @@
 <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <body>
-    여기에 기본 html 작성
-  </body>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>영화 리스트</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>Movie list</h1>
+        <div class="search-bar">
+            <input type="text" id="search-input" placeholder="영화 검색...">
+            <button id="search-button">검색</button>
+        </div>
+    </header>
+    <main>
+        <section id="movie-list">
+
+        </section>
+        <button id="load-more" style="display: none;">더보기</button>
+    </main>
+    <div id="no-results" style="display: none;">검색 결과가 없습니다.</div>
+    <script src="index.js"></script>
+</body>
 </html>
diff --git a/index.js 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
@@ -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;
+}