feat: 아이콘 토글 시 트랙 On/Off 기능 구현

packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx

@@ -1,12 +1,20 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import CameraOn from '@/assets/images/CameraOn.svg?react';
 import CameraOff from '@/assets/images/CameraOff.svg?react';
+import { useLocalStreamStore } from '@/states/store/localStreamStore';
 
 export default function CameraSettingButton() {
+  const { localStream } = useLocalStreamStore();
   const [isCameraOn, setIsCameraOn] = useState(false);
   function handleCamera() {
     setIsCameraOn(!isCameraOn);
+    const camera = localStream?.getVideoTracks()[0];
+    if (camera) camera.enabled = !isCameraOn;
   }
+  useEffect(() => {
+    const initSetting = !!localStream?.getVideoTracks()[0];
+    setIsCameraOn(initSetting);
+  }, [localStream]);
   return (
     <button
       className="p-4 w-[120px] bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"

packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx

@@ -1,12 +1,20 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import MikeOn from '@/assets/images/MikeOn.svg?react';
 import MikeOff from '@/assets/images/MikeOff.svg?react';
+import { useLocalStreamStore } from '@/states/store/localStreamStore';
 
 export default function MikeSettingButton() {
+  const { localStream } = useLocalStreamStore();
   const [isMikeOn, setIsMikeOn] = useState(false);
   function handleMike() {
     setIsMikeOn(!isMikeOn);
+    const mike = localStream?.getAudioTracks()[0];
+    if (mike) mike.enabled = !isMikeOn;
   }
+  useEffect(() => {
+    const initSetting = !!localStream?.getAudioTracks()[0];
+    setIsMikeOn(initSetting);
+  }, [localStream]);
   return (
     <button
       className="w-[120px] p-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"