React - Modal 창 외부 스크롤 비활성화

문제 상황

팀프로젝트 진행중, modal창을 띄웠는데 외부 스크롤이 활성화 되는 문제점을 발견했다.

desktop에서는 크게 상관 없다고 생각할 수 있지만, 모바일에서도 이런 문제가 발생했는데,
모바일에서 우리 페이지는 모달창을 화면을 꽉 채워서 보여주다 보니
사용자가 모달창을 위아래로 내려서 봐야하는데,

계속 내리다 보면 외부 스크롤이 내려가는 현상 발생.

해결 방법

  useEffect(() => {
    document.body.style.cssText = `
      position: fixed;
      top: -${window.scrollY}px;
      overflow-y: scroll;
      width: 100%;`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = "";
      window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
    };
  }, []);