feat: 홈 화면 캐릭터 만들기 버튼 모바일 최적화 (#19)

[koreahghg]

💡 PR 요약

closes #19

• iOS 노치/홈 바 기기에서 하단 버튼이 가리지 않도록 safe area 대응

📋 작업 내용

index.html

• viewport 메타에 viewport-fit=cover 추가
• iOS에서 env(safe-area-inset-bottom) CSS 변수가 실제 값을 반환하려면 이 설정이 필수

src/app/index.css

• .pb-safe 유틸리티 클래스 추가
  • padding-bottom: max(2rem, env(safe-area-inset-bottom));
  • 홈 바가 없는 기기는 기존과 동일하게 2rem 유지, 홈 바가 있는 기기는 safe area만큼 자동 확장

src/pages/home/index.tsx

• 하단 버튼 컨테이너의 pb-8 → pb-safe 교체

🤝 리뷰 시 참고사항

• viewport-fit=cover 없이 env(safe-area-inset-bottom)을 써도 항상 0으로 평가되므로, HTML 변경이 CSS 변경과 반드시 함께 있어야 합니다.
• 실기기(iPhone X 이상) 또는 Safari 시뮬레이터에서 하단 버튼이 홈 바 위에 위치하는지 확인을 부탁드립니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
aikon	Ready	Preview, Comment	Jun 15, 2026 1:38am

[gemini-code-assist]

Code Review

This pull request introduces safe-area inset support for iOS devices by adding viewport-fit=cover to the viewport meta tag and defining a .pb-safe utility class in CSS to replace static bottom padding on the home page. The reviewer provided valuable feedback pointing out that using max(2rem, env(safe-area-inset-bottom)) fails to properly stack the safe-area inset on top of the desired padding, suggesting a cleaner approach using calc(2rem + env(safe-area-inset-bottom)) along with a fallback for older environments.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.