Merge remote-tracking branch 'origin/jiweon827' into seoyeon2

client/src/components/Home/AddRoom.js

@@ -122,8 +122,8 @@ const AddRoom = () => {
             </div>
             <div className="modal-body">
               <h6>방프로필사진</h6>
-              <div className="filebox mb-4">
-                <input type="file" id="ex_filename" className="upload-hidden" />
+              <div className="mb-4">
+                <input type="file" className="upload-hidden" />
               </div>
               <h6>방이름</h6>
               <div className="input-group">

client/src/components/Room/ChannelList.js

@@ -59,43 +59,45 @@ const ChannelList = () => {
 
         <div className="overflow-auto" style={{ height: '610px' }}>
           <div className="mb-3">
-            <div className="m-3 p-2 row" style={{ backgroundColor: '#C4C4C4' }}>
-              <img
-                className="col-auto"
-                src="/fullSpeaker.png"
-                width="30px"
-                height="30px"
-              />
-              <h5 className="col">회의</h5>
+            <div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
+              <img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
+              <h5 className="col mt-2">회의</h5>
             </div>
             <div className="mx-5">
               <ChannelSingle />
             </div>
           </div>
+
           <div className="mb-3">
-            <div className="m-3 p-2" style={{ backgroundColor: '#C4C4C4' }}>
-              <h5>사담</h5>
+            <div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
+              <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+              <h5 className="col mt-2">사담</h5>
             </div>
             <div className="mx-5">
               <ChannelSingle />
             </div>
           </div>
+
           <div className="mb-3">
-            <div className="m-3 p-2" style={{ backgroundColor: '#C4C4C4' }}>
-              <h5>공지</h5>
+            <div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
+              <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+              <h5 className="col mt-2">공지1</h5>
             </div>
             <div className="mx-5">
               <ChannelSingle />
             </div>
           </div>
+
           <div className="mb-3">
-            <div className="m-3 p-2" style={{ backgroundColor: '#C4C4C4' }}>
-              <h5>공지</h5>
+            <div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
+              <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+              <h5 className="col mt-2">공지2</h5>
             </div>
             <div className="mx-5">
               <ChannelSingle />
             </div>
           </div>
+          
         </div>
 
         <div className="d-flex flex-row-reverse">

client/src/components/Room/Controller.js

@@ -5,45 +5,75 @@ import mic_btn from '../../micbtn.png'
 import videooff_btn from '../../videooffbtn.png'
 import speakeroff_btn from '../../speakeroffbtn.png'
 import micoff_btn from '../../micoffbtn.png'
+import React, { useState } from 'react';
+
 const Controller = () => {
+  const [mic, setMic] = useState("true")
+  const [video, setVideo] = useState("true")
+  const [speaker, setSpeaker] = useState("true")
+
+  const micOn = (() => setMic(false));
+  const micOff = (() => setMic(true));
+  const speakerOn = (() => setSpeaker(false));
+  const speakerOff = (() => setSpeaker(true));
+  const videoOn = (() => setVideo(false));
+  const videoOff = (() => setVideo(true));
+
   return (
     <div className="container">
-        <div className="row">
-          <div
-            className="col d-flex justify-content-center"
-            style={{ backgroundColor: '#C4C4C4', position:'absolute', bottom:0 }}
-          >
-            {/* <div className="col d-flex justify-content-center"> 
+      <div className="row">
+        <div
+          className="col d-flex justify-content-center"
+          style={{ backgroundColor: '#C4C4C4', position: 'absolute', bottom: 0 }}
+        >
+          {/* <div className="col d-flex justify-content-center"> 
             <button type="button" className="btn">
               <img src={mic_btn} width="45" height="40" />
             </button>
           </div> */}
-            <div className="col d-flex justify-content-center">
-              <button type="button" className="btn" onClick>
-                <img src={micoff_btn} width="45" height="40" />
-              </button>
-            </div>
-            <div className="col d-flex justify-content-center">
-              <button type="button" className="btn">
-                <img src={speakeroff_btn} width="45" />
+          {mic ? <div className="col d-flex justify-content-center">
+            <button type="button" className="btn" onClick={micOn}>
+              <img src={micoff_btn} width="45" height="40" />
+            </button>
+          </div>
+            : <div className="col d-flex justify-content-center">
+              <button type="button" className="btn" onClick={micOff}>
+                <img src={mic_btn} width="45" height="40" />
               </button>
             </div>
+          }
+          {speaker ? <div className="col d-flex justify-content-center">
+            <button type="button" className="btn" onClick={speakerOn}>
+              <img src={speakeroff_btn} width="45" />
+            </button>
+          </div> : <div className="col d-flex justify-content-center">
+            <button type="button" className="btn" onClick={speakerOff}>
+              <img src={speaker_btn} width="45" />
+            </button>
+          </div>
+          }
+          {video ? <div className="col d-flex justify-content-center">
+            <button
+              type="button"
+              className="btn"
+              data-bs-toggle="modal"
+              data-bs-target="#exampleModal"
+              src={video_btn}
+              onClick="location.href='ScreenSelect.js'"
+              onClick={videoOn}
+            >
+              <img src={videooff_btn} width="45" />
+            </button>
+          </div> :
             <div className="col d-flex justify-content-center">
-              <button
-                type="button"
-                className="btn"
-                data-bs-toggle="modal"
-                data-bs-target="#exampleModal"
-                src={video_btn}
-                onClick="location.href='ScreenSelect.js'"
-              >
-                <img src={videooff_btn} width="45" />
+              <button type="button" className="btn" onClick={videoOff}>
+                <img src={video_btn} width="45" />
               </button>
-            </div>
-          </div>
-          <ScreenSelect />
+            </div>}
         </div>
+        <ScreenSelect />
       </div>
+    </div>
   )
 }