# 영화 정보 카테고리별 보여주기
# 순서
# 1. api 호출
1.1 카테고리 API가 가능한지 확인, 퀘리 주소 확인
1.2 인기영화, 추천영화, 최신영화 쿼리 확인 (https://developer.themoviedb.org/reference/)
1.3 인기영화 (https://api.themoviedb.org/3/movie/popular?language=en-US&page=1)
1.4 추천영화 (https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1)
1.5 최신영화 (https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=1)

# 2. 메뉴버튼을 불러옴
2.1 메뉴버튼을 불러옴 const menus = document.querySelectorAll(".menus button");
2.2 클릭이벤트 발생시 함수 발생
2.3 클릭 이벤트 발생 menus.forEach(menu=>menu.addEventListener("click",(event)=>getloadMovies(event)))
2.4 영화정보 불러오기 함수 코딩
const loadMovies=(event)=>{}

# 3. 카테고리별 영화정보 가져와 보여주기
3.1 const category = event.target.textContent
3.2 const url = new URL(`https://api.themoviedb.org/3/movie/popular?language=en-US&page=1`)
3.3 const response = await fetch(url) const data = await response.josn()

# 4. 뉴스 화면에 보여주기
4.1 render(), 영화정보 변수 설정 MovieList = data.articles

# 5. 소스코드 구현
const menus = document.querySelectorAll(".menus button");
// 인기영화, 추천영화, 최근 영화는 쿼리값이 아니고 주소값임

menus.forEach(menu=>menu.addEventListener("click",(event) => (getMoviesCategory(event)))

const getMoviesCategory=async(event)=>{
const category = event.target.textcontent
// 인기영화, 추천영화, 최근 영화에 대한 각각의 쿼리 값 받아와야 함

const url = new URL('https://api.themoviedb.org/3/popular?anguage=en-US&page=1&category=&{category}&{API_KEY}');

// API 쿼리 요청 값 category 없음, 쿼리 값 : 장르, 지역, 언어

const response = await fetch(url)
const category = await response.json()
Movielist = data.category
// 인기영화, 추천영화, 최근 영화 각각의 카테고리 값을 받아옴

render(MovieList);
// popular MovieList, top_rated MovieList, now_playing MovieList