오늘은 다시 팀 프로젝트가 시작되었다.
영화 카드를 클릭하면 상세페이지가 모달 형태로 띄워지는 것을 구현하려고 한다.
모달 여닫기
모달은 크게 모달 창과 뒷편을 어둡게 해 주는 배경으로 구성되어 있다.
따라서 이를 class로 묶어 hidden상태를 조절해줌으로써 여닫을 수 있다.
// 모달을 보이게 설정
modal.classList.remove("hidden");
// 모달 창을 닫는 함수
function closeModal() {
const modal = document.querySelector(".modal");
modal.classList.add("hidden");
}
// 모달 배경에 닫기 함수를 연결
modalBackground.addEventListener("click", closeModal);모달을 여는 함수는 기존에 있던 영화 포스터 클릭과 연결했고,
닫는 것은 임시로 배경을 클릭할 시 닫히도록 했다.
모달 창의 내용은 클릭이 영화 카드 생성 함수와 연결되어 있기 때문에 그 김에 movie의 내용을 받아와서 모달 생성 함수에 전달하고, 내용을 innerhtml로 작성하면서 정보를 받아오는 방식을 일단 사용하고 있다.
다만 js에서 html을 작성하려니 문자열로 취급되어 불편하기도 하고, 모달 창의 내용이 점점 늘어남에 따라 가독성도 나빠지고 있다.
사실 이 방식에는 부작용도 있으니 잘 알아보아야 하는 피드백도 저번에 받았던 터라 일단은 익숙한 방식으로 틀만 잡아보고 어느 정도 형태가 잡히면 다른 방식을 탐색해서 더 나은 방안을 채택해야 할 듯하다.
