#68 실시간 알림 메시지 수정

src/components/AlarmBlock.tsx

@@ -11,11 +11,29 @@ type Props = {
   isRead: boolean;
 };
 const AlarmBlock = ({ message, isRead }: Props) => {
-  const nameMatch = message.match(/([가-힣]+)(?=님)/);
-  const dashboardMatch = message.match(/\s(.+?)\s대시보드/);
-  const numberMatch = message.match(/\d+$/);
+  const modifiedMessage = message.replace(/^[^:]+: /, '');
 
-  const name = nameMatch ? nameMatch[0] : null;
+  let nameMatch;
+  let dashboardMatch;
+  let description;
+  if (message.includes('팀 대시보드 초대')) {
+    nameMatch = modifiedMessage.split('님')[0];
+    dashboardMatch = modifiedMessage.match(/\s(.+?)\s대시보드/);
+    description = `${dashboardMatch ? dashboardMatch[1] : ''} 대시보드 초대`;
+  } else if (message.includes('팀 초대 수락')) {
+    nameMatch = modifiedMessage.split('님')[0];
+    description = `초대를 수락하였습니다`;
+  } else if (message.includes('챌린지 블록이 생성되었습니다')) {
+    const index = modifiedMessage.indexOf('챌린지 블록이 생성되었습니다');
+    nameMatch = message.slice(0, index).trim();
+    description = '챌린지 블록이 생성되었습니다';
+  } else {
+    nameMatch = `반가워요! ${modifiedMessage.split('님')[0]}님이`;
+    description = `챌린지에 참여했습니다`;
+  }
+  const numberMatch = modifiedMessage.match(/\d+$/);
+
+  const name = nameMatch ? nameMatch : null;
   const dashboard = dashboardMatch ? dashboardMatch[0] : null;
   const number = numberMatch ? numberMatch[0] : '';
   const [, setUpdate] = useAtom(navbarUpdateTriggerAtom);
@@ -33,7 +51,7 @@ const AlarmBlock = ({ message, isRead }: Props) => {
       <Flex alignItems="center">
         <UserInfoContainer>
           <h6>{name}</h6>
-          <p>{dashboard} 초대</p>
+          <p>{description}</p>
         </UserInfoContainer>
         {number !== '' ? <button onClick={onAcceptHandler}>수락</button> : ''}
       </Flex>

src/hooks/useSSE.ts

@@ -44,23 +44,9 @@ export const useSSE = () => {
     eventSource.current.onmessage = event => {
       console.log(event.data);
       if (!event.data.includes('연결')) {
-        const modifiedMessage = event.data.replace(/\d+$/, '');
-
+        const modifiedMessage = event.data.replace(/^[^:]+: /, '').replace(/\d+$/, '');
         customErrToast(modifiedMessage);
         setUnReadCount(prev => prev + 1);
-
-        // if (setAlarmNoti)
-        //   setAlarmNoti(prev => {
-        //     if (prev) {
-        //       return {
-        //         ...prev,
-        //         data: {
-        //           ...prev.data,
-        //           notificationInfoResDto: [modifiedMessage, ...prev.data.notificationInfoResDto],
-        //         },
-        //       };
-        //     }
-        //   });
       }
     };
 
@@ -82,7 +68,7 @@ export const useSSE = () => {
         connectToSSE();
       }, 3000); // 3초 후 재연결
     };
-  }, [setConnected, setMessages, setUnReadCount]);
+  }, [setConnected, setMessages]);
 
   useEffect(() => {
     // 첫 연결 시도

src/pages/MyPage.tsx

@@ -45,13 +45,13 @@ const MyPage = () => {
   const [visibleAlarm, setAlarmVisible] = useState(false);
   const [visibleModal, setModalVisible] = useState(false);
 
-  const onAlarmVisibleFunc = () => {
+  const onAlarmVisibleFunc = async () => {
     setAlarmVisible(prev => !prev);
     if (unReadCount !== 0) {
       // unReadCount가 0이 아닐 때만 업데이트
       setUnReadCount(0);
     }
-    updateAlarmIsRead();
+    await updateAlarmIsRead();
   };
 
   const onModalVisibleFunc = () => {
@@ -183,6 +183,7 @@ const MyPage = () => {
             <S.GridContainer>
               {teamBlockData?.teamDashboardInfoResDto.map((item, idx) => {
                 const { dashboardId, title, joinMembers, description } = item;
+                console.log(dashboardId, title);
                 return (
                   <S.TeamBlockWrapper
                     key={idx}
@@ -220,10 +221,16 @@ const MyPage = () => {
           <div>
             <S.GridContainer>
               {challengeBlockData?.challengeInfoResDto.map((item, idx) => {
-                const { title, cycle } = item;
+                const { title, contents, cycle, challengeId } = item;
+
                 return (
-                  <div key={idx}>
-                    <ChallengeBlock key={idx} />
+                  <div
+                    key={idx}
+                    onClick={() => {
+                      navigate(`/challenge/${challengeId}`);
+                    }}
+                  >
+                    <ChallengeBlock key={idx} title={title} description={contents} />
                   </div>
                 );
               })}

src/styles/MyPageStyled.tsx

@@ -199,7 +199,7 @@ export const AlarmDataContainer = styled.div`
   right: 10px;
   top: 0px;
   width: 20.25rem;
-  max-height: 40.25rem;
+  max-height: 39.25rem;
   background: white;
   border: 1px solid #f4f4f4;
   border-radius: 1rem;

src/types/MyPage.ts

@@ -42,6 +42,11 @@ interface TeamDashboardInfoResDto {
 }
 
 //* 챌린지 대시보드 정보 타입
+interface MemberInfo {
+  memberId: number;
+  picture: string;
+  nickname: string;
+}
 interface ChallengeInfoResDto {
   challengeId: number;
   title: string;
@@ -58,7 +63,7 @@ interface ChallengeInfoResDto {
   participantCount: number;
   isParticipant: boolean;
   isAuthor: boolean;
-  completedMembers: string[];
+  completedMembers: MemberInfo[];
 }
 
 export interface PersonalDashboardList {