실시간 알림 연동(SSE 사용)

[jjaeho0415]

SSE 연동 및 데이터 처리 시나리오

1. 로그인 성공시 sse 연동을 해야하기 때문에 로그인 상태일때만 접속할 수 있는 페이지들을 감싸고 있는 ProtectedRoute.ts에 sse 구독 및 1시간마다 재연결하는 로직 작성
2. 알림 목록을 받아오는(”/notification/list”) api는 react query로 작성한 후 protectedRoute.ts에서 호출(로그인하자마자 sse구독과 함께 바로 호출함)
3. 받아온 알림 목록 데이터는 <Outlet context={{notifications, isLoading, error}}/>로 작성하여 하위 컴포넌트에 넘겨줌
4. 알림 페이지내에서 const {notifications} = useOutletContext<{notifications: type}>()을 사용함으로써 protectedRoute.ts에서 넘겨준 알림 목록을 받아온 후 가공하여 화면에 표시
5. 그룹 목록, 채팅목록 페이지의 헤더에서 알림 목록 중 read:false인 항목이 있으면 빨간점을 표시해줌
6. sse 수신 데이터의 eventType에 따라 알맞는 쿼리키를 사용하여 쿼리 무효화를 해줌으로써 실시간으로 상호작용되도록 함