Merge pull request #546 from boostcampwm2023/#520-채팅-페이지를-나왔을-때-카메라-권…

…한이-꺼지도록-수정

Fe/bugfix,refactor/#520 채팅 페이지를 나왔을 때 카메라 권한이 꺼지도록 수정

backend/signal/src/events/events.gateway.spec.ts

@@ -202,32 +202,27 @@ describe('EventsGateway', () => {
     });
   });
 
-  describe('signal 이벤트 (offer, answer, candidate) on', () => {
-    it('offer 이벤트: 방에 offer이벤트에 받은 sdp 보냄', () => {
-      gateway.handleOfferEvent(hostSocket, ['sdp' as any, roomMock.roomId]);
-
-      expectEmitToRoom(hostSocket, roomMock.roomId, 'offer', 'sdp');
-      expect(loggerService.debug).toHaveBeenCalledWith(
-        `🚀 Offer Received from ${hostSocket.id}`,
-      );
-    });
-
-    it('answer 이벤트: 방에 answer이벤트에 받은 sdp 보냄', () => {
-      gateway.handleAnswerEvent(guestSocket, ['sdp' as any, roomMock.roomId]);
+  describe('connection 이벤트 (offer, answer, candidate) ', () => {
+    it('description(offer, answer)이 있을 때: 방에 description 보냄', () => {
+      gateway.handleConnectionEvent(hostSocket, {
+        description: 'description' as any,
+        roomName: roomMock.roomId,
+      });
 
-      expectEmitToRoom(guestSocket, roomMock.roomId, 'answer', 'sdp');
-      expect(loggerService.debug).toHaveBeenCalledWith(
-        `🚀 Answer Received from ${guestSocket.id}`,
-      );
+      expectEmitToRoom(hostSocket, roomMock.roomId, 'connection', {
+        description: 'description',
+      });
     });
 
-    it('candidate 이벤트: 방에 candidate이벤트에 받은 candidate 보냄', () => {
-      gateway.handleCandidateEvent(guestSocket, ['candidate' as any, 'roomId']);
+    it('candidate가 있을 때: 방에 candidate 보냄', () => {
+      gateway.handleConnectionEvent(hostSocket, {
+        candidate: 'candidate' as any,
+        roomName: roomMock.roomId,
+      });
 
-      expectEmitToRoom(guestSocket, 'roomId', 'candidate', 'candidate');
-      expect(loggerService.debug).toHaveBeenCalledWith(
-        `🚀 Candidate Received from ${guestSocket.id}`,
-      );
+      expectEmitToRoom(hostSocket, roomMock.roomId, 'connection', {
+        candidate: 'candidate',
+      });
     });
   });
 

backend/signal/src/events/events.gateway.ts

@@ -132,31 +132,30 @@ export class EventsGateway
     this.eventEmit(socket, 'joinRoomSuccess', roomId);
   }
 
-  @SubscribeMessage<HumanClientEvent>('offer')
-  handleOfferEvent(
+  @SubscribeMessage('connection')
+  handleConnectionEvent(
     socket: Socket,
-    [sdp, roomName]: [RTCSessionDescription, string],
+    {
+      description,
+      candidate,
+      roomName,
+    }: {
+      description?: RTCSessionDescription;
+      candidate?: RTCIceCandidate;
+      roomName: string;
+    },
   ) {
-    this.logger.debug(`🚀 Offer Received from ${socket.id}`);
-    this.eventEmitToRoom(socket, roomName, 'offer', sdp);
-  }
-
-  @SubscribeMessage<HumanClientEvent>('answer')
-  handleAnswerEvent(
-    socket: Socket,
-    [sdp, roomName]: [RTCSessionDescription, string],
-  ) {
-    this.logger.debug(`🚀 Answer Received from ${socket.id}`);
-    this.eventEmitToRoom(socket, roomName, 'answer', sdp);
-  }
-
-  @SubscribeMessage<HumanClientEvent>('candidate')
-  handleCandidateEvent(
-    socket: Socket,
-    [candidate, roomName]: [RTCIceCandidate, string],
-  ) {
-    this.logger.debug(`🚀 Candidate Received from ${socket.id}`);
-    this.eventEmitToRoom(socket, roomName, 'candidate', candidate);
+    try {
+      if (description) {
+        this.logger.debug(`🚀 ${description.type} Received from ${socket.id}`);
+        this.eventEmitToRoom(socket, roomName, 'connection', { description });
+      } else if (candidate) {
+        this.logger.debug(`🚀 Candidate Received from ${socket.id}`);
+        this.eventEmitToRoom(socket, roomName, 'connection', { candidate });
+      }
+    } catch (error) {
+      this.logger.error(`🚀 Error in handleMessageEvent : ${error}`);
+    }
   }
 
   @SubscribeMessage<HumanClientEvent>('checkRoomExist')
@@ -178,7 +177,7 @@ export class EventsGateway
   public eventEmitToRoom(
     socket: Socket,
     roomName: string,
-    event: HumanServerEvent,
+    event: HumanServerEvent | 'connection',
     ...args: any[]
   ) {
     socket.to(roomName).emit(event, ...args);

frontend/__mocks__/zustand.ts

@@ -36,6 +36,13 @@ export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
   return typeof stateCreator === 'function' ? createStoreUncurried(stateCreator) : createStoreUncurried;
 }) as typeof zustand.createStore;
 
+window.MediaStream = vi.fn().mockReturnValue({
+  getTracks: vi.fn().mockReturnValue([
+    { enabled: true, id: 'test' },
+    { enabled: true, id: 'test' },
+  ]),
+});
+
 // reset all stores after each test run
 afterEach(() => {
   act(() => {

frontend/package.json

@@ -69,7 +69,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.11",
     "vite-tsconfig-paths": "^4.2.3",
-    "vitest": "^1.2.0"
+    "vitest": "^1.3.0"
   },
   "msw": {
     "workerDirectory": "public"