24.08.05 팀프로젝트 troubleshooting

디테일페이지는 위와 같이 출연진과 비슷한 영화목록을 보여주는 박스들이 있다.

이 박스들은 가로로 정렬되어있으며, 대부분이 기본 width값을 넘기 때문에 가로 스크롤이 생기도록 설정하였다.

하지만 마우스를 갖다대고 휠을 아무리 내려도 우측의 기본 스크롤이 움직였다.

물론 사용자가 직접 스크롤을 클릭하고 움직여도 되겠지만, 조금 더 편하게 만들기 위해 이벤트를 설정해주었다.

 

export function addWheelEvents(id) {
    const $id = document.getElementById(`${id}`);
    function wheelEvent(e) {
        e.preventDefault();
        $id.scrollTo({ left: $id.scrollLeft + e.deltaY, behavior: "auto" });
    }
    $id.onwheel = wheelEvent;
}

이렇게 id값을 받고, 해당 id값의 onwheel에 이벤트를 직접 달아주었다.

 

export function makeActorSlider(data, title) {
    const filteredArr = data.cast
        .filter((actor) => actor.known_for_department === "Acting")
        .sort((a, b) => b.popularity - a.popularity)
        .slice(0, 20);

    const $actorListBox = document.getElementById("actorListBox");
    addWheelEvents("actorListBox");
    $actorListBox.style.display = "flex";
    $actorListBox.style.gap = "5px";
    .
    .
    .
}

출연진 슬라이드 생성함수에도 import하여 사용해주었으며

export function makeSimillarSlider(data, title) {
    const $simillarTitle = document.getElementById("simillarTitle");
    $simillarTitle.innerText = `${title}와 비슷한 영화`;
    $simillarTitle.style.fontSize = "20px";
    $simillarTitle.style.margin = "10px 0px";
    const $simillarMoviesBox = document.getElementById("simillarMoviesBox");
    addWheelEvents("simillarMoviesBox");
    $simillarMoviesBox.style.display = "flex";
    $simillarMoviesBox.style.gap = "5px";
    $simillarMoviesBox.style.width = "inherit";
    .
    .
    .
}

비슷한 영화 슬라이더에도 import하여 사용하였다.

 

---

특정 영화의 트레일러를 받아오게 작업도 하였다. 원래도 iframe으로 유튜브 영상을 불러오는 것을 해보고 싶었어서 만들어 보았는데, 원하는 동작이 하나 더 있었다.

특정 영상에 hover시 해당 영상이 커지면서 큰 화면에서 영상을 보게하고싶었다.(전체화면 버튼클릭하지 않고도)

function addTrailerContainer(trailerKey, trailerContainer) {
    const $trailer = document.createElement("iframe");
    $trailer.id = `${trailerKey}`;
    $trailer.style.transition = "all 0s linear";
    $trailer.src = `https://www.youtube.com/embed/${trailerKey}`;
    $trailer.title = "YouTube video player";
    $trailer.frameborder = "0";
    $trailer.allow =
        "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen";
    $trailer.addEventListener("mouseover", () => {
        $trailer.style.position = 'absolute'
        $trailer.style.transform = "scale(4.0)";
        $trailer.style.zIndex = 10000
    });
    $trailer.addEventListener("mouseout", () => {
		$trailer.style.position = 'static'
        $trailer.style.transform = "scale(1.0)";
		$trailer.style.zIndex = 1
    });
    trailerContainer.appendChild($trailer);
}

mouseover 이벤트를 추가하여 해당 트레일러의 position을 absolute로 하여 자유롭게 해주고, 4배크기로 바꾸며 zIndex를 올려 앞으로 튀어나오게 한다.

 

하지만 문제가 있었다.

이렇게 예고편들이 있다고 가정하고 첫번째 영상에 마우스를 올렸다고 가정해보자.

이렇게 크기가 커지고 앞으로 나와진다. 이후 마우스를 다른 트레일러로 옮기면 두 트레일러가 막 반짝이면서 커졌다 작아졌다를 계속 반복한다. 이래도 저래도 안되길래 튜터님께 질문을 드렸다.

 

저게 커지면서 기존 트레일러의 영역을 침범하다보니 생긴 오류같다. 모달이 해결책이다.

 

하지만 모달을 만들 시간은 부족해보였다.

그래서 크기를 키우는 정도를 매우 줄여 scale(1.1)으로 변경하여 선택했다는 정도의 느낌만 주어 다른 영상의 영역침범을 하지 않도록 하였다.

또한 position의 변경과 zIndex의 변경도 없애 편법으로 버그를 잡았다.

 

후에 리액트에 들어가서 영상을 재생할 일이 있다면, 모달을 꼭 사용해볼 예정이다.