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

client/src/components/Home/AddRoom.js

 const AddRoom = () => {
   return (
-    <form className="m-3">
-      <div className="row justify-content-around">
-        <div className="col pt-2">
-          <h4>참여중인 방목록</h4>
+    <div>
+      <div className="mx-4 my-3 d-flex justify-content-between">
+        <div className="fs-4">
+          참여중인 방목록
         </div>
         <button
           type="button"
-          className="col-2 btn btn-info"
+          className="py-1 px-2"
           data-bs-toggle="modal"
           data-bs-target="#myModal"
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            borderStyle: "solid",
+            borderRadius: "5px",
+            backgroundColor: "#E0CEE8",
+            borderColor: "#E0CEE8",
+          }}
         >
-          +
+          추가
         </button>
       </div>
 
@@ -39,8 +47,8 @@ const AddRoom = () => {
                       flexDirection: "column",
                       borderStyle: "solid",
                       borderRadius: "5px",
-                      backgroundColor: "#f6c7ba",
-                      borderColor: "#f6c7ba",
+                      backgroundColor: "#E0CEE8",
+                      borderColor: "#E0CEE8",
                     }}
                   >
                     <div style={{ width: "6rem" }} >
@@ -59,8 +67,8 @@ const AddRoom = () => {
                       flexDirection: "column",
                       borderStyle: "solid",
                       borderRadius: "5px",
-                      backgroundColor: "#f6c7ba",
-                      borderColor: "#f6c7ba",
+                      backgroundColor: "#f5cfe3",
+                      borderColor: "#f5cfe3",
                     }}
                   >
                     <div style={{ width: "6rem" }} >
@@ -122,8 +130,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">
@@ -144,7 +152,7 @@ const AddRoom = () => {
           </div>
         </div>
       </div>
-    </form>
+    </div>
   );
 };
 

client/src/components/Home/RoomSingle.js

@@ -16,7 +16,7 @@ const RoomSingle = () => {
             style={{ width: "37px", height: "37px" }}
           />
         </div>
-        <div className="text-truncate mx-3 mt-2" style={{ width: "250px" }} title="데계 재미있는 수학과 데계데계데계 재미있는 수학과">
+        <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
           데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
         <div className="ms-auto mt-2"> 15/34 </div>
       </div>
@@ -32,8 +32,24 @@ const RoomSingle = () => {
             style={{ width: "37px", height: "37px" }}
           />
         </div>
-        <marquee className="text-overflow-auto white-space-nowrap mx-3 mt-2" style={{ width: "250px" }} title="데계 재미있는 수학과 데계데계데계 재미있는 수학과">
-          데계 재미있는 수학과 데계데계데계 재미있는 수학과</marquee>
+        <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
+          데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
+        <div className="ms-auto mt-2"> 15/34 </div>
+      </div>
+
+      <div
+        className="d-flex mx-4 my-2 p-2"
+        style={{ backgroundColor: "#C4C4C4" }}
+      >
+        <div style={{ width: "37px", height: "37px" }}>
+          <img
+            src="BORA.png"
+            className="rounded-circle"
+            style={{ width: "37px", height: "37px" }}
+          />
+        </div>
+        <div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
+          데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
         <div className="ms-auto mt-2"> 15/34 </div>
       </div>
     </Link >

client/src/components/Room/ChannelList.js

-import ChannelSingle from "./ChannelSingle";
-import { Link } from "react-router-dom";
+import ChannelSingle from './ChannelSingle'
+import { Link } from 'react-router-dom'
+import backward from '../../backward.png'
 
 const ChannelList = () => {
   return (
     <div>
-      <nav className="row navbar navbar-light">
-        <div className="col-4">
+      <nav className="navbar navbar-light d-flex justify-content-between">
+        <div>
           <Link to="/user">
             <button
               type="button"
-              className="m-2 rounded"
-              style={{
-                height: "30px",
-                fontWeight: "bold",
-                backgroundColor: "#E8B7FF",
-                color: "black",
-                border: "1px #f4c1f2",
-              }}
+              className="btn"
             >
-              돌아가기
+              <img src={backward} width="25" height="25" />
             </button>
           </Link>
         </div>
 
-        <div className="col-4 d-flex justify-content-center">
+        <div>
           <Link to="/user">
-            <img src="/BORA.png" style={{ width: "160px" }} />
+            <img src="/BORA.png" style={{ width: '160px' }} />
           </Link>
         </div>
 
-        <div className="col-4 d-flex justify-content-end">
+        <div>
           <button
             className="navbar-toggler"
             type="button"
@@ -38,54 +32,34 @@ const ChannelList = () => {
             aria-controls="hamburger"
             aria-expanded="false"
             aria-label="Toggle navigation"
-            style={{ border: "#f4c1f2", }}
+            style={{ border: '#f4c1f2' }}
           >
             <span className="navbar-toggler-icon"></span>
           </button>
         </div>
       </nav>
 
-      <div className="offcanvas offcanvas-start" tabindex="-1" id="hamburger" aria-labelledby="hamburgerLabel">
+      <div
+        className="offcanvas offcanvas-start"
+        style={{ width: "330px" }}
+        tabIndex="-1"
+        id="hamburger"
+        aria-labelledby="hamburgerLabel"
+      >
         <div className="offcanvas-header">
-          <h5 className="offcanvas-title" id="offcanvasExampleLabel">음성 채널 목록</h5>
-          <button type="button" className="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+          <h5 className="col-6 offcanvas-title" id="offcanvasExampleLabel">
+            음성 채널 목록
+          </h5>
+          <h6 className="mt-2"> #ASV2AE985 </h6>
+          <button
+            type="button"
+            className="btn-close text-reset"
+            data-bs-dismiss="offcanvas"
+            aria-label="Close"
+          ></button>
         </div>
 
-        <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>
-            <div className="mx-5">
-              <ChannelSingle />
-            </div>
-          </div>
-          <div className="mb-3">
-            <div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-              <h5>사담</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>
-            <div className="mx-5">
-              <ChannelSingle />
-            </div>
-          </div>
-          <div className="mb-3">
-            <div className="m-3 p-2" style={{ backgroundColor: "#C4C4C4" }}>
-              <h5>공지</h5>
-            </div>
-            <div className="mx-5">
-              <ChannelSingle />
-            </div>
-          </div>
-        </div>
+        <ChannelSingle />
 
         <div className="d-flex flex-row-reverse">
           <button
@@ -94,20 +68,31 @@ const ChannelList = () => {
             data-bs-toggle="modal"
             data-bs-target="#exitRoom"
             style={{
-              height: "30px",
-              fontWeight: "bold",
-              backgroundColor: "#FF0000",
-              color: "black",
-              border: "1px #f4c1f2",
+              height: '30px',
+              fontWeight: 'bold',
+              backgroundColor: '#D64D61',
+              color: 'black',
+              border: '1px #D64D61',
             }}
           >
             퇴장
           </button>
-          <div className="modal fade" id="exitRoom" tabindex="-1" aria-labelledby="exitRoomLabel" aria-hidden="true">
+          <div
+            className="modal fade"
+            id="exitRoom"
+            tabindex="-1"
+            aria-labelledby="exitRoomLabel"
+            aria-hidden="true"
+          >
             <div className="modal-dialog">
               <div className="modal-content">
                 <div className="modal-header">
-                  <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                  <button
+                    type="button"
+                    className="btn-close"
+                    data-bs-dismiss="modal"
+                    aria-label="Close"
+                  ></button>
                 </div>
                 <div className="modal-body d-flex justify-content-center">
                   이방에서 퇴장하시겠습니까?
@@ -115,9 +100,17 @@ const ChannelList = () => {
                 <div className="row mb-3">
                   <div className="d-flex justify-content-evenly">
                     {/* <Link to="/user"> */}
-                    <button type="submit" className="col-2 p-1 btn btn-primary">예</button>
+                    <button type="submit" className="col-2 p-1 btn btn-primary">
+                      예
+                    </button>
                     {/* </Link> */}
-                    <button type="submit" className="col-2 p-1 btn btn-primary" data-bs-dismiss="modal">아니요</button>
+                    <button
+                      type="submit"
+                      className="col-2 p-1 btn btn-primary"
+                      data-bs-dismiss="modal"
+                    >
+                      아니요
+                    </button>
                   </div>
                 </div>
               </div>
@@ -125,10 +118,8 @@ const ChannelList = () => {
           </div>
         </div>
       </div>
+    </div>
+  )
+}
 
-
-    </div >
-  );
-};
-
-export default ChannelList;
+export default ChannelList

client/src/components/Room/ChannelSingle.js

 const ChannelSingle = () => {
     return (
-        <div>
-            <div>
-                - CHERRY
+        <div className="overflow-auto" style={{ height: '610px' }}>
+            <div className="mb-3">
+                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+                    <img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
+                    <h5 className="col mt-2">회의</h5>
+                </div>
+                <ul className="mx-5">
+                    <li>
+                        CHERRY
+                    </li>
+                    <li>
+                        JAEYEON
+                    </li>
+                    <li>
+                        SEOYEON
+                    </li>
+                    <li>
+                        JIWEON
+                    </li>
+                    <li>
+                        BYOUNGYUN
+                    </li>
+                </ul>
             </div>
-            <div>
-                - JAEYEON
-            </div>
-            <div>
-                - SEOYEON
+
+            <div className="mb-3">
+                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+                    <h5 className="col mt-2">사담</h5>
+                </div>
+                <ul className="mx-5">
+                    <li>
+                        CHERRY
+                    </li>
+                    <li>
+                        JAEYEON
+                    </li>
+                    <li>
+                        SEOYEON
+                    </li>
+                    <li>
+                        JIWEON
+                    </li>
+                    <li>
+                        BYOUNGYUN
+                    </li>
+                </ul>
             </div>
-            <div>
-                - JIWEON
+
+            <div className="mb-3">
+                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+                    <h5 className="col mt-2">일반</h5>
+                </div>
+                <ul className="mx-5">
+                    <li>
+                        CHERRY
+                    </li>
+                    <li>
+                        JAEYEON
+                    </li>
+                    <li>
+                        SEOYEON
+                    </li>
+                    <li>
+                        JIWEON
+                    </li>
+                    <li>
+                        BYOUNGYUN
+                    </li>
+                </ul>
             </div>
-            <div>
-                - BYOUNGYUN
+
+            <div className="mb-3">
+                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+                    <h5 className="col mt-2">공지</h5>
+                </div>
+                <ul className="mx-5">
+                    <li>
+                        CHERRY
+                    </li>
+                    <li>
+                        JAEYEON
+                    </li>
+                    <li>
+                        SEOYEON
+                    </li>
+                    <li>
+                        JIWEON
+                    </li>
+                    <li>
+                        BYOUNGYUN
+                    </li>
+                </ul>
             </div>
         </div>
+
     )
 };
 

client/src/components/Room/Controller.js

@@ -5,45 +5,70 @@ 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"> 
-            <button type="button" className="btn">
-              <img src={mic_btn} width="45" height="40" />
+      <div className="row">
+        <div
+          className="col d-flex justify-content-center"
+          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" />
             </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" />
+          </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>
   )
 }
 

client/src/components/Room/RoomHeader.js

@@ -2,45 +2,37 @@ import { Link } from 'react-router-dom'
 
 const RoomHeader = () => {
   return (
-    <div className="container">
-      <div className="row">
-        <div
-          className=" col d-flex justify-content-space-between"
-          style={{ backgroundColor: '#C4C4C4' }}
+    <div
+      className="d-flex justify-content-between align-items-center p-2"
+      style={{ backgroundColor: '#C4C4C4', height: "60px" }}
+    >
+      <div className="d-flex align-items-center">
+        <img
+          className="rounded-circle"
+          src="/cherry.jpg"
+          width="40px"
+          height="40px"
+        />
+        <a
+          className="p-3 ms-1 text-center text-decoration-none"
+          style={{
+            fontWeight: 'bold',
+            fontSize: '15px',
+            overflow: 'scroll',
+            whiteSpace: 'nowrap',
+            width: '280px',
+            color: '#000000',
+          }}
         >
-          <img
-            className="m-2 rounded-circle"
-            src="/cherry.jpg"
-            width="40"
-            height="40"
-          />
-          <p
-            className="m-2"
-            style={{
-              fontWeight: 'bold',
-              fontSize: '15px',
-            }}
-          >
-            <p
-              style={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                width: '110px',
-              }}
-            >
-              데계 재밌는 수학과
-            </p>{' '}
-            #ASV2AE985
-          </p>
-          <p
-            className='mt-3'
-            style={{ fontWeight: 'bold', fontSize: '20px', color: '#571e80' }}
-          >
-            Ch.회의
-          </p>
-        </div>
+          데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
+        </a>
       </div>
+      <a
+        className="text-decoration-none"
+        style={{ fontWeight: 'bold', fontSize: '20px', color: '#6c33a2' }}
+      >
+        # 회의
+      </a>
     </div>
   )
 }

client/src/components/Room/User.js

@@ -14,19 +14,19 @@ const User = () => {
               src="/cherry.jpg"
               width="40"
               height="40"
-              className="rounded-circle"
+              className="me-2 rounded-circle"
             />
             <img
               src="/cherry.jpg"
               width="40"
               height="40"
-              className="rounded-circle"
+              className="me-2 rounded-circle"
             />
             <img
               src="/cherry.jpg"
               width="40"
               height="40"
-              className="rounded-circle"
+              className="me-2 rounded-circle"
             />
           </div>
           <div className="col m-3" xs={6} md={4}>
@@ -34,7 +34,7 @@ const User = () => {
               src="/cherry.jpg"
               width="40"
               height="40"
-              className="rounded-circle"
+              className="me-2 rounded-circle"
             />
           </div>
         </div>
@@ -52,19 +52,19 @@ const User = () => {
               src="/cherry.jpg"
               width="40"
               height="40"
-              className="rounded-circle"
+              className="me-2 rounded-circle"
             />
             <img
               src="/cherry.jpg"
               width="40"
               height="40"
-              className="rounded-circle"
+              className="me-2 rounded-circle"
             />
             <img
               src="/cherry.jpg"
               width="40"
               height="40"
-              className="rounded-circle"
+              className="me-2 rounded-circle"
             />
           </div>
           <div className="col m-3" xs={6} md={4}></div>