feat(react): useScrollTo 훅 추가

[ssi02014]

Overview

issue: https://github.com/modern-agile-team/modern-kit/issues/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

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

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: cdb9ad79abe71325ef8e7288c377e1ceeac8bde6

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[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 96.88%. Comparing base (d668f7f) to head (aee5e52). Report is 4 commits behind head on main.

Additional details and impacted files

[](https://app.codecov.io/gh/modern-agile-team/modern-kit/pull/285?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=modern-agile-team) ```diff @@ 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](https://app.codecov.io/gh/modern-agile-team/modern-kit/pull/285/components?src=pr&el=components&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=modern-agile-team) | Coverage Δ | | |---|---|---| | [@modern-kit/react](https://app.codecov.io/gh/modern-agile-team/modern-kit/pull/285/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=modern-agile-team) | `94.55% <100.00%> (+0.04%)` | :arrow_up: | | [@modern-kit/utils](https://app.codecov.io/gh/modern-agile-team/modern-kit/pull/285/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=modern-agile-team) | `100.00% <ø> (ø)` | |

[ssi02014]

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