[fix] 키보드 활성화 시 채팅 화면 상단 고정이 깨지고 빈 공간이 남는 문제 수정

[ff1451]

✨ 요약

- 채팅방 경로에서는 외부 레이아웃 main 스크롤을 막고, 내부 메시지 영역만 스크롤되도록 구조를 조정했습니다.
- 채팅방 루트에도 overflow hidden을 적용해 키보드 활성화 중 바깥 컨테이너가 함께 밀리지 않도록 맞췄습니다.
- viewport 높이 잠금 훅에서 focus, visualViewport 변화, 문서 스크롤 시점마다 document.scrollingElement/html/body scrollTop을 0으로 복구하도록 보강했습니다.
- iOS 계열 브라우저에서 input 포커스로 문서 루트가 위로 밀린 뒤 빈 공간이 남는 현상을 줄이도록 수정했습니다.
- pnpm lint 검증을 완료했습니다.

😎 해결한 이슈

• close [fix] 키보드 활성화 시 채팅 화면 상단 고정이 깨지고 빈 공간이 남는 문제 수정 #233

Summary by CodeRabbit

버그 수정

• 채팅 페이지 레이아웃의 스크롤 동작이 개선되었습니다.
• 뷰포트 높이 관리 기능이 강화되었습니다.
• 레이아웃 오버플로우 처리가 최적화되었습니다.
• 편집 가능 요소 포커스 시 스크롤 제어가 개선되었습니다.

[coderabbitai]

Warning

Rate limit exceeded

@ff1451 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 17 minutes and 35 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 17 minutes and 35 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0d9fc084-a1b6-486d-8347-7017a1f80006

📥 Commits

Reviewing files that changed from the base of the PR and between 89325c6 and 1dbe15f.

📒 Files selected for processing (4)

• src/components/layout/index.tsx
• src/utils/hooks/useViewportHeightLock.ts
• src/utils/ts/dom.ts
• src/utils/ts/viewport.ts

Walkthrough

채팅방에서 외부 스크롤을 차단하고 내부만 스크롤되도록 레이아웃을 개선했습니다. Layout 컴포넌트에서 현재 경로가 /chats/:id 패턴인지 감지하여 조건부로 overflow-hidden 적용, ChatRoom 최상위 컨테이너에 overflow-hidden 추가, useViewportHeightLock 훅을 확장하여 iOS 가상 키보드 활성화 시 문서 스크롤 위치를 자동 복구하는 로직 추가했습니다.

Possibly related PRs

• [refactor] 채팅 UI 개선 #174: ChatRoom 컴포넌트의 메시지 레이아웃 및 DOM 구조 리팩토링
• [fix] 키보드 활성화 시 화면 흔들림 문제 수정 #225: 동일한 useViewportHeightLock 훅과 ChatRoom의 overflow/viewport 처리 로직 변경
• [fix] 모바일 환경 입력창과 키보드 간의 간격이 큰 문제 수정 #223: ChatRoom 컴포넌트의 overflow/padding 및 모바일 가상 키보드 관련 viewport 처리 개선

🚥 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 제목은 수정 대상(키보드 활성화 시 채팅 화면 상단 고정 깨짐)을 명확히 설명하며 변경사항의 핵심을 정확히 반영합니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항이 이슈 #233의 모든 기술적 요구사항을 충족합니다: 레이아웃 스크롤 차단, ChatRoom overflow-hidden 적용, 문서 스크롤 복구 로직 구현.
Out of Scope Changes check	✅ Passed	세 파일의 모든 변경사항이 iOS 키보드 이슈 해결에 필요한 범위 내입니다. 불필요한 리팩토링이나 기능 추가는 없습니다.

_{✏️ 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 233-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/웹뷰) 시 채팅 화면 레이아웃이 함께 밀리거나, 키보드 종료 후 빈 공간이 남는 현상을 줄이기 위해 채팅방의 스크롤 책임을 “외부 Layout(main) → 채팅 내부 메시지 영역”으로 재정의하고, 문서 루트 스크롤을 강제로 원복하는 로직을 보강한 PR입니다.

Changes:

• 채팅방에서는 Layout의 <main> 스크롤을 차단하고(ChatRoom 내부만 스크롤) 컨테이너 overflow를 조정
• useViewportHeightLock에서 focus/visualViewport/scroll 변화에 맞춰 문서 스크롤을 0으로 복구하는 루틴 추가
• ChatRoom 루트에 overflow-hidden을 추가해 키보드 활성화 시 외부 컨테이너가 함께 밀리는 현상 완화

Reviewed changes

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

File	Description
src/utils/hooks/useViewportHeightLock.ts	iOS에서 문서 루트가 밀리는 케이스를 줄이기 위해 focus/viewport/scroll 기반의 스크롤 원복 로직 추가
src/pages/Chat/ChatRoom.tsx	채팅방 루트 overflow를 숨김 처리하여 외부 레이아웃 이동/빈 공간 노출을 완화
src/components/layout/index.tsx	채팅방 경로에서 <main> 스크롤을 막고 내부 영역 스크롤로 전환

---

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

[coderabbitai]

🧹 Nitpick comments (3)

src/utils/hooks/useViewportHeightLock.ts (3)

33-44: 스크롤 리셋 전략 검토

requestAnimationFrame 2번 + setTimeout(180ms) 조합은 iOS Safari의 비동기 스크롤 동작을 대응하기 위한 것으로 보입니다. 이 패턴은 경험적으로 검증된 것인지 확인이 필요합니다.

180ms 타임아웃 값의 근거가 있다면 주석으로 남겨두면 향후 유지보수에 도움이 됩니다.

📝 주석 추가 제안

+    // iOS Safari에서 키보드 활성화 시 문서 스크롤이 비동기로 발생하므로
+    // rAF 2회 + 180ms 지연으로 여러 타이밍에 리셋을 시도합니다.
     const scheduleDocumentScrollReset = () => {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/utils/hooks/useViewportHeightLock.ts` around lines 33 - 44, Add
explanatory comments to scheduleDocumentScrollReset explaining why it uses two
requestAnimationFrame calls and a 180ms setTimeout to handle iOS Safari
asynchronous scroll behavior; mention the empirical/source rationale for the
180ms value (or mark as heuristic if no authoritative source) and make the
timing a named constant (e.g., SCROLL_RESET_TIMEOUT) so the purpose is clearer
when used with resetDocumentScroll, resetFrameId and trailingResetFrameId; keep
the comment concise and colocated with the function for maintainability.

---

17-21: isTextInputElement 함수 중복

src/utils/ts/viewport.ts에 동일한 isTextInputElement 헬퍼가 존재합니다. 공통 유틸로 추출하면 중복을 줄일 수 있습니다.

♻️ 공유 유틸 추출 제안

// src/utils/ts/dom.ts
export const isTextInputElement = (element: EventTarget | null): element is HTMLElement => {
  if (!(element instanceof HTMLElement)) return false;
  return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element.isContentEditable;
};

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/utils/hooks/useViewportHeightLock.ts` around lines 17 - 21, Duplicate
isTextInputElement helper exists in useViewportHeightLock.ts and
src/utils/ts/viewport.ts; extract it into a shared module (e.g., export
isTextInputElement from src/utils/ts/dom.ts) and replace the local
implementations by importing that exported function. Update references in
useViewportHeightLock (function name isTextInputElement) and in viewport.ts to
import the new shared util, ensuring the exported signature and type guard
remain identical.

---

81-86: 동일 이벤트에 여러 핸들러 등록 - 유지보수 명확화 권장

viewport.ts의 전역 installViewportVars()와 useViewportHeightLock 훅이 동일한 이벤트(focusin, focusout, visualViewport resize/scroll)에 리스너를 등록합니다. 다만 각 핸들러의 목적이 다릅니다:

• viewport.ts: CSS 변수 업데이트
• useViewportHeightLock: 스크롤 위치 초기화

현재 ChatRoom에서만 사용되므로 기능상 문제는 없으나, 향후 이 훅을 다른 페이지에서 재사용할 때 의도가 명확하도록 주석이나 문서화를 추가하면 좋습니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/utils/hooks/useViewportHeightLock.ts` around lines 81 - 86, Both
installViewportVars() and the useViewportHeightLock hook register handlers for
the same global events (focusin/focusout and visualViewport resize/scroll),
which can be confusing for future reuse; update useViewportHeightLock (and/or
installViewportVars) to either (a) add a brief comment above the hook and its
event registrations (handleFocusIn, handleFocusOut, handleViewportChange)
explaining the different responsibilities (CSS var updates vs scroll-reset) and
that duplication is intentional for ChatRoom-only usage, or (b) add a simple
guard/option to avoid double-registration when installViewportVars() is active
(e.g., a boolean flag or opt-in parameter) so consumers can explicitly choose
exclusive behavior—make this change in useViewportHeightLock and document it
near the event listener lines.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/utils/hooks/useViewportHeightLock.ts`:
- Around line 33-44: Add explanatory comments to scheduleDocumentScrollReset
explaining why it uses two requestAnimationFrame calls and a 180ms setTimeout to
handle iOS Safari asynchronous scroll behavior; mention the empirical/source
rationale for the 180ms value (or mark as heuristic if no authoritative source)
and make the timing a named constant (e.g., SCROLL_RESET_TIMEOUT) so the purpose
is clearer when used with resetDocumentScroll, resetFrameId and
trailingResetFrameId; keep the comment concise and colocated with the function
for maintainability.
- Around line 17-21: Duplicate isTextInputElement helper exists in
useViewportHeightLock.ts and src/utils/ts/viewport.ts; extract it into a shared
module (e.g., export isTextInputElement from src/utils/ts/dom.ts) and replace
the local implementations by importing that exported function. Update references
in useViewportHeightLock (function name isTextInputElement) and in viewport.ts
to import the new shared util, ensuring the exported signature and type guard
remain identical.
- Around line 81-86: Both installViewportVars() and the useViewportHeightLock
hook register handlers for the same global events (focusin/focusout and
visualViewport resize/scroll), which can be confusing for future reuse; update
useViewportHeightLock (and/or installViewportVars) to either (a) add a brief
comment above the hook and its event registrations (handleFocusIn,
handleFocusOut, handleViewportChange) explaining the different responsibilities
(CSS var updates vs scroll-reset) and that duplication is intentional for
ChatRoom-only usage, or (b) add a simple guard/option to avoid
double-registration when installViewportVars() is active (e.g., a boolean flag
or opt-in parameter) so consumers can explicitly choose exclusive behavior—make
this change in useViewportHeightLock and document it near the event listener
lines.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 4f6613b9-113b-4dd1-81d7-a235552582f2

📥 Commits

Reviewing files that changed from the base of the PR and between 0c0a0bb and 89325c6.

📒 Files selected for processing (3)

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