[FIX] 닉네임 화면에서 키보드와 함께 버튼이 안올라오는 IOS 문제 개선 & 라우팅 오류 해결

[rbgksqkr]

Issue Number

#340

As-Is

• IOS 의 모바일 크롬과 사파리에선 닉네임 페이지의 확인 버튼이 키보드에 가려짐
• 입력창을 클릭했을 때 확대되는 현상
• IOS 자체적으로 인풋창이 화면의 가운데에 위치시키기 위해 스크롤을 발생시키는 현상
• 가상 키보드로 인해 resize 이벤트가 동작하지 않아 버튼이 안올라오는 현상
• 가상 키보드가 올라오면서 그 공간으로 스크롤이 생기는 현상

To-Be

• 키보드 높이만큼 버튼이 따라 올라옴
• 입력할 때 스크롤 방지
• 라우팅 오류 해결

Check List

• 테스트가 전부 통과되었나요?
• 모든 commit이 push 되었나요?
• merge할 branch를 확인했나요?
• Assignee를 지정했나요?
• Label을 지정했나요?

Test Screenshot

라우팅 버그

닉네임 화면에서 새로고침 후 뒤로 가기를 할 경우 라우팅 에러가 발생하는 것을 확인하였습니다.
해당 오류를 재연해보니 새로고침 후 페이지를 lazy loading 하는 과정에서 Suspense가 없어 오류가 발생하는 것 을 알 수 있었습니다. 따라서 RootErrorBoundary, AsyncErrorBoundary를 index 파일에 위치시켜 최상단에서 감싸주고, 라우터 에러는 RouterFallback 에게 책임 분리하였습니다.

default.mov

❌ IOS 버튼 개선 사항

가상 키보드로 인해 resize 이벤트가 동작하지 않아 버튼이 안올라오는 현상

안드로이드는 viewport가 줄어들지만, IOS는 viewport는 그대로고 document 가 키보드 높이만큼 올라가 resize 이벤트가 발생하지 않는 것으로 확인되었습니다. 이를 document 대신 visualViewport에 resize 이벤트를 걸어 해결하였습니다.

입력창을 클릭했을 때 확대되는 현상

접근성 정책으로 인해 font-size가 16px 이하인 경우 확대된다고 합니다. font-size가 커졌을 때 UI가 크게 이상해지지 않고, 오히려 사용성을 높인다 생각하여 채택하였습니다.

IOS_.mov

IOS 자체적으로 인풋창이 화면의 가운데에 위치시키기 위해 스크롤을 발생시키는 현상

IOS 자체 버그(?)라고 판단하여 헤더 높이 조정 & 불필요한 여백 제거로 간격을 제거하였습니다.

가상 키보드가 올라오면서 그 공간으로 스크롤이 생기는 현상

여러 방식을 사용했지만 해당 블로그에서 소개하는 가장 쉬우면서도 상황에 적절한 touchmove 이벤트 가 동작하지 않도록 설정하였습니다.

IOS_._._.mov

개선 결과

❌ before	✅ after
IOS_._.mov	IOS_.mov

(Optional) Additional Description

autofocus

autofocus가 IOS 에서만 동작하지 않는데(ref focus 도 안됨), 접근성 측면에서도 안좋다고 하긴 하네요
포메가 저번에 eslint에서 input태그의 autofocus를 줬을 때 에러가 나서 ref를 사용하여 구현했었는데 결국 에러만 안뜨지 똑같다고 생각이 들어요
어떻게 처리하는게 좋을까요 ??
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

[useon]

기나긴 코드립유 수고하셨습니다 ~ !! LGTM ~~~ !! ✨✨✨