From d67ad7efd8a328a7af2a9438ba6cf39896fa9943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=97=90=EC=9D=B4=EB=93=A0?=
 <62369936+gyeongza@users.noreply.github.com>
Date: Wed, 11 Oct 2023 17:53:38 +0900
Subject: [PATCH] =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20(=EC=A0=84=EC=B2=B4=20=EC=9D=BD=EC=9D=8C,?=
 =?UTF-8?q?=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99)=20(#656)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 서포터 마이페이지에서 러너게시물을 불러오는 오류 수정

* refactor: isRead transient props 적용

* refactor: 알림메시지 선택시 마이페이지로 이동하도록 변경

* feat: 알림 전체 읽음 기능 추가
---
 .../NotificationDropdown.tsx                     | 16 ++++++++--------
 frontend/src/layout/MyMenu.tsx                   | 15 +++++++++++++--
 frontend/src/pages/SupporterMyPage.tsx           |  2 +-
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/NotificationDropdown/NotificationDropdown.tsx b/frontend/src/components/NotificationDropdown/NotificationDropdown.tsx
index aaaae70c8..faca1c412 100644
--- a/frontend/src/components/NotificationDropdown/NotificationDropdown.tsx
+++ b/frontend/src/components/NotificationDropdown/NotificationDropdown.tsx
@@ -12,11 +12,11 @@ interface Props {
 const NotificationDropdown = ({ notificationList }: Props) => {
   const { mutate: deleteNotification } = useNotificationDelete();
   const { mutate: patchNotificationCheck } = useNotificationCheck();
-  const { goToRunnerPostPage } = usePageRouter();
+  const { goToRunnerMyPage } = usePageRouter();
 
-  const handlePostClick = (notificationId: number, runnerPostId: number) => {
+  const handlePostClick = (notificationId: number) => {
     patchNotificationCheck(notificationId);
-    goToRunnerPostPage(runnerPostId);
+    goToRunnerMyPage();
   };
 
   const handleDeleteNotification = (e: React.MouseEvent, notificationId: number) => {
@@ -32,10 +32,10 @@ const NotificationDropdown = ({ notificationList }: Props) => {
           return (
             <S.DropdownList
               key={notification.notificationId}
-              onClick={() => handlePostClick(notification.notificationId, notification.referencedId)}
+              onClick={() => handlePostClick(notification.notificationId)}
             >
               <S.NotificationTitleContainer>
-                <S.NotificationTitle isRead={notification.isRead}>{notification.title}</S.NotificationTitle>
+                <S.NotificationTitle $isRead={notification.isRead}>{notification.title}</S.NotificationTitle>
                 <S.CloseButton onClick={(e) => handleDeleteNotification(e, notification.notificationId)}>
                   삭제
                 </S.CloseButton>
@@ -105,13 +105,13 @@ const S = {
     }
   `,
 
-  NotificationTitle: styled.p<{ isRead: boolean }>`
+  NotificationTitle: styled.p<{ $isRead: boolean }>`
     font-size: 16px;
     font-weight: 700;
     position: relative;
 
-    ${({ isRead }) =>
-      isRead
+    ${({ $isRead }) =>
+      $isRead
         ? () => ''
         : ` &::before {
       width: 4px;
diff --git a/frontend/src/layout/MyMenu.tsx b/frontend/src/layout/MyMenu.tsx
index e346ae826..554803651 100644
--- a/frontend/src/layout/MyMenu.tsx
+++ b/frontend/src/layout/MyMenu.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import LogoImage from '@/assets/logo-image.svg';
 import LogoImageMobile from '@/assets/logo-image-mobile.svg';
@@ -14,11 +14,22 @@ import { useNotification } from '@/hooks/query/useNotification';
 const MyMenu = () => {
   const [isNotificationDropdownOpen, setIsNotificationDropdownOpen] = useState(false);
   const [isProfileDropdownOpen, setIsProfileDropdownOpen] = useState(false);
+  const [isAllRead, setIsAllRead] = useState<boolean>(true);
 
   const { data: profile } = useHeaderProfile();
 
   const { data: notificationList } = useNotification();
 
+  useEffect(() => {
+    const isRead = notificationList.data.filter((notification) => {
+      return !notification.isRead;
+    });
+
+    if (isRead.length !== 0) {
+      setIsAllRead(false);
+    }
+  }, [isAllRead]);
+
   const handleNotificationDropdown = () => {
     setIsNotificationDropdownOpen(!isNotificationDropdownOpen);
     setIsProfileDropdownOpen(false);
@@ -42,7 +53,7 @@ const MyMenu = () => {
           gapFromTrigger="52px"
           isDropdownOpen={isNotificationDropdownOpen}
           trigger={
-            notificationList?.data.length === 0 ? (
+            isAllRead ? (
               <S.NotificationIcon onClick={handleNotificationDropdown} src={NotificationOffIcon} />
             ) : (
               <S.NotificationIcon onClick={handleNotificationDropdown} src={NotificationOnIcon} />
diff --git a/frontend/src/pages/SupporterMyPage.tsx b/frontend/src/pages/SupporterMyPage.tsx
index 04eb44556..03895f9c9 100644
--- a/frontend/src/pages/SupporterMyPage.tsx
+++ b/frontend/src/pages/SupporterMyPage.tsx
@@ -23,7 +23,7 @@ const SupporterMyPage = () => {
   const { isMobile } = useViewport();
   const { showErrorToast } = useContext(ToastContext);
   const { goToProfileEditPage, goToLoginPage } = usePageRouter();
-  const { data: myPostList, hasNextPage, fetchNextPage } = useMyPostList(true, reviewStatus);
+  const { data: myPostList, hasNextPage, fetchNextPage } = useMyPostList(false, reviewStatus);
   const { data: mySupporterProfile } = useMySupporterProfile();
 
   useEffect(() => {