채팅 입력창 멀티라인 입력 시 UI 개선#743
Hidden character warning
Conversation
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Walkthrough채팅 입력 필드의 높이 계산 로직을 개선하고 입력 바 UI를 리팩토링했습니다. 동적 높이/테두리 반경 계산을 추가하고, 전송 버튼을 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
|
✅ 프로젝트 빌드 성공 APK 빌드가 완료되었습니다. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
lib/widgets/chat_input_bar.dart (1)
81-146:⚠️ Potential issue | 🟠 Major
Colors.transparent를AppColors.transparent로 교체해주세요 (라인 120)AppColors 전용 정책을 지키기 위해 직접 Flutter 색상 코드 대신
AppColors.transparent를 사용해야 합니다.iPad 높이 스케일링 조합 위반 (라인 84, 107)
height: clampedHeight(.h스케일링) +contentPadding.vertical: 8.h(.h스케일링) 조합은 iPad에서 오버플로우를 유발합니다. 세로 패딩을 고정 픽셀값(예:8.0)으로 변경하세요.전송 버튼 분리로 인한 포커스 손실
버튼을 TextField 바깥으로 분리하면서 포커스 복구 경로가 차단되었습니다.
lib/screens/chat_room_screen.dart의_sendMessage()가 텍스트만 비우고 포커스를 복구하지 않아, 버튼 탭 후 키보드가 닫히면 연속 입력 UX가 끊깁니다.TextFieldTapRegion으로 묶거나FocusNode를 전달해onSend콜백 뒤requestFocus()를 보장해주고, 실기기에서 버튼 탭 후 키보드 유지 여부도 확인해주세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@lib/widgets/chat_input_bar.dart` around lines 81 - 146, Replace direct Flutter color usage and fix iPad scaling and focus loss: change Colors.transparent to AppColors.transparent in the Material widget (around the InkWell/Material containing the send button), change the TextField's InputDecoration contentPadding vertical from using 8.h to a fixed pixel value like 8.0 to avoid iPad overflow when clampedHeight already uses .h, and restore focus after sending by wiring a FocusNode or wrapping both TextField and the send button in a TextFieldTapRegion so that the onSend callback (e.g., the onSend passed into this widget and the chat screen's _sendMessage in lib/screens/chat_room_screen.dart) calls requestFocus(focusNode) after clearing the controller; ensure sendDisabled gating remains unchanged and test on-device to confirm keyboard stays up after tapping the separated button.
🧹 Nitpick comments (2)
lib/widgets/chat_input_bar.dart (2)
84-107: 고정 높이와vertical: .h패딩 조합은 iPad에서 입력 영역을 더 빨리 잠식합니다.
height: clampedHeight와contentPadding.vertical: 8.h가 같이 스케일돼서 큰 화면일수록 실제 텍스트 공간이 예상보다 빨리 줄어듭니다. vertical padding은 고정 px로 두거나 높이 고정을 없애는 쪽이 안전합니다. As per coding guidelines,Never combine height: N.h with padding: vertical: N.h as both scale on iPad causing overflow. Use fixed pixel padding instead.가능한 수정 방향
- contentPadding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8.h), + contentPadding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 8),🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@lib/widgets/chat_input_bar.dart` around lines 84 - 107, The TextField's fixed height (clampedHeight) is combined with vertical EdgeInsets using scaled units (8.h), causing the input area to shrink on large screens; update the widget so you do NOT use a scaled vertical padding with a scaled height: either remove the explicit height (clampedHeight) and rely on minLines/maxLines in the TextField, or change contentPadding's vertical value to a fixed pixel value (e.g., 8.0) instead of 8.h; locate the TextField block (controller, enabled, minLines/maxLines, cursor..., decoration) and adjust the height vs contentPadding accordingly to avoid combining N.h for both clampedHeight and vertical padding.
119-120:Colors.transparent도AppColors로 통일해 주세요.Line 120에서 직접 색 상수를 다시 도입해서 이 파일의 색상 관리가 여기만 예외가 됩니다. 투명 색도
AppColors를 통해 참조하는 편이 일관됩니다. As per coding guidelines,Use AppColors for color values in Flutter (direct Color code definition prohibited).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@lib/widgets/chat_input_bar.dart` around lines 119 - 120, chat_input_bar.dart에서 Material 위젯에 직접 Colors.transparent를 사용하고 있어 색상 관리 규칙을 위반합니다; Material의 color 속성에 직접 Colors.transparent 대신 프로젝트의 중앙 색상 정의인 AppColors의 투명 색상 멤버(예: AppColors.transparent)로 교체하고 필요한 AppColors import가 없으면 추가하세요; 참조 멤버 이름이 다르다면 AppColors에 투명 색상 멤버를 추가하거나 기존 멤버명에 맞춰 사용하고, 변경 후 위젯(예: the Material instance inside ChatInputBar) 동작이 동일한지 간단히 확인하세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@lib/screens/chat_room_screen.dart`:
- Around line 134-138: 현재 _updateInputFieldHeight에서 줄 수를 '\n'만으로 계산해 자동 줄바꿈된 시각적
라인 수를 반영하지 않습니다; _messageController.text 대신 TextPainter(또는 RenderParagraph)를 사용해
실제 렌더링된 텍스트의 line metrics를 계산하거나 TextField의 minLines/maxLines/expands 동작에 맡겨 높이를
결정하도록 변경하세요. 구체적으로는 _updateInputFieldHeight에서 TextStyle과 MediaQuery 또는 컨테이너의 가용
너비를 사용해 TextPainter를 생성하고 layout 후 computeLineMetrics()로 라인 수를 구해 clampedLines를
계산해 _inputFieldHeight를 설정하거나, 더 간단하게는 TextField의 minLines/maxLines 속성과
onChanged에서 setState로 높이 제어를 제거해 자연 높이에 맡기세요. Ensure you reference
_messageController, _updateInputFieldHeight and _inputFieldHeight when making
the change.
---
Outside diff comments:
In `@lib/widgets/chat_input_bar.dart`:
- Around line 81-146: Replace direct Flutter color usage and fix iPad scaling
and focus loss: change Colors.transparent to AppColors.transparent in the
Material widget (around the InkWell/Material containing the send button), change
the TextField's InputDecoration contentPadding vertical from using 8.h to a
fixed pixel value like 8.0 to avoid iPad overflow when clampedHeight already
uses .h, and restore focus after sending by wiring a FocusNode or wrapping both
TextField and the send button in a TextFieldTapRegion so that the onSend
callback (e.g., the onSend passed into this widget and the chat screen's
_sendMessage in lib/screens/chat_room_screen.dart) calls requestFocus(focusNode)
after clearing the controller; ensure sendDisabled gating remains unchanged and
test on-device to confirm keyboard stays up after tapping the separated button.
---
Nitpick comments:
In `@lib/widgets/chat_input_bar.dart`:
- Around line 84-107: The TextField's fixed height (clampedHeight) is combined
with vertical EdgeInsets using scaled units (8.h), causing the input area to
shrink on large screens; update the widget so you do NOT use a scaled vertical
padding with a scaled height: either remove the explicit height (clampedHeight)
and rely on minLines/maxLines in the TextField, or change contentPadding's
vertical value to a fixed pixel value (e.g., 8.0) instead of 8.h; locate the
TextField block (controller, enabled, minLines/maxLines, cursor..., decoration)
and adjust the height vs contentPadding accordingly to avoid combining N.h for
both clampedHeight and vertical padding.
- Around line 119-120: chat_input_bar.dart에서 Material 위젯에 직접 Colors.transparent를
사용하고 있어 색상 관리 규칙을 위반합니다; Material의 color 속성에 직접 Colors.transparent 대신 프로젝트의 중앙
색상 정의인 AppColors의 투명 색상 멤버(예: AppColors.transparent)로 교체하고 필요한 AppColors import가
없으면 추가하세요; 참조 멤버 이름이 다르다면 AppColors에 투명 색상 멤버를 추가하거나 기존 멤버명에 맞춰 사용하고, 변경 후 위젯(예:
the Material instance inside ChatInputBar) 동작이 동일한지 간단히 확인하세요.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: f3b68cce-b95a-4f97-849c-fbabda135427
📒 Files selected for processing (2)
lib/screens/chat_room_screen.dartlib/widgets/chat_input_bar.dart
| void _updateInputFieldHeight() { | ||
| final lineCount = '\n'.allMatches(_messageController.text).length + 1; | ||
| double newHeight = 40.h + ((lineCount - 1) * 14.h); | ||
| final clampedLines = lineCount.clamp(1, 5); | ||
| double newHeight = 40.h + ((clampedLines - 1) * 7.5.h); | ||
| newHeight = newHeight.clamp(40.h, 70.h); |
There was a problem hiding this comment.
자동 줄바꿈된 줄 수는 아직 높이 계산에 반영되지 않습니다.
지금은 \n 개수만 세기 때문에, 사용자가 긴 한 줄을 입력해 TextField가 시각적으로 여러 줄로 감겨도 _inputFieldHeight는 1줄 높이로 유지됩니다. 이번 PR의 핵심 시나리오가 자동 줄바꿈이라면, 렌더링된 line metrics 기준으로 계산하거나 TextField의 자연 높이(minLines/maxLines)에 맡기는 쪽이 안전합니다.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@lib/screens/chat_room_screen.dart` around lines 134 - 138, 현재
_updateInputFieldHeight에서 줄 수를 '\n'만으로 계산해 자동 줄바꿈된 시각적 라인 수를 반영하지 않습니다;
_messageController.text 대신 TextPainter(또는 RenderParagraph)를 사용해 실제 렌더링된 텍스트의
line metrics를 계산하거나 TextField의 minLines/maxLines/expands 동작에 맡겨 높이를 결정하도록 변경하세요.
구체적으로는 _updateInputFieldHeight에서 TextStyle과 MediaQuery 또는 컨테이너의 가용 너비를 사용해
TextPainter를 생성하고 layout 후 computeLineMetrics()로 라인 수를 구해 clampedLines를 계산해
_inputFieldHeight를 설정하거나, 더 간단하게는 TextField의 minLines/maxLines 속성과 onChanged에서
setState로 높이 제어를 제거해 자연 높이에 맡기세요. Ensure you reference _messageController,
_updateInputFieldHeight and _inputFieldHeight when making the change.
SeoHyun1024
left a comment
SeoHyun1024
left a comment
There was a problem hiding this comment.
토끼 리뷰만 체크부탁드립니다 줄바꿈하지 않으면 textField 높이가 그대로네요
@Cassiiopeia
2 participants
Summary by CodeRabbit
Bug Fixes