[ Fix ] 모바일뷰 캘린더 하단바 안가려지게 수정

[ijieun]

#️⃣ Related Issue

Closes #334

✅ Done Task

• 모바일뷰 캘린더 하단바 안가려지게 수정

☀️ New-insight

💎 PR Point

크롬과 사파리 모두 특정 버전 이후부터는 스크롤 시 주소창과 하단 바가 자동으로 숨겨지는 기능을 가지고 있었습니다.!
모바일 웹 스크롤 시 하단바에 가려지던 바텀바가 가려지지 않도록 수정했습니다.
height : 100vh 대신 height : auto 와 min-height: 100dvh를 사용해서,
전체화면으로 스크롤되도록 하여 해결했습니다!

📸 Screenshot

모바일뷰 테스트

• 하단바 있을 경우
  

• 하단바 없을 경우
  

[lydiacho]

좋아용
혹시 그냥 height: 100dvh 로 바꾸는거랑 지금처럼 auto + min-height 해주는거랑 무슨 차이가 있나요??

[se0jinYoon]

좋슴니다!
근데 이렇게 스크롤에 따라 바뀔 수 있는 뷰는 화면 녹화로 올려주면 좋을 것 같아요!

[ijieun]

@lydiacho
height: 100dvh는 요소가 항상 뷰포트 전체 높이에 고정되지만 height: auto; min-height: 100dvh는 기본적으로 뷰포트 높이를 차지하면서도 콘텐츠가 많아지면 요소의 높이가 자동으로 확장됩니다. 이렇게 하면 내부에 추가 콘텐츠가 있을 때 height: auto 설정으로 인해 전체 화면에서 자연스럽게 스크롤이 가능해집니다.

근데.. 높이가 뷰포트에 고정되어 있기 때문에 유동적인 높이 조절 기능은 필요하지 않겠다는 생각이 드네요 🤔 빼줘야겠습니다