(Team-Coverflow#285)style: 알림페이지 스타일 수정했습니다.

JayJayleee · May 5, 2024 · e0c754c · e0c754c
1 parent 7e73869
commit e0c754c
Show file tree

Hide file tree

Showing 11 changed files with 43 additions and 17 deletions.
diff --git a/src/App.js b/src/App.js
@@ -21,7 +21,6 @@ const queryClient = new QueryClient({
             0,
           );
           store.dispatch(alertCount(noReadElements));
-          console.log('쿼리 성공적으로 실행');
         }
       },
     },

diff --git a/src/asset/image/tabbar-new-alert.svg b/src/asset/image/tabbar-new-alert.svg
diff --git a/src/asset/sass/etc/tabBar/tabBar.scss b/src/asset/sass/etc/tabBar/tabBar.scss
@@ -48,8 +48,8 @@ nav > div {
 
 .icon-overlay {
   position: absolute;
-  top: 1.9rem;
-  right: 10.2rem;
+  top: 2.1rem;
+  right: 10.6rem;
 }
 
 .nav-center {

diff --git a/src/components/global/token/tokenManagement.jsx b/src/components/global/token/tokenManagement.jsx
@@ -78,7 +78,7 @@ const TokenManagement = () => {
         } else if (['MEMBER', 'PREMIUM', 'ADMIN'].includes(userRole)) {
           // console.log('회원 정보가 존재합니다. 메인 페이지로 이동합니다.');
           navigate(prevPage);
-          initializeSSE(queryClient);
+          initializeSSE(queryClient, dispatch);
         } else {
           alert('로그인에 실패하였습니다. 다시 시도해주세요.');
           navigate('/login');

diff --git a/src/components/global/utils/alertCountUtil.js b/src/components/global/utils/alertCountUtil.js
@@ -0,0 +1,17 @@
+import { fetchAPI } from './apiUtil';
+import { alertCount } from '../../../store/actions/alertActions';
+
+export const fetchUnreadNotificationsCount = async (dispatch) => {
+  try {
+    const data = await fetchAPI('/api/notification', 'GET');
+    console.log(data);
+    if (data) {
+      console.log(data.data.noReadElements);
+      dispatch(alertCount(data.data.noReadElements));
+    } else {
+      throw new Error('알림 카운트 변경 실패 ');
+    }
+  } catch (error) {
+    console.error('알림 카운트 가져오기 실패', error);
+  }
+};
diff --git a/src/components/global/utils/eventApiUtils.js b/src/components/global/utils/eventApiUtils.js
@@ -7,10 +7,10 @@ import {
 } from '../constants/index.ts';
 import { showSuccessToast } from '../../ui/toast/toast.tsx';
 import { reissueTokens } from './reissueTokenUtils.js';
-
+import { fetchUnreadNotificationsCount } from './alertCountUtil.js';
 let isConnected = false;
 
-export const initializeSSE = (queryClient) => {
+export const initializeSSE = (queryClient, dispatch) => {
   if (isConnected) return;
   isConnected = true;
 
@@ -40,10 +40,12 @@ export const initializeSSE = (queryClient) => {
 
   sse.addEventListener('connect', (event) => {
     queryClient.invalidateQueries(['notifications']);
-
+    // console.log(event, 'sse');
+    fetchUnreadNotificationsCount(dispatch);
     let data;
     try {
       data = JSON.parse(event.data);
+      // console.log(data);
     } catch (error) {
       return;
     }
@@ -78,7 +80,7 @@ export const initializeSSE = (queryClient) => {
     console.log('onerror', event);
     sse.close();
     isConnected = false;
-    reissueTokens(queryClient);
+    reissueTokens(queryClient, dispatch);
   };
 
   return sse;

diff --git a/src/components/global/utils/reissueTokenUtils.js b/src/components/global/utils/reissueTokenUtils.js
@@ -8,7 +8,7 @@ import { setTokens } from '../../../store/actions/authActions';
 import { store } from '../../../store';
 import { initializeSSE } from './eventApiUtils';
 
-export const reissueTokens = async (queryClient) => {
+export const reissueTokens = async (queryClient, dispatch) => {
   try {
     const { expiresAt } = store.getState().auth;
 
@@ -30,7 +30,7 @@ export const reissueTokens = async (queryClient) => {
         store.dispatch(
           setTokens(newAccessToken, newRefreshToken, newExpiresAt),
         );
-        setTimeout(() => initializeSSE(queryClient), 1000);
+        setTimeout(() => initializeSSE(queryClient, dispatch), 1000);
       } else {
         throw new Error('토큰 재발급 실패');
       }
@@ -39,6 +39,6 @@ export const reissueTokens = async (queryClient) => {
     }
   } catch (error) {
     console.error('토큰 재발급 오류, 다시 시도합니다.', error);
-    setTimeout(() => reissueTokens(queryClient), 5000);
+    setTimeout(() => reissueTokens(queryClient, dispatch), 5000);
   }
 };
diff --git a/src/components/pages/notificationPage/notificationList.jsx b/src/components/pages/notificationPage/notificationList.jsx
@@ -8,6 +8,8 @@ import DAILY from '../../../asset/image/notification-fishbun.svg';
 import { fetchAPI } from '../../global/utils/apiUtil';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
+import { fetchUnreadNotificationsCount } from '../../global/utils/alertCountUtil';
+import { useDispatch } from 'react-redux';
 
 function NotificationList({
   notifications,
@@ -31,7 +33,7 @@ function NotificationList({
         return { icon: null, message: '' };
     }
   };
-
+  const dispatch = useDispatch();
   const observer = useRef();
   const lastNotificationRef = useCallback(
     (node) => {
@@ -51,6 +53,7 @@ function NotificationList({
     fetchAPI('/api/notification', 'PATCH', [{ notificationId: index }])
       .then(() => {
         queryClient.invalidateQueries(['notifications']);
+        fetchUnreadNotificationsCount(dispatch);
         if (type === 'INQUIRY') {
           navigate(uri, { state: { list: 'list' } });
         } else if (type !== 'DAILY' && uri) {

diff --git a/src/components/pages/notificationPage/notificationPage.jsx b/src/components/pages/notificationPage/notificationPage.jsx
@@ -100,7 +100,7 @@ function NotificationPage() {
     <StyledPage className="main-page-container">
       <StyledHeader>
         <TitleHeader pageTitle="알림" handleGoBack={handleGoBack} />
-        {/* <button onClick={() => initializeSSE(queryClient)}>
+        {/* <button onClick={() => initializeSSE(queryClient, dispatch)}>
           initializeSSE
         </button> */}
         <div className="notification-controls">

diff --git a/src/components/pages/termsPage/termsPage.tsx b/src/components/pages/termsPage/termsPage.tsx
@@ -15,6 +15,7 @@ import allCheckGreen from '../../../asset/image/allCheck_green.svg';
 import { showErrorToast, showSuccessToast } from '../../ui/toast/toast.tsx';
 import { initializeSSE } from '../../global/utils/eventApiUtils.js';
 import { useQueryClient } from '@tanstack/react-query';
+import { useDispatch } from 'react-redux';
 
 interface LocationState {
   code?: string;
@@ -33,7 +34,7 @@ export default function TermsPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const queryClient = useQueryClient();
-
+  const dispatch = useDispatch();
   const { code } = (location.state || {}) as LocationState;
 
   // =========================================================== 약관 동의 확인을 위한 부분
@@ -140,7 +141,7 @@ export default function TermsPage() {
       localStorage.setItem(REFRESH_TOKEN, refreshToken);
       navigate('/login/member-info');
       showSuccessToast('회원 가입을 축하드립니다!');
-      initializeSSE(queryClient);
+      initializeSSE(queryClient, dispatch);
     } catch (error) {
       console.error(error);
       showErrorToast('토큰을 받아오는 중 오류가 발생했습니다.');

diff --git a/src/components/ui/header/userInfoHeader.jsx b/src/components/ui/header/userInfoHeader.jsx
@@ -10,6 +10,7 @@ import {
   setRewardCount,
   toggleDropdown,
 } from '../../../store/actions/userActions';
+import { alertCount } from '../../../store/actions/alertActions.js';
 import { ACCESS_TOKEN, REFRESH_TOKEN } from '../../global/constants/index.ts';
 
 function UserInfoHeader() {
@@ -102,12 +103,14 @@ function UserInfoHeader() {
       localStorage.removeItem(ACCESS_TOKEN);
       localStorage.removeItem(REFRESH_TOKEN);
       dispatch(setLoggedIn(false));
+      dispatch(alertCount(0));
       navigate('/');
     } catch (error) {
       console.error(error);
       localStorage.removeItem(ACCESS_TOKEN);
       localStorage.removeItem(REFRESH_TOKEN);
       dispatch(setLoggedIn(false));
+      dispatch(alertCount(0));
       navigate('/');
     }
   };