[FE] 인풋 컴포넌트 디자인 수정 및 로그인 페이지 디자인 수정 #417
Open
+397
−138
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.
관련 이슈
작업 내용
인풋 컴포넌트 디자인 개선
모바일 기기에서는 입력을 하기 위해 가상 키패드가 올라옵니다. 이 때, 가상 키패드 뒤에 가상 영역이 생기는 문제가 있어, 스크롤이 되는데요. 사용자 경험 향상을 위해서 퍼널 패턴을 도입했지만, 아이러니하게도 다시 사용자 경험을 저하시키는 요소가 발견되었습니다. 따라서, 이 문제를 해결하기 위해서 브레인 스토밍을 했었죠!
해당 이미지처럼 닉네임, 비밀번호를 가로로 배치하거나, 닉네임과 비밀번호 입력 스텝을 구분하는 방법이 제시되었는데
이 두 가지 생각으로 인해서 채택되지 않았습니다. 결국 스크롤을 막기 위해서 선택한 방법은 인풋 필드의 높이를 줄이는 것이었습니다.
인풋 필드의 높이를 줄였고, 헤더의 높이도 줄일 예정이므로 모바일 기기에서 현재 포커스되는 인풋 필드로 강제로 스크롤 하는 문제는 어느정도 해결되는 것으로 확인됐습니다. 아이폰 7 사용자는 약간의 스크롤은 발생하기는 하지만, 이전 상황에 비하면 훨씬 개선되었다고 판단했어요.
ScrollBlock.tsx
해당 컴포넌트는 children이 모바일 환경에서 스크롤되지 않도록 하는 책임을 가집니다.
{passive: false}
를 설정이 왜 필요했는지에 대해서 설명드릴게요. 모바일에서 브라우저는 터치 이벤트가 발생할 때, 성능 최적화를 위해서 기본적으로 true로 설정합니다. 마우스나, 손가락을 이용해서 특정 페이지를 스크롤 할 때, 브라우저는 빠르게 이벤트에 반응해서 스크롤을 해줘야 하는 책임을 가지고 있습니다. 이 때, passive 속성은 e.preventDefault()를 실행할지 말지 암묵적으로 결정하는 속성입니다.true인 경우, 브라우저는 이벤트 핸들러가
e.preventDefault()
를 호출하지 않을 것으로 보장받습니다. 그러므로, 이벤트 핸들러가 실행되기 전 우선적으로 스크롤을 처리하게 됩니다. 이것이 스크롤 성능 최적화입니다. 자세한 내용은 MDN의 스크롤 성능 향상 섹션에서 확인할 수 있어요.false인 경우에는, 브라우저가 이벤트 핸들러 내부에서
e.preventDefault()
를 호출할지 모른다고 가정합니다. 따라서, 내부에서 해당 메서드를 호출할 수 있기 때문에 스크롤을 바로 실행하지 않고 이벤트 핸들러가 완료될 때까지 기다립니다. 이 기다림이 메인 스레드를 블록하고, 렌더링 지연으로 이어집니다.브라우저는 스크롤 관련 성능 최적화를 위해서,
touchmove
,wheel
과 같은 이벤트의 passive를 기본적으로 true로 설정합니다. 하지만, 저희는 스크롤을 막기로 결정했기 때문에, false속성과 함께 기본 동작인 스크롤을 막을 수 있도록 e.preventDefault()함수를 호출했습니다!특이 사항
리뷰 요구사항 (선택)