쪽지/알림 실서버 반영 (#132)

* feat: 메세지 보내기 및 UI 정리 (#102) * message 관련 파일들 정리 * message 보내기 및 라우팅 처리 * Feat/noti (#106) * 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 쿼리 키 설정 및 적용 --------- Co-authored-by: Jinho Choi <66049045+jinoov@users.noreply.github.com> * fix: board util type 변환 수정 (#108) * Feat/noti (#109) * 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 알림 문구 변경, 아이콘 변경 --------- Co-authored-by: Jinho Choi <66049045+jinoov@users.noreply.github.com> * feat: 쪽지 관련 UI 업데이트 (#112) * fix: 알림버튼이 PC 버전에서는 나오지 않는 이슈 (#114) * feat: 알림/쪽지 반영전 확인 및 개선 (#116) * message 정상동작 확인 * 잔디 이중 스크롤 fix * 게시판 타이틀 제대로 안나오는 이슈 수정 * fix: toast/viewer에 key값 추가 (#117) * fix: 백준 익스텐션 재로그인 권유 (#121) * fix: 백준익스텐션 재로그인 권유 * fix: 백준 배포 관련 수정 * fix: 백준 에러 및 사용성 개선 (#122) * rollback util func * ux 개선 * manifest version up * win32를 supported architecture에 추가 (#123) * fix: 레벨 4이상 처리 (#125) * feat: 4개 넘어갈때 4개 이상으로 표시 (#126) * feat: main일때 알림/쪽지 가려놓기 (#128) * 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응답 다시 불러오기 적용 불필요한 옵셔널 체이닝 제거 * feat: 쪽지/알림 사용성 개선하기 (#131) * 쪽지/알림 사용성 개선하기 * dev 해제 --------- Co-authored-by: Hys-Lee <dltkdgus3275@gmail.com> Co-authored-by: SangHyeon Lee <67571350+Hys-Lee@users.noreply.github.com>
PoolC · Aug 5, 2024 · f1746c5 · f1746c5
1 parent 2953d02
commit f1746c5
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 48 deletions.
diff --git a/apps/web-client/src/components/header/Header.jsx b/apps/web-client/src/components/header/Header.jsx
@@ -8,7 +8,6 @@ import { BarsIcon, HeaderBlock, HeaderIconBox, HeaderIcons, LogoImage } from './
 import Menus from './Menus/Menus';
 import { MENU } from '~/constants/menus';
 import Notification from './Notification/Notification';
-import { isDevelopment } from '~/lib/utils/isDevelopment';
 
 const useStyles = createStyles(({ css }) => ({
   avatarButton: css`
@@ -90,7 +89,7 @@ const Header = ({ member, onLogout }) => {
           {isLogin && (
             <div className={styles.menuInner}>
               {/** Noti */}
-              {isDevelopment && <Notification />}
+              <Notification />
               {/** Profile */}
               <Dropdown menu={{ items: dropDownItems }}>
                 <Button shape="circle" className={styles.avatarButton}>

diff --git a/apps/web-client/src/components/header/Menus/Menus.tsx b/apps/web-client/src/components/header/Menus/Menus.tsx
@@ -7,7 +7,6 @@ import LinkButton from '../../common/Buttons/LinkButton';
 import { LeftHeaderMenu, MenuBlock, RightHeaderMenu } from './Menus.styles';
 import { MENU } from '~/constants/menus';
 import Notification from '../Notification/Notification';
-import { isDevelopment } from '~/lib/utils/isDevelopment';
 
 const useStyles = createStyles(({ css }) => ({
   menuInner: css`
@@ -119,7 +118,7 @@ const Menus = ({
         {isLogin && (
           <div className={styles.menuInner}>
             {/** Noti */}
-            {isDevelopment && <Notification />}
+            <Notification />
             <Dropdown menu={{ items: dropDownItems }}>
               <Button shape="circle" style={{ padding: 0, width: '40px', height: '40px' }}>
                 <Avatar src={profileImageURL} size={36} />

diff --git a/apps/web-client/src/components/header/Notification/Notification.tsx b/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(() => ({
@@ -56,7 +57,13 @@ export default function Notification() {
       // NOTE: 204의 경우 아무것도 반환되지 않는다. 해당 케이스를 위한 처리
       return res ?? [];
     },
-    initialData: [],
+    initialData: {
+      responses: [],
+      unreadCount: 0,
+    },
+  });
+  const { mutate: updateNotiReadStatus } = useAppMutation({
+    mutationFn: NotificationControllerService.viewNotificationUsingPost,
   });
 
   assert(data, 'data is undefined');
@@ -67,7 +74,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 +105,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 +136,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>

diff --git a/apps/web-client/src/components/members/MemberDetail/MemberDetailContent.tsx b/apps/web-client/src/components/members/MemberDetail/MemberDetailContent.tsx
@@ -1,5 +1,5 @@
 import Icon, { MessageOutlined } from '@ant-design/icons';
-import { Avatar, Button, Tooltip } from 'antd';
+import { Avatar, Button, Popconfirm } from 'antd';
 import { useHistory } from 'react-router';
 import ActivityCard from '~/components/activity/ActivityCard/ActivityCard';
 import ProjectCard from '~/components/projects/ProjectCard/ProjectCard';
@@ -22,7 +22,6 @@ import {
 } from './MemberDetailContent.styles';
 import { ConversationControllerService, MemberControllerService, MemberResponse, queryKey, useAppMutation, useAppSuspeneseQueries } from '~/lib/api-v2';
 import { MENU } from '~/constants/menus';
-import { isDevelopment } from '~/lib/utils/isDevelopment';
 
 export default function MemberDetailContent({ loginId }: { loginId: string }) {
   const history = useHistory();
@@ -50,14 +49,12 @@ export default function MemberDetailContent({ loginId }: { loginId: string }) {
       }),
   });
 
-  const onMessageButtonClick = () => {
-    if (confirm(`${member.name}님과의 대화를 시작할까요?`)) {
-      mutate(undefined, {
-        onSuccess: ({ id }) => {
-          history.push(`/${MENU.MESSAGE}/${id}/${MENU.MESSAGE_FORM}`);
-        },
-      });
-    }
+  const onStartConversation = () => {
+    mutate(undefined, {
+      onSuccess: ({ id }) => {
+        history.push(`/${MENU.MESSAGE}/${id}/${MENU.MESSAGE_FORM}`);
+      },
+    });
   };
 
   return (
@@ -71,10 +68,10 @@ export default function MemberDetailContent({ loginId }: { loginId: string }) {
             <Name>{member.name}</Name>
             {member.isAdmin && <Status>PoolC임원</Status>}
             {member.badge && <Avatar src={getFileUrl(member.badge.imageUrl)} size={60} />}
-            {isDevelopment && member.loginID !== me.loginID && (
-              <Tooltip title={`${member.name}님과 대화를 해보아요`}>
-                <Button shape="circle" icon={<MessageOutlined />} type="primary" onClick={onMessageButtonClick} />
-              </Tooltip>
+            {member.loginID !== me.loginID && (
+              <Popconfirm title={`${member.name}님과 대화하기`} description={`${member.name}님과의 대화를 시작할까요?`} okText="네" cancelText="아니요" onConfirm={onStartConversation}>
+                <Button shape="circle" icon={<MessageOutlined />} type="primary" />
+              </Popconfirm>
             )}
           </NameContainer>
           <DepartmentContainer>

diff --git a/apps/web-client/src/components/message/MessageAllListContent.tsx b/apps/web-client/src/components/message/MessageAllListContent.tsx
@@ -2,7 +2,7 @@ import { Button, List, Space, Typography } from 'antd';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { Link, useHistory } from 'react-router-dom';
 import { createStyles } from 'antd-style';
-import { ConversationControllerService, queryKey, useAppSuspenseQuery } from '~/lib/api-v2';
+import { ConversationControllerService, MemberControllerService, queryKey, useAppSuspeneseQueries } from '~/lib/api-v2';
 import { dayjs } from '~/lib/utils/dayjs';
 import { MENU } from '~/constants/menus';
 
@@ -33,7 +33,6 @@ const useStyles = createStyles(({ css }) => ({
     font-size: 20px;
   `,
   listItemLink: css`
-    padding: 12px 0;
     width: 100%;
   `,
 }));
@@ -42,32 +41,38 @@ export default function MessageAllListContent() {
   const { styles } = useStyles();
   const history = useHistory();
 
-  const { data } = useAppSuspenseQuery({
-    queryKey: queryKey.conversation.all,
-    queryFn: ConversationControllerService.getAllConversationsUsingGet,
+  const [{ data: conversations }, { data: me }] = useAppSuspeneseQueries({
+    queries: [
+      {
+        queryKey: queryKey.conversation.all,
+        queryFn: ConversationControllerService.getAllConversationsUsingGet,
+      },
+      {
+        queryKey: queryKey.member.me,
+        queryFn: MemberControllerService.getMeUsingGet,
+      },
+    ],
   });
 
-  console.log(data);
-
   return (
     <Space direction="vertical" className={styles.fullWidth} size="large">
       <Space className={styles.topBox}>
         <Space>
-          <Button shape="circle" type="text" onClick={() => history.goBack()}>
+          <Button shape="circle" type="text" onClick={() => history.push(`/${MENU.MY_PAGE}`)}>
             <ArrowLeftOutlined />
           </Button>
           <Typography.Text className={styles.topBoxName}>대화 목록</Typography.Text>
         </Space>
       </Space>
       <List
         itemLayout="horizontal"
-        dataSource={data}
+        dataSource={conversations.toReversed()}
         renderItem={(item) => (
           <List.Item>
             <Link to={`/${MENU.MESSAGE}/${item.id}`} className={styles.listItemLink}>
               <Space direction="vertical" className={styles.fullWidth}>
                 <Space className={styles.metaInfo}>
-                  <Typography.Text className={styles.messageType}>{item.otherLoginID}</Typography.Text>
+                  <Typography.Text className={styles.messageType}>{item.otherLoginID === me.loginID ? item.starterLoginID : item.otherLoginID}</Typography.Text>
                   <Typography.Text>{dayjs(item.lastMessage?.sentAt).format('YYYY-MM-DD HH:mm:ss')}</Typography.Text>
                 </Space>
                 <Typography.Text>{item.lastMessage?.content}</Typography.Text>

diff --git a/apps/web-client/src/pages/my-page/MyPage.tsx b/apps/web-client/src/pages/my-page/MyPage.tsx
@@ -9,7 +9,6 @@ import MyPageGrassSection from '~/components/my-page/MyPageGrassSection';
 import { queryClient } from '~/lib/utils/queryClient';
 import { getProfileImageUrl } from '~/lib/utils/getProfileImageUrl';
 import getFileUrl from '~/lib/utils/getFileUrl';
-import { isDevelopment } from '~/lib/utils/isDevelopment';
 
 const useStyles = createStyles(({ css }) => ({
   whiteBlock: css`
@@ -108,17 +107,11 @@ export default function MyPage() {
       icon: <StarTwoTone size={24} twoToneColor="#ffa94d" />,
       link: `/${MENU.MY_PAGE}/${MENU.MY_PAGE_MY_SCRAPS}`,
     },
-    isDevelopment
-      ? {
-          title: '쪽지',
-          icon: <MessageTwoTone size={24} twoToneColor="#4dabf7" />,
-          link: `/${MENU.MESSAGE}`,
-        }
-      : {
-          title: '쪽지',
-          icon: <MessageTwoTone size={24} twoToneColor="#4dabf7" />,
-          onClick: () => alert('서비스 준비중입니다.'),
-        },
+    {
+      title: '쪽지',
+      icon: <MessageTwoTone size={24} twoToneColor="#4dabf7" />,
+      link: `/${MENU.MESSAGE}`,
+    },
   ];
 
   const [{ data: myHour }, { data: me }, { data: badge }, { data: baekjoon }] = useAppQueries({