1. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 요구 사항

실시간 채팅 앱 개발 요구 사항

✅ 1. 사용자 인증 및 프로필

• Firebase Authentication을 사용한 로그인/회원가입
  • 이메일/비밀번호 또는 소셜 로그인(Google 등)
• 로그인 시 사용자 프로필을 Firestore에 저장
  • 필드: uid, email, name, aboutMe, status, createdAt, uids[]
• 사용자 상태 표시
  • 온라인/오프라인 실시간 표시
  • 마지막 접속 시간(last seen)

✅ 2. 채팅 기능 (1:1)

• 1:1 채팅방 생성 (두 사용자 간)
• 실시간 메시지 전송/수신
• 메시지 필드: text, senderId, createdAt, readBy, readAt, type (text/audio)
• 마지막 메시지 미리보기 표시
• 메시지 읽음 확인 기능 (readBy, readAt)
  • 상대방이 읽은 시간 표시 (5분 전, 24시간 초과 시 날짜 표시)
• 메시지 수신 시 안 읽은 메시지 뱃지 표시
  • unreadCountByUser.{uid} 사용

✅ 3. 음성 메시지 기능

• MediaRecorder API를 사용한 음성 녹음
• 60초 이상 녹음 방지 (타이머로 자동 중단)
• 녹음 중 애니메이션 (텍스트/마이크 아이콘)
• Firebase Storage에 음성 파일 업로드
• 업로드 후 음성 메시지 전송

✅ 4. 채팅방 리스트

• 참여 중인 채팅방 목록 표시
  • 상대방 이름 및 프로필 표시
  • 마지막 메시지 요약 및 시간 표시
  • 안 읽은 메시지 수 뱃지 표시
• 실시간 업데이트 (Firestore snapshot 사용)
• 채팅방 목록 정렬: 최신 메시지 기준

✅ 5. UI/UX (Vuetify 기반)

• v-navigation-drawer, v-list, v-badge, v-icon, v-text-field, v-btn 등 활용
• 메뉴 선택 시 drawer 자동 닫힘
• 메시지 입력창/녹음 버튼 통합
• 반응형 UI

✅ 6. 상태 관리 및 구조

• Pinia로 전역 상태 관리 (authStore, chatStore, etc.)
• composables/로 기능별 로직 분리 (e.g. useChatRooms, useChatMessages)
• Firestore snapshot listener는 로그아웃 시 자동 해제

✅ 7. 기타 기능

• Firebase Hosting 배포
• WebRTC 기반 음성/영상 통화 기능 준비 중 (기초 구현 완료)
• 대용량 chunk 경고 대응을 위한 Lazy Load, 코드 스플리팅 적용 예정