iOS 댓글 모달창 스크롤시 배경도 같이 스크롤되는 문제

• iOS 댓글 모달창 스크롤시 배경도 같이 스크롤되는 문제
  • iOS에서 모달창으로 댓글창이 있을때, 배경이 함께 스크롤 되는 이슈
  • 윈도우에서도 댓글을 끝까지 내리면 그 이후엔 배경이 스크롤 되는 이슈
  ✔️ 해결방안
  • 댓글창이 열렸을때 댓글창 이외의 모든 스크롤을 막는 방법 도입
  • iOS 댓글창 배경부분 스크롤 막는 기능 커스텀훅 구현 (useLockScroll.tsx)
    • body에 overflow:hidden을 주어서 모든 스크롤이벤트를 막음.
    • classname으로 구분된 객체를 지정하여 overflow:auto 를 주어서 스크롤을 허용

import { useEffect } from 'react';
/**
 * useLockScroll
 * @param 첫번째 인자값 : 스크롤 막을지 말지 결정하는 boolean 값
 * @param 두번째 인자값 : 스크롤 막을 요소의 className (예: 'scrollable')
 */
export const useLockScroll = (isLocked: boolean, classname: string): void => {
  useEffect(() => {
    const body = document.body;
    if (isLocked) {
      const originalStyle = window.getComputedStyle(body).overflow; // 원래 스크롤 스타일 저장
      body.style.overflow = 'hidden'; // 스크롤 막기

      const scrollableElems = document.querySelectorAll(`.${classname}`);
      scrollableElems.forEach((elem) => {
        (elem as HTMLElement).style.overflow = 'auto';
      });

      return () => {
        // cleanup (언마운트시)
        body.style.overflow = originalStyle;
      };
    }
  }, [isLocked]);
};