숙박플랫폼 프로젝트 - 이슈 정리 (모달클릭 시, 우측 밀림 현상)

상단 네비바의 검색모달 클릭 시, 화면이 전체적으로 우측으로 밀리는 현상 

 

검색모달이 열릴 때 전체 화면이 우측으로 이동(밀림) 현상이 발생하는 원인은
모달 오픈 시 document.body.style.overflow = 'hidden' 코드 때문입니다.
이때 브라우저는 스크롤바를 숨기기 때문에
원래 있던 스크롤바 폭만큼 레이아웃이 좌에서 우로 확~ 늘어나면서
전체가 우측으로 밀리는 것처럼 느껴집니다.

---

원인 요약

• body overflow hidden을 적용하면 스크롤바가 사라짐
• 스크롤바가 사라진 만큼 전체 화면의 width가 넓어져서 콘텐츠가 갑자기 우측으로 이동
• 특히 데스크탑/윈도우 환경에서 이 현상이 두드러짐

---

해결법

• 모달이 열릴 때 스크롤바 사라진 만큼의 margin을 오른쪽에 인위적으로 부여 (margin-right)
• 모달 닫힐 때 margin-right를 원래대로 복구

예시 코드 추가

useEffect(() => {
  if (isOpen) {
    // 스크롤 폭(윈도우-문서) 계산
    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
    document.body.style.overflow = 'hidden';
    document.body.style.marginRight = `${scrollBarWidth}px`;
    setShow(true);
  } else {
    document.body.style.overflow = '';
    document.body.style.marginRight = ''; // 원상복구
    setShow(false);
    setTimeout(() => {
      window.scrollTo(0, scrollYRef.current);
    }, 300);
  }
}, [isOpen]);

이렇게 구현하면
모달이 열려도 스크롤바 폭이 margin으로 대체되어 전체 페이지가 좌우로 흔들리거나 밀리는 현상이 사라집니다.

---

정리:
검색모달 오픈시 body overflow hidden으로 스크롤바가 사라진 것이 "밀림"의 직접 원인입니다.
위 개선코드를 SearchModal.tsx에 추가 적용하면 자연스러운 UX를 만들 수 있습니다.