포트폴리오 사이트 제작 중 project 페이지를 깔끔하게 만들기 위해 슬라이드 형식을 사용하였다.
아래 사진처럼 dot를 클릭하거나 넘기는 제스처를 취하면 다음 화면으로 넘어가는데, 이 슬라이드 하나에 비디오까지 함께 존재하니 크롬 100% 확대 화면에서는 슬라이드 형식인지 구분조차 어려웠다. 아래 사진처럼 75%까지 축소해야 스크롤 없이 dot가 보일 수 있다.
그래서 비디오를 모달창으로 구현하면 좋겠다는 생각을 했다.
하지만,,,, 슬라이드 구조 자체가 아래 그림처럼 길게 있는 개념인데,
모달 창은 position을 absolute로 하다보니 모달 창을 띄우면 다른 슬라이드에서 창이 열리게 된다.
그래서 머리를 굴려 생각해낸 방법...!
처음에는 position을 relative로 했다가, 안되길래 원래대로 absolute로 한 후 left의 값을 계산해주었다.
document.body.clientWidth를 통해 브라우저의 현재 크기를 구하고, 거기에 props로 받아온 pageNumber(프로젝트 순서 번호)를 곱해주어 슬라이드 별로 각각 알맞은 modal(영상)을 불러올 수 있도록 하였다.
그래서 100% 크기로도 한 눈에 dot까지 볼 수 있게 되었고, 모달 창도 완전한 중앙에 위치하진 않지만 슬라이드에 맞는 영상을 모달로 띄울 수 있게 되었다.
