Build a Full Stack Chat App using Socket.io & Expo Router #9 - Conversation List UI
- 홈 화면에서 대화 목록 UI를 구현하고, 스크롤 뷰를 사용하여 목록을 표시하고 스크롤 표시기를 숨깁니다. 📱
- 상단에는 그룹 채팅과 다이렉트 채팅을 전환하는 탭 네비게이션 바를 추가합니다. ↔️
- 상태를 사용하여 선택된 탭을 관리하고, 선택된 탭에 따라 다른 스타일을 적용하여 시각적으로 강조합니다. 🎨
- 더미 데이터를 사용하여 대화 목록을 구성하고, 각 대화 항목에 대한 이름, 유형, 마지막 메시지 등의 정보를 표시합니다. 📝
- 대화 유형에 따라 다이렉트 메시지와 그룹 메시지를 필터링하고, 마지막 메시지의 날짜를 기준으로 정렬합니다. 🗂️
- 로딩 상태를 표시하고, 대화 목록이 없을 경우 메시지를 표시하여 사용자에게 안내합니다. ⏳
- 새로운 대화 시작을 위한 플로팅 버튼을 추가하고, 버튼 클릭 시 새로운 대화 모델 페이지로 이동합니다. ➕
- 대화 아이템 UI를 구현하고, 아바타, 이름, 마지막 메시지 등의 정보를 표시합니다. 👤
- Moment.js 라이브러리를 사용하여 마지막 메시지 날짜를 포맷하고, 가독성 좋게 표시합니다. 📅
- 마지막 메시지 내용이 없을 경우 기본 메시지를 표시하고, 첨부 파일이 있을 경우 이미지 아이콘을 표시합니다. 🖼️