모바일 호환성을 위한 노력들

✅ Viewport 설정 (index.html)

• 모바일 화면 크기에 맞춤
• 사용자의 확대/축소 제한
• 노치 디자인 대응

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
/>

✅ 터치 이벤트 처리 (src/components/Chat/ImagePreview.tsx)

<ImageContainer
  onTouchStart={handleTouchStart}
  onTouchMove={handleTouchMove}
  onTouchEnd={handleTouchEnd}
  onMouseDown={handleTouchStart}
  onMouseMove={handleTouchMove}
  onMouseUp={handleTouchEnd}
/>

• 모바일 터치 스와이프 지원
• 데스크톱 마우스 이벤트도 함께 처리

✅ 키보드 대응 (src/components/Chat/ChatSendField.tsx)

useEffect(() => {
  const handleResize = () => {
    if (!window.visualViewport) return;
    const isKeyboard = window.visualViewport.offsetTop > 0;
    setIsKeyboardVisible(isKeyboard);
  };

  window.visualViewport?.addEventListener('resize', handleResize);
});

모바일 키보드 표시 여부 감지 키보드에 의한 화면 레이아웃 변경 대응

키보드가 표시되기 전에는 채팅 input field 의 margin bottom 을 모바일 독바 height 만큼 준다.

padding-bottom: env(safe-area-inset-bottom);

키보드가 표시된 후에는 이를 제거

 padding-bottom: ${(props) =>
    props.isKeyboardVisible ? '15px' : 'calc(env(safe-area-inset-bottom) + 15px)'};
`;

✅ 반응형 이미지 처리

const PreviewImage = styled.img`
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
`;

• 화면 크기에 맞춘 이미지 리사이징
• 모바일에서의 이미지 드래그 방지

✅ PWA 지원 (index.html)

• 모바일 홈 스크린 앱 설치 지원
• iOS 상태바 스타일 최적화

✅ 개발과정

• ios simulator / vite --host 를 통한 실제 모바일 환경에서 localhost 접근