0707

client/src/components/Room/ChannelList.js

@@ -80,7 +80,7 @@ const ChannelList = () => {
           <div
             className="modal fade"
             id="exitRoom"
-            tabindex="-1"
+            tabIndex="-1"
             aria-labelledby="exitRoomLabel"
             aria-hidden="true"
           >

client/src/components/Room/Controller.js

@@ -9,8 +9,8 @@ import React, { useState } from 'react';
 
 const Controller = () => {
   const [mic, setMic] = useState("true")
-  const [video, setVideo] = useState("true")
   const [speaker, setSpeaker] = useState("true")
+  const [video, setVideo] = useState("true")
 
   const micOn = (() => setMic(false));
   const micOff = (() => setMic(true));
@@ -24,8 +24,9 @@ const Controller = () => {
       <div className="row">
         <div
           className="col d-flex justify-content-center"
-          style={{ backgroundColor: '#C4C4C4', position: 'absolute', bottom: 0, width:'414px' }}
+          style={{ backgroundColor: '#C4C4C4', position: 'absolute', bottom: 0, width: '414px' }}
         >
+
           {mic ? <div className="col d-flex justify-content-center">
             <button type="button" className="btn" onClick={micOn}>
               <img src={micoff_btn} width="45" height="40" />
@@ -52,8 +53,7 @@ const Controller = () => {
               type="button"
               className="btn"
               data-bs-toggle="modal"
-              data-bs-target="#exampleModal"
-              src={video_btn}
+              data-bs-target="#shareModal"
               onClick="location.href='ScreenSelect.js'"
               onClick={videoOn}
             >
@@ -66,8 +66,10 @@ const Controller = () => {
               </button>
             </div>}
         </div>
-        <ScreenSelect />
+        <ScreenSelect videoOff={videoOff} />
       </div>
+
+
     </div>
   )
 }

client/src/components/Room/ScreenSelect.js

-const ScreenSelect = () => {
+import Controller from "./Controller"
+
+const ScreenSelect = ({videoOff}) => {
   return (
     <div className="container">
       <div
         className="modal fade"
-        id="exampleModal"
-        tabindex="-1"
-        aria-labelledby="exampleModalLabel"
+        id="shareModal"
+        tabIndex="-1"
+        aria-labelledby="shareModalLabel"
         aria-hidden="true"
       >
         <div className="modal-dialog">
           <div className="modal-content">
             <div className="modal-header">
-              <h5 className="modal-title" id="exampleModalLabel">
+              <h5 className="modal-title" id="shareModalLabel">
                 공유 화면 선택
               </h5>
               <button
@@ -19,20 +21,21 @@ const ScreenSelect = () => {
                 className="btn-close"
                 data-bs-dismiss="modal"
                 aria-label="Close"
+                onClick={videoOff}
               ></button>
             </div>
             <div className="modal-body">
               <div className="row">
                 <div className="col-sm-6 mb-3">
                   <div className="card">
-                    <div style={{ height:'150px'}} className="card-body">
+                    <div style={{ height: '150px' }} className="card-body">
                       <p className="card-text">공유화면1</p>
                     </div>
                   </div>
                 </div>
                 <div className="col-sm-6">
                   <div className="card">
-                    <div style={{ height:'150px'}} className="card-body">
+                    <div style={{ height: '150px' }} className="card-body">
                       <p className="card-text">공유화면2</p>
                     </div>
                   </div>