0705

client/src/components/Header.js

-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom'
 const Header = () => {
   return (
     <div>
       <form
-        style={{ backgroundColor: "#FCF4FF" }}
+        style={{ backgroundColor: '#FCF4FF' }}
         className="flex-column align-items-center justify-content-center p-2"
       >
         <div className="d-flex justify-content-center">
           <Link to="/user">
-            <img src="/BORA.png" style={{ width: "160px" }} />
+            <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>
         </div>
       </form>
       <div
-        style={{ backgroundColor: "#262626", width: "auto", height: "2px" }}
+        style={{ backgroundColor: '#262626', width: 'auto', height: '2px' }}
       ></div>
     </div>
-  );
-};
+  )
+}
 
-export default Header;
+export default Header

client/src/components/Room/Controller.js

@@ -2,40 +2,48 @@ import ScreenSelect from './ScreenSelect'
 import video_btn from '../../videobtn.png'
 import speaker_btn from '../../speakerbtn.png'
 import mic_btn from '../../micbtn.png'
+import videooff_btn from '../../videooffbtn.png'
+import speakeroff_btn from '../../speakeroffbtn.png'
+import micoff_btn from '../../micoffbtn.png'
 const Controller = () => {
   return (
     <div className="container">
-      <div className="row">
-        <div
-          className="col d-flex justify-content-center"
-          style={{ backgroundColor: '#C4C4C4' }}
-        >
-          <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" />
+              </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>
+            </div>
           </div>
-          <div className="col d-flex justify-content-center">
-            <button type="button" className="btn">
-              <img src={speaker_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={video_btn} width="45" />
-            </button>
-          </div>
+          <ScreenSelect />
         </div>
-        <ScreenSelect />
       </div>
-    </div>
   )
 }
 

client/src/components/Room/RoomHeader.js

-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom'
 
 const RoomHeader = () => {
   return (
@@ -6,7 +6,7 @@ const RoomHeader = () => {
       <div className="row">
         <div
           className=" col d-flex justify-content-space-between"
-          style={{ backgroundColor: "#C4C4C4" }}
+          style={{ backgroundColor: '#C4C4C4' }}
         >
           <img
             className="m-2 rounded-circle"
@@ -17,26 +17,38 @@ const RoomHeader = () => {
           <p
             className="m-2"
             style={{
-              fontWeight: "bold",
-              fontSize: "15px",
-              whiteSpace: "pre-wrap",
+              fontWeight: 'bold',
+              fontSize: '15px',
             }}
           >
-            <p>데계 재밌는 수학과</p> #ASV2AE98
+            <p
+              style={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                width: '110px',
+              }}
+            >
+              데계 재밌는 수학과
+            </p>{' '}
+            #ASV2AE985
           </p>
-          <p className="m-2" style={{ fontWeight: "bold", fontSize: "20px" }}>
-            회의
+          <p
+            className='mt-3'
+            style={{ fontWeight: 'bold', fontSize: '20px', color: '#571e80' }}
+          >
+            Ch.회의
           </p>
           <Link to="/user">
             <button
               type="button"
-              className="m-2 rounded"
+              className="mt-3 ms-3 rounded"
               style={{
-                height: "30px",
-                fontWeight: "bold",
-                backgroundColor: "#E8B7FF",
-                color: "black",
-                border: "1px #f4c1f2",
+                height: '30px',
+                fontWeight: 'bold',
+                backgroundColor: '#E8B7FF',
+                color: 'black',
+                border: '1px #f4c1f2',
               }}
             >
               돌아가기
@@ -45,7 +57,7 @@ const RoomHeader = () => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default RoomHeader;
+export default RoomHeader