controller 기능 추가

client/src/components/Room/Controller.js

@@ -8,7 +8,8 @@ import micoff_btn from "../../images/micoffbtn.png";
 import React, { useState } from "react";
 
 const Controller = (props) => {
-  const { mic, video, speaker, setMic, setSpeaker, setVideo } = props;
+  console.log(props);
+  const { mic, video, speaker, micClick, speakerClick, videoClick } = props;
   return (
     <div className="container">
       <div className="row">
@@ -23,27 +24,27 @@ const Controller = (props) => {
         >
           {mic ? (
             <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick={setMic}>
-                <img src={micoff_btn} width="45" height="40" />
+              <button type="button" className="btn" onClick={micClick}>
+                <img src={mic_btn} width="45" height="40" />
               </button>
             </div>
           ) : (
             <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick={setMic}>
-                <img src={mic_btn} width="45" height="40" />
+              <button type="button" className="btn" onClick={micClick}>
+                <img src={micoff_btn} width="45" height="40" />
               </button>
             </div>
           )}
           {speaker ? (
             <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick={setSpeaker}>
-                <img src={speakeroff_btn} width="45" />
+              <button type="button" className="btn" onClick={speakerClick}>
+                <img src={speaker_btn} width="45" />
               </button>
             </div>
           ) : (
             <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick={setSpeaker}>
-                <img src={speaker_btn} width="45" />
+              <button type="button" className="btn" onClick={speakerClick}>
+                <img src={speakeroff_btn} width="45" />
               </button>
             </div>
           )}
@@ -54,15 +55,15 @@ const Controller = (props) => {
                 className="btn"
                 data-bs-toggle="modal"
                 data-bs-target="#shareModal"
-                onClick={setVideo}
+                onClick={videoClick}
               >
-                <img src={videooff_btn} width="45" />
+                <img src={video_btn} width="45" />
               </button>
             </div>
           ) : (
             <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick={setVideo}>
-                <img src={video_btn} width="45" />
+              <button type="button" className="btn" onClick={videoClick}>
+                <img src={videooff_btn} width="45" />
               </button>
             </div>
           )}

client/src/components/Room/Screen.js

@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import Video from "./Video";
 import { useParams } from "react-router-dom";
 
-const Screen = () => {
+const Screen = (props) => {
   const [socket, setSocket] = useState(null);
   const [users, setUsers] = useState([]);
   const { roomId, channelId } = useParams();
@@ -97,11 +97,13 @@ const Screen = () => {
 
     navigator.mediaDevices
       .getUserMedia({
-        audio: true,
-        video: {
-          width: 375,
-          height: 260,
-        },
+        audio: props.audio,
+        video: props.video
+          ? {
+              width: 375,
+              height: 260,
+            }
+          : false,
       })
       .then((stream) => {
         if (localVideoRef.current) localVideoRef.current.srcObject = stream;
@@ -245,6 +247,7 @@ const Screen = () => {
         >
           {console.log(users)}
           <img
+            alt="sharerImg"
             className="rounded-circle me-2"
             src="/cherry.jpg"
             width="40px"

client/src/pages/RoomPage.js

-import Header from '../components/Header'
-import ChannelList from '../components/Room/ChannelList'
-import RoomHeader from '../components/Room/RoomHeader'
-import Screen from '../components/Room/Screen'
-import User from '../components/Room/User'
-import Controller from '../components/Room/Controller'
+import Header from "../components/Header";
+import ChannelList from "../components/Room/ChannelList";
+import RoomHeader from "../components/Room/RoomHeader";
+import Screen from "../components/Room/Screen";
+import User from "../components/Room/User";
+import Controller from "../components/Room/Controller";
+import { useState } from "react";
 
 const RoomPage = () => {
+  const [mic, setMic] = useState(true);
+  const [speaker, setSpeaker] = useState(true);
+  const [video, setVideo] = useState(true);
+
+  const micClick = () => setMic(!mic);
+  const speakerClick = () => setSpeaker(!speaker);
+  const videoClick = () => setVideo(!video);
   return (
     <div>
       {/* <Header hamburger={ChannelList} /> */}
       <ChannelList />
       <RoomHeader />
-      <Screen />
+      <Screen mic={mic} video={video} />
       <User />
-      <Controller />
+      <Controller
+        mic={mic}
+        speaker={speaker}
+        video={video}
+        micClick={micClick}
+        speakerClick={speakerClick}
+        videoClick={videoClick}
+      />
     </div>
-  )
-}
+  );
+};
 
-export default RoomPage
+export default RoomPage;