Fix: 호출 오버헤드를 줄이기 위해 커스텀 훅에서 Props 방식으로 변경

src/pages/Call.tsx

@@ -38,7 +38,7 @@ const Call = () => {
   const [contents, setContents] = useState<any>([]);
   const { audio } = useContext(AudioContext);
   const { callInfo, dispatch } = useContext(CallContext);
-  const { disconnectStream } = useStream();
+  const { stream, disconnectStream } = useStream();
   const { socket } = useSocket();
   const videos = [
     useRef<HTMLVideoElement>(null),
@@ -420,7 +420,11 @@ const Call = () => {
             text={isMuted ? "mute off" : "mute"}
             img={isMuted ? "mute.svg" : "mute-off.svg"}
           >
-            <MicrophoneSoundChecker isSmallSize={true} bgColor="lightgray" />
+            <MicrophoneSoundChecker
+              stream={stream!}
+              isSmallSize={true}
+              bgColor="lightgray"
+            />
           </CallButton>
         </div>
       </div>

src/utils/MicrophoneSoundChecker.tsx

@@ -1,18 +1,18 @@
-import { useStream } from "@hooks/useStream";
 import { useState, useEffect, FC, useRef } from "react";
 
 interface Props {
+  stream: MediaStream; // useAudio가 필요없이 호출되는 것을 방지하기 위해 Props로 전환
   icon?: boolean;
   isSmallSize?: boolean;
   bgColor?: string;
 }
 
 const MicrophoneSoundChecker: FC<Props> = ({
+  stream,
   icon = false,
   isSmallSize = false,
   bgColor = "white",
 }) => {
-  const { stream } = useStream();
   const [value, setValue] = useState(0);
   const divRef = useRef<HTMLDivElement>(null);