feat(react): useScrollTo 훅 추가

[ssi02014]

Overview

issue: #286

‼️ BREAKING CHANGE ‼️

마운트 시에 window 한정으로 scrollTo를 호출하던 기존 useWindowScrollTo를 제거하고, 조금 더 범용적으로 사용 할 수 있는 useScrollTo 신규 훅을 작성합니다.

useScrollTo 훅이 반환하는 ref를 특정 엘리먼트에 할당 후 함께 반환하는 scrollTo를 통해 해당 엘리먼트를 대상으로 scrollTo를 호출하는 커스텀 훅입니다.
ref를 할당하지 않으면 기본적으로 window를 대상으로 동작합니다.

const { ref, scrollTo } = useScrollTo();
// ref: Window | null

const { ref, scrollTo } = useScrollTo<HTMLDivElement>();
// ref: HTMLDivElement | null

<div ref={ref} />

autoScrollOptions 인자를 할당하면 컴포넌트가 마운트 시 자동으로 타겟 엘리먼트를 대상으로 scrollTo가 호출됩니다.

// 컴포넌트 마운트 시 scrollTo 동작하지 않음
const { ref, scrollTo } = useScrollTo<HTMLDivElement>();

// 컴포넌트 마운트 시 자동으로 scrollTo 동작
const { ref, scrollTo } = useScrollTo<HTMLDivElement>({
  behavior: 'smooth',
  left: 0,
  top: 400,
});

const { ref, scrollTo } = useScrollTo<HTMLDivElement>({});
/**
 * Default Values
 * 
 * 1. behavior: 'auto'
 * 2. left: 0 
 * 3. top: 0
*/

PR Checklist

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

[changeset-bot]

🦋 Changeset detected

Latest commit: cdb9ad7

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 96.88%. Comparing base (d668f7f) to head (aee5e52).
Report is 4 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #285      +/-   ##
==========================================
+ Coverage   96.85%   96.88%   +0.02%     
==========================================
  Files         121      122       +1     
  Lines        1273     1284      +11     
  Branches      312      313       +1     
==========================================
+ Hits         1233     1244      +11     
  Misses         34       34              
  Partials        6        6              

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

[Sangminnn]

작성했다가 다시 생각해보려 지웠던 내용인데요! 😂

제가 생각했을때에는 ref는 Element의 ref로만 사용될것같은데, 외부로 반환해준 ref의 current에 접근하여 값을 할당해주는 케이스가 존재할까요 ?? 👀

내부적으로는 ref에 current가 없을경우에 window를 주입해주어 사용하기에 실제 타입은 MutableRefObject가 맞으나, 외부에 반환해주는 타입으로서의 ref는 MutableRefObject보다는 RefObject 로 안내하여 current에 할당이 불가하도록 readonly하게 제공하면 어떨까 의견드려봅니다! 😃

(실제로는 현재 구조에서도 HTMLDivElement로 인해 할당 불가능한 것으로 나오긴 하나 의미상 변경 불가한 타입으로 안내하는게 자연스러워보이네요!)

Before

After

[ssi02014]

@Sangminnn 좋습니다! 좋은 의견 감사합니다 🤗🤗🤗🤗🤗

[ssi02014]

@Sangminnn 의견주신 부분 수정 반영하였습니다 🤗

[Sangminnn]

이 부분도 수정되어야할것같네요!
추가적으로 RefObject를 사용하면 내부적으로 제네릭을 받고 null을 같이 가지고있어서 위 아래 모두 null은 포함하지 않아도 될것같습니다! 😄

interface RefObject<T> {
   readonly current: T | null;
}

[ssi02014]

@Sangminnn 헛 문서도 다시 수정하도록 하겠습니다!!

[ssi02014]

@Sangminnn MutableRefObject는 null이 포함되어 있지 않아 마운트 이전에는 null을 갖기 때문에 명확한 타입을 위해 Window | null을 유지하도록 하겠습니다!

[Sangminnn]

긍정적으로 의견 수용해주셔서 감사합니다!
다른 부분은 전부 좋습니다! 너무 고생 많으셨습니다! 👍👍👍