fix: 가상키보드 열릴 시 bottom sheet가 밀리는 버그 해결

설명

close #85 가상키보드 열릴 시 bottom fixed된 요소가 밀리는 문제를 해결합니다.

관련 이슈 https://github.com/dev-wiki-kr/dev-wiki/issues/85#issuecomment-2266677207 ios 키보드가 열렸을 때 viewport가 아닌 document 영역을 키보드 공간만큼 밀어버려서 발생하는 문제인 것 같습니다 (+ aos chrome에서도 같은 문제인 것 같습니다)

변경 내역

Visual Viewport API와 scroll 이벤트를 이용해서 해결하고자 합니다.

바텀시트의 컨텐츠 height를 Visual Viewport의 높이를 기준으로 계산(viewportHeight * 0.8)하고
bottom 값을 키보드 높이(초기 window.innerHeight - Visual Viewport Height)로 설정했습니당 이렇게 해서 키보드가 열렷을 때도 제 위치를 유지하게 했습니다.

논의할 점

해결하면서 또다른 문제가 있었습니다

1. 바텀시트안의 input의 focus로 인해 스크롤이 이동되는 점

키보드 O시 - window.scrollY: 130px // 이부분

지금은 바텀시트가 열리지마자 focus가 가능한 요소(input)로 자동 포커싱되도록 설정되어 있습니다. 그래서 키보드가 열렸을 때 포커싱 인한 스크롤 이동이 발생해, 바텀시트가 Visual Viewport 영역보다 더 벗어나고 있었습니다

✅ 바텀시트가 열릴 때 input에 바로 포커스가 가지않도록 해서 해결 (next.js 공식홈 방식 참고)

2. 키보드가 열린 후에 스크롤 시 설정한 바텀시트 높이보다 오버 스크롤이 되는 문제

https://github.com/user-attachments/assets/546e762d-f317-4754-ad2d-1105b975728e

지금 방식은 layout viewport 영역의 높이를 바꾸는게 아닌 바텀시트의 높이와 위치를 설정한 것이기 때문에 layout viewport + 가상영역까지 스크롤이 가능합니다

1) 전체화면 높이 수정: innerHeight를 Visual Viewport Height로 바꾼다

✅ 2) 스크롤 시 키보드를 닫는다 —> 제일 간단하게 구현가능해서 일단 이렇게 구현했습니당..!

위 문제를 이렇게 해결했는데 더 좋은 방법이 있을까요 ? 🫠

스크린샷

IOS - Safari

https://github.com/user-attachments/assets/8c6b8fd3-7157-4ba5-bcb1-49f8a4761054

Android - Chrome

https://github.com/user-attachments/assets/b5d5a100-6c6f-4190-9727-31ac3431c8c4

dev-wiki-kr / dev-wiki