Feat/noti (#124)

* init: 환경설정

* feat: notification 제작중

* feat: notification 헤더 추가

* feat: notification API 연결 및 type 따른 처리

* feat: notification css 수정

* fix: notification 타입 및 id 필드 변경에 따른 방어코드로 수정

* fix: notification api 함수 변경

* fix: notification 오브젝트 속성 참조 오류 수정

* fix: notification 드롭다운 아이템 key값 수정

* fix: notification 쿼리 키 설정 및 적용

* fix: notification antd-style적용, suspense제거.

* fix: notification 알림 문구 변경, 아이콘 변경

* fix: unread notification count와 알림 클릭 시 post로 읽음 처리 적용

post후 unread응답 다시 불러오기 적용
불필요한 옵셔널 체이닝 제거

apps/web-client/src/components/header/Notification/Notification.tsx

@@ -4,9 +4,10 @@ import { ReactNode, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 
 import { createStyles } from 'antd-style';
-import { NotificationControllerService, NotificationResponse, queryKey, useAppQuery } from '~/lib/api-v2';
+import { NotificationControllerService, NotificationResponse, queryKey, useAppMutation, useAppQuery } from '~/lib/api-v2';
 import { assert } from '~/lib/utils/assert';
 import { MENU } from '~/constants/menus';
+import { queryClient } from '~/lib/utils/queryClient';
 
 // CSS
 const useStyles = createStyles(() => ({
@@ -58,6 +59,9 @@ export default function Notification() {
     },
     initialData: [],
   });
+  const { mutate: updateNotiReadStatus } = useAppMutation({
+    mutationFn: NotificationControllerService.viewNotificationUsingPost,
+  });
 
   assert(data, 'data is undefined');
 
@@ -67,7 +71,7 @@ export default function Notification() {
     switch (response.notificationType) {
       case 'MESSAGE':
         return {
-          link: `/${MENU.MESSAGE}`,
+          link: `/${MENU.MESSAGE}`, // `/message/${response?.causedById}`,
           description: <p>새로운 쪽지가 왔습니다.</p>,
         };
       case 'BADGE':
@@ -98,11 +102,23 @@ export default function Notification() {
   };
 
   const dropDownItems =
-    data.length > 0
-      ? data.map((dataOne) => ({
-          key: `${dataOne.createdAt}-${dataOne?.causedById ?? ''}-${dataOne.notificationType}`,
+    (data.unreadCount ?? 0) > 0
+      ? (data.responses ?? []).map((dataOne) => ({
+          key: `${dataOne.createdAt}-${dataOne.causedById ?? ''}-${dataOne.notificationType}`,
           label: (
-            <Link to={resultLinkAndDescription(dataOne).link}>
+            <Link
+              to={resultLinkAndDescription(dataOne).link}
+              onClick={() => {
+                updateNotiReadStatus(
+                  { notificationId: dataOne.notificationId! },
+                  {
+                    onSuccess() {
+                      queryClient.invalidateQueries({ queryKey: queryKey.notification.unread });
+                    },
+                  },
+                );
+              }}
+            >
               <div>
                 <p>{convertDate(dataOne.createdAt ?? '')}</p>
                 <div className={styles.dropdownItem}>{resultLinkAndDescription(dataOne).description}</div>
@@ -117,7 +133,7 @@ export default function Notification() {
       <Dropdown menu={{ items: dropDownItems }} dropdownRender={Menu}>
         <Button shape="circle" className={styles.dropdownButton}>
           <Space size="large" className={styles.dropdownShape}>
-            <Badge count={data.length}>
+            <Badge count={data.unreadCount ?? 0}>
               <Avatar shape="circle" size="default" icon={<BellOutlined />} className={styles.dropdownAvatar} />
             </Badge>
           </Space>