feat(react): useScrollLock 신규 컴포넌트 추가

[ssi02014]

Overview

Issue: #211

특정 요소의 스크롤을 lock, unlock 할 수 있는 커스텀 훅입니다.
모달과 같은 컴포넌트가 렌더링 됐을 때, 배경 요소(document.body)의 스크롤을 잠글 때 활용될 수 있습니다.

기본적으로 document.body을 대상으로 mount 시에 자동으로 스크롤을 잠급니다.
unmount 시에는 타겟 요소의 원래 overflow style로 다시 돌려놓습니다.

useLockScroll();
// document.body.scroll.overflow = 'hidden;

autoLock 옵션을 false로 설정하면 mount 시에 자동으로 스크롤을 잠그지 않습니다.
해당 훅이 반환하는 lock, unlock 함수를 활용하여 직접 스크롤을 잠그거나, 잠금된 스크롤을 해제할 수 있습니다.

const { lock, unlock } = useLockScroll({ autoLock: false });

<button onClick={lock}>스크롤 잠금</button>
<button onClick={unlock}>스크롤 잠금 해제</button>

document.body가 아닌 특정 요소의 스크롤을 막으려면 해당 훅이 반환하는 ref를 원하는 요소에게 넘겨주면 됩니다.

const { ref } = useLockScroll<HTMLDivElement>();

<div ref={ref}>박스</div>

PR Checklist

• All tests pass.
• All type checks pass.
• I have read the Contributing Guide document.
  Contributing Guide

[changeset-bot]

🦋 Changeset detected

Latest commit: 4285650

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@modern-kit/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.75%. Comparing base (b226599) to head (4285650).
Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #212      +/-   ##
==========================================
+ Coverage   95.58%   95.75%   +0.17%     
==========================================
  Files          85       88       +3     
  Lines         860      896      +36     
  Branches      201      209       +8     
==========================================
+ Hits          822      858      +36     
  Misses         32       32              
  Partials        6        6              

Components	Coverage Δ
@modern-kit/react	92.43% <100.00%> (+0.31%)	⬆️
@modern-kit/utils	100.00% <ø> (ø)

[ssi02014]

ref.current가 없다면 document.body를 초기 요소로 셋팅

[Sangminnn]

직접적으로 lock을 on/off 할 수 있는 인터페이스를 제공하는 것과 필요하지 않은 사용자에게는 autoLock을 통해 별도 인터페이스를 사용하지 않도록 하는 부분 완전 좋아보입니다! 👍

인자로 받아오는 함수가 없기때문에 preservedCallback 대신 useCallback을 사용한 디테일도 너무 좋네요! 너무 고생 많으셨습니다 ! 👍x10

[ssi02014]

@Sangminnn 리뷰 감사합니다! 문서를 추가 후에 반영하도록 하겠습니다!