자동화 : 팝업 높이 계산해서 아래로 쌓기

상황

매번 새로운 팝업이 올라올 때마다 1200px 아래의 팝업 top값을 그 위 팝업의 높이값만큼 수동으로 업데이트하고 있던 상황이었다.

<div id="pop_84"></div>
<div id="pop_82"></div>
<div id="pop_75"></div>

1. 위의 형태의 팝업이 있으며, 각 팝업은 absolute로 표시된다.
2. 팝업 ID 번호는 유연하며, ID 번호는 항상 변경될 수 있다. (관리자사이트에서 사용자인 클라이언트가 맘대로 써넣는다)
3. 각 팝업이 브라우저 너비 1200px 이하로 떨어지면 첫 번째 팝업이 위에서 아래로 순서대로 배치된다.
4. 하단 배치는 css top:npx로 제어되며, 첫 번째 팝업은 top:60px로 시작하고 두 번째 팝업은 top:(위에 있는 팝업의 높이 값 + 20px)로 계산되어야 한다.

---

1차 해결

const popups = document.querySelectorAll('[id^="pop_"]');
if (window.innerWidth < 1200) {
    let currentTop = 60;
    for (let i = 0; i < popups.length; i++) {
        const popup = popups[i];
        popup.style.top = `${currentTop}px`;
        currentTop += popup.getBoundingClientRect().height + 20;
    }
}

currentTop을 기본값 (첫번째 팝업의 top값)으로 설정해 둔 뒤, 팝업에 css를 준  후에 currentTop에 팝업의 높이값+20을 더하는 방식으로 자동화하였다.

---

문제 발생

팝업을 닫지 않은 상태에서 브라우저 사이즈를 늘였다 줄였다 했을 때 팝업 높이값이 변하지 않는 문제가 있었다.

---

2차 해결

const popups = document.querySelectorAll('[id^="pop_"]');
function positionPopups() {
    if (window.innerWidth < 1200) {
        let currentTop = 60;
        for (let i = 0; i < popups.length; i++) {
            const popup = popups[i];
            popup.style.top = `${currentTop}px`;
            currentTop += popup.getBoundingClientRect().height + 20;
        }
    } else {
        // window가 1200보다 클 시 리셋
        for (let i = 0; i < popups.length; i++) {
            const popup = popups[i];
            popup.style.top = '';
        }
    }
}
// 페이지로드 시 함수 호출
positionPopups();
// 브라우저 리사이즈 시 다시 호출
window.addEventListener('resize', positionPopups);

함수로 묶어서 선언 후에 window가 resize될 시 한번 더 호출해주었다.