진행중인 프로젝트에서 알림을 구현했다. 포스트에 댓글을 등록하거나 좋아요, 북마크를 하면 해당 포스트를 작성한 유저에게 알림을 보내는 기능이다.

prisma schema

• id
  • 특정 알림의 고유 id
• body
  • 알림 내용
• createdAt
  • 생성 시간
• receiver
  • 알림을 받는 사람
• sender
  • 알림을 보내는 사람
• postId
  • 댓글 or 좋아요 or 북마크 한 포스트의 id
• isRead
  • 알림을 읽었는지 안읽었는지

/api/notifications/[userId].ts

query로 userId를 받아서 해당 유저의 알림을 불러온다. 페이지네이션을 적용해서 알림을 20개씩 받아오게 된다.

사용자가 알림 버튼을 누르면 알림을 읽었다고 판단하고 유저의 hasNotification 필드를 false로 바꿔준다.
hasNotification이 true이면 알림 아이콘 옆에 빨간점을 띄워서 알림이 있음을 사용자에게 알려줄 수 있다.

알림을 클릭하면 해당 포스트로 넘어가야한다. 포스트로 넘어가면 isRead를 true로 바꾸고 읽은 표시를 해주면 된다. 예를 들어 알림을 읽으면 해당 알림의 폰트를 흐리게 만들면 된다.

마지막으로 알림을 삭제하면 해당 알림을 데이터베이스에서 지워주면 된다.

실제로 사용하기

좋아요, 북마크, 댓글의 api 파일에서 실제로 알림을 보내는 코드이다. 알림을 보내면 user의 hasNotification 필드를 true로 만들어 알림 아이콘 옆에 빨간 점을 띄워서 알림이 있음을 사용자에게 알려주도록 사용할 수 있다.