[fix] 키보드 활성화 시 viewport offset으로 채팅 레이아웃이 흔들리는 문제 수정

[ff1451]

✨ 요약

- 입력 포커스 중에는 루트 레이아웃의 viewport offset을 0으로 고정하도록 수정했습니다.
- visualViewport.offsetTop 변화가 헤더를 포함한 전체 채팅 레이아웃에 전달되지 않도록 조정했습니다.
- 이를 통해 키보드 활성화 초기에 화면 전체가 위아래로 흔들리는 현상을 줄이도록 수정했습니다.
- pnpm lint 검증을 완료했습니다.

😎 해결한 이슈

• close [fix] 키보드 활성화 시 viewport offset으로 채팅 레이아웃이 흔들리는 문제 수정 #228

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: bb8ea772-0314-418a-9ddf-ce6b4c2395e3

📥 Commits

Reviewing files that changed from the base of the PR and between e56c032 and c4af8f1.

📒 Files selected for processing (1)

• src/utils/ts/viewport.ts

---

Walkthrough

installViewportVars() 함수에서 입력창 포커스 상태(isEditableFocused)에 따라 --viewport-offset CSS 변수를 조건부로 설정하도록 변경했습니다. 포커스 중에는 --viewport-offset을 0px로 강제 고정하고, 그 외에는 visualViewport.offsetTop 값을 (0 이상으로 clamp하여) 적용합니다.

Possibly related issues

• [fix] 키보드 활성화 시 viewport offset으로 채팅 레이아웃이 흔들리는 문제 수정 #228: 키보드 활성화 시 visualViewport.offsetTop으로 인한 레이아웃 흔들림 현상을 --viewport-offset: 0으로 고정하여 해결
• [fix] 키보드 활성화 시 화면 흔들림 문제 수정 #224: 포커스 상태에서 뷰포트/패딩 조정 로직을 다루므로 관련성 있음
• [fix] 모바일 환경 입력창과 키보드 간의 간격이 큰 문제 수정 #222: isEditableFocused 상태에서 viewport/safe-area 처리 방식이 동일하게 변경됨

Possibly related PRs

• [fix] 모바일 환경 입력창과 키보드 간의 간격이 큰 문제 수정 #223: 동일 파일(viewport.ts)의 installViewportVars 함수에서 포커스 상태에 따른 viewport 동작을 수정
• [fix] 키보드 활성화 시 화면 흔들림 문제 수정 #225: 글로벌 viewport CSS 변수 관리 로직을 중앙화하며 --viewport-offset 설정 방식 통합

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 228-fix-키보드-활성화-시-viewport-offset-레이아웃-흔들림-수정

---

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.}