feat: useDragIndexCarousel Infinity mode추가, useInterval 훅 추가 #3
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
HBSPS
approved these changes
May 10, 2024
Comment on lines
81
to
84
| ref.current!.style.transition = 'none'; | ||
| ref.current!.style.transform = `translateX(${-getSliderWidth()}px)`; | ||
| setIndex(1); | ||
| ref.current!.removeEventListener('transitionend', resetToFirstPage); |
There was a problem hiding this comment.
ref.current가 있는지 이미 검사하고 있기 때문에 assertion을 사용하지 않아도 될 것 같아요!
| @@ -133,7 +183,7 @@ export default function useDragIndexCarousel( | |||
| prev, | |||
| isEnd, | |||
| isStart, | |||
| } = _useDragIndexCarousel(dataLength - 1, minMove, startIndex); | |||
| } = _useDragIndexCarousel(realDataLength, minMove, startIndex, infinity); | |||
There was a problem hiding this comment.
_useDragIndexCarousel를 사용했다면 handleTouchStart과 같은 이벤트 핸들러들의 타입 추론이 되지 않나요??
190번째 줄부터 as any가 꼭 필요할까요?
There was a problem hiding this comment.
이벤트 타입 때문에 이런 문제가 발생했네요!
React.TouchEvent가 아니라 TouchEvent로 변경하여 any제거하였습니다!
Comment on lines
8
to
9
| } from 'react'; | ||
| import { useRef, useState, Children, ReactNode } from 'react'; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
infinity mode추가
drag Carousel 에 infinity mode를 추가하였습니다.
2024-05-10.13-07-18.mp4
요소 앞뒤로 최후방요소와 최상단 요소를 복사하여 각각 추가하고, index를 translate계산할때에 적용하여 자연스럽게 보일 수 있도록 처리했습니다.
최후방요소에 도달한 경우
useInterval 추가
setInterval을 컴포넌트 내부에서 멈췄다 다시 진행시켰다 하는 부분이 내부 렌더링 로직에 의해 의도대로 동작하지 않는 문제를 해결하기 위한 훅인 useInterval 기능을 추가하였습니다.