✨Feat: UnreadCircle

Author: shlee9999

src/pages/HomePage/index.tsx

@@ -1,9 +1,10 @@
 import { QueryErrorResetBoundary } from '@tanstack/react-query'
-import { Suspense, useEffect } from 'react'
+import { Suspense, useEffect, useMemo } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import { Helmet } from 'react-helmet-async'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useHomePageData } from '~apis/main/useHomePageData'
+import useInfiniteNotificationList from '~apis/notification/useInfiniteNotificationList'
 import DogHand from '~assets/dog_hand.svg?react'
 import BellIcon from '~assets/icons/bell_icon.svg?react'
 import ClockIcon from '~assets/icons/clock_icon.svg?react'
@@ -21,16 +22,27 @@ import { useModalStore } from '~stores/modalStore'
 import * as S from './styles'
 
 function HomeContent() {
+  const {
+    data: { pages: notificationListPages },
+  } = useInfiniteNotificationList()
   const { data } = useHomePageData()
   const { pushModal } = useModalStore()
+  const unreadNotificationCount = useMemo(() => {
+    return notificationListPages.reduce((count, page) => {
+      return count + page.data.content.filter(noti => !noti.isRead).length
+    }, 0)
+  }, [notificationListPages])
 
   useSubscribe()
 
   return (
     <>
       <S.Header>
         <Profile $size={32} $src={data?.memberProfileImgUrl || ''} />
-        <BellIcon cursor='pointer' onClick={() => pushModal(<NotificationModal />)} />
+        <S.BellIconWrapper>
+          <BellIcon cursor='pointer' onClick={() => pushModal(<NotificationModal />)} />
+          {unreadNotificationCount ? <S.UnreadCircle /> : null}
+        </S.BellIconWrapper>
       </S.Header>
       <S.Visual>
         <Typo24 $weight='700' $textAlign='center'>

src/pages/HomePage/styles.ts

@@ -49,3 +49,14 @@ export const WalkDistance = styled.div`
   align-items: center;
   justify-content: space-between;
 `
+export const BellIconWrapper = styled.div`
+  position: relative;
+`
+export const UnreadCircle = styled.span`
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  background-color: ${({ theme }) => theme.colors.brand.sub};
+  top: 0;
+  right: 0;
+`