diff --git a/src/contexts/sseAtom.ts b/src/contexts/sseAtom.ts index 96f5573..da816ce 100644 --- a/src/contexts/sseAtom.ts +++ b/src/contexts/sseAtom.ts @@ -1,8 +1,8 @@ import { atom } from 'jotai'; -import { EventSourcePolyfill } from 'event-source-polyfill'; +import { NotificationResponse } from '../types/MyPage'; // Jotai atom 정의 export const sseConnectedAtom = atom(false); // SSE 연결 상태 export const sseMessagesAtom = atom([]); // 수신된 알림 메시지 export const unreadCount = atom(0); // 읽지 않은 알림 수 -export const notifications = atom([]); // 알림 목록 배열 +export const notifications = atom(); // 알림 목록 diff --git a/src/hooks/useSSE.ts b/src/hooks/useSSE.ts index 758a60b..19de9c4 100644 --- a/src/hooks/useSSE.ts +++ b/src/hooks/useSSE.ts @@ -1,20 +1,20 @@ import { useEffect, useCallback, useRef } from 'react'; import { atom, useAtom } from 'jotai'; import { EventSourcePolyfill } from 'event-source-polyfill'; -import { unreadCount } from '../contexts/sseAtom'; +import { notifications, unreadCount } from '../contexts/sseAtom'; import { customErrToast } from '../utils/customErrorToast'; import { NotificationResponse } from '../types/MyPage'; import { apiBaseUrl } from '../utils/apiConfig'; +import { getAlarmList } from '../api/MyPageApi'; +import { useQuery } from '@tanstack/react-query'; const sseConnectedAtom = atom(false); // SSE 연결 상태 const sseMessagesAtom = atom([]); // SSE 메시지 상태 -export const useSSE = ( - setAlarmNoti?: React.Dispatch> -) => { +export const useSSE = () => { const [, setConnected] = useAtom(sseConnectedAtom); const [, setMessages] = useAtom(sseMessagesAtom); - const [unReadCount, setUnReadCount] = useAtom(unreadCount); + const [, setUnReadCount] = useAtom(unreadCount); const eventSource = useRef(null); // 재연결 타임아웃 관리 @@ -42,22 +42,25 @@ export const useSSE = ( // 메시지 수신 처리 eventSource.current.onmessage = event => { + console.log(event.data); if (!event.data.includes('연결')) { const modifiedMessage = event.data.replace(/\d+$/, ''); + customErrToast(modifiedMessage); setUnReadCount(prev => prev + 1); - if (setAlarmNoti) - setAlarmNoti(prev => { - if (prev) { - return { - ...prev, - data: { - ...prev.data, - notificationInfoResDto: [modifiedMessage, ...prev.data.notificationInfoResDto], - }, - }; - } - }); + + // if (setAlarmNoti) + // setAlarmNoti(prev => { + // if (prev) { + // return { + // ...prev, + // data: { + // ...prev.data, + // notificationInfoResDto: [modifiedMessage, ...prev.data.notificationInfoResDto], + // }, + // }; + // } + // }); } }; diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index 623c6d4..4596504 100644 --- a/src/pages/MyPage.tsx +++ b/src/pages/MyPage.tsx @@ -18,13 +18,17 @@ import { fetchBlockData, fetchData, getAlarmList, updateAlarmIsRead } from '../a import { useAtom } from 'jotai'; import { useQuery } from '@tanstack/react-query'; import Pagination from '@mui/material/Pagination'; -import { unreadCount } from '../contexts/sseAtom'; -import { useSSE } from '../hooks/useSSE'; +import { notifications, unreadCount } from '../contexts/sseAtom'; +import useTeamDashBoard from '../hooks/useTeamDashBoard'; +import { postTeamDashboard } from '../api/TeamDashBoardApi'; const MyPage = () => { const navigate = useNavigate(); const { data, refetch } = useQuery({ queryKey: ['profile'], queryFn: fetchData }); - const { data: alarmNoti } = useQuery({ queryKey: ['alarmNoti'], queryFn: getAlarmList }); + const { data: alarmNoti, refetch: AlarmRefetch } = useQuery({ + queryKey: ['alarmNoti'], + queryFn: getAlarmList, + }); console.log(alarmNoti); const [teamBool, setTeamBool] = useState('personal'); // 기본값으로 팀 탭을 보여줌 @@ -37,15 +41,16 @@ const MyPage = () => { //* 알람 관련 변수 const [unReadCount, setUnReadCount] = useAtom(unreadCount); + const [alarmList, setAlarmList] = useAtom(notifications); const [visibleAlarm, setAlarmVisible] = useState(false); const [visibleModal, setModalVisible] = useState(false); - const [alarmList, setAlarmList] = useState(alarmNoti); - - useSSE(setAlarmList); //스트림 연결 const onAlarmVisibleFunc = () => { setAlarmVisible(prev => !prev); - setUnReadCount(0); + if (unReadCount !== 0) { + // unReadCount가 0이 아닐 때만 업데이트 + setUnReadCount(0); + } updateAlarmIsRead(); }; @@ -94,6 +99,13 @@ const MyPage = () => { } }; + //로그아웃 + const onLogoutHandler = () => { + localStorage.removeItem('accessToken'); + localStorage.removeItem('refreshToken'); + navigate('/login'); + }; + // 처음 렌더링 시 팀 탭 데이터 호출 useEffect(() => { const fetchInitialBlockData = async () => { @@ -120,88 +132,112 @@ const MyPage = () => { } }, [alarmNoti]); + useEffect(() => { + AlarmRefetch(); + setAlarmList(alarmNoti); + }, [unReadCount]); + let content; if (teamBool === 'personal') { content = ( - - {personalBlockData?.personalDashboardInfoResDto.map((item, idx) => { - const { dashboardId, title, description } = item; - return ( - { - navigate(`/${dashboardId}`); - }} - > - - - ); - })} - - - - + {personalBlockData?.personalDashboardInfoResDto.length === 0 ? ( + NoContentComponent + ) : ( +
+ + {personalBlockData?.personalDashboardInfoResDto.map((item, idx) => { + const { dashboardId, title, description } = item; + return ( + { + navigate(`/${dashboardId}`); + }} + > + + + ); + })} + + + + + +
+ )}
); } else if (teamBool === 'team') { content = ( - - {teamBlockData?.teamDashboardInfoResDto.map((item, idx) => { - const { dashboardId, title, joinMembers, description } = item; - return ( - { - navigate(`/${dashboardId}`); - }} - > - - - ); - })} - - - - + {teamBlockData?.teamDashboardInfoResDto.length === 0 ? ( + NoContentComponent + ) : ( +
+ + {teamBlockData?.teamDashboardInfoResDto.map((item, idx) => { + const { dashboardId, title, joinMembers, description } = item; + return ( + { + navigate(`/${dashboardId}`); + }} + > + + + ); + })} + + + + +
+ )}
); } else if (teamBool === 'challenge') { content = ( - - {challengeBlockData?.challengeInfoResDto.map((item, idx) => { - const { title, cycle } = item; - return ( -
- -
- ); - })} -
- - - + {challengeBlockData?.challengeInfoResDto.length === 0 ? ( + NoContentComponent + ) : ( +
+ + {challengeBlockData?.challengeInfoResDto.map((item, idx) => { + const { title, cycle } = item; + return ( +
+ +
+ ); + })} +
+ + + +
+ )}
); } @@ -239,7 +275,7 @@ const MyPage = () => { 프로필 수정 - 로그아웃 + 로그아웃 @@ -249,9 +285,18 @@ const MyPage = () => { {visibleAlarm && ( - {alarmNoti?.data.notificationInfoResDto.map((item, idx) => ( - - ))} + {alarmList?.data.notificationInfoResDto.length === 0 ? ( + + 생성된 알림이 없어요 + + ) : ( + alarmList?.data.notificationInfoResDto + .slice() + .reverse() + .map((item, idx) => ( + + )) + )} )} @@ -273,3 +318,11 @@ const MyPage = () => { }; export default MyPage; + +const NoContentComponent = ( + + + 생성된 내용이 없어요 + + +);