[Feat] 오디오/비디오 버튼 토글 제어 기능 구현

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

@@ -0,0 +1,33 @@
+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"
+      onClick={handleCamera}
+    >
+      {isCameraOn ? (
+        <CameraOn className="text-white-default" />
+      ) : (
+        <CameraOff className="text-white-default" />
+      )}
+      <p className="text-white-default text-lg">
+        카메라 {isCameraOn ? <span className="text-red-600">ON</span> : <span>OFF</span>}
+      </p>
+    </button>
+  );
+}

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

@@ -0,0 +1,31 @@
+import Leave from '@/assets/images/Leave.svg?react';
+import { useNavigate } from 'react-router-dom';
+import { useSocketStore } from '@/states/store/socketStore';
+import { useChatStore } from '@/states/store/chatStore';
+import { useRoomStore } from '@/states/store/roomStore';
+import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
+
+export default function LeaveButton() {
+  const navigate = useNavigate();
+  const socket = useSocketStore((state) => state.socket);
+  const setChatHistory = useChatStore((state) => state.setChatHistory);
+  const setRoomData = useRoomStore((state) => state.setRoomData);
+  const signalingSocket = useSignalingSocketStore((state) => state.signalingSocket);
+  function handleLeave() {
+    if (!socket || !signalingSocket) return;
+    socket.emit('leave_room');
+    signalingSocket.emit('leave_room');
+    setChatHistory([]);
+    setRoomData(null, false, false);
+    navigate('/lobby');
+  }
+  return (
+    <button
+      className="w-[120px] px-4 py-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"
+      onClick={handleLeave}
+    >
+      <Leave className="text-white-default pr-2" />
+      <p className="text-white-default text-lg">방 나가기</p>
+    </button>
+  );
+}

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

@@ -0,0 +1,33 @@
+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"
+      onClick={handleMike}
+    >
+      {isMikeOn ? (
+        <MikeOn className="text-white-default" />
+      ) : (
+        <MikeOff className="text-white-default" />
+      )}
+      <p className="text-white-default text-lg">
+        마이크 {isMikeOn ? <span className="text-red-600">ON</span> : <span>OFF</span>}
+      </p>
+    </button>
+  );
+}

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

@@ -1,40 +1,13 @@
-import { useNavigate, useParams } from 'react-router-dom';
-import { useSocketStore } from '@/states/store/socketStore';
-import CameraOn from '@/assets/images/CameraOn.svg?react';
-import MikeOn from '@/assets/images/MikeOn.svg?react';
-import Leave from '@/assets/images/Leave.svg?react';
-import { useChatStore } from '@/states/store/chatStore';
-import { useRoomStore } from '@/states/store/roomStore';
-import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
+import CameraSettingButton from '@/components/gamePage/rightSection/CameraSettingButton';
+import MikeSettingButton from '@/components/gamePage/rightSection/MikeSettingButton';
+import LeaveButton from '@/components/gamePage/rightSection/LeaveButton';
 
 export default function SettingSection() {
-  const navigate = useNavigate();
-  const socket = useSocketStore((state) => state.socket);
-  const setChatHistory = useChatStore((state) => state.setChatHistory);
-  const setRoomData = useRoomStore((state) => state.setRoomData);
-  const signalingSocket = useSignalingSocketStore((state) => state.signalingSocket);
-
-  const handleLeave = () => {
-    if (!socket || !signalingSocket) return;
-
-    socket.emit('leave_room');
-    signalingSocket.emit('leave_room');
-    setChatHistory([]);
-    setRoomData(null, false, false);
-    navigate('/lobby');
-  };
-
   return (
     <div className="flex justify-around p-4 bg-black rounded-lg opacity-80">
-      <button className="px-4 py-4 bg-transparent rounded-lg">
-        <MikeOn className="text-white-default" />
-      </button>
-      <button className="px-4 py-2 bg-transparent rounded-lg">
-        <CameraOn className="text-white-default" />
-      </button>
-      <button className="px-4 py-2 bg-transparent rounded-lg" onClick={handleLeave}>
-        <Leave className="text-white-default" />
-      </button>
+      <MikeSettingButton />
+      <CameraSettingButton />
+      <LeaveButton />
     </div>
   );
 }