[feat] 채팅방 생성하기 API 연동

package.json

@@ -41,6 +41,7 @@
     "react-hot-toast": "^2.4.0",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
+    "socket.io-client": "^4.5.2",
     "typescript": "~4.1.5",
     "uuid": "^9.0.0",
     "yup": "^0.32.11",

src/__mocks__/chat.ts

@@ -60,6 +60,7 @@ export const messageInfoMocks = [
 
 export const chatListMocks = [
   {
+    boardId: 1,
     roomImage: profileList,
     title:
       '소프트웨어학과 남자 3명 소프트웨어학과 남자 3명소프트웨어학과 남자 3명소프트웨어학과 남자 3명소프트웨어학과 남자 3명',
@@ -69,6 +70,7 @@ export const chatListMocks = [
     count: '26',
   },
   {
+    boardId: 2,
     roomImage: profileList,
     title:
       '심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명 심리학과 여자 4명',
@@ -77,13 +79,15 @@ export const chatListMocks = [
     count: '38',
   },
   {
+    boardId: 3,
     roomImage: profileList,
     title: '간호학과 여자 3명 간호학과 여자 3명',
     content: '안녕하세용',
     time: '오전 1:35',
     count: '5',
   },
   {
+    boardId: 4,
     roomImage: profileList,
     title: '화학과 남자 3명',
     content: ':):D',

src/__mocks__/myMeeting.ts

@@ -149,184 +149,109 @@ export const registerMeetingMocks = [
   },
 ];
 
-export const requestListMocks = [
+export const requestedListMocks = [
   {
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    boardId: 1,
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 2,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 3,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
     ],
     date: '27초 전',
   },
   {
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    boardId: 2,
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 4,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 5,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 6,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
     ],
     date: '27초 전',
   },
   {
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    boardId: 3,
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 7,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 8,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 9,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
     ],
     date: '27초 전',
   },
   {
-    comment: '공대도 받아주세요! ~~~~~~~~~~~~~~',
+    boardId: 4,
+    title: '공대도 받아주세요! ~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 10,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 11,
         nickName: '라이언',
         src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
       },
       {
+        id: 12,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
     ],
     date: '27초 전',
   },
-  {
-    comment: '술 잘 먹어요 ㅎㅎ',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
-      },
-      {
-        nickName: '라이언',
-        src: 'http://cdn.ksilbo.co.kr/news/photo/201911/736241_408290_1458.jpg',
-      },
-    ],
-    date: '30분 전',
-  },
-  {
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
-  {
-    comment: '공대도 받아주세요 !',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '27초 전',
-  },
-  {
-    comment: '술 잘 먹어요 ㅎㅎ',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '30분 전',
-  },
-  {
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
-  {
-    comment: '공대도 받아주세요 !',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '27초 전',
-  },
-  {
-    comment: '술 잘 먹어요 ㅎㅎ',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '30분 전',
-  },
-  {
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
-  {
-    comment: '전정대랑 과팅합시다앙',
-    requestedInfo: [
-      {
-        nickName: '라이언',
-        src: 'https://thumb.mt.co.kr/06/2021/12/2021122022255032493_1.jpg/dims/optimize/',
-      },
-    ],
-    date: '2일 전',
-  },
 ];
 
 export const requestMeetingMocks = [
   {
-    comment: '내가 신청함~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
+    boardId: 1,
+    title: '내가 신청함~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
       {
+        id: 2,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -335,9 +260,11 @@ export const requestMeetingMocks = [
     state: true,
   },
   {
-    comment: '신청2',
+    boardId: 2,
+    title: '신청2',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -346,9 +273,11 @@ export const requestMeetingMocks = [
     state: false,
   },
   {
-    comment: '내가 신청함',
+    boardId: 3,
+    title: '내가 신청함',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },
@@ -357,9 +286,11 @@ export const requestMeetingMocks = [
     state: true,
   },
   {
-    comment: '신청2',
+    boardId: 4,
+    title: '신청2',
     requestedInfo: [
       {
+        id: 1,
         nickName: '라이언',
         src: 'http://cdn.ggilbo.com/news/photo/202110/873065_702693_2620.jpg',
       },

src/api/chat/index.ts

@@ -0,0 +1,11 @@
+import { http } from 'src/api/core';
+
+const createChatRoom = async ({
+  boardId,
+  body,
+}: req.CreateChatRoom): Promise<res.CreateChatRoom> => {
+  const response = await http.post(`/board/${boardId}/chat`, body);
+  return response.data;
+};
+
+export { createChatRoom };

src/components/Chat/ChatList/index.tsx → src/components/Chat/ChatItem/index.tsx

@@ -5,6 +5,7 @@ import MutiProfile from 'src/components/shared/MultiProfile';
 import $ from './style.module.scss';
 
 interface Props {
+  boardId: number;
   roomImage: {
     name: string;
     imageUrl: string;
@@ -15,15 +16,16 @@ interface Props {
   count: string;
 }
 
-export default function ChatList({
+export default function ChatItem({
+  boardId,
   roomImage,
   title,
   content,
   time,
   count,
 }: Props) {
   const navigate = useNavigate();
-  const chatListRef = useRef<HTMLLIElement | null>(null);
+  const chatItemRef = useRef<HTMLLIElement | null>(null);
   const profileList = useMemo(
     () =>
       roomImage
@@ -38,11 +40,12 @@ export default function ChatList({
   );
 
   const fetchChatRoom = () => {
-    navigate('./room');
+    navigate(`./room/${boardId}`);
   };
+
   return (
-    <li className={$['chat-list']} onClick={() => fetchChatRoom()}>
-      <MutiProfile profileList={profileList} parentRef={chatListRef} />
+    <li className={$['chat-item']} onClick={() => fetchChatRoom()}>
+      <MutiProfile profileList={profileList} parentRef={chatItemRef} />
       <div className={$['chat-info']}>
         <div className={$['main-info']}>
           <strong>{title}</strong>

src/components/Chat/ChatList/style.module.scss → src/components/Chat/ChatItem/style.module.scss

@@ -1,26 +1,28 @@
 @import 'src/styles/_color.scss';
 @import 'src/styles/_mixin.scss';
 
-.chat-list {
+.chat-item {
   display: flex;
   align-items: center;
-  height: 70px;
   border-bottom: 1px solid $gray-250;
-  padding: 0 5px;
+  padding: 10px;
   cursor: pointer;
 
   .chat-info {
-    width: calc(100% - 45px);
+    width: 100%;
     display: flex;
+    margin-left: 10px;
     overflow: hidden;
+
     & > .main-info,
     .more-info {
       display: flex;
       flex-direction: column;
     }
 
     .main-info {
-      max-width: 70%;
+      max-width: calc(100% - #{$boardDesktopImage + 15px});
+
       strong {
         font-size: 16px;
         font-weight: 700;

src/components/Chat/index.ts

@@ -1,4 +1,4 @@
 export { default as ChatCard } from './ChatCard';
-export { default as ChatList } from './ChatList';
+export { default as ChatItem } from './ChatItem';
 export { default as Message } from './Message';
 export { default as MessageInput } from './MessageInput';