🛠 문제 상황

기본적으로 **SSE(EventSource)**를 사용하여 실시간 알림을 구현했지만,

사용자가 접속하지 않은 상태에서 발생한 알림을 받을 수 없는 문제가 발생함.

1. 초기 구현 방식 및 문제 발생 원인
   • 사용자가 접속 중일 때만 SSE를 통해 실시간 알림을 받음.
   • SSE는 구독 중인 클라이언트에게만 데이터를 push하는 방식이므로,오프라인 상태에서는 서버에서 보내는 이벤트를 받을 수 없음.
   • 따라서 사용자가 접속하지 않았을 때 발생한 알림이 클라이언트에 전달되지 않음.

🔍 해결 방법

백엔드에 API 추가하여, 접속하지 않은 동안 발생한 알림을 조회할 수 있도록 구현

1. 알림을 DB에 저장
   • 사용자가 접속 중이 아닐 때 발생한 알림을 데이터베이스에 저장.
   • isRead 필드를 추가하여 읽지 않은 알림을 구분.
   • 클라이언트에서 API 요청시 해당 유저의 읽지 않은 알림들을 조회하여 전달
   • 읽음 처리 후 DB에서 알림을 삭제하여 데이터베이스 최적화
2. 클라이언트에서 API 호출하여 missed notifications 조회
   • 클라이언트가 로그인을 했을 때 API를 호출하여 읽지 않은 알림을 가져옴.
   • 이후 SSE를 통해 실시간 알림을 수신하는 방식 유지.

✅ 적용 코드

📌 1. useFetchMissedNotifications 구현 (백엔드 API 연동)

📌 2. SideMenu.tsx에서 API 데이터 가져와서 상태 업데이트

const { data: missedNotifications } = useFetchMissedNotifications();

useEffect(() => {
  if (missedNotifications?.notifications) {
    const formattedNotifications: NotificationProp[] =
      missedNotifications.notifications.map((notification) => ({
        notificationId: notification.notificationId,
        type: notification.type,
        message: notification.message,
        senderNickname: notification.sender.nickname,
        senderProfileUl: notification.sender.profileUrl,
        timestamp: notification.createdAt,
        isRead: notification.isRead,
      }));

    setMessages(formattedNotifications); 
  }
}, [missedNotifications]

📌 3. SSE를 통한 실시간 알림 수신 (기존 코드 유지)

useEffect(() => {
  if (!token || messages.length === 0) return;
  const eventSource = new EventSourcePolyfill(
    `${import.meta.env.VITE_BASE_SERVER_URL}/notifications/stream`,
    {
      headers: { Authorization: `Bearer ${token}` },
      withCredentials: true,
    }
  );
  eventSource.addEventListener('message', (event) => {
    const data: NotificationProp = JSON.parse(event.data);
    setMessages((prevMessages) => [...prevMessages, data]); 
    setNewNotification(true);
  });
  eventSource.addEventListener('error', () => {
    eventSource.close();
  });
  return () => {
    eventSource.close();
  };
}, [token]);

📌 4**. 백엔드: 읽지 않은 알림 조회 서비스 로직**

async getUnreadNotifications(userId: number) {
    // 1. 읽지 않은 알림 조회
    const unreadNotifications = await this.prisma.notification.findMany({
      where: {
        userId: userId,
        isRead: false,
      },
      include: {
        sender: {
          select: {
            nickname: true,
            profile_url: true,
          },
        },
      },
      orderBy: {
        createdAt: 'desc',
      },
    });
    // 2. 데이터를 변환하여 반환
    const transformedNotifications = unreadNotifications.map(notification => {
      const transformedNotification = {
        notificationId: notification.id, // 
        userId: notification.userId,
        senderId: notification.senderId,
        type: notification.type,
        message: notification.message,
        isRead: notification.isRead,
        createdAt: notification.createdAt,
        sender: {
          nickname: notification.sender.nickname,
          profileUrl: notification.sender.profile_url, // `profile_url` -> `profileUrl`
        },
      };
      return transformedNotification;
    });
    return {
      notifications: transformedNotifications,
    };
  }

🎯 결과