3. Vue 3 + Firebase 기반 실시간 채팅 앱 v-chat 개발 - 설계서, WBS

📘 프로그램 설계서: Firebase + Vue 3 기반 1:1 실시간 채팅 앱

📌 사용 기술 스택

• Frontend: Vue 3, Vuetify, Pinia
• Backend: Firebase Firestore, Firebase Authentication, Firebase Storage
• 기타: Composition API, Composables 구조

🔧 주요 기능 요약

1. 🔐 사용자 인증 및 프로필 관리

• Firebase Authentication을 통한 로그인/회원가입
• Firestore profiles 컬렉션에 사용자 정보 저장
• 필드: uid, name, status, aboutMe, lastSeen, uids[]

2. 💬 1:1 실시간 채팅

• chatRooms 컬렉션: userIds, lastMessage, unreadCountByUser 포함
• 각 채팅방은 chatRooms/{roomId}/messages 서브컬렉션으로 메시지 저장
• 메시지 전송 시:
  • readBy: [senderId], createdAt, readAt: null
  • lastMessage 필드 업데이트
  • unreadCountByUser 수신자별 증가

3. ✅ 메시지 읽음 처리

• 상대방이 채팅방 열람 시 메시지에 readBy와 readAt 갱신
• readBy 배열을 이용한 읽음 여부 표시
• 마지막 읽은 메시지 아래에 “읽음” 표시 지원

4. 🕒 상태 및 시간 표시

• status: online/offline 상태 표시
• lastSeen: 마지막 접속 시간 표시
• timeAgo() 함수: 상대적 시간 (예: “5분 전”, “2일 전”) 계산

5. 📥 채팅방 리스트

• 나와 관련된 chatRooms 실시간 구독 (array-contains)
• 상대방 이름 표시 (profiles에서 조회)
• 안 읽은 메시지 개수 배지로 표시 (unreadCount)
• 마지막 메시지 미리보기, 시간 표시

6. 🎤 음성 메시지 기능

• 음성 녹음 후 Firebase Storage에 업로드
• 메시지에 audioUrl, duration, type: 'audio' 필드 포함
• Vuetify UI에서 재생 UI 구성 예정

7. 📁 구조화된 Composables

• useAuth, useChatRooms, useMessages, useOnlineStatus 등 기능별로 분리
• 컴포넌트에서 store와 composables 함께 사용

🧠 향후 개선 포인트

• 메시지 검색 기능
• 이미지를 포함한 메시지 전송
• 다중 사용자 그룹 채팅
• 알림 기능 (브라우저 푸시)

✅ WBS (Work Breakdown Structure)

단계작업 항목세부 내용

1	프로젝트 설정	Vite + Vue 3 + Vuetify + Firebase 프로젝트 생성
2	Firebase 설정	Auth, Firestore, Storage 설정 및 보안 규칙 적용
3	사용자 인증 기능	로그인, 회원가입, 프로필 생성, 로그아웃
4	사용자 상태 관리	온라인/오프라인 상태, 마지막 접속 시간 표시
5	채팅방 구현	chatRoom 생성, 상대방 구분, 채팅방 목록 표시
6	실시간 메시지 송수신	Firestore snapshot으로 실시간 처리
7	메시지 읽음 기능	readBy, readAt 처리, 읽음 시간 표시
8	메시지 미리보기	채팅방 목록에 마지막 메시지 표시
9	안 읽은 메시지 수	unreadCountByUser, 뱃지 표시
10	음성 메시지 녹음	MediaRecorder 사용, Firebase Storage 업로드
11	오류 처리	예외 처리 로직 구현
12	UI 개선	Vuetify 컴포넌트 최적화, Drawer 등 UX 개선
13	배포	Firebase Hosting 배포 및 성능 최적화