From ee5a09f87e625d71faceedc937ee3b36afbc3bae Mon Sep 17 00:00:00 2001
From: brian <90752841+wokbjso@users.noreply.github.com>
Date: Fri, 13 Sep 2024 12:42:43 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20=EC=95=8C=EB=A6=BC=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C,=20=EC=8C=93=EC=97=AC=EC=9E=88=EB=8A=94?=
 =?UTF-8?q?=20=EC=95=8C=EB=A6=BC=EB=93=A4=EC=9D=84=20=EB=AA=A8=EB=91=90=20?=
 =?UTF-8?q?=EC=9D=BD=EC=9D=8C=20=EC=B2=98=EB=A6=AC=EB=A1=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EC=A7=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/notification/read/route.ts                 | 14 +++-----------
 .../notification/apis/use-read-notification.tsx    |  7 +------
 .../components/molecules/cheer-notification.tsx    | 10 +---------
 .../components/organisms/notification-list.tsx     |  9 ++++++++-
 4 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/app/api/notification/read/route.ts b/app/api/notification/read/route.ts
index 10895895..3b522be9 100644
--- a/app/api/notification/read/route.ts
+++ b/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);
diff --git a/features/notification/apis/use-read-notification.tsx b/features/notification/apis/use-read-notification.tsx
index 8be16b0e..bf1a8fc9 100644
--- a/features/notification/apis/use-read-notification.tsx
+++ b/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
diff --git a/features/notification/components/molecules/cheer-notification.tsx b/features/notification/components/molecules/cheer-notification.tsx
index 158399a4..15d2b9e6 100644
--- a/features/notification/components/molecules/cheer-notification.tsx
+++ b/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 }))}>
diff --git a/features/notification/components/organisms/notification-list.tsx b/features/notification/components/organisms/notification-list.tsx
index f0c3f9db..3a145be8 100644
--- a/features/notification/components/organisms/notification-list.tsx
+++ b/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}>