전체읽음 바로 반영되지 않는 오류 수정 (#659)

* fix: 전체 읽음 오류 수정 * style: 불필요한 콘솔로그 삭제
woowacourse-teams · Oct 11, 2023 · 4cd8bbd · 4cd8bbd
1 parent d67ad7e
commit 4cd8bbd
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 57 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -19,7 +19,6 @@ if (gaTrackingId) {
 
 const history = createBrowserHistory();
 history.listen((response: { location: { pathname: string } }) => {
-  console.log(response.location.pathname);
   ReactGA.set({ page: response.location.pathname });
   ReactGA.pageview(response.location.pathname);
 });

diff --git a/frontend/src/components/LoginError.tsx b/frontend/src/components/LoginError.tsx
diff --git a/frontend/src/components/NotificationDropdown/NotificationDropdown.tsx b/frontend/src/components/NotificationDropdown/NotificationDropdown.tsx
@@ -7,22 +7,26 @@ import { useNotificationCheck } from '@/hooks/query/useNotificationCheck';
 
 interface Props {
   notificationList: Notification[];
+  checkIsAllRead: () => void;
 }
 
-const NotificationDropdown = ({ notificationList }: Props) => {
+const NotificationDropdown = ({ notificationList, checkIsAllRead }: Props) => {
   const { mutate: deleteNotification } = useNotificationDelete();
   const { mutate: patchNotificationCheck } = useNotificationCheck();
   const { goToRunnerMyPage } = usePageRouter();
 
   const handlePostClick = (notificationId: number) => {
     patchNotificationCheck(notificationId);
+
     goToRunnerMyPage();
+    checkIsAllRead();
   };
 
   const handleDeleteNotification = (e: React.MouseEvent, notificationId: number) => {
     e.stopPropagation();
 
     deleteNotification(notificationId);
+    checkIsAllRead();
   };
 
   return (

diff --git a/frontend/src/layout/MyMenu.tsx b/frontend/src/layout/MyMenu.tsx
@@ -17,18 +17,21 @@ const MyMenu = () => {
   const [isAllRead, setIsAllRead] = useState<boolean>(true);
 
   const { data: profile } = useHeaderProfile();
-
   const { data: notificationList } = useNotification();
 
   useEffect(() => {
-    const isRead = notificationList.data.filter((notification) => {
+    checkIsAllRead();
+  }, [isAllRead]);
+
+  const checkIsAllRead = () => {
+    const isNotRead = notificationList.data.filter((notification) => {
       return !notification.isRead;
     });
 
-    if (isRead.length !== 0) {
+    if (isNotRead.length !== 0) {
       setIsAllRead(false);
     }
-  }, [isAllRead]);
+  };
 
   const handleNotificationDropdown = () => {
     setIsNotificationDropdownOpen(!isNotificationDropdownOpen);
@@ -61,7 +64,7 @@ const MyMenu = () => {
           }
         >
           <Suspense>
-            <NotificationDropdown notificationList={notificationList.data} />
+            <NotificationDropdown checkIsAllRead={checkIsAllRead} notificationList={notificationList.data} />
           </Suspense>
         </Dropdown>
       </S.NotificationContainer>