Refactor/#129-K: ConfMediaBar 컴포넌트 관련 리팩토링 (#133)

Author: se030

client/src/components/ConfMediaBar/index.tsx

@@ -1,11 +1,20 @@
+import { io } from 'socket.io-client';
+import env from 'src/config';
+import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
+
 import ConfMedia from './ConfMedia';
 import style from './style.module.scss';
 
 interface ConfMediaBarProps {
-  streams: Map<string, MediaStream>;
+  workspaceId?: string;
 }
 
-function ConfMediaBar({ streams }: ConfMediaBarProps) {
+function ConfMediaBar({ workspaceId }: ConfMediaBarProps) {
+  const socketUrl = `${env.SERVER_PATH}/signaling/${workspaceId}`;
+  const socket = io(socketUrl);
+
+  const streams = useConfMediaStreams(socket);
+
   return (
     <div className={style['conf-bar']}>
       <ul>

client/src/components/Confbar/index.tsx

@@ -1,22 +1,33 @@
-import Confbar from 'components/Confbar';
 import Mom from 'components/Mom';
 import Sidebar from 'components/Sidebar';
-import { TMom } from 'src/types/mom';
-import { TUser } from 'src/types/user';
-
+import { useEffect, useState } from 'react';
+import { getWorkspaceInfo } from 'src/apis/workspace';
+import { WorkspaceInfo } from 'src/types/workspace';
 interface WorkspaceProps {
-  name: string;
-  members: TUser[];
-  moms: TMom[];
+  workspaceId?: string;
 }
 
-function Workspace({ name, members, moms }: WorkspaceProps) {
+function Workspace({ workspaceId }: WorkspaceProps) {
+  const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
+
+  useEffect(() => {
+    loadWorkspaceInfo();
+  }, []);
+
+  const loadWorkspaceInfo = async () => {
+    if (workspaceId) {
+      const workspaceInfo = await getWorkspaceInfo({ id: workspaceId });
+      setWorkspace(workspaceInfo);
+    }
+  };
+
   return (
-    <>
-      <Sidebar />
-      <Mom />
-      <Confbar />
-    </>
+    workspace && (
+      <>
+        <Sidebar />
+        <Mom />
+      </>
+    )
   );
 }
 

client/src/components/Workspace/index.tsx

@@ -4,30 +4,49 @@ import { STUN_SERVER } from 'src/constants/rtc';
 import RTC from 'src/utils/rtc';
 
 export function useConfMediaStreams(socket: Socket) {
-  const [mediaStreams, setMediaStreams] = useState<Map<string, MediaStream>>(new Map());
+  const [mediaStreams, setMediaStreams] = useState<Map<string, MediaStream>>(
+    new Map(),
+  );
+
+  const initRTC = async () => {
+    const userMedia = await navigator.mediaDevices.getUserMedia({
+      video: true,
+      audio: true,
+    });
+    setMediaStreams((prev) =>
+      copyMapWithOperation(prev, (map) => map.set('me', userMedia)),
+    );
+
+    const rtc = new RTC(socket, STUN_SERVER, userMedia);
+
+    rtc.onMediaConnected((socketId, remoteStream) => {
+      setMediaStreams((prev) =>
+        copyMapWithOperation(prev, (map) => map.set(socketId, remoteStream)),
+      );
+    });
+
+    rtc.onMediaDisconnected((socketId) => {
+      setMediaStreams((prev) =>
+        copyMapWithOperation(prev, (map) => map.delete(socketId)),
+      );
+    });
+
+    rtc.connect();
+  };
 
   useEffect(() => {
-    (async () => {
-      const userMedia = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
-      setMediaStreams(prev => copyMapWithOperation(prev, map => map.set('me', userMedia)));
-
-      const rtc = new RTC(socket, STUN_SERVER, userMedia);
-      rtc.onMediaConnected((socketId, remoteStream) => {
-        setMediaStreams(prev => copyMapWithOperation(prev, map => map.set(socketId, remoteStream)));
-      });
-      rtc.onMediaDisconnected((socketId) => {
-        setMediaStreams(prev => copyMapWithOperation(prev, map => map.delete(socketId)));
-      });
-      rtc.connect();
-  })();
-  }, [])
+    initRTC();
+  }, []);
 
   return mediaStreams;
 }
 
 // TODO: 코드 반복때문에 만든 함수. 더 좋은 방법 있으면 고치기
-function copyMapWithOperation<K, V>(prev: Map<K, V>, operation: (cur: Map<K, V>) => void) {
+function copyMapWithOperation<K, V>(
+  prev: Map<K, V>,
+  operation: (cur: Map<K, V>) => void,
+) {
   const cur = new Map(prev);
   operation(cur);
   return cur;
-}
+}

client/src/hooks/useConfMediaStreams.tsx

@@ -1,47 +1,18 @@
 import Workspace from 'components/Workspace';
 import WorkspaceList from 'components/WorkspaceList';
-import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { io } from 'socket.io-client';
-import { getWorkspaceInfo } from 'src/apis/workspace';
 import ConfMediaBar from 'src/components/ConfMediaBar';
-import config from 'src/config';
-import { useConfMediaStreams } from 'src/hooks/useConfMediaStreams';
-import { WorkspaceInfo } from 'src/types/workspace';
 
 import style from './style.module.scss';
 
 function WorkspacePage() {
-  const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
-
   const { id } = useParams();
-  const socketUrl = `${config.SERVER_PATH}/signaling/${id}`;
-  const socket = io(socketUrl);
-
-  const confMediaStreams = useConfMediaStreams(socket);
-
-  const loadWorkspaceInfo = async () => {
-    if (id) {
-      const workspaceInfo = await getWorkspaceInfo({ id });
-      setWorkspace(workspaceInfo);
-    }
-  };
-
-  useEffect(() => {
-    loadWorkspaceInfo();
-  }, []);
 
   return (
     <div className={style.container}>
       <WorkspaceList />
-      {workspace && ( // TODO: 임시로 만들었어요
-        <Workspace
-          name={workspace.name}
-          members={workspace.members}
-          moms={workspace.moms}
-        />
-      )}
-      <ConfMediaBar streams={confMediaStreams} />
+      <Workspace workspaceId={id} />
+      <ConfMediaBar workspaceId={id} />
     </div>
   );
 }