Skip to content

Commit

Permalink
알림 기능 수정 (전체 읽음, 마이페이지로 이동) (#656)
Browse files Browse the repository at this point in the history
* fix: 서포터 마이페이지에서 러너게시물을 불러오는 오류 수정

* refactor: isRead transient props 적용

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

* feat: 알림 전체 읽음 기능 추가
  • Loading branch information
gyeongza authored Oct 11, 2023
1 parent 02a1861 commit d67ad7e
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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>
Expand Down Expand Up @@ -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;
Expand Down
15 changes: 13 additions & 2 deletions frontend/src/layout/MyMenu.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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);
Expand All @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/SupporterMyPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down

0 comments on commit d67ad7e

Please sign in to comment.