구형 Safari에서 모달 사용 시 스크롤 문제 해결하기

// Modal.tsx
const otherOverlayStore = useOverlayStore();
const scrollPosition = useRef(0); // 렌더링과 무관하게 스크롤 위치를 저장할 useRef
 
useEffect(() => {
  // 다른 오버레이가 이미 열려있다면, 모달은 body.overflow-hidden만 토글하고 스크롤 관리를 위임
  if (otherOverlayStore.getData().open) {
    document.body.classList.toggle("overflow-hidden", open);
    return;
  }
 
  if (open) {
    scrollPosition.current = document.documentElement.scrollTop; // 현재 스크롤 위치 저장
    document.body.classList.add("overflow-hidden"); // body에 overflow-hidden 적용
    document.body.style.top = `-${scrollPosition.current}px`; // body를 위로 당겨 스크롤 위치 유지
  } else {
    document.body.classList.remove("overflow-hidden"); // body에서 클래스 제거
    document.body.style.top = ""; // top 스타일 초기화
    scrollTo(0, scrollPosition.current); // 저장된 스크롤 위치로 복원
    scrollPosition.current = 0; // 스크롤 위치 초기화
  }
}, [open, otherOverlayStore]); // open 상태와 otherOverlayStore 변경 시 훅 재실행

// Drawer.tsx
const scrollPosition = useRef(0); // 스크롤 위치 저장을 위한 useRef
 
useEffect(() => {
  if (open) {
    // 드로어 열림 시, 라우터 hash를 변경하고 스크롤 위치 저장 및 body 고정
    const { pathname, search } = window.location;
    router.push(`${pathname}${search}#drawer-open`, { scroll: false }); // 라우터에 hash 추가 (스크롤 방지)
    initializeDrawer(); // 드로어 초기화 등 추가 로직
    scrollPosition.current = document.documentElement.scrollTop; // 현재 스크롤 위치 저장
    document.body.classList.add("overflow-hidden"); // body에 overflow-hidden 적용
    document.body.style.top = `-${scrollPosition.current}px`; // body를 위로 당겨 스크롤 위치 유지
  } else {
    // 드로어 닫힘 시
    drawerStore.setData({ value: "", step: 1 }); // 드로어 상태 초기화
    formData.current = {}; // 폼 데이터 초기화
 
    if (window.location.hash === "#drawer-open") {
      router.back(); // 라우터 뒤로 가기
 
      // 라우터 이동 후 DOM 업데이트가 완료될 시간을 기다린 후 스크롤 복구
      setTimeout(() => {
        document.body.classList.remove("overflow-hidden"); // body에서 클래스 제거
        document.body.style.top = ""; // top 스타일 초기화
        scrollTo(0, scrollPosition.current); // 저장된 스크롤 위치로 되돌림
        scrollPosition.current = 0; // 스크롤 위치 초기화
      }, 200); // 200ms 딜레이
    } else {
      // 해시가 없는 경우 (예: 직접 닫기 버튼 클릭) 지연 없이 스크롤 복구
      setTimeout(() => {
        document.body.classList.remove("overflow-hidden");
        document.body.style.top = "";
        scrollTo(0, scrollPosition.current);
        scrollPosition.current = 0;
      }, 0);
    }
  }
}, [open, initializeDrawer, router]); // open, initializeDrawer, router 변경 시 훅 재실행

useEffect(() => {
  const handleRouteChange = () => {
    document.body.classList.remove("overflow-hidden");
    document.body.style.top = "";
    scrollTo(0, scrollPosition.current);
  };
  router.events.on("routeChangeComplete", handleRouteChange);
  return () => router.events.off("routeChangeComplete", handleRouteChange);
}, []);

requestAnimationFrame(() => {
  document.body.classList.remove("overflow-hidden");
  document.body.style.top = "";
  requestAnimationFrame(() => {
    scrollTo(0, scrollPosition.current);
  });
});

// globals.css
body {
  // ...
  &.overflow-hidden {
    position: fixed; /* body를 뷰포트에 고정 */
    overflow: hidden; /* 넘치는 내용 숨김 (스크롤 방지) */
    width: 100%; /* 고정된 body의 너비를 100%로 유지 */
    /* top 속성은 JavaScript에서 동적으로 설정됨 */
  }
}
 
// header.css
.header {
  position: fixed;
  display: flex;
  width: 100%;
  top: 0; /* 헤더를 항상 화면 최상단에 고정 */
  left: 0;
  padding: var(--spacing-base);
  flex-direction: column;
  // ...
}

const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.paddingRight = `${scrollbarWidth}px`;