Build a Full Stack Chat App using Socket.io & Expo Router #12 - Conversation UI
- 대화 UI 구현을 위해 useRoute 훅에서 대화 ID, 이름, 참여자, 아바타, 유형 데이터를 가져옴 🧑💻
- JSON 문자열로 저장된 참여자 데이터를 파싱하여 배열 형태로 변환 ⚙️
- 직접 대화와 그룹 대화에 따라 다른 아바타와 이름을 설정 🖼️
- 키보드 가림 문제를 해결하기 위해 KeyboardAvoidingView 컴포넌트 사용 ⌨️
- 헤더 컴포넌트를 사용하여 뒤로 가기 버튼, 아바타, 대화 이름 표시 🔙
- FlatList 컴포넌트를 사용하여 메시지 목록을 역순으로 렌더링 📃
- 메시지 아이템 컴포넌트를 생성하여 메시지 UI 구현 💬
- 내 메시지와 상대방 메시지를 구분하여 스타일 적용 🎨
- 그룹 대화에서만 사용자 아바타와 이름 표시 👥
- 메시지 입력 컴포넌트를 추가하여 메시지 전송 기능 구현 📤
- 이미지 선택 기능을 구현하여 이미지 메시지 전송 가능 🏞️