diff --git a/src/components/notification/CardContent.tsx b/src/components/notification/CardContent.tsx index 6032ad99..8107dc22 100644 --- a/src/components/notification/CardContent.tsx +++ b/src/components/notification/CardContent.tsx @@ -14,7 +14,8 @@ interface CardContentProps { } export default function CardContent({ notification }: CardContentProps) { - const { id, content, isRead, createdAt, type, url, comment } = notification; + const { id, content, isRead, createdAt, type, url, comment, notiType } = + notification; const { deleteNotification, setNotificationAsRead } = useNotification(); const { alertType, alertMessage, buttonText } = NOTIFICATION_TYPE[type]; @@ -23,8 +24,8 @@ export default function CardContent({ notification }: CardContentProps) { deleteNotification(notification.id); }; - const getNotificationUrl = (notiType: number, urlId: string) => { - const routeUrl = NOTIFICATION_ROUTE[notiType]; + const getNotificationUrl = (inputNotiType: number, urlId: string) => { + const routeUrl = NOTIFICATION_ROUTE[inputNotiType]; return routeUrl?.replace('{id}', urlId); }; @@ -63,7 +64,7 @@ export default function CardContent({ notification }: CardContentProps) { {buttonText && ( {buttonText} diff --git a/src/constants/notification.ts b/src/constants/notification.ts index 88abc500..de4ebfd6 100644 --- a/src/constants/notification.ts +++ b/src/constants/notification.ts @@ -76,6 +76,11 @@ export const NOTIFICATION_TYPE: Record = { alertMessage: '캘린더 권한 부여가 필요한 매니저가 있습니다.', buttonText: '캘린더 권한 부여 이동', }, + 13: { + borderColor: '#FFB48C', + alertType: '특강 / 행사', + alertMessage: '가 취소되었습니다.', + }, }; // TODO '/' 로 표시된 부분은 이동 경로 확인 후, 수정 필요 @@ -90,4 +95,5 @@ export const NOTIFICATION_ROUTE: Record = { 10: '/', 11: '/', 12: '/', + 13: '/session-status', }; diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index ab81d005..df6e1048 100644 --- a/src/layouts/Header.tsx +++ b/src/layouts/Header.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import { ReactNode, useState } from 'react'; import { useLocation } from 'react-router-dom'; @@ -43,12 +43,18 @@ export default function Header({ const { data: { profileImageUrl } = initialUserProfile } = useGetUserProfile(); const { data: notificationList } = useGetUnReadNotificationList(); + const [hasEverOpened, setHasEverOpened] = useState(false); const openNotificationListTab = () => { + setHasEverOpened(true); setIsNotificationServerSentEventData(false); setIsNotificationOpenOpen(prev => !prev); }; + const showRedDot = + isNotificationServerSentEvent || + (!hasEverOpened && notificationList?.length !== 0); + return (
@@ -71,8 +77,7 @@ export default function Header({ onClick={() => openNotificationListTab()} > - {(isNotificationServerSentEvent || - notificationList?.length !== 0) && ( + {showRedDot && (
)}