[fix] 모바일 환경 입력창과 키보드 간의 간격이 큰 문제 수정

[ff1451]

✨ 요약

- 채팅방 입력 영역의 기본 하단 패딩을 22px에서 12px로 조정했습니다.
- VisualViewport와 입력 포커스 상태를 함께 사용해 가상 키보드 활성화 여부를 판단하도록 변경했습니다.
- 키보드가 열려 있을 때는 채팅 입력 영역의 safe area 하단 패딩을 제거해, 키보드와 입력창 사이 간격이 과하게 벌어지지 않도록 수정했습니다.
- 키보드가 닫히면 기존 safe area 패딩이 다시 적용되도록 처리했습니다.

😎 해결한 이슈

• close [fix] 모바일 환경 입력창과 키보드 간의 간격이 큰 문제 수정 #222

Summary by CodeRabbit

릴리스 노트

• 스타일 개선
  • 모바일에서 채팅 입력 필드의 하단 패딩과 위치 처리를 더 정확하게 조정합니다.
  • 화면 하단 안전 영역 값을 새로 관리해 키보드 노출 시 입력 필드 간격을 안정적으로 유지합니다.
• 버그 수정
  • 입력 요소 포커스 상태와 뷰포트 변화를 더 정확히 감지해 키보드 높이 판단 오류를 줄였습니다.

[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: 182aef9c-b40e-45e5-a950-9a7e7a37d817

📥 Commits

Reviewing files that changed from the base of the PR and between 9a6719a and 0cfbc4b.

📒 Files selected for processing (1)

• src/utils/ts/viewport.ts

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

• src/utils/ts/viewport.ts

---

Walkthrough

루트에 CSS 커스텀 속성 --effective-bottom-safe-area: var(--sab)를 추가했습니다. 채팅 입력 폼의 하단 패딩을 pb-[calc(22px+var(--sab))]에서 pb-[calc(12px+var(--effective-bottom-safe-area))]로 변경했습니다. viewport 유틸은 에디터블 포커스 상태와 휴식(resting) 뷰포트 치수를 추적하도록 확장되었고, 키보드 높이를 계산해 키보드 열림 여부를 결정하며 키보드가 열리면 --effective-bottom-safe-area를 0px로, 아니면 var(--sab)로 설정합니다.

🚥 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	코드 변경사항이 #222의 모든 주요 요구사항을 충족합니다: 하단 패딩 값 조정(22px→12px), viewport 기반 동적 safe area 계산, 키보드 활성화 상태 감지 로직 구현.
Out of Scope Changes check	✅ Passed	모든 변경사항이 모바일 입력창-키보드 간격 문제 해결을 위한 범위 내의 수정입니다. CSS 변수 추가, 채팅 입력 패딩 업데이트, 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 222-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

모바일에서 가상 키보드가 열릴 때 채팅 입력창 하단 여백이 과도하게 커지는 문제(#222)를 해결하기 위해, safe-area 하단 패딩을 키보드 상태에 따라 동적으로 적용하도록 조정하는 PR입니다.

Changes:

• 채팅 입력 영역의 기본 하단 패딩을 22px → 12px로 조정
• visualViewport + 입력 포커스 상태 기반으로 키보드 열림을 추정해 --effective-bottom-safe-area를 동적으로 0px/var(--sab)로 설정
• 전역 CSS에 --effective-bottom-safe-area 기본값 추가 및 ChatRoom에서 해당 변수 사용

Reviewed changes

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

File	Description
src/utils/ts/viewport.ts	키보드 추정 로직 추가 및 --effective-bottom-safe-area를 상황에 따라 0으로 설정
src/pages/Chat/ChatRoom.tsx	입력 폼 하단 패딩 계산식을 --effective-bottom-safe-area 기반으로 변경하고 기본 패딩 축소
src/index.css	--effective-bottom-safe-area CSS 변수 기본값을 var(--sab)로 추가

---

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

[Copilot]

restingViewportHeight is used as the baseline to infer keyboard visibility, but it isn't reset when an orientation change happens while an input remains focused. In that case the baseline can be from the previous orientation, making keyboardHeight large and forcing --effective-bottom-safe-area to 0px even if the keyboard is closed. Consider resetting restingViewportHeight on orientationchange/pageshow (or whenever viewport dimensions change drastically) before computing keyboardHeight so the baseline matches the current orientation.

[Copilot]

keyboardHeight > 120 is a hard-coded threshold that will be hard to tune/understand later (and may behave differently across devices). Please extract this into a named constant (and ideally add a brief comment about why this value was chosen) so future adjustments are localized and intention-revealing.

[coderabbitai]

🧹 Nitpick comments (2)

src/utils/ts/viewport.ts (2)

24-25: 매직 넘버 상수화 권장.

120의 의미(소형 autocomplete bar 등 오탐 방지 임계값)를 명확히 하면 가독성이 향상됩니다.

♻️ 리팩토링 제안

+const KEYBOARD_HEIGHT_THRESHOLD = 120;
+
 export function installViewportVars() {
   // ...
-    const isKeyboardOpen = isEditableFocused && keyboardHeight > 120;
+    const isKeyboardOpen = isEditableFocused && keyboardHeight > KEYBOARD_HEIGHT_THRESHOLD;

🤖 Prompt for AI Agents

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

In `@src/utils/ts/viewport.ts` around lines 24 - 25, Replace the magic number 120
used to detect keyboard open state with a named constant to clarify its intent
and make it configurable; define a descriptive constant (e.g.,
KEYBOARD_OPEN_THRESHOLD = 120) near the top of the module and use it in the
isKeyboardOpen calculation (the code referencing restingViewportHeight, h,
keyboardHeight, and isEditableFocused) so the threshold’s purpose (small
autocomplete bar / debounce) is explicit and easy to adjust.

---

18-22: 조건문 간소화 가능.

두 조건의 동작이 동일하므로 하나로 합칠 수 있습니다.

♻️ 리팩토링 제안

-    if (!isEditableFocused) {
-      restingViewportHeight = h;
-    } else if (!restingViewportHeight) {
+    if (!isEditableFocused || !restingViewportHeight) {
       restingViewportHeight = h;
     }

🤖 Prompt for AI Agents

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

In `@src/utils/ts/viewport.ts` around lines 18 - 22, The two branches that assign
restingViewportHeight are identical; replace the if/else with a single condition
that sets restingViewportHeight = h when either isEditableFocused is false or
restingViewportHeight is falsy. Update the block referencing
restingViewportHeight, isEditableFocused and h to use a single if
(!isEditableFocused || !restingViewportHeight) assignment to simplify the logic.

🤖 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/ts/viewport.ts`:
- Around line 24-25: Replace the magic number 120 used to detect keyboard open
state with a named constant to clarify its intent and make it configurable;
define a descriptive constant (e.g., KEYBOARD_OPEN_THRESHOLD = 120) near the top
of the module and use it in the isKeyboardOpen calculation (the code referencing
restingViewportHeight, h, keyboardHeight, and isEditableFocused) so the
threshold’s purpose (small autocomplete bar / debounce) is explicit and easy to
adjust.
- Around line 18-22: The two branches that assign restingViewportHeight are
identical; replace the if/else with a single condition that sets
restingViewportHeight = h when either isEditableFocused is false or
restingViewportHeight is falsy. Update the block referencing
restingViewportHeight, isEditableFocused and h to use a single if
(!isEditableFocused || !restingViewportHeight) assignment to simplify the logic.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8373410d-3ae1-4f56-818c-4e844c23d250

📥 Commits

Reviewing files that changed from the base of the PR and between 43c267c and 9a6719a.

📒 Files selected for processing (3)

• src/index.css
• src/pages/Chat/ChatRoom.tsx
• src/utils/ts/viewport.ts