feat: 쪽지/알림 사용성 개선하기 (#131)

* 쪽지/알림 사용성 개선하기 * dev 해제
PoolC · Aug 5, 2024 · 3b6f677 · 3b6f677
1 parent 4a22286
commit 3b6f677
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 41 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
@@ -57,7 +57,10 @@ export default function Notification() {
       // NOTE: 204의 경우 아무것도 반환되지 않는다. 해당 케이스를 위한 처리
       return res ?? [];
     },
-    initialData: [],
+    initialData: {
+      responses: [],
+      unreadCount: 0,
+    },
   });
   const { mutate: updateNotiReadStatus } = useAppMutation({
     mutationFn: NotificationControllerService.viewNotificationUsingPost,

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({