[FE] 채팅 페이지 UI/UX 개선

[jiva-z]

개요

PredictPage의 디자인 패턴을 따라 채팅 페이지의 UI/UX를 현대적이고 사용자 친화적으로 개선합니다.

작업 목록

• 일관된 디자인을 위한 styled-components 추가
• 로딩 상태 및 애니메이션 구현
• 반응형 레이아웃 구현
• 적절한 스타일링의 메시지 버블 구현
• 적절한 스타일링의 입력 필드 구현
• 메시지 히스토리 뷰 구현
• 적절한 여백과 간격 추가
• 모바일 반응형 구현

디자인 요구사항

• PredictPage와 유사한 색상 스키마 사용
• 메시지 전환을 위한 부드러운 애니메이션 구현
• 적절한 로딩 인디케이터 추가
• 일관된 여백과 타이포그래피 유지
• 직관적이고 사용하기 쉬운 채팅 인터페이스 구현

기술적 요구사항

• styled-components를 사용한 스타일링
• 적절한 상태 관리 구현
• 에러 처리 구현
• 반응형 디자인 보장
• 적절한 로딩 상태 구현

완료 조건

• 채팅 인터페이스가 PredictPage의 디자인과 일치
• 모든 애니메이션이 부드럽고 성능이 좋음
• 페이지가 완전히 반응형으로 구현됨
• 로딩 상태가 적절히 구현됨
• 에러 처리가 구현됨
• 사용자 경험이 직관적이고 부드러움