From d27387dd73fea785752a5ce453864fac5bb31612 Mon Sep 17 00:00:00 2001
From: today-is-first <diligent0644@gmail.com>
Date: Thu, 28 Nov 2024 13:56:50 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20=ED=86=A0?=
 =?UTF-8?q?=EA=B8=80=20=EC=8B=9C=20=ED=8A=B8=EB=9E=99=20On/Off=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gamePage/rightSection/CameraSettingButton.tsx      | 10 +++++++++-
 .../gamePage/rightSection/MikeSettingButton.tsx        | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx b/packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx
index e710ddb..57b6840 100644
--- a/packages/frontend/src/components/gamePage/rightSection/CameraSettingButton.tsx
+++ b/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"
diff --git a/packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx b/packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx
index 7292a19..8645b8f 100644
--- a/packages/frontend/src/components/gamePage/rightSection/MikeSettingButton.tsx
+++ b/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"