#TIL 10일차(개인 프로젝트 회고[2] )

search.html의 script 부분

<script>
    document.addEventListener('DOMContentLoaded', function () {
            // URL에서 검색어 추출
            const urlParams = new URLSearchParams(window.location.search);
            const searchTerm = urlParams.get('query');

            // 검색어가 있을 경우 top rated 영화 목록에서 검색 결과 가져오기
            if (searchTerm) {
                const apiKey = '66f371611b5b7314fe42cbf067b62f1c';
                const topRatedUrl = `https://api.themoviedb.org/3/movie/top_rated?api_key=${apiKey}&language=en-US&page=1`;

                fetch(topRatedUrl)
                    .then(response => response.json())
                    .then(data => {
                        // 가져온 top rated 영화 목록에서 검색어와 일치하는 영화 필터링
                        const matchedMovies = data.results.filter(movie => {
                            // 간단한 예시로 영화 제목으로 검색
                            return movie.title.toLowerCase().includes(searchTerm);
                        });

                        // 검색 결과를 화면에 표시
                        displaySearchResults(matchedMovies);
                    })
                    .catch(error => {
                        console.error('API 호출 중 오류 발생:', error);
                    });
            }
        });
    function displaySearchResults(movies) {
        const searchPage = document.querySelector('.search-page');
    
        if (!searchPage) {
            console.error('검색 페이지 요소를 찾을 수 없습니다.');
            return;
        }
    
        searchPage.innerHTML = ''; // 이전 검색 결과 삭제
    
        movies.forEach(movie => {
            const item = document.createElement('div');
            item.classList.add('item');
            item.dataset.id = movie.id;
    
            item.innerHTML = `
                <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" id="movies-img">
                <div class="item-body">
                    <div class="item-detail">
                        <h4>개봉일: </h4> 
                        <h4 id="movie-date">${movie.release_date}</h4>
                        <i class="fa fa-star" id="scores"></i>
                        <h5 id="movies-score">${movie.vote_average}</h5>
                    </div>
                    <h3 class="movies-title">${movie.title}</h3>
                    <h5 class="movies-content">${movie.overview}</h5>   
                </div>
            `;
            searchPage.appendChild(item);

            // alert창 띄우기(영화 id)
            item.addEventListener('click', function(event) {
                    const movieId = event.currentTarget.dataset.id;
                    alert(`선택된 영화 ID: ${movieId} 입니다!`);
                });
        });
    }
    </script>

메인 js파일인 movies.js에서 작성하니 오류가 나길래, 급하게 search.html파일 안에 script부분에 코드를 작성했다. 에러 문제로 search.html의 script 태그 부분에 넣었지만, js파일에 이 코드들을 넣고 기능을 구현하는게 깔끔할 것 같아서 js 파일에 넣는것도 다시 도전해봐야겠다🤔

header.js

<script>
// 검색 이벤트 핸들러 함수
function handleSearch(event) {
    event.preventDefault(); // 제출 이벤트의 기본 동작을 중지
    const searchInput = document.getElementById('search');
    const searchTerm = searchInput.value.toLowerCase().trim();

    console.log("Search Term:", searchTerm);

    if (searchTerm === '') {
      alert('검색어를 입력하세요!');
        return;
   }
    
// 검색 이벤트 리스너 추가 함수
function addSearchEventListener() {
    document.querySelector('.searchForm').addEventListener('submit', handleSearch);

    // 검색 입력란에 포커스
    const searchInput = document.getElementById('search');
    if (searchInput) {
        searchInput.focus();
    	}
	}
}
</script>

이게 처음에 헤더에 있는 검색 기능 구현이였는데, 작동이 되지 않았었다. 처음엔 대체 왜이러나.. 하고 튜터님께 찾아갔었는데, 알고보니 search.html로 이동하는 코드를 추가하지 않았던 것이였다😓
튜터님께서 쿼리스트링을 말씀해주셔서 "어.. 분명 들어봤던거같은데 그게 뭐였더라..?"하고 있었는데, 튜터님 설명을 듣고 "아 맞다.. 나 이거 학교에서 jsp 수업 때 배웠었지ㅎㅎㅎ.."하고 기억나서 급히 코드를 수정했다.
난 진짜 멍충인가 전문 용어로 말하면 왜 기억이 안나지ㅠㅠㅠㅠㅠㅠ

수정코드(header.js)

<script>
// 검색 이벤트 핸들러 함수
function handleSearch(event) {
    event.preventDefault(); // 제출 이벤트의 기본 동작을 중지
    const searchInput = document.getElementById('search');
    const searchTerm = searchInput.value.toLowerCase().trim();

    console.log("Search Term:", searchTerm);

    if (searchTerm === '') {
      alert('검색어를 입력하세요!');
        return;
   }
   // 검색어를 포함하여 search.html로 이동
    window.location.href = `search.html?query=${encodeURIComponent(searchTerm)}`
 };
    
// 검색 이벤트 리스너 추가 함수
function addSearchEventListener() {
    document.querySelector('.searchForm').addEventListener('submit', handleSearch);

    // 검색 입력란에 포커스
    const searchInput = document.getElementById('search');
    if (searchInput) {
        searchInput.focus();
    	}
	}
}
</script>

이렇게 window.location.href=~~ 코드를 추가하니 검색 기능이 제대로 작동되었다.