[Park] Intersect Listener #35
Merged
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
✅ Deploy Preview for idyllic-puffpuff-476e23 ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
hemudi
approved these changes
Jan 10, 2023
Comment on lines
+11
to
+32
| /** | ||
| * | ||
| * @name IntersectListener | ||
| * @description scroll 이벤트를 사용하지 않고, IntersectionObserver를 사용하여 대상 요소의 가시성을 감지합니다. | ||
| * @props rootMargin - root 가 가진 여백입니다. `default: 0px 0px 0px 0px` | ||
| * @props threshold - observer의 콜백이 실행될 대상 요소의 가시성 퍼센티지입니다. (0~1) `default: 0.0` | ||
| * @props onIntersect - 대상 요소가 가시성에 들어왔을 때 실행될 콜백입니다. | ||
| * @props unobserve - observer를 해제할지 여부입니다. `default: false` | ||
| * @example | ||
| * ```tsx | ||
| * <IntersectListener | ||
| * onIntersect={() => setPage((prev) => prev + 1)} | ||
| * unobserve={page === 3} | ||
| * > | ||
| * <FlexBox sx={{ width: '1240px', flexWrap: 'wrap', gap: '40px 10px' }}> | ||
| * {elements.map((element) => ( | ||
| * <Card key={element} number={element} /> | ||
| * ))} | ||
| * </FlexBox> | ||
| * </IntersectListener> | ||
| * ``` | ||
| */ |
There was a problem hiding this comment.
호옹...VSCode 에서 확인해보니 확실히 따로 문서 확인을 할 필요가 없어서 사용법 파악하기가 훨씬 편하네요 ^_^)b 짱입니당
jindonyy
approved these changes
Jan 10, 2023
healtheloper
force-pushed
the
feat/intersect-listener/#33
branch
from
cbe6324
to
bd35a7f
Compare
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.
close #33
Infinity Scroll 을 구현하기 위한 Intersect Listener 입니다.
한번 구현해보셨다면 어렵지 않게 로직 파악을 하실 수 있을텐데, 특이하다고 생각되는 몇 개만 설명하겠습니다
jsdoc을 활용하면 더 생산성이 좋아지겠다는 생각으로 도입해보았습니다.