Fix: 게시물 등록/수정시 이미지 업로드 아이콘 모바일 위치 문제 #329

[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 추후 브라우저 호환성 확인 필요(어디까지 브라우저 지원 할건지)

[netlify[bot]]

✅ Deploy Preview for bokgungom-market ready!

Name	Link
🔨 Latest commit	f08c0c85bd4fa8634f783f9c84536076738a2f00
🔍 Latest deploy log	https://app.netlify.com/sites/bokgungom-market/deploys/63aeaafd050fed000808b105
😎 Deploy Preview	https://deploy-preview-330--bokgungom-market.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.