[FE] NumberKeyboardBottomSheet 영역에서 스크롤이 가능한 문제 #633
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
jinhokim98
approved these changes
Sep 26, 2024
Comment on lines
+34
to
+35
| z-index: 20; | ||
| touch-action: none; |
There was a problem hiding this comment.
touch action을 막아주신 코드인거죠?
| }; | ||
|
|
||
| if (isOpened) { | ||
| document.addEventListener('touchmove', preventScroll, {passive: false}); |
There was a problem hiding this comment.
passive false는 어떤 의미인가요?
There was a problem hiding this comment.
passive 리스너는 preventDefault를 호출하지 않는 역할을 합니다~
touchMove event는 기본적으로 passive event 인데,
우리는 preventDefault를 호출하기 때문에 passive:false 를 통해서 preventDefault를 사용한다고 알려줘야합니당~
soi-ha
approved these changes
Sep 26, 2024
| @@ -26,6 +31,8 @@ const NumberKeyboardBottomSheet = ({isOpened, onClose, ...props}: Props) => { | |||
| gap: 1rem; | |||
| bottom: 0; | |||
| background-color: ${theme.colors.white}; | |||
| z-index: 20; | |||
There was a problem hiding this comment.
나아..중에,, 제가 만들어 둔 z-index token을 사용해야 겠군여
| const bottomSheet = bottomSheetRef.current; | ||
| if (!bottomSheet) return; | ||
|
|
||
| const preventScroll = (e: TouchEvent) => { |
pakxe
approved these changes
Sep 26, 2024
| }; | ||
|
|
||
| if (isOpened) { | ||
| document.addEventListener('touchmove', preventScroll, {passive: false}); |
There was a problem hiding this comment.
touchMove라는 이벤트가 있었구뇽..!! 덕분에 알게됐어요 😆👍
| const useNumberKeyboardBottomSheet = ({isOpened}: Props) => { | ||
| const bottomSheetRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { |
There was a problem hiding this comment.
이건 굳이 싶을 수도 있긴한데요.! usePreventTouchMove라는 유틸함수 또는 훅으로 분리해서 사용할 수도 있을 것 같아요! 😁
There was a problem hiding this comment.
오 그것도 좋은 방법이라고 생각합니다. touch를 막는 부분이 또 필요하다면 분리해보도록 할게요!
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.
issue
구현 목적
2024-09-25.1.37.00.mov
NumberKeyboardBottomSheet가 올라온 경우 해당 영역을 드래그 해도 스크롤이 가능한 문제가 있습니다.
이 경우 사용자가 의도하지 않은 대로 동작할 수 있고, 안좋은 유저 경험의 원인이 될 수 있다고 생각합니다.
구현 사항