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 ( handlePostClick(notification.notificationId, notification.referencedId)} + onClick={() => handlePostClick(notification.notificationId)} > - {notification.title} + {notification.title} handleDeleteNotification(e, notification.notificationId)}> 삭제 @@ -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(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 ? ( ) : ( 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(() => {