[FEED] 게시물 등록/수정시 이미지 업로드 아이콘 모바일 위치 문제

[SEMINSEMINSEMIN]

기존

모바일에서 이미지 업로드 아이콘이 가려지는 문제를 해결하기 위해 텍스트에리어에 포커스가 있을 때 패딩바텀을 늘리고 포커스가 없을 때 패딩바텀을 줄이는 논리로 코드를 짬. 그런데 이 방법의 문제점은 데스크탑에서도 그대로 동작하기 때문에 데스크탑에서는 가상키보드가 없음에도 불구하고 똑같이 작동해 사용자가 이용하기 불편하다는 것.

참고할만한 사이트

https://coffeeandcakeandnewjeong.tistory.com/8

https://pks2974.medium.com/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%B7%B0%ED%8F%AC%ED%8A%B8-layout-%EC%99%80-visual-viewport-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-47756d5ee3cf

https://www.npmjs.com/package/on-screen-keyboard-detector

https://velog.io/@tmdan1346/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%ED%82%A4%EB%B3%B4%EB%93%9C%EC%9D%98-%EB%86%92%EC%9D%B4-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-detect-virtual-keyboard-open-using-javascript

[github-actions[bot]]

Branch bug/issue-329 created for issue: [FEED] 게시물 등록/수정시 이미지 업로드 아이콘 모바일 위치 문제

[SEMINSEMINSEMIN]

visual viewport 사파리 안 됨

https://github.com/WICG/visual-viewport/issues/79

Safari 15 does not trigger a resize event when the virtual keyboards is coming up.

아이디어: https://stackoverflow.com/questions/69944254/virtual-keyboard-covers-html-element-in-safari-on-ios

https://channel.io/ko/blog/cross_browsing_ios15

[SEMINSEMINSEMIN]

시도 방법 1

기존: 모바일에서 이미지 업로드 아이콘이 가려지는 문제를 해결하기 위해 텍스트에리어에 포커스가 있을 때 패딩바텀을 늘리고 포커스가 없을 때 패딩바텀을 줄이는 논리로 코드를 짬. 그런데 이 방법의 문제점은 데스크탑에서도 그대로 동작하기 때문에 데스크탑에서는 가상키보드가 없음에도 불구하고 똑같이 작동해 사용자가 이용하기 불편하다는 것. 시도 방법: visualViewport api와 동적 props 이용 참고 사이트: https://www.npmjs.com/package/on-screen-keyboard-detector, https://velog.io/@tmdan1346/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-%ED%82%A4%EB%B3%B4%EB%93%9C%EC%9D%98-%EB%86%92%EC%9D%B4-%ED%99%95%EC%9D%B8%ED%95%98%EA%B8%B0-detect-virtual-keyboard-open-using-javascript 사파리에서 작동 X

시도 방법 2

visualViewport 대신 innerHeight 사용

여전히 작동 x

시도 방법 3

On-screen keyboard detector 이용 작동 x

시도 방법 4

on-screen keyboard detector 대신 PostEditWrapper에 innerHeight 이용 - 그러나 모바일에서 제대로 작동할까? X

시도 방법 5

window.visualViewport에 resize 이벤트를 걸었음 + resize 이벤트 발생시 textarea에 focus blur 이벤트도 그때 발생한건지 확인 => 사파리에서는 잘 작동하나 M1에서 작동 x 추후 브라우저 호환성 확인 필요(어디까지 브라우저 지원 할건지)