chore: 알림 클릭 시, 쌓여있는 알림들을 모두 읽음 처리로 로직 수정

app/api/notification/read/route.ts

@@ -1,20 +1,12 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 
 import { fetchData } from '@/apis/fetch-data';
-import {
-  NotificationReadResponse,
-  NotificationType,
-} from '@/features/notification';
+import { NotificationReadResponse } from '@/features/notification';
 
-export async function PATCH(request: NextRequest) {
-  const body = (await request.json()) as Promise<{
-    notificationId: number;
-    type: NotificationType;
-  }>;
+export async function PATCH() {
   const data = await fetchData<NotificationReadResponse>(
     `/notification/read`,
     'PATCH',
-    body,
   );
 
   return NextResponse.json(data);

features/notification/apis/use-read-notification.tsx

@@ -2,19 +2,14 @@
 
 import { useMutation } from '@tanstack/react-query';
 
-import { NotificationType } from '../types';
 import { NotificationReadResponse } from './dto';
 
-async function readNotification(data: {
-  notificationId: number;
-  type: NotificationType;
-}): Promise<NotificationReadResponse> {
+async function readNotification(): Promise<NotificationReadResponse> {
   const res = await fetch('/api/notification/read', {
     method: 'PATCH',
     headers: {
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify(data),
   });
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return

features/notification/components/molecules/cheer-notification.tsx

@@ -7,13 +7,11 @@ import {
   formatDateToKoreanExceptYear,
 } from '@/utils';
 
-import { useReadNotification } from '../../apis/use-read-notification';
 import { layoutStyles, textStyles } from '../../styles';
 import { CheerNotificationProps } from '../../types';
 import { CheerUpIcon } from '../atoms';
 
 export function CheerNotification({
-  notificationId,
   type,
   memoryId,
   hasRead,
@@ -22,14 +20,8 @@ export function CheerNotification({
   content,
   createdAt,
 }: CheerNotificationProps) {
-  const { mutate: readNotification } = useReadNotification();
-
-  const handleListElementClick = () => {
-    readNotification({ notificationId, type });
-  };
-
   return (
-    <Link href={`record-detail/${memoryId}`} onClick={handleListElementClick}>
+    <Link href={`record-detail/${memoryId}`}>
       <li className={css(layoutStyles.total.raw({ hasRead }))}>
         <CheerUpIcon />
         <div className={css(layoutStyles.text.raw({ type }))}>

features/notification/components/organisms/notification-list.tsx

@@ -1,11 +1,12 @@
 'use client';
 
+import { useEffect } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import { LoadingArea } from '@/components/atoms';
 import { css } from '@/styled-system/css';
 
-import { useGetNotification } from '../../apis';
+import { useGetNotification, useReadNotification } from '../../apis';
 import { FollowNotification, NoNotification } from '../molecules';
 import { CheerNotification } from '../molecules/cheer-notification';
 import { NotificationListSkeleton } from './notification-list-skeleton';
@@ -17,6 +18,7 @@ export function NotificationList() {
     isFetchingNextPage,
     getByFarNotificationData,
   } = useGetNotification();
+  const { mutate: readNotification } = useReadNotification();
 
   const handleRangeChanged = (range: { endIndex: number }) => {
     const currentContentsLastIndex = getByFarNotificationData.length - 1;
@@ -25,6 +27,11 @@ export function NotificationList() {
     }
   };
 
+  useEffect(() => {
+    readNotification();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   if (isLoading) return <NotificationListSkeleton />;
   return (
     <ol className={layoutStyles}>