[fix] 키보드 활성화 시 채팅 화면에서 문서 스크롤이 발생하는 문제 수정

[ff1451]

✨ 요약

- 채팅방에서 viewport 높이 잠금 훅이 메시지 리스트 스크롤 컨테이너를 직접 받도록 변경했습니다.
- 문서 전체에 대한 touchmove는 차단하고, 채팅 메시지 리스트 안에서 실제로 스크롤 가능한 경우에만 내부 스크롤이 동작하도록 조정했습니다.
- 입력 포커스 중에는 문서 scroll reset을 유지하되, 사용자 제스처로 문서 스크롤이 생겼다가 즉시 되돌아오는 느낌을 줄이도록 구조를 보강했습니다.
- pnpm lint 검증을 완료했습니다.

😎 해결한 이슈

• close [fix] 키보드 활성화 시 채팅 화면에서 문서 스크롤이 발생하는 문제 수정 #235

Summary by CodeRabbit

릴리스 노트

• 버그 수정
  • 채팅창 스크롤 컨테이너의 뷰포트 높이 잠금 기능을 개선했습니다.
  • 터치 이벤트 처리를 추가하여 모바일에서의 스크롤 반응성을 향상시켰습니다.
  • 컨테이너 경계에서의 스크롤 동작을 보다 정확하게 제어하도록 개선했습니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5567b215-a987-415b-86fb-bd787da386d8

📥 Commits

Reviewing files that changed from the base of the PR and between 859c73d and c5ce304.

📒 Files selected for processing (2)

• src/pages/Chat/ChatRoom.tsx
• src/utils/hooks/useViewportHeightLock.ts

---

Walkthrough

useViewportHeightLock 훅이 선택적 scrollContainerRef 파라미터를 받도록 변경되었고, 터치 이벤트 핸들링이 추가되었습니다. ChatRoom에서는 채팅 스크롤 컨테이너의 ref를 훅에 전달합니다. 이를 통해 가상 키보드 활성화 시 전역 스크롤 방지에서 컨테이너 단위의 스크롤 제어로 전환되었으며, 단일 터치 제스처 중 터치 영역의 스크롤 가능 여부에 따라 기본 동작을 차단합니다.

Possibly related issues

• [fix] 키보드 활성화 시 채팅 화면에서 문서 스크롤이 발생하는 문제 수정 #235: 키보드 활성화 시 채팅 화면의 문서 스크롤 문제 해결—컨테이너 범위의 터치/스크롤 방지 로직을 통해 직접 대응

Possibly related PRs

• [fix] 키보드 활성화 시 채팅 화면 상단 고정이 깨지고 빈 공간이 남는 문제 수정 #234: useViewportHeightLock 훅 동일 수정으로 키보드 열림 시 문서 스크롤 방지하는 관련 PR
• [fix] 키보드 활성화 시 화면 흔들림 문제 수정 #225: 이전 useViewportHeightLock 도입 이후 해당 훅의 컨테이너 범위 확장 및 터치 핸들링 추가를 연속으로 구현

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 235-fix-채팅-키보드-활성화-시-문서-스크롤-발생-수정

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

채팅방(iOS Safari/웹뷰)에서 가상 키보드 활성화 시 문서(body/root) 스크롤이 발생하는 문제(#235)를 줄이기 위해, viewport height lock 훅이 메시지 리스트 스크롤 컨테이너를 인지하고 터치 스크롤 체인을 제어하도록 보강한 PR입니다.

Changes:

• useViewportHeightLock가 스크롤 컨테이너 ref를 받아 문서 touchmove를 제어하도록 확장
• 입력 포커스 중에만 window scroll reset이 동작하도록 조건을 추가
• ChatRoom에서 viewport height lock 훅에 메시지 리스트 컨테이너 ref를 전달하도록 변경

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/utils/hooks/useViewportHeightLock.ts	스크롤 컨테이너 기준의 터치 스크롤 차단 로직 추가 및 focus 상태 기반 스크롤 리셋 조건 보강
src/pages/Chat/ChatRoom.tsx	메시지 리스트 컨테이너 ref를 useViewportHeightLock에 전달하도록 연결

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

scrollContainerRef 타입이 RefObject<HTMLElement | null>로 되어 있는데, RefObject<T> 자체가 current: T | null 형태라서 | null이 중복됩니다. 타입을 RefObject<HTMLElement>(또는 구체적으로 RefObject<HTMLDivElement>)로 정리하면 호출부/IDE 타입 추론이 더 명확해집니다.