Feat: 알림 페이지 sse 실시간 연동

[jjaeho0415]

#️⃣연관된 이슈

close #162

📝작업 내용(이번 PR에서 작업한 내용을 간략히 설명)

1. protectedRoute.ts에 sse 연동 로직 작성 및 useOutletContext를 활용한 알림 페이지로 데이터 넘겨주는 로직 작성
2. 채팅목록, 그룹 목록 페이지의 헤더에 sse로 받아온 알림 목록 데이터들 중 read:false인 데이터가 하나라도 있으면 알림아이콘에 빨간점이 보여지도록 로직 작성
3. 알림 읽음 Api 호출 성공했을시 쿼리 무효화 함으로써 화면이 실시간으로 바뀌도록 로직 작성
4. 받아온 알림 목록 데이터가 undefined일 시 isExistUnReadNotification이 false(초기상태)가 되도록 설정
5. sse 수신 데이터 json으로 파싱하기 전 정제하는 로직 추가 및 파싱된 데이터 eventType에 맞게 쿼리 무효화 로직 작성

📝수정 내용(선택)

스크린샷 (선택)

💬리뷰 요구사항(선택)

일괄 읽음처리 기능은 확정되면 추가하겠습니다.
아래는 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 수신 데이터는 data 부분만 정제하여 파싱한 후 eventType에 따라 알맞는 쿼리키를 사용하여 쿼리 무효화를 해줌으로써 interactive하게 함