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 && (
)}