Refactor/#393-C: 소켓 이벤트 문자열 contants로 관리 (#394)

* refactor: 사용하지 않는 코드 삭제 (#390)
* refactor: 소켓 메시지 문자열 constants로 관리

Author: wcho21

@wabinar/constants/socket-message.ts

@@ -9,7 +9,10 @@ export const WORKSPACE_EVENT = {
   RECEIVE_ANSWER: 'receive-answer',
   SEND_ICE: 'send-ice',
   RECEIVE_ICE: 'receive-ice',
-  RECEIVE_BYE: 'receive_bye',
+  AUDIO_STATE_CHANGED: 'audio-state-changed',
+  VIDEO_STATE_CHANGED: 'video-state-changed',
+  SEND_BYE: 'send-bye',
+  RECEIVE_BYE: 'receive-bye',
 };
 
 export const MOM_EVENT = {

client/src/components/Sidebar/MeetingButton.tsx

@@ -14,7 +14,7 @@ function MeetingButton() {
 
   const onClick = () => {
     if (isOnGoing) {
-      socket.emit('bye');
+      socket.emit(WORKSPACE_EVENT.SEND_BYE);
     }
     setIsOnGoing(!isOnGoing);
   };

client/src/hooks/useMeetingMediaStreams.ts

@@ -1,3 +1,4 @@
+import { WORKSPACE_EVENT } from '@wabinar/constants/socket-message';
 import { useEffect, useState } from 'react';
 import { Socket, io } from 'socket.io-client';
 import { STUN_SERVER } from 'src/constants/rtc';
@@ -68,15 +69,15 @@ export function useMeetingMediaStreams(
       return;
     }
     setTrack(localStream, 'audio', audioOn);
-    socket.emit('audio_state_changed', audioOn);
+    socket.emit(WORKSPACE_EVENT.AUDIO_STATE_CHANGED, audioOn);
   };
 
   const setLocalVideo: SetLocalVideo = async (videoOn) => {
     if (!localStream) {
       return;
     }
     setTrack(localStream, 'video', videoOn);
-    socket.emit('video_state_changed', videoOn);
+    socket.emit(WORKSPACE_EVENT.VIDEO_STATE_CHANGED, videoOn);
   };
 
   socket.on('audio_state_changed', (socketId, audioOn) => {

server/socket/workspace.ts

@@ -35,16 +35,15 @@ function workspaceSocketServer(io: Server) {
       socket.to(receiverId).emit(WORKSPACE_EVENT.RECEIVE_ICE, ice, senderId);
     });
 
-    // TODO: 소켓 이벤트 메시지 상수화
-    socket.on('audio_state_changed', (audioOn) => {
-      namespace.emit('audio_state_changed', socket.id, audioOn);
+    socket.on(WORKSPACE_EVENT.AUDIO_STATE_CHANGED, (audioOn) => {
+      namespace.emit(WORKSPACE_EVENT.AUDIO_STATE_CHANGED, socket.id, audioOn);
     });
 
-    socket.on('video_state_changed', (videoOn) => {
-      namespace.emit('video_state_changed', socket.id, videoOn);
+    socket.on(WORKSPACE_EVENT.VIDEO_STATE_CHANGED, (videoOn) => {
+      namespace.emit(WORKSPACE_EVENT.VIDEO_STATE_CHANGED, socket.id, videoOn);
     });
 
-    socket.on('bye', () => {
+    socket.on(WORKSPACE_EVENT.SEND_BYE, () => {
       const senderId = socket.id;
       socket.broadcast.emit(WORKSPACE_EVENT.RECEIVE_BYE, senderId);
     });