message 보내기 및 라우팅 처리

PoolC · Jul 8, 2024 · 4a6b941 · 4a6b941
1 parent 992f2ca
commit 4a6b941
Show file tree

Hide file tree

Showing 7 changed files with 88 additions and 29 deletions.
diff --git a/apps/web-client/package.json b/apps/web-client/package.json
@@ -71,7 +71,7 @@
     "sync:type": "yarn dlx typesync",
     "check:type": "tsc",
     "check:type:watch": "yarn check:type --watch",
-    "codegen": "openapi -i https://dev.poolc.org/api/v2/api-docs -o src/lib/api-v2/__generated__ -c fetch --useUnionTypes --useOptions",
+    "codegen": "openapi -i https://dev.poolc.org/api/v2/api-docs -o src/lib/api-v2/__generated__ --useUnionTypes --useOptions -c axios",
     "postinstall": "yarn codegen",
     "lint": "eslint . && prettier . --check --ignore-path .gitignore",
     "format": "eslint . --fix && prettier . --write --ignore-path .gitignore"

diff --git a/apps/web-client/src/App.tsx b/apps/web-client/src/App.tsx
@@ -103,9 +103,9 @@ function App() {
             <Route component={BoardListPage} path={`/${MENU.BOARD}`} exact />
             <Route component={BoardWritePage} path={`/${MENU.BOARD}/write`} />
             <Route component={BoardDetailPage} path={`/${MENU.BOARD}/:id`} />
-            <Route component={MessageAllListPage} path={`/${MENU.MESSAGE}/${MENU.MESSAGE_ALL_LIST}`} />
-            <Route component={MessageListPage} path={`/${MENU.MESSAGE}/${MENU.MESSAGE_LIST}`} />
-            <Route component={MessageFormPage} path={`/${MENU.MESSAGE}/${MENU.MESSAGE_FORM}`} />
+            <Route component={MessageAllListPage} path={`/${MENU.MESSAGE}`} exact />
+            <Route component={MessageListPage} path={`/${MENU.MESSAGE}/:conversationId`} exact />
+            <Route component={MessageFormPage} path={`/${MENU.MESSAGE}/:conversationId/${MENU.MESSAGE_FORM}`} />
             <Route component={MyPage} path={`/${MENU.MY_PAGE}`} exact />
             <Route component={MyPageBadgeListPage} path={`/${MENU.MY_PAGE}/${MENU.MY_PAGE_BADGE_LIST}`} />
             <Route component={MyPageMyPostsPage} path={`/${MENU.MY_PAGE}/${MENU.MY_PAGE_MY_POSTS}`} />

diff --git a/apps/web-client/src/components/members/MemberDetail/MemberDetailContent.styles.ts b/apps/web-client/src/components/members/MemberDetail/MemberDetailContent.styles.ts
@@ -38,6 +38,7 @@ export const TextContainer = styled.div`
 export const NameContainer = styled.div`
   display: flex;
   align-items: center;
+  gap: 8px;
   @media (max-width: 576px) {
     justify-content: center;
   }
@@ -50,7 +51,6 @@ export const Name = styled.p`
 
 export const Status = styled.span`
   font-weight: 300;
-  margin-left: 5px;
 `;
 
 export const DepartmentContainer = styled.div`

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,6 @@
-import Icon from '@ant-design/icons';
-import { Avatar } from 'antd';
+import Icon, { MessageOutlined } from '@ant-design/icons';
+import { Avatar, Button, Tooltip } from 'antd';
+import { useHistory } from 'react-router';
 import ActivityCard from '~/components/activity/ActivityCard/ActivityCard';
 import ProjectCard from '~/components/projects/ProjectCard/ProjectCard';
 import getFileUrl from '~/lib/utils/getFileUrl';
@@ -19,16 +20,45 @@ import {
   ActivityContainer,
   Activities,
 } from './MemberDetailContent.styles';
-import { MemberControllerService, MemberResponse, queryKey, useAppSuspenseQuery } from '~/lib/api-v2';
+import { ConversationControllerService, MemberControllerService, MemberResponse, queryKey, useAppMutation, useAppSuspeneseQueries } from '~/lib/api-v2';
+import { MENU } from '~/constants/menus';
 
 export default function MemberDetailContent({ loginId }: { loginId: string }) {
-  const { data: _member } = useAppSuspenseQuery({
-    queryKey: queryKey.member.id(loginId),
-    queryFn: () => MemberControllerService.getMemberWithProjectAndActivityUsingGet({ loginId }),
+  const history = useHistory();
+  const [{ data: _member }, { data: me }] = useAppSuspeneseQueries({
+    queries: [
+      {
+        queryKey: queryKey.member.id(loginId),
+        queryFn: () => MemberControllerService.getMemberWithProjectAndActivityUsingGet({ loginId }),
+      },
+      {
+        queryKey: queryKey.member.me,
+        queryFn: MemberControllerService.getMeUsingGet,
+      },
+    ],
   });
 
   const member = _member as unknown as Required<MemberResponse>;
 
+  const { mutate } = useAppMutation({
+    mutationFn: () =>
+      ConversationControllerService.createConversationUsingPost({
+        request: {
+          otherLoginID: member.loginID,
+        },
+      }),
+  });
+
+  const onMessageButtonClick = () => {
+    if (confirm(`${member.name}님과의 대화를 시작할까요?`)) {
+      mutate(undefined, {
+        onSuccess: (conversationId) => {
+          history.push(`/${MENU.MESSAGE}/${conversationId}/${MENU.MESSAGE_FORM}`);
+        },
+      });
+    }
+  };
+
   return (
     <>
       <ContentContainer>
@@ -40,6 +70,11 @@ 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} />}
+            {member.loginID !== me.loginID && (
+              <Tooltip title={`${member.name}님과 대화를 해보아요`}>
+                <Button shape="circle" icon={<MessageOutlined />} type="primary" onClick={onMessageButtonClick} />
+              </Tooltip>
+            )}
           </NameContainer>
           <DepartmentContainer>
             {member.department && (

diff --git a/apps/web-client/src/components/message/MessageFormView.tsx b/apps/web-client/src/components/message/MessageFormView.tsx
@@ -1,8 +1,10 @@
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import { Button, Input, Space, Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { FormEventHandler, useState } from 'react';
+import { useHistory, useParams } from 'react-router-dom';
+import { MENU } from '~/constants/menus';
+import { MessageControllerService, useAppMutation } from '~/lib/api-v2';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 
 const useStyles = createStyles(({ css }) => ({
@@ -35,26 +37,49 @@ const useStyles = createStyles(({ css }) => ({
 
 export default function MessageFormView() {
   const { styles } = useStyles();
+  // TODO: react-hook-form 기반으로 변경
   const [content, setContent] = useState('');
   const history = useHistory();
+  const { conversationId } = useParams<{ conversationId: string }>();
+
+  const { mutate: sendMessage } = useAppMutation({
+    mutationFn: () =>
+      MessageControllerService.sendMessageUsingPost({
+        request: {
+          content,
+          conversationId,
+        },
+      }),
+  });
+
+  const onFormSubmit: FormEventHandler = (e) => {
+    e.preventDefault();
+    sendMessage(undefined, {
+      onSuccess: () => {
+        history.push(`/${MENU.MESSAGE}/${conversationId}`);
+      },
+    });
+  };
 
   return (
     <Block>
       <WhiteBlock className={styles.whiteBlock}>
-        <Space direction="vertical" className={styles.fullWidth} size="large">
-          <Space className={styles.topBox}>
-            <Space>
-              <Button shape="circle" type="text" onClick={() => history.goBack()}>
-                <ArrowLeftOutlined />
-              </Button>
-              <Typography.Text className={styles.topBoxName}>쪽지보내기</Typography.Text>
+        <form onSubmit={onFormSubmit} className={styles.fullWidth}>
+          <Space direction="vertical" className={styles.fullWidth} size="large">
+            <Space className={styles.topBox}>
+              <Space>
+                <Button shape="circle" type="text" onClick={() => history.goBack()}>
+                  <ArrowLeftOutlined />
+                </Button>
+                <Typography.Text className={styles.topBoxName}>쪽지보내기</Typography.Text>
+              </Space>
             </Space>
+            <Input.TextArea className={styles.textarea} value={content} onChange={(e) => setContent(e.target.value)} />
+            <Button type="primary" block htmlType="submit">
+              보내기
+            </Button>
           </Space>
-          <Input.TextArea className={styles.textarea} value={content} onChange={(e) => setContent(e.target.value)} />
-          <Button type="primary" block>
-            메세지 보내기
-          </Button>
-        </Space>
+        </form>
       </WhiteBlock>
     </Block>
   );

diff --git a/apps/web-client/src/constants/menus.js b/apps/web-client/src/constants/menus.js
@@ -25,9 +25,7 @@ const MENU = {
   MY_PAGE_MY_POSTS: 'my-posts',
   MY_PAGE_MY_SCRAPS: 'my-scraps',
   MESSAGE: 'message',
-  MESSAGE_LIST: 'list',
   MESSAGE_FORM: 'form',
-  MESSAGE_ALL_LIST: 'all-list',
   ROOM_RESERVATION: 'room-reservation',
 };
 

diff --git a/apps/web-client/src/pages/message/MessageListPage.tsx b/apps/web-client/src/pages/message/MessageListPage.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 } from 'react-router-dom';
+import { Link, useHistory, useParams } from 'react-router-dom';
 import { Block, WhiteBlock } from '~/styles/common/Block.styles';
 import { MENU } from '~/constants/menus';
 
@@ -39,6 +39,7 @@ const useStyles = createStyles(({ css }) => ({
 export default function MyPageMessageListPage() {
   const { styles } = useStyles();
   const history = useHistory();
+  const { conversationId } = useParams<{ conversationId: string }>();
 
   const data = [
     {
@@ -66,7 +67,7 @@ export default function MyPageMessageListPage() {
               </Button>
               <Typography.Text className={styles.topBoxName}>익명</Typography.Text>
             </Space>
-            <Link to={`/${MENU.MY_PAGE}/${MENU.MESSAGE_FORM}`}>
+            <Link to={`/${MENU.MESSAGE}/${conversationId}/${MENU.MESSAGE_FORM}`}>
               <Button>쪽지 보내기</Button>
             </Link>
           </Space>