이벤트 캐러셀 수정 #469
Open
이벤트 캐러셀 수정 #469
Conversation
This file contains hidden or 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
orrhrr
commented
Apr 12, 2024
| <div className="flex-center left-30% absolute bottom-20 z-10 h-20 w-100 gap-10 mobile:bottom-8"> | ||
| {currList.map((_, idx) => ( | ||
| <button | ||
| className={`h-10 w-10 rounded-full bg-gray-1 hover:bg-primary active:bg-primary ${ButtonActiveIndex === idx ? 'bg-primary' : ''} mobile:h-5 mobile:w-5`} |
Contributor
Author
There was a problem hiding this comment.
이놈때문에 버그인줄알고 삽질 너무많이했네요 흑
Contributor
There was a problem hiding this comment.
찾아낸 그녀는 정말인지 멋있다 너무....🔥
orrhrr
commented
Apr 12, 2024
Comment on lines
+130
to
+132
| onTouchStart={handleTouchStart} | ||
| onTouchMove={handleTouchMove} | ||
| onTouchEnd={handleTouchEnd}> |
Contributor
Author
There was a problem hiding this comment.
onTouchStart, onTouchMove, onTouchEnd 라는 이벤트가 따로 있더라구요.
터치가 가능한 기기(모바일,테블릿 등)에서만 발생되는 이벤트라고 합니다.
그래서 써봤어용!
- 사용자가 터치가능한 기기에서만 작동하는 touch Event(모바일, 테블릿 등..)
- onTouchStart, onTouchMove, onTouchEnd, onTouchCancel
- [touchstart] 이벤트 - 사용자가 화면에 손가락을 대면 발생.
- [touchmove] 이벤트 - touchstart 이벤트 후, 손가락을 이동시켰을 때 발생. / 이벤트 핸들러를 등록하여 사용자가 터치 이벤트를 발생시키는 지점을 추적하거나, 드래그 앤 드롭 작업을 구현하는 데 사용됨.
- [touchend] 이벤트: 사용자가 손가락을 화면에서 떼면 발생. / 이벤트 핸들러를 등록하여 사용자의 터치 이벤트를 감지하고, 해당 이벤트에 대한 처리를 수행하는 데 사용됨.
- [touchcancel] 이벤트: touchstart 이벤트가 발생한 후, touchmove 이벤트가 발생하지 않고 touchend 이벤트도 발생하지 않는 경우, 이벤트 핸들러를 등록하여 touch 이벤트를 취소하고, 해당 이벤트에 대한 처리를 수행하는 데 사용됨.
- onTouchStart, onTouchMove, onTouchEnd, onTouchCancel
Contributor
There was a problem hiding this comment.
너무 정성스러운 설명 감사해요! 덕분에 저도 onTouchStart, onTouchMove, onTouchEnd 이벤트를 첨 알게 됐네요!!
orrhrr
commented
Apr 12, 2024
|
|
||
| // 터치 이벤트 함수 | ||
| const handleTouchStart = (e: React.TouchEvent<HTMLUListElement>) => { | ||
| touchStartRef.current = e.touches[0].clientX; |
Contributor
Author
There was a problem hiding this comment.
터치가 시작되면 해당 좌표를 받습니다.
orrhrr
commented
Apr 12, 2024
| touchStartRef.current = e.touches[0].clientX; | ||
| }; | ||
|
|
||
| const handleTouchMove = (e: React.TouchEvent<HTMLUListElement>) => { |
Contributor
Author
There was a problem hiding this comment.
터치하고 움직인 거리의 좌표를 받습니다.
orrhrr
commented
Apr 12, 2024
Comment on lines
+48
to
+60
| const diff = touchStartRef.current - touchEndRef.current; | ||
| const sensitivity = 50; // 터치 이벤트 감지 감도 (좌우 이동 거리) | ||
| if (diff > sensitivity) { | ||
| // 오른쪽으로 슬라이드 | ||
| const newIndex = currIndex === currList.length ? 1 : currIndex + 1; | ||
| setCurrIndex(newIndex); | ||
| setButtonActiveIndex(newIndex - 1); | ||
| } else if (diff < -sensitivity) { | ||
| // 왼쪽으로 슬라이드 | ||
| const newIndex = currIndex === 1 ? currList.length : currIndex - 1; | ||
| setCurrIndex(newIndex); | ||
| setButtonActiveIndex(newIndex - 1); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
터치 이벤트 감지 감도를 비교하여, 해당 감도(50)이상 만큼 이동이 있을 경우,
오른쪽인지 왼쪽인지를 감지하여 이전 이미지, 혹은 다음이미지를 보여줍니다.
Contributor
|
어푸!! 🏊♂️ |
hyejungan
approved these changes
Apr 19, 2024
Contributor
hyejungan
left a comment
hyejungan
left a comment
There was a problem hiding this comment.
그녀의 멋집에 눈물 콸콸!!
저두 이제부터 좀 열심히 살아보겠습니닿ㅎㅎㅎ
| <div className="flex-center left-30% absolute bottom-20 z-10 h-20 w-100 gap-10 mobile:bottom-8"> | ||
| {currList.map((_, idx) => ( | ||
| <button | ||
| className={`h-10 w-10 rounded-full bg-gray-1 hover:bg-primary active:bg-primary ${ButtonActiveIndex === idx ? 'bg-primary' : ''} mobile:h-5 mobile:w-5`} |
Contributor
There was a problem hiding this comment.
찾아낸 그녀는 정말인지 멋있다 너무....🔥
Comment on lines
+130
to
+132
| onTouchStart={handleTouchStart} | ||
| onTouchMove={handleTouchMove} | ||
| onTouchEnd={handleTouchEnd}> |
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.
구현사항
개발자도구에서 클릭한 버튼 스타일이 유지되던 이유가 마우스오버 스타일 때문이였더라구요..
모바일에서도 hover 이벤트와 touch 이벤트가 잘 구분되지 않아서 가끔 눌린채로 유지되는것처럼 보이는걸로 추정합니다.
그래서 그냥 지워버렸긔
사용방법
코멘트 참고해주세용
스크린샷
2024-04-04.6.06.40.mov
close