diff --git a/app/routes/_main.tsx b/app/routes/_main.tsx index 453c58b2..87aae9fe 100644 --- a/app/routes/_main.tsx +++ b/app/routes/_main.tsx @@ -6,16 +6,29 @@ import Logo from "../assets/logo/realmatch-logo-line.png"; import bellIcon from "../assets/icon/icon-bell.svg"; import redDot from "../assets/icon/red-dot.svg"; import { tokenStorage } from "../lib/token"; +import { fetchUnreadCount } from "../routes/notification/api/notification"; export default function MainLayout() { const [hideBottomTab, setHideBottomTab] = useState(false); const [hideHeader, setHideHeader] = useState(false); const [disableScroll, setDisableScroll] = useState(false); const [isPWA, setIsPWA] = useState(false); + const [unreadCount, setUnreadCount] = useState(0); const navigate = useNavigate(); const location = useLocation(); const mainRef = useRef(null); + const updateUnreadCount = async () => { + try { + const data = await fetchUnreadCount(); + if (data.isSuccess) { + setUnreadCount(data.result.count); + } + } catch (error) { + console.error("미읽음 알림 조회 실패:", error); + } + }; + // PWA 감지 useEffect(() => { const checkPWA = () => { @@ -40,6 +53,18 @@ export default function MainLayout() { } }, [navigate]); + useEffect(() => { + const accessToken = tokenStorage.getAccessToken(); + + if (accessToken) { + const fetchCount = async () => { + await updateUnreadCount(); + }; + + fetchCount(); + } +}, [location.pathname]); + return ( + {unreadCount > 0 && ( + )} diff --git a/app/routes/business/calendar/calendar-content.tsx b/app/routes/business/calendar/calendar-content.tsx index 934959ca..187e3d2f 100644 --- a/app/routes/business/calendar/calendar-content.tsx +++ b/app/routes/business/calendar/calendar-content.tsx @@ -142,7 +142,7 @@ export default function CalendarContent() { return (
-
+