[fix] 키보드 활성화 시 화면 흔들림 문제 수정

[ff1451]

✨ 요약

- 채팅방에서 사용하던 viewport 관련 훅 네이밍을 역할에 맞게 useViewportHeightLock으로 정리했습니다.
- ChatRoom에서 body/root 높이를 var(--viewport-height)에 맞춰 고정하는 역할만 훅에 남기고, viewport 계산은 전역 viewport 유틸에서만 담당하도록 정리했습니다.
- 더 이상 사용되지 않는 useKeyboardHeight, useViewportHeight 파일을 제거해 키보드 애니메이션 시 viewport 값이 중복으로 갱신되던 구조를 없앴습니다.
- 이를 통해 가상 키보드 활성화 시 화면이 흔들리는 현상을 줄이도록 수정했습니다.
- pnpm lint 검증을 완료했습니다.

😎 해결한 이슈

• close [fix] 키보드 활성화 시 화면 흔들림 문제 수정 #224

Summary by CodeRabbit

릴리스 노트

• Refactor
  • 채팅 화면의 모바일 뷰포트 높이 관리 방식이 변경되어, 키보드 표시 시 채팅 UI의 레이아웃과 스크롤 동작이 더 안정적으로 유지됩니다.
  • 관련 내부 동작이 정리되어 불필요한 레이아웃 복구가 줄어들었습니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: c1b1c3e4-93a2-4542-a4a5-0ecc868955f1

📥 Commits

Reviewing files that changed from the base of the PR and between 533574a and 92a14c6.

📒 Files selected for processing (1)

• src/utils/hooks/useViewportHeightLock.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• src/utils/hooks/useViewportHeightLock.ts

---

Walkthrough

ChatRoom 컴포넌트에서 모바일 뷰포트/키보드 관련 훅 호출을 useKeyboardHeight()에서 useViewportHeightLock()으로 교체했습니다. 기존의 useKeyboardHeight.ts와 useViewportHeight.ts 구현은 삭제되었고, 문서 루트 및 body의 inline height를 var(--viewport-height)로 고정하고 마운트 시 이전 값을 저장해 언마운트 시 복원하는 단순한 useViewportHeightLock 훅이 새로 추가되었습니다. ChatRoom의 공개 시그니처나 메시지 렌더링·입력 로직에는 변경이 없습니다.

Possibly related PRs

• [fix] 모바일 환경 입력창과 키보드 간의 간격이 큰 문제 수정 #223 — ChatRoom과 뷰포트/키보드 처리 관련 훅 및 CSS 변수 변경을 다루어 코드 수준에서 연관성이 높음.

개요

ChatRoom 컴포넌트에서 viewport 및 키보드 레이아웃 관리를 위해 useKeyboardHeight() 훅을 제거하고, 새로운 useViewportHeightLock() 훅으로 교체했습니다. 기존 useKeyboardHeight.ts와 useViewportHeight.ts 파일은 삭제되었으며, 더 간단한 구현의 useViewportHeightLock.ts 파일이 추가되었습니다. 메시지 렌더링, 입력 크기 조정, 제출 로직은 변경되지 않았고, 모바일 viewport 변경에 대한 UI 응답 방식만 변경되었습니다.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 main change를 명확히 설명하고 있습니다. 가상 키보드 활성화 시 화면 흔들림 문제 수정이라는 핵심 내용이 잘 드러나 있습니다.
Linked Issues check	✅ Passed	PR이 #224의 목표를 완전히 달성했습니다. viewport 계산 일원화, 훅 네이밍 정리, 중복 갱신 제거 등 모든 요구사항이 구현되었습니다.
Out of Scope Changes check	✅ Passed	모든 변경이 viewport 흔들림 문제 해결이라는 명확한 범위 내에 있습니다. 불필요한 파일 제거와 훅 정리도 같은 목표 달성을 위한 변경입니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 224-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

채팅방에서 키보드(가상 키보드) 활성화 시 viewport 관련 값이 중복 갱신되며 발생하던 화면 흔들림을 줄이기 위해, viewport 계산 책임을 전역 유틸로 일원화하고 ChatRoom에서는 높이 “고정”만 수행하도록 정리한 PR입니다.

Changes:

• ChatRoom에서 기존 viewport/keyboard 훅을 제거하고 useViewportHeightLock 훅으로 교체
• visualViewport 기반 viewport 계산/리스너 로직을 전역(installViewportVars)으로만 유지하도록 정리
• 더 이상 사용되지 않는 useViewportHeight.ts, useKeyboardHeight.ts 제거

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
src/utils/hooks/useViewportHeightLock.ts	html/body 높이를 var(--viewport-height)로 고정하는 전용 훅 추가
src/pages/Chat/ChatRoom.tsx	ChatRoom에서 새 훅 사용하도록 import/호출 변경
src/utils/hooks/useViewportHeight.ts	중복 viewport 계산 훅 삭제
src/utils/hooks/useKeyboardHeight.ts	중복 viewport 계산 훅 삭제

---

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