🎬 영화 검색 사이트 (Movie Search App)

English Version README ➡️ Scroll Down

---

📌 프로젝트 소개

이 프로젝트는 TMDB API를 활용하여 영화 정보를 검색하고, 상세 정보를 모달로 확인할 수 있는 웹 애플리케이션입니다. HTML, CSS, JavaScript만을 사용했으며, React나 Next.js 등의 프레임워크는 사용하지 않았습니다.

🎯 주요 기능

• TMDB API 연동 (fetch API 사용)
• 영화 카드 리스트 UI
• 영화 검색 기능 (영화 제목 기준)
• 영화 상세정보 모달
• 검색 결과 없음 알림 UI

---

🛠️ 개발 과정 요약

✅ 프로젝트 구조 및 셋업

• HTML, CSS, JavaScript 파일을 분리하여 구성
• <script>로 파일 연결

✅ TMDB API 연동

• TMDB 개발자 센터에서 API 키 발급
• fetch()를 사용하여 영화 정보 가져오기
• 영화 데이터는 allMovies 배열에 저장하여 필터링 시 사용

✅ 검색 기능 구현

• input 필드에 입력 후 버튼 클릭으로 검색 실행
• movie.title을 toLowerCase() 및 .trim()으로 전처리하여 필터링 정확도 향상
• 검색 결과가 없을 경우 "결과 없음" 메시지를 출력

✅ 모달 구현

• 각 영화 카드 클릭 시 상세 정보 모달 오픈
• 모달은 현재 페이지 위에 오버레이 형식으로 표시되며, X 버튼 또는 바깥 클릭 시 닫힘
• JavaScript로 동적으로 모달 생성 (HTML 태그 위치 상관 없음)

---

📁 실행 방법

1. .html 파일을 브라우저에서 열면 앱이 실행됩니다.
2. API 키는 script.js 파일에 직접 입력해야 합니다.

---

📸 UI 미리보기

: Home

: Modal

: search

• 더 많은 글자를 입력하면 더 필터링이 됩니다.
• 없는 영화를 검색하면 '검색결과가 없습니다' 라는 창이 뜹니다.

---

🌐 Movie Search App

📌 About

This project is a simple movie search web application built using the TMDB API, implemented using only HTML, CSS, and JavaScript — no React, no frameworks.

🎯 Features

• Fetching real-time movie data from TMDB
• Displaying movie cards (poster, title, rating, overview)
• Search movies by title
• View detailed movie info in a modal popup
• UI for "No result found" when applicable

---

🛠️ Development Summary

✅ Setup

• Files are split into index.html, style.css, and script.js
• DOM structure includes header, main section (cards), and footer

✅ TMDB API Integration

• API key acquired from TMDB Developer
• fetch() is used to request movie data
• Movie data is stored in an allMovies array for filtering

✅ Search Logic

• Search executed on button click using the input field
• Title is filtered with toLowerCase() and .trim() for better accuracy
• Displays message when no matching result is found

✅ Modal Implementation

• Clicking a card opens a modal with detailed info
• Modal overlays the current screen and can be closed via X button or clicking outside
• Modal is dynamically created with JS, independent of tag position

---

📁 How to Run

1. Open the .html file in any browser.
2. Insert your TMDB API key into the script.js file.

---

📸 Preview

: Home

: Modal

: search

• Entering more letters will filter further.
• If you search for a movie that doesn't exist, you'll see a “No results found” window.

---