Feat/#254-C: 피어가 캠/마이크 조작 시 아이콘 변경 (#336)

* feat: 캠/마이크 상태 전달을 위한 소켓 이벤트 핸들링
* feat: 피어가 캠/마이크 조작 시 아이콘 변경
* fix: 불필요한 key 제거

Author: wcho21

client/src/components/MeetingMediaBar/index.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useState } from 'react';
-import { useMeetingMediaStreams } from 'src/hooks/useMeetingMediaStreams';
+import {
+  useMeetingMediaStreamsV2,
+  MeetingMediaStream,
+} from 'src/hooks/useMeetingMediaStreamsV2';
 import useSocketContext from 'src/hooks/useSocketContext';
 
 import MeetingMedia from './MeetingMedia';
@@ -8,35 +11,33 @@ import style from './style.module.scss';
 
 function MeetingMediaBar() {
   const { workspaceSocket: socket } = useSocketContext();
-  const [streams, setMyTrack] = useMeetingMediaStreams(socket);
+  const [streams, setLocalAudio, setLocalVideo] =
+    useMeetingMediaStreamsV2(socket);
 
   const [isMicOn, setIsMicOn] = useState(true);
   const [isCamOn, setIsCamOn] = useState(true);
 
   useEffect(() => {
-    setMyTrack('audio', isMicOn);
+    setLocalAudio(isMicOn);
   }, [isMicOn]);
 
   useEffect(() => {
-    setMyTrack('video', isCamOn);
+    setLocalVideo(isCamOn);
   }, [isCamOn]);
 
   return (
     <div className={style['meeting-bar']}>
       <ul>
-        {Array.from(streams).map(([id, stream]) => (
-          <li key={id}>
-            <MeetingMedia
-              key={id}
-              stream={stream}
-              muted={id === 'me' ? true : false}
-            />
-            <StreamButton
-              isMicOn={false}
-              isCamOn={true} // TODO: 임시로 지정
-            />
-          </li>
-        ))}
+        {streams.map(
+          ({ id, stream, type, audioOn, videoOn }: MeetingMediaStream) => (
+            <li key={id}>
+              <MeetingMedia stream={stream} muted={type === 'local'} />
+              {type === 'remote' && (
+                <StreamButton isMicOn={audioOn} isCamOn={videoOn} />
+              )}
+            </li>
+          ),
+        )}
       </ul>
       <StreamButton
         {...{