Feat: fix exception logic in notification #225

src/components/Alarm/TabCapsule/Content/Content.tsx

@@ -6,6 +6,9 @@ import formatTimeAgo from '@/utils/formatTimeAgo';
 import {ContentProps} from '@/types/alarm';
 
 function Content({contents}: ContentProps) {
+  if (!contents[0]) {
+    return <div></div>;
+  }
   return (
     <div className={styles.page}>
       {contents.map((content, index) => (

src/components/Alarm/TabCapsule/TabCapsule.tsx

@@ -1,4 +1,5 @@
 import {Tab, TabIndicator, TabList, TabPanel, TabPanels, Tabs} from '@chakra-ui/react';
+import {useEffect, useState} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 import styles from './TabCapsule.module.scss';
@@ -10,20 +11,29 @@ import {parsingAlarmTravel} from '@/utils/parsingAlarm';
 
 import Content from './Content/Content';
 
+import {NotificationData} from '@/types/notification';
+
 function TabCapsule({isAlarmOpen}: {isAlarmOpen: boolean}) {
+  const [allContents, setAllContents] = useState<NotificationData[]>([]);
+  const [spaceTravelContents, setSpaceTravelContents] = useState<NotificationData[]>([]);
   const navigate = useNavigate();
-  const {data: Alarm} = useGetAlarm(isAlarmOpen);
-  localStorage.removeItem('news');
+  const {data: AlarmData} = useGetAlarm(isAlarmOpen);
 
-  Alarm && PostReadAlarm(Alarm?.data.data.notificationDetail[0].id);
-  if (Alarm?.status === 403 || Alarm?.status === 401) {
+  if (AlarmData?.status === 403 || AlarmData?.status === 401) {
     navigate('/auth/login', {
       replace: true,
     });
   }
 
-  const AllContents = parsingAlarmTravel(Alarm?.data.data.notificationDetail);
-  const SpaceTravelContents = parsingAlarmTravel(Alarm?.data.data.notificationDetail);
+  useEffect(() => {
+    setAllContents(parsingAlarmTravel(AlarmData?.data.data.notificationDetail));
+    setSpaceTravelContents(parsingAlarmTravel(AlarmData?.data.data.notificationDetail));
+  }, [AlarmData]);
+
+  useEffect(() => {
+    localStorage.removeItem('news');
+    PostReadAlarm(AlarmData?.data.data.notificationDetail[0].id);
+  }, []);
 
   return (
     <Tabs isFitted variant='unstyled'>
@@ -38,10 +48,10 @@ function TabCapsule({isAlarmOpen}: {isAlarmOpen: boolean}) {
       <TabIndicator mt='-1.5px' height='2px' bg='#2388FF' borderRadius='2px' width='50% !important' />
       <TabPanels>
         <TabPanel p={0}>
-          <Content contents={AllContents} />
+          <Content contents={allContents} />
         </TabPanel>
         <TabPanel p={0}>
-          <Content contents={SpaceTravelContents} />
+          <Content contents={spaceTravelContents} />
         </TabPanel>
       </TabPanels>
     </Tabs>

src/components/Home/TabBar/TabBar.tsx

@@ -8,10 +8,10 @@ import {useGetAlarm} from '@/hooks/Notification/useNotification';
 
 import {Alarmprop} from '@/types/alarm';
 
-function TabBar({onAlarmOpen}: Alarmprop) {
+function TabBar({onAlarmOpen, isAlarmOpen}: Alarmprop) {
   const news = localStorage.getItem('news');
-  const {data: Alarm} = useGetAlarm(true);
-  if (Alarm?.data.data.notificationDetail[0].isRead === false) {
+  const {data: AlarmData} = useGetAlarm(isAlarmOpen);
+  if (AlarmData?.data.data.notificationDetail[0].isRead === false) {
     localStorage.setItem('news', 'true');
   }
 

src/components/SideBar/TravelList/TravelList.tsx

@@ -15,13 +15,9 @@ function TravelList({isSideOpen}: TravelListProp) {
   const [, setIsFull] = useRecoilState(isFullMember);
   const {mutate} = usePostSpace();
   const navigate = useNavigate();
-
   const {data: spaces} = useGetSpaces(isSideOpen);
-  console.log(spaces);
-
   const handlePostSpace = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
-
     if (spaces!.data && spaces!.data.spaces.length >= 15) {
       setIsFull(true);
     } else {

src/firebase/messaging-init-in-sw.ts

@@ -26,7 +26,6 @@ async function requestPermission() {
   const token = await getToken(messaging, {
     vapidKey: import.meta.env.VITE_VAPID_KEY,
   });
-  console.log(token);
   if (token) {
     await sendNotificationToken({token});
     console.log('[FCM]알림 토큰을 전송했습니다');

src/hooks/Notification/useNotification.ts

@@ -4,7 +4,7 @@ import {GetAlarm} from '@/api/notification';
 
 function useGetAlarm(enabled: boolean) {
   return useQuery({
-    queryKey: ['Alarm'],
+    queryKey: ['AlarmData'],
     queryFn: GetAlarm,
     enabled,
     retry: 0,

src/pages/Home/Home.tsx

@@ -40,7 +40,7 @@ function Home() {
   return (
     <>
       <div className={styles.container}>
-        <TabBar onAlarmOpen={onAlarmOpen} />
+        <TabBar onAlarmOpen={onAlarmOpen} isAlarmOpen={isAlarmOpen} />
         <VoteAtHome />
         <SearchBarAtHome />
         <div className={styles.column_4px}>

src/pages/Trip/Trip.tsx

@@ -17,7 +17,6 @@ import {useNavigate, useParams} from 'react-router-dom';
 
 import styles from './Trip.module.scss';
 
-import {useGetAlarm} from '@/hooks/Notification/useNotification';
 import {useGetJourneys, useGetSpace} from '@/hooks/Spaces/space';
 
 import Alarm from '@/components/Alarm/Alarm';
@@ -51,10 +50,6 @@ function Trip() {
   const [center, setCenter] = useState<LatLng>(getMapCenter(journeysData.data));
   const navigate = useNavigate();
   const users = spaceData?.data?.members;
-  const {data: AlarmData} = useGetAlarm(true);
-  if (AlarmData?.data.data.notificationDetail[0].isRead === false) {
-    localStorage.setItem('news', 'true');
-  }
 
   useEffect(() => {
     console.log('아임센터', center);

src/types/alarm.ts

@@ -19,4 +19,5 @@ export type BackProps = {
 
 export interface Alarmprop {
   onAlarmOpen: () => void;
+  isAlarmOpen: boolean;
 }

src/utils/parsingAlarm.ts

@@ -1,6 +1,8 @@
 import {NotificationData, NotificationDetails} from '@/types/notification';
 
-export function parsingAlarmTravel(notificationDetails: NotificationDetails[]): NotificationData[] {
+export function parsingAlarmTravel(notificationDetails: NotificationDetails[]) {
+  if (!notificationDetails || notificationDetails.length === 0) return [];
+
   const travelNoti: NotificationData[] = [];
 
   try {