feat: 알림/쪽지 반영전 확인 및 개선 (#116)

* message 정상동작 확인 * 잔디 이중 스크롤 fix * 게시판 타이틀 제대로 안나오는 이슈 수정
PoolC · Jul 23, 2024 · 3480547 · 3480547
1 parent d57fd2a
commit 3480547
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 31 deletions.
diff --git a/apps/web-client/src/components/board/BoardList.tsx b/apps/web-client/src/components/board/BoardList.tsx
@@ -7,7 +7,7 @@ import { stringify } from 'qs';
 import { CommentOutlined, EditOutlined } from '@ant-design/icons';
 import { MENU } from '~/constants/menus';
 import { PostControllerService, PostResponse, queryKey, useAppQuery } from '~/lib/api-v2';
-import { BoardType, getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
+import { BoardType, getBoardTitleForRequest } from '~/lib/utils/boardUtil';
 import { dayjs } from '~/lib/utils/dayjs';
 import getFileUrl from '~/lib/utils/getFileUrl';
 import { useAppSelector } from '~/hooks/useAppSelector';
@@ -75,7 +75,7 @@ export default function BoardList({ boardType, page }: { boardType: BoardType; p
     queryKey: queryKey.post.all(boardType, page - 1),
     queryFn: () =>
       PostControllerService.viewPostsByBoardUsingGet({
-        boardTitle: getBoardTitleByBoardType(boardType),
+        boardTitle: getBoardTitleForRequest(boardType),
         page: page - 1,
       }),
   });

diff --git a/apps/web-client/src/components/board/BoardNormalWriteSection.tsx b/apps/web-client/src/components/board/BoardNormalWriteSection.tsx
@@ -13,7 +13,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { ApiError, CustomApi, PostControllerService, queryKey, useAppMutation, useAppQuery } from '~/lib/api-v2';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
-import { BoardType, getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
+import { BoardType, getBoardTitle } from '~/lib/utils/boardUtil';
 import { useMessage } from '~/hooks/useMessage';
 import { useAppSelector } from '~/hooks/useAppSelector';
 import getFileUrl from '~/lib/utils/getFileUrl';
@@ -220,14 +220,14 @@ export default function BoardNormalWriteSection({ boardType, postId }: { boardTy
             items={[
               { title: <Link to={`/${MENU.BOARD}`}>게시판</Link> },
               {
-                title: <Link to={`/${MENU.BOARD}?${stringify({ boardType })}`}>{getBoardTitleByBoardType(boardType)}</Link>,
+                title: <Link to={`/${MENU.BOARD}?${stringify({ boardType })}`}>{getBoardTitle(boardType)}</Link>,
               },
             ]}
           />
           <Form onSubmitCapture={form.onSubmit(onFormSubmit, () => {})}>
             <Space direction="vertical" className={styles.fullWidth} size="middle">
               <Space direction="vertical" className={styles.titleWrap} size={0}>
-                <Typography.Title level={3}>{getBoardTitleByBoardType(boardType)}</Typography.Title>
+                <Typography.Title level={3}>{getBoardTitle(boardType)}</Typography.Title>
                 <Typography>{renderDescription()}</Typography>
               </Space>
               <div className={styles.fullWidth}>

diff --git a/apps/web-client/src/components/header/Notification/Notification.tsx b/apps/web-client/src/components/header/Notification/Notification.tsx
@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom';
 import { createStyles } from 'antd-style';
 import { NotificationControllerService, NotificationResponse, queryKey, useAppQuery } from '~/lib/api-v2';
 import { assert } from '~/lib/utils/assert';
+import { MENU } from '~/constants/menus';
 
 // CSS
 const useStyles = createStyles(() => ({
@@ -66,11 +67,11 @@ export default function Notification() {
     switch (response.notificationType) {
       case 'MESSAGE':
         return {
-          link: `/message/${response?.causedById}`,
+          link: `/${MENU.MESSAGE}`,
           description: <p>새로운 쪽지가 왔습니다.</p>,
         };
       case 'BADGE':
-        return { link: `/my-page/badge-list`, description: <p>새 뱃지를 받았습니다!</p> };
+        return { link: `/${MENU.MY_PAGE}/${MENU.MY_PAGE_BADGE_LIST}`, description: <p>새 뱃지를 받았습니다!</p> };
       case 'POST':
         return {
           link: `/board/${response?.causedById}`,

diff --git a/apps/web-client/src/components/home/HomeEntry.tsx b/apps/web-client/src/components/home/HomeEntry.tsx
@@ -4,7 +4,7 @@ import RecentNotice from '~/components/home/RecentNotice';
 import RecentProject from '~/components/home/RecentProject';
 import { useAppSelector } from '~/hooks/useAppSelector';
 import { PoolcControllerService, PostControllerService, ProjectControllerService, queryKey, useAppSuspeneseQueries } from '~/lib/api-v2';
-import { getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
+import { getBoardTitleForRequest } from '~/lib/utils/boardUtil';
 import ApplyBanner from '~/components/home/ApplyBanner';
 
 const useStyles = createStyles(({ css }) => ({
@@ -34,7 +34,7 @@ export default function HomeEntry() {
         queryKey: queryKey.post.all('NOTICE', 0),
         queryFn: () =>
           PostControllerService.viewPostsByBoardUsingGet({
-            boardTitle: getBoardTitleByBoardType('NOTICE'),
+            boardTitle: getBoardTitleForRequest('NOTICE'),
             page: 0,
           }),
       },

diff --git a/apps/web-client/src/components/message/MessageAllListContent.tsx b/apps/web-client/src/components/message/MessageAllListContent.tsx
@@ -47,6 +47,8 @@ export default function MessageAllListContent() {
     queryFn: ConversationControllerService.getAllConversationsUsingGet,
   });
 
+  console.log(data);
+
   return (
     <Space direction="vertical" className={styles.fullWidth} size="large">
       <Space className={styles.topBox}>

diff --git a/apps/web-client/src/components/message/MessageFormView.tsx b/apps/web-client/src/components/message/MessageFormView.tsx
@@ -4,6 +4,7 @@ import { createStyles } from 'antd-style';
 import { FormEventHandler, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { MENU } from '~/constants/menus';
+import { useMessage } from '~/hooks/useMessage';
 import { MessageControllerService, useAppMutation } from '~/lib/api-v2';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 
@@ -41,6 +42,7 @@ export default function MessageFormView() {
   const [content, setContent] = useState('');
   const history = useHistory();
   const { conversationId } = useParams<{ conversationId: string }>();
+  const message = useMessage();
 
   const { mutate: sendMessage } = useAppMutation({
     mutationFn: () =>
@@ -56,6 +58,7 @@ export default function MessageFormView() {
     e.preventDefault();
     sendMessage(undefined, {
       onSuccess: () => {
+        message.success('메시지를 전송했습니다.');
         history.push(`/${MENU.MESSAGE}/${conversationId}`);
       },
     });

diff --git a/apps/web-client/src/components/message/MessageListContent.tsx b/apps/web-client/src/components/message/MessageListContent.tsx
@@ -1,7 +1,7 @@
 import { Button, List, Space, Typography } from 'antd';
 import { createStyles } from 'antd-style';
 import { ArrowLeftOutlined } from '@ant-design/icons';
-import { Link, useHistory, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import { MENU } from '~/constants/menus';
 import { useAppSuspenseQuery, queryKey, ConversationControllerService } from '~/lib/api-v2';
 import { dayjs } from '~/lib/utils/dayjs';
@@ -31,22 +31,23 @@ const useStyles = createStyles(({ css }) => ({
 
 export default function MessageListContent() {
   const { styles } = useStyles();
-  const history = useHistory();
 
   const { conversationId } = useParams<{ conversationId: string }>();
 
   const { data } = useAppSuspenseQuery({
-    queryKey: queryKey.conversation.all,
+    queryKey: queryKey.conversation.conversation(conversationId),
     queryFn: () => ConversationControllerService.viewConversationUsingGet({ conversationId }),
   });
 
   return (
     <Space direction="vertical" className={styles.fullWidth} size="large">
       <Space className={styles.topBox}>
         <Space>
-          <Button shape="circle" type="text" onClick={() => history.goBack()}>
-            <ArrowLeftOutlined />
-          </Button>
+          <Link to={`/${MENU.MESSAGE}`}>
+            <Button shape="circle" type="text">
+              <ArrowLeftOutlined />
+            </Button>
+          </Link>
           <Typography.Text className={styles.topBoxName}>대화 상세</Typography.Text>
         </Space>
         <Link to={`/${MENU.MESSAGE}/${conversationId}/${MENU.MESSAGE_FORM}`}>
@@ -55,7 +56,7 @@ export default function MessageListContent() {
       </Space>
       <List
         itemLayout="horizontal"
-        dataSource={data}
+        dataSource={data.toReversed()}
         renderItem={(item) => (
           <List.Item>
             <Space direction="vertical" className={styles.fullWidth}>

diff --git a/apps/web-client/src/components/my-page/MyPageGrassSection.tsx b/apps/web-client/src/components/my-page/MyPageGrassSection.tsx
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
-import ActivityCalendar, { Activity, Labels, Level } from 'react-activity-calendar';
+import ActivityCalendar, { Activity, Labels } from 'react-activity-calendar';
 import { Tooltip } from 'antd';
 import { BaekjoonResponse } from '~/lib/api-v2';
 import { dayjs } from '~/lib/utils/dayjs';
@@ -9,6 +9,10 @@ const useStyles = createStyles(({ css }) => ({
   wrapper: css`
     overflow-x: auto;
     padding: 10px 30px;
+    .react-activity-calendar__scroll-container {
+      overflow-x: visible;
+      overflow-y: visible;
+    }
   `,
   calendarWrap: css`
     width: 100%;
@@ -57,7 +61,7 @@ function MyPageGrassSection({ baekjoonData }: { baekjoonData: BaekjoonResponse[]
         res.push({
           date: formattedDate,
           count: filtered.length,
-          level: filtered.length as Level,
+          level: filtered.length,
         });
       }
     }

diff --git a/apps/web-client/src/lib/api-v2/queryKey.ts b/apps/web-client/src/lib/api-v2/queryKey.ts
@@ -31,7 +31,7 @@ export const queryKey = {
   },
   conversation: {
     all: ['conversation.all'] as const,
-    conversation: (id: number) => ['conversation.conversation', id] as const,
+    conversation: (id: string) => ['conversation.conversation', id] as const,
   },
   notification: {
     all: ['notification.all'] as const,

diff --git a/apps/web-client/src/lib/utils/boardUtil.ts b/apps/web-client/src/lib/utils/boardUtil.ts
@@ -2,7 +2,7 @@ import { match } from 'ts-pattern';
 
 export type BoardType = 'NOTICE' | 'FREE' | 'JOB' | 'PROJECT' | 'CS';
 
-export function getBoardTitleByBoardType(boardType: BoardType) {
+export function getBoardTitleForRequest(boardType: BoardType) {
   return match(boardType)
     .with('NOTICE', () => 'notice')
     .with('FREE', () => 'free')
@@ -12,4 +12,14 @@ export function getBoardTitleByBoardType(boardType: BoardType) {
     .exhaustive();
 }
 
+export function getBoardTitle(boardType: BoardType) {
+  return match(boardType)
+    .with('NOTICE', () => '공지 게시판')
+    .with('FREE', () => '자유 게시판')
+    .with('JOB', () => '취업 게시판')
+    .with('PROJECT', () => '프로젝트 게시판')
+    .with('CS', () => 'CS 게시판')
+    .exhaustive();
+}
+
 export type BoardWriteMode = 'NEW' | 'EDIT';
diff --git a/apps/web-client/src/pages/board/BoardDetailPage.tsx b/apps/web-client/src/pages/board/BoardDetailPage.tsx
@@ -10,7 +10,7 @@ import { FolderOpenTwoTone } from '@ant-design/icons';
 import { useQueryClient } from '@tanstack/react-query';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
-import { getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
+import { getBoardTitle } from '~/lib/utils/boardUtil';
 import { CommentControllerService, PostControllerService, PostResponse, ScrapControllerService, queryKey, useAppMutation, useAppQuery } from '~/lib/api-v2';
 import { dayjs } from '~/lib/utils/dayjs';
 import { useMessage } from '~/hooks/useMessage';
@@ -281,7 +281,7 @@ export default function BoardDetailPage() {
                     boardType: post.boardType,
                   })}`}
                 >
-                  {getBoardTitleByBoardType(post.boardType ?? 'FREE')}
+                  {getBoardTitle(post.boardType ?? 'FREE')}
                 </Link>
               ),
             },

diff --git a/apps/web-client/src/pages/board/BoardListPage.tsx b/apps/web-client/src/pages/board/BoardListPage.tsx
@@ -5,7 +5,7 @@ import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import BoardList from '~/components/board/BoardList';
 import { useSearchParams } from '~/hooks/useSearchParams';
 import { MENU } from '~/constants/menus';
-import { BoardType, getBoardTitleByBoardType } from '~/lib/utils/boardUtil';
+import { BoardType, getBoardTitle } from '~/lib/utils/boardUtil';
 import { useAppSelector } from '~/hooks/useAppSelector';
 
 const useStyles = createStyles(({ css }) => ({
@@ -37,29 +37,29 @@ export default function BoardListPage() {
   }[] = [
     {
       key: 'NOTICE',
-      label: getBoardTitleByBoardType('NOTICE'),
+      label: getBoardTitle('NOTICE'),
       children: <BoardList boardType="NOTICE" page={page} />,
     },
     ...(isLogin
       ? [
           {
             key: 'FREE' as BoardType,
-            label: getBoardTitleByBoardType('FREE'),
+            label: getBoardTitle('FREE'),
             children: <BoardList boardType="FREE" page={page} />,
           },
           {
             key: 'JOB' as BoardType,
-            label: getBoardTitleByBoardType('JOB'),
+            label: getBoardTitle('JOB'),
             children: <BoardList boardType="JOB" page={page} />,
           },
           {
             key: 'PROJECT' as BoardType,
-            label: getBoardTitleByBoardType('PROJECT'),
+            label: getBoardTitle('PROJECT'),
             children: <BoardList boardType="PROJECT" page={page} />,
           },
           {
             key: 'CS' as BoardType,
-            label: getBoardTitleByBoardType('CS'),
+            label: getBoardTitle('CS'),
             children: <BoardList boardType="CS" page={page} />,
           },
         ]

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 { useMessage } from '~/hooks/useMessage';
 
 const useStyles = createStyles(({ css }) => ({
   whiteBlock: css`
@@ -86,7 +85,6 @@ const useStyles = createStyles(({ css }) => ({
 
 export default function MyPage() {
   const { styles, cx } = useStyles();
-  const message = useMessage();
 
   const listData: {
     title: string;
@@ -112,7 +110,7 @@ export default function MyPage() {
     {
       title: '쪽지',
       icon: <MessageTwoTone size={24} twoToneColor="#4dabf7" />,
-      onClick: () => message.info('기능 준비중입니다!'),
+      link: `/${MENU.MESSAGE}`,
     },
   ];