[URH-49] useScrollLock 신규

[foresec]

👾 Pull Request

• 티켓: useScrollLock 신규

• 상태: 신규

1️⃣ Spec

• 페이지의 스크롤을 잠그거나 해제하여 사용자가 스크롤할 수 없도록 하는 훅
• scroll바가 존재하여 UI형태는 유지되지만 비활성화된 형태

2️⃣ 변경 사항

• 없음

3️⃣ 예시 코드

• boolean 값으로 scrollLock 여부를 처리합니다

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

  useScrollLock(isModalOpen);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div style={styles.container}>
      {isModalOpen && (
        <div style={styles.modal}>
          <div style={styles.modalContent}>
     ...
    </div>
  );
};

위 예시처럼 isOpen과 같이 modal이 열리고 닫히는 경우 등에 해당 boolean값을 넣으면 scollLock 처리가 됨

ddd.mp4

4️⃣ 관련 문서 (선택 사항)

• https://joylee-developer.tistory.com/185 scrolllock 처리 아이디어

[Choozii]

[P3]

if (isLocked) {
      lockScroll();
    } else {
      unlockScroll();
    }

    return () => {
      unlockScroll();
    };   

메인 로직이 쉽게 읽힐 수 있도록 로직을 함수로 묶어보는건 어떠세요?
saveScrollPosition, restoreScrollPosition, lockScroll....
이런식으로 정의해두고 호출하는 방식으로 하면 가독성이 더 좋아질거 같아요!

[bicochan]

고생하셨어요 소현 님!👏🏻👏🏻

추후에 스크롤을 고정시킬 요소들을 스택 형식으로 받아서 중복 레이어들에 대한 처리도 해보면 더 멋진 훅이 될 것 같네요 ㅎㅎ

[foresec]

추후에 스크롤을 고정시킬 요소들을 스택 형식으로 받아서 중복 레이어들에 대한 처리도 해보면 더 멋진 훅이 될 것 같네요 ㅎㅎ

@bicochan 서비스 화면상에서 중복레이어를 받는 처리를 적용할 수 있는 실제 사례를 혹시 알수 있을까요? 당장 떠오르지가 않아 질문드립니다. 그리고 혹 해당 기능을 추가한 훅을 만든다면 이 훅안에 추가하는게 나을지 아니면 useScrollMultiLock과 같이 분리하는게 나을지 고민됩니다

[foresec]

[P3]

if (isLocked) {
      lockScroll();
    } else {
      unlockScroll();
    }

    return () => {
      unlockScroll();
    };   

메인 로직이 쉽게 읽힐 수 있도록 로직을 함수로 묶어보는건 어떠세요? saveScrollPosition, restoreScrollPosition, lockScroll.... 이런식으로 정의해두고 호출하는 방식으로 하면 가독성이 더 좋아질거 같아요!

@Choozii a866cf4 해당 커밋에서 반영했습니다.
단.. 분리하는 김에 단일 책임의 원칙을 좀 강하게 적용했는데 이게 더 괜찮은 선택일지 모르겠네요

[Choozii]

수고하셨어용 ✨