Feat: 알림 SSE 연결 & Notification API 적용 - Githubissues

ValueWith / ValueWith_FE

Trip With Buddy, Tweaver - 당일치기 여행 스케줄링 + 일행 모집 플랫폼

https://tweaver.site

1 stars 2 forks source link

Feat: 알림 SSE 연결 & Notification API 적용 #58

Closed YujinJI closed 9 months ago

YujinJI commented 9 months ago

PR 타입

[x] 기능 추가
[ ] 기능 변경
[ ] 기능 삭제
[ ] 버그 수정
[ ] 디자인 수정
[ ] 의존성, 환경 변수, 빌드 관련 코드 업데이트

변경 사항

알림 SSE 연결
알림 실시간 수신(eventSource.onmessage) 시 Notification API를 통해 웹 푸시 알림 발생
알림 카운트
- 읽지 않은 알림의 수를 세어서 숫자로 나타내려고 했지만 디자인상의 이슈로 빨간 동그라미만 표시함
  알림 모달
  
  알림 읽기
알림 클릭 시 즉각적으로 텍스트 스타일을 바꾸고 redirectUrl 실행
모두읽기 클릭 시 즉각적으로 텍스트 스타일을 바꿈
알림 삭제
알림 삭제버튼 클릭 시 display: none을 통해 즉각적으로 사라지게 만듬
무한스크롤
react-intersection-observer 라이브러리 사용
스크롤 시 이전 데이터와 새로 불러오는 데이터를 합쳐서 함께 보여줌