[Feat/#135] 사용자 알림 모두 읽음으로 표시 버튼 생성

src/app/mobile/admin/notification/page.tsx

@@ -8,7 +8,7 @@ import { elapsedTime } from '@/utils/elapsedTime';
 import { NotificationProps } from '@/types/notificationType';
 import {
   adminNotificationGet,
-  readNotificationPost,
+  readNotificationPatch,
 } from '@/services/notification';
 
 type AdminNotificationType = NotificationProps;
@@ -28,7 +28,7 @@ export default function Notification() {
   }, []);
 
   const handleReadNotification = async (notificationId: number) => {
-    await readNotificationPost(notificationId);
+    await readNotificationPatch(notificationId);
   };
 
   return (

src/app/mobile/notification/page.tsx

@@ -5,7 +5,8 @@ import { useRouter } from 'next/navigation';
 import MobileLayout from '@/components/mobile/layout';
 import {
   userNotificationGet,
-  readNotificationPost,
+  readNotificationPatch,
+  readNotificationAllPatch,
 } from '@/services/notification';
 import NotificationItem from '@/components/mobile/NotificationItem';
 import Header from '@/components/mobile/Header';
@@ -39,10 +40,13 @@ export default function Notification() {
     fetchNotifications();
   }, []);
 
-  // TODO : 로그인 여부 확인 후 로그인 안 했으면 로그인 화면으로 보내기
-
   const handleReadNotification = async (notificationId: number) => {
-    await readNotificationPost(notificationId);
+    await readNotificationPatch(notificationId);
+  };
+
+  const handleClickAllNotification = async () => {
+    await readNotificationAllPatch();
+    window.location.reload();
   };
 
   return (
@@ -53,19 +57,32 @@ export default function Notification() {
           현재 알림이 없습니다.
         </div>
       ) : (
-        notificationDetail.map((item) => (
-          <NotificationItem
-            key={item.notificationId}
-            message={item.message}
-            link={item.link}
-            isRead={item.isRead}
-            status={item.status}
-            createdAt={elapsedTime(item.createdAt)}
-            handleNotification={() =>
-              item.notificationId && handleReadNotification(item.notificationId)
-            }
-          />
-        ))
+        <div className="flex flex-col">
+          <div className="flex justify-end px-4 py-1">
+            <button
+              type="button"
+              onClick={handleClickAllNotification}
+              className="text-xs font-medium text-gray-secondary"
+            >
+              모두 읽음으로 표시
+            </button>
+          </div>
+
+          {notificationDetail.map((item) => (
+            <NotificationItem
+              key={item.notificationId}
+              message={item.message}
+              link={item.link}
+              isRead={item.isRead}
+              status={item.status}
+              createdAt={elapsedTime(item.createdAt)}
+              handleNotification={() =>
+                item.notificationId &&
+                handleReadNotification(item.notificationId)
+              }
+            />
+          ))}
+        </div>
       )}
     </MobileLayout>
   );

src/services/notification.ts

@@ -18,7 +18,7 @@ const adminNotificationGet = async () => {
   }
 };
 
-const readNotificationPost = async (notificationId: number) => {
+const readNotificationPatch = async (notificationId: number) => {
   try {
     const response = await PrivateAxiosInstance.patch(
       `notifications/${notificationId}`,
@@ -29,4 +29,18 @@ const readNotificationPost = async (notificationId: number) => {
   }
 };
 
-export { adminNotificationGet, userNotificationGet, readNotificationPost };
+const readNotificationAllPatch = async () => {
+  try {
+    const response = await PrivateAxiosInstance.patch('notifications/all');
+    return response.data;
+  } catch (error) {
+    return [];
+  }
+};
+
+export {
+  adminNotificationGet,
+  readNotificationAllPatch,
+  readNotificationPatch,
+  userNotificationGet,
+};