그랜파 개발자의 프론트엔드 공부

마지막 메시지 시간 표시 및 정렬채팅방 목록에서 마지막 메시지 시간 표시 및 정렬 기능을 추가하면,채팅방 목록이 최신 메시지가 있는 순서대로 정렬되고, 마지막 메시지 시간이 보입니다.1. Firestore에 마지막 메시지 시간 저장메시지를 보낼 때 lastMessageAt 필드를 업데이트해야 해.🔹 메시지 전송 함수 수정import { updateDoc, doc, serverTimestamp } from "firebase/firestore";const sendMessage = async (chatId, sender, message) => { const messageRef = doc(db, "chats", chatId); // 메시지 추가 & lastMessageAt 업데이트 await update..

🔥 채팅방 목록에서 마지막 메시지 미리보기 추가하기각 채팅방의 마지막 메시지를 실시간으로 가져와서,채팅방 목록에서 마지막 메시지를 미리보기로 표시하고,새 메시지가 오면 자동으로 UI 업데이트 합니다.1. Store에서 마지막 메시지 가져오기📌 store/chatStore.js 수정import { defineStore } from "pinia";import { getDatabase, ref, onValue } from "firebase/database";import { auth } from "@/firebase";export const useChatStore = defineStore("chat", { state: () => ({ chatRooms: [], // 채팅방 목록 unreadCou..

🔥 안 읽은 메시지가 있는 채팅방을 상단으로 정렬하기안 읽은 메시지가 많은 채팅방을 상단으로 정렬하면채팅방이 아래에 있는 경우 메시지가 있는지 여부를 확인하지 못하여오랫동안 메시지를 읽지 않고 방치하는 것을 방지할 수 있습니다.1. Store에서 채팅방 정렬 로직 추가📌 store/chatStore.js 수정import { defineStore } from "pinia";import { getDatabase, ref, onValue } from "firebase/database";import { auth } from "@/firebase";export const useChatStore = defineStore("chat", { state: () => ({ chatRooms: [], // 채팅방..

🔥 안 읽은 메시지 개수 배지 추가하기채팅방별 안 읽은 메시지 개수 Firebase에서 실시간으로 가져와서안 읽은 메시지가 있는 채팅방에 배지(🔴) 표시하고새 메시지가 오면 UI 자동 업데이트하여채팅방 목록에서 각 채팅방의 안 읽은 메시지 개수 표시할 수 있습니다. 1. 안 읽은 메시지 개수 계산채팅방 목록에서 각 채팅방의 안 읽은 메시지 개수 표시Firebase에서 실시간으로 가져와 UI 업데이트2. Store에서 안 읽은 메시지 개수 관리📌 store/chatStore.js 수정import { defineStore } from "pinia";import { getDatabase, ref, onValue } from "firebase/database";import { auth } from "@/f..

메시지를 언제 읽었는지 표시하기 (예: "5분 전에 읽음")상대가 메시지를 읽었으면 읽은 시간을 기록하고,이것을 메시지를 보낸 사람에게 보여주면 좋겠습니다.읽은 메시지는 "5분 전에 읽음" 같은 상대적 시간으로 표시하고UI에서 메시지가 실시간으로 업데이트 하도록 기능을 구현합니다.1. Firebase에 메시지 읽은 시간 저장상대방이 채팅방을 열면 메시지를 "읽음" 상태로 변경 + 읽은 시간 저장status: "read"와 함께 "readAt" (읽은 시간) 필드 추가📌 Firebase 메시지 구조 예시"messages": { "chatRoomId": { "messageId1": { "text": "안녕!", "sender": "user1", "receiver": "us..

🔥 실시간 메시지 읽음 확인 기능 추가상대방이 채팅방을 열면 읽지 않은 메시지가 자동으로 "읽음" 처리하고,읽음 메시지 UI를 실시간으로 업데이트함으로써사용자는 메시지 읽음 상태를 확인할 수 있습니다. 1. 메시지 읽음 기능 개요상대방이 채팅방을 열면 메시지를 "읽음" 상태로 변경Firebase에서 메시지 상태를 "unread" → "read" 로 업데이트사용자가 메시지를 읽었는지 실시간 감지하여 UI 업데이트2. Firebase에 메시지 읽음 상태 저장Firebase의 채팅 메시지 구조 예시:"messages": { "chatRoomId": { "messageId1": { "text": "안녕!", "sender": "user1", "receiver": "user2"..

🔥 마지막 접속 시간 상대적으로 표시하기 (예: "5분 전 접속")Firebase 서버 타임스탬프를 상대적 시간("5분 전")으로 변환하여 화면에 나타낼 수 있습니다.date-fns를 활용하여 자동 업데이트 가능하고,1:1 채팅에서 마지막 접속 시간이 상대적으로 표시함으로써 직관적입니다.1. 상대적 시간 포맷팅 (예: "방금 전", "5분 전")date-fns 라이브러리를 사용하여 상대적인 시간을 계산Firebase 서버 시간을 기준으로 "몇 분 전", "몇 시간 전" 등의 형식으로 변환2. date-fns 라이브러리 설치npm install date-fns3. Store에서 마지막 접속 시간을 상대적으로 변환📌 store/userStore.js 수정import { defineStore } from ..

🔥 마지막 접속 시간 표시 기능 추가실시간으로 상대방 온라인/오프라인 상태 확인 가능 합니다.상대방이 오프라인일 경우 UI가 자동 업데이트되면서 마지막 접속 시간 표시할 수 있습니다.1. Firebase에 마지막 접속 시간 저장사용자가 오프라인으로 변경될 때 현재 시간을 기록Firebase Realtime Database에 "lastSeen" 필드 추가2. Store에서 마지막 접속 시간 관리📌 store/userStore.js 수정import { defineStore } from "pinia";import { getDatabase, ref, set, onValue, serverTimestamp } from "firebase/database";import { auth } from "@/firebase..

🔥 1:1 채팅에서 상대방의 온라인 상태 표시 UI 추가 1:1 채팅에서 상대방의 온라인 상태를 실시간으로 감지하고,UI에서 실시간으로 상태 업데이트를 반영하여상대방이 온라인 또는 오프라인 상태를 표시할 수 있습니다.1. 상대방 온라인 상태 가져오기1:1 채팅에서는 현재 채팅 중인 상대방의 온라인 상태만 표시하면 돼.현재 채팅방의 상대방 uid를 가져와서 Realtime Database에서 온라인 상태를 확인하자.2. 상대방 상태 가져오는 Store 함수 추가📌 store/userStore.js 수정import { defineStore } from "pinia";import { getDatabase, ref, onValue } from "firebase/database";export const use..

채팅앱 VSignal - 온라인 상태 표시 기능Firebase Authentication으로 로그인한 사용자의 온라인/오프라인 상태를 실시간으로 감지할 수 있습니다.채팅 목록에서 실시간으로 로그인하면 "online",앱이 닫히거나 유저가 오프라인 되면 "offline"으로 상태를 보여줄 수 있습니다.🔥 온라인 상태 표시 기능 추가온라인 상태를 관리하려면 Firebase Realtime Database를 사용하면 좋아!Firebase Authentication으로 로그인한 사용자의 온라인/오프라인 상태를 실시간으로 감지할 수 있어.1. Firebase Realtime Database 활성화Firebase 콘솔 → Realtime Database → 데이터베이스 생성규칙 설정 (rules → "true"로..