🚀[기능개선][채팅] 채팅 입력창 멀티라인 입력 시 UI 개선

[Cassiiopeia]

📝 현재 문제점

• 채팅 입력창에서 Enter로 줄바꿈하여 여러 줄 입력 시, 입력창의 모서리 라운드 값(100.r)이 과도하게 높아 UI가 비정상적으로 보임
• 텍스트 시작 위치가 과도하게 안쪽으로 밀려들어가고, 전체적으로 입력창이 부자연스럽게 둥글어짐
• 전송 버튼(↑)과 추가 버튼(+)이 입력창 높이의 중간에 위치하여, 줄이 늘어났을 때 다른 채팅 앱(인스타그램 DM 등)과 비교했을 때 부자연스러움

🛠️ 해결 방안 / 제안 기능

• 버튼 하단 고정: 전송 버튼(↑)과 추가 버튼(+)을 입력창 높이가 늘어나도 항상 하단에 고정 (인스타그램 DM 방식 참고)
• 라운드 값 동적 전환: 1줄일 때는 캡슐형(pill) 유지, 여러 줄로 늘어날 때 라운드 값을 자연스럽게 줄임 (약 20.r 수준의 둥근 사각형)
• 자연스러운 전환: 사용자가 변화를 인지하기 어려울 정도로 부드럽게 라운드 값이 전환되어야 함

📸 참고 자료

• 인스타그램 DM 채팅 입력창 참고: 줄이 늘어나도 적절한 라운드 값 유지, 버튼은 항상 하단 고정

⚙️ 작업 내용

• 채팅 입력 바(ChatInputBar) 위젯의 버튼 정렬을 중앙(center) → 하단(end)으로 변경
• 입력창 BorderRadius를 고정 100.r에서 줄 수에 따라 동적으로 변경되도록 수정
• 라운드 값 전환이 자연스럽도록 처리

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: @Cassiiopeia
• 디자인: 이름

[Cassiiopeia]

Guide by SUH-LAB

브랜치

20260327_#716_채팅_입력창_멀티라인_입력_시_UI_개선

커밋 메시지

채팅 입력창 멀티라인 입력 시 UI 개선 : feat : {변경 사항에 대한 설명} https://github.com/TEAM-ROMROM/RomRom-FE/issues/716

[Cassiiopeia]

@suh-lab app build

[github-actions]

🤖 ✅ Android APK 빌드 완료!

단계	상태	소요 시간
🔧 준비	✅ 완료	-
🔨 APK 빌드	✅ 완료	-
📤 업로드	✅ 완료	6분 30초

📦 빌드 결과

항목	값
앱 버전	0.0.0(71601)
브랜치	20260327_#716_채팅_입력창_멀티라인_입력_시_UI_개선
커밋	9e365dc
총 소요 시간	6분 30초

📦 아티팩트 다운로드
🔗 워크플로우 실행 로그

[github-actions]

🍎 ✅ iOS TestFlight 빌드 완료!

단계	상태	소요 시간
🔧 준비	✅ 완료	3분 59초
🔨 IPA 빌드	✅ 완료	14분 48초
📤 TestFlight 배포	✅ 완료	22분 19초

📦 빌드 결과

항목	값
앱 버전	0.0.0(71601)
브랜치	20260327_#716_채팅_입력창_멀티라인_입력_시_UI_개선
커밋	9e365dc
총 소요 시간	22분 19초

📱 TestFlight에서 테스트 앱을 다운로드할 수 있습니다.
🔗 워크플로우 실행 로그