Feat/chat page

.gitignore

@@ -1,2 +1,4 @@
 # dump
-dump.*
+dump.*
+package-lock.json
+node_modules

chat-server/src/common/schemas/chat.schema.ts

@@ -14,7 +14,7 @@ export class Chat {
   @Prop()
   content: string;
 
-  @Prop({ type: Date })
+  @Prop({ default: new Date() })
   createdAt: Date;
 }
 

chat-server/src/socket.gateway.ts

@@ -13,7 +13,8 @@ import { SocketService } from './socket.service';
 @WebSocketGateway({
   namespace: 'chat',
   cors: {
-    origin: ['http://localhost:3000'],
+    origin: '*',
+    credential: true,
   },
 })
 export class SocketGateway implements OnGatewayDisconnect {
@@ -27,9 +28,9 @@ export class SocketGateway implements OnGatewayDisconnect {
     @ConnectedSocket() socket: Socket,
   ): Promise<void> {
     const { recruitId } = data;
-    socket.join(recruitId); // room에 입장
+    socket.join(recruitId.toString()); // room에 입장
     await this.socketService.setCacheData(socket.id, data);
-    const recentMsg = await this.socketService.getRecentMessage();
+    const recentMsg = await this.socketService.getRecentMessage(recruitId);
     socket.emit('server_sent_recent', recentMsg);
   }
 
@@ -46,11 +47,16 @@ export class SocketGateway implements OnGatewayDisconnect {
     chat.sender = userId;
     chat.recruitId = recruitId;
     chat.content = content;
-    await this.socketService.saveRecentMessage(chat);
-    this.server.emit('server_sent', chat);
+    chat.createdAt = new Date();
+    this.server
+      .in(recruitId.toString())
+      .emit('server_sent', await this.socketService.saveRecentMessage(chat));
   }
 
   async handleDisconnect(@ConnectedSocket() socket: Socket): Promise<void> {
     await this.socketService.delCacheData(socket.id);
   }
+  async handleConnection(@ConnectedSocket() socket: Socket): Promise<void> {
+    await this.socketService.delCacheData(socket.id);
+  }
 }

chat-server/src/socket.service.ts

@@ -27,15 +27,23 @@ export class SocketService {
     return this.cacheManager.del(`id:${socketId}`);
   }
 
-  async getRecentMessage() {
+  async getRecentMessage(recruitId: number) {
     const response = await this.chatModel
-      .find()
-      .sort({ createdAt: -1 })
-      .limit(10);
+      .find({ recruitId })
+      .sort({ createdAt: -1 });
+    // .limit(10);
     return response.reverse();
   }
 
   async saveRecentMessage(chatEntity: Chat) {
-    this.chatModel.create(chatEntity);
+    return this.chatModel.create(chatEntity);
+  }
+
+  async getLatestMessage(recruitId: number) {
+    const response = await this.chatModel
+      .find({ recruitId })
+      .sort({ createdAt: -1 })
+      .limit(1);
+    return response[0];
   }
 }

client/package.json

@@ -26,6 +26,7 @@
     "react-slick": "^0.29.0",
     "react-spinners": "^0.13.7",
     "recoil": "^0.7.6",
+    "socket.io-client": "^4.5.4",
     "styled-components": "^5.3.6",
     "web-vitals": "^2.1.4"
   },

client/src/App.tsx

@@ -1,35 +1,32 @@
 import { Route, Routes } from "react-router-dom";
 import useRefreshQuery from "#hooks/queries/useRefreshQuery";
 import Layout from "#components/Layout/Layout";
-import { Suspense } from "react";
-import Loading from "#components/commons/Loading/Loading";
 import * as P from "#pages/index";
 
 function App() {
     useRefreshQuery();
     return (
         <Layout>
-            <Suspense fallback={<Loading />}>
-                <Routes>
-                    <Route path="/" element={<P.MainPage />} />
-                    <Route path="me" element={<P.MyPage />} />
-                    <Route path="signup" element={<P.SignUp />} />
-                    <Route path="login" element={<P.Login />} />
-                    <Route path="courses" element={<P.Courses />} />
-                    <Route path="recruits" element={<P.Recruits />} />
-                    <Route path="course">
-                        <Route path="new" element={<P.NewCourse />} />
-                        <Route path=":id" element={<P.CourseDetail />} />
-                    </Route>
-                    <Route path="recruit">
-                        <Route path=":id" element={<P.RecruitDetail />} />
-                    </Route>
-                    <Route path="mock">
-                        <Route path="courses" element={<P.MockCourses />} />
-                        <Route path="recruits" element={<P.MockRecruits />} />
-                    </Route>
-                </Routes>
-            </Suspense>
+            <Routes>
+                <Route path="/" element={<P.MainPage />} />
+                <Route path="me" element={<P.MyPage />} />
+                <Route path="signup" element={<P.SignUp />} />
+                <Route path="login" element={<P.Login />} />
+                <Route path="courses" element={<P.Courses />} />
+                <Route path="recruits" element={<P.Recruits />} />
+                <Route path="course">
+                    <Route path="new" element={<P.NewCourse />} />
+                    <Route path=":id" element={<P.CourseDetail />} />
+                </Route>
+                <Route path="recruit">
+                    <Route path=":id" element={<P.RecruitDetail />} />
+                    <Route path=":id/chat" element={<P.ChatPage />} />
+                </Route>
+                <Route path="mock">
+                    <Route path="courses" element={<P.MockCourses />} />
+                    <Route path="recruits" element={<P.MockRecruits />} />
+                </Route>
+            </Routes>
         </Layout>
     );
 }

client/src/assets/icons/index.ts

@@ -18,6 +18,8 @@ import CLOCK_ICON from "./clock_icon.svg";
 import START_ICON from "./start_icon.svg";
 import ARRIVE_ICON from "./arrive_icon.svg";
 import MY_POSITION_ICON from "./my_position_icon.svg";
+import SEND_ICON from "./send_icon.svg";
+
 export {
     USER_CIRCLE_ICON,
     ARROW_LEFT_ICON,
@@ -39,4 +41,5 @@ export {
     START_ICON,
     ARRIVE_ICON,
     MY_POSITION_ICON,
+    SEND_ICON,
 };