PR: 알림 관련 기능 수정

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 && (
         <Link
-          to={getNotificationUrl(type, url)}
+          to={getNotificationUrl(notiType, url)}
           className="mt-[20px] flex items-center justify-self-end rounded-lg bg-mainGray-active px-[10px] py-2 text-[15px] text-white"
         >
           {buttonText}

src/constants/notification.ts

@@ -76,6 +76,11 @@ export const NOTIFICATION_TYPE: Record<number, NotificationCardInfo> = {
     alertMessage: '캘린더 권한 부여가 필요한 매니저가 있습니다.',
     buttonText: '캘린더 권한 부여 이동',
   },
+  13: {
+    borderColor: '#FFB48C',
+    alertType: '특강 / 행사',
+    alertMessage: '가 취소되었습니다.',
+  },
 };
 
 // TODO '/' 로 표시된 부분은 이동 경로 확인 후, 수정 필요
@@ -90,4 +95,5 @@ export const NOTIFICATION_ROUTE: Record<number, string> = {
   10: '/',
   11: '/',
   12: '/',
+  13: '/session-status',
 };

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 (
     <header className="mb-10 flex items-start justify-between">
       <section>
@@ -71,8 +77,7 @@ export default function Header({
             onClick={() => openNotificationListTab()}
           >
             <BsBell className="size-[26px] stroke-[0.3] font-bold text-darkGray-hover" />
-            {(isNotificationServerSentEvent ||
-              notificationList?.length !== 0) && (
+            {showRedDot && (
               <div className="absolute right-0 top-0.5 size-2 rounded-full border bg-red-500" />
             )}
           </button>