feat(react): useStep 훅 추가

[ssi02014]

Overview

Issue: https://github.com/modern-agile-team/modern-kit/issues/252

mult-step process의 step을 관리하고 추적해주는 커스텀 훅입니다.

내부적으로 쿼리스트링과 router에 의존하는 slash/Funnel과는 차이가 있는 훅입니다.

해당 훅은 router 등과 의존성이 없이 단순히 multi-step 프로세스에서 step을 관리하기 위한 커스텀 훅입니다. multi-step process의 대표적인 예로 carousel slider 가 있습니다.

해당 훅을 선언적으로 활용하기 위한 Step 컴포넌트까지 추후 작업이 가능합니다.

nextStep, preStep 등은 인자로 action을 받아 추가적인 행동을 취할 수 있습니다.

Example

Default

https://github.com/modern-agile-team/modern-kit/assets/64779472/5ebaddb6-ef41-4818-b7c6-bc809f82a3aa

Infinite

https://github.com/modern-agile-team/modern-kit/assets/64779472/da677687-528a-4ae1-b28c-586b72bedf8b

Reference

https://usehooks-ts.com/react-hook/use-step

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: 94059e5f3733ee2374bd1ace43b9f33f8ea1c385

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.77%. Comparing base (26343a2) to head (12d2aa9). Report is 1 commits behind head on main.

:exclamation: Current head 12d2aa9 differs from pull request most recent head 94059e5

Please upload reports for the commit 94059e5 to get more accurate results.

Additional details and impacted files

[](https://app.codecov.io/gh/modern-agile-team/modern-kit/pull/253?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 #253 +/- ## ========================================== + Coverage 96.62% 96.77% +0.14% ========================================== Files 111 112 +1 Lines 1155 1208 +53 Branches 283 300 +17 ========================================== + Hits 1116 1169 +53 Misses 33 33 Partials 6 6 ``` | [Components](https://app.codecov.io/gh/modern-agile-team/modern-kit/pull/253/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/253/components?src=pr&el=component&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=modern-agile-team) | `94.29% <100.00%> (+0.47%)` | :arrow_up: | | [@modern-kit/utils](https://app.codecov.io/gh/modern-agile-team/modern-kit/pull/253/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]

wip infinite 옵션을 추가해서 nextStep 호출 시 maxStep 시에 1 step으로, prevStep 호출 시 minStep(1)에서 maxStep으로 변경하는 옵션 추가

[ssi02014]

@Sangminnn inifinite 옵션 추가해서 문서 및 테스트 재수정하였습니다! 선언적으로 다루는 Step 컴포넌트와 더불어 useStep을 확장해 form state와 같이 내부 state를 추가로 다루는 useStepWithState 라는 커스텀 훅도 존재하면 좋을 것 같네요..!

[ssi02014]

@Sangminnn 감사합니다! 저는 해당 훅에다 내부 상태를 또 함께 다룰수있는 useStepState 훅과 해당 훅을 컴포넌트로 선언적으로 다루는 Steps 컴포넌트 작업으로 더 확장 예정입니다 🤗