feat/#121-mobile-viewport-height 모바일 환경에 맞게 view height 개선

[jaeml06]

🚩 연관 이슈

closed #121

📝 작업 내용

🐛 어떤 문제가 있었나요?

모바일 브라우저(Safari, Chrome 등)에서 주소창/하단 네비게이션 바가 표시되면 100vh가 실제 화면보다 커져서 콘텐츠가 잘리거나 스크롤이 의도치 않게 발생하는 문제가 있었습니다.

특히 아래 상황에서 문제가 두드러졌습니다:

• 하단 고정 버튼이 화면 밖으로 밀려남
• 페이지 진입 시 불필요한 세로 스크롤 발생
• 가상 키보드가 올라올 때 레이아웃이 깨짐

✅ 어떻게 해결했나요?

1. min-h-screen-safe 유틸리티 클래스 추가

.min-h-screen-safe {
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* dynamic viewport height */
}

100dvh는 모바일 브라우저의 주소창/하단 바 상태에 따라 동적으로 변하는 실제 뷰포트 높이를 반환합니다. 100vh fallback으로 미지원 브라우저도 대응합니다.

2. Viewport 메타데이터에 interactiveWidget 설정

export const viewport: Viewport = {
  width: 'device-width',
  initialScale: 1,
  interactiveWidget: 'resizes-visual',
};

가상 키보드가 올라올 때 visual viewport만 리사이즈되도록 설정하여, 키보드로 인한 레이아웃 밀림을 방지합니다.

3. 전체 페이지에 min-h-screen → min-h-screen-safe 일괄 적용

모든 페이지 컴포넌트(9개 파일)에서 min-h-screen을 min-h-screen-safe로 변경했습니다.

📁 변경 파일 요약

파일	변경 내용
src/app/globals.css	min-h-screen-safe 유틸리티 클래스 추가
src/app/layout.tsx	viewport export 추가 (interactiveWidget: 'resizes-visual')
src/app/page.tsx	min-h-screen → min-h-screen-safe
src/app/[meetingId]/page.tsx	min-h-screen → min-h-screen-safe
src/app/meet/[meetingId]/page.tsx	min-h-screen → min-h-screen-safe
src/features/meet-create/ui/MeetCreatePage.tsx	min-h-screen → min-h-screen-safe
src/features/meet-create-date/ui/DateSelectPage.tsx	min-h-screen → min-h-screen-safe
src/features/participant-register-name/...	min-h-screen → min-h-screen-safe
src/features/participant-register-date/...	min-h-screen → min-h-screen-safe
src/features/participant-edit-name/...	min-h-screen → min-h-screen-safe
src/features/participant-edit-date/...	min-h-screen → min-h-screen-safe

🗣️ 리뷰 요구사항 (선택)