0707 ui

client/src/components/Room/ChannelList.js

@@ -3,15 +3,17 @@ import { Link } from 'react-router-dom'
 import backward from '../../backward.png'
 
 const ChannelList = () => {
+  // function copytoClipboard() {
+  //   const [code, setCode] = useState()
+  //   const roomcode = document.getElementById("textarea")
+  //   alert("코드를 복사하였습니다.")
+  // }
   return (
     <div>
       <nav className="navbar navbar-light d-flex justify-content-between">
         <div>
           <Link to="/user">
-            <button
-              type="button"
-              className="btn"
-            >
+            <button type="button" className="btn">
               <img src={backward} width="25" height="25" />
             </button>
           </Link>
@@ -40,16 +42,27 @@ const ChannelList = () => {
       </nav>
 
       <div
-        className="offcanvas offcanvas-start"
-        style={{ width: "330px" }}
+        className="offcanvas offcanvas-end"
+        style={{ width: '330px' }}
         tabIndex="-1"
         id="hamburger"
         aria-labelledby="hamburgerLabel"
       >
         <div className="offcanvas-header">
-          <h5 className="col-6 offcanvas-title" id="offcanvasExampleLabel">
-            음성 채널 목록
-          </h5>
+          <p
+            className="col-6 offcanvas-title"
+            id="offcanvasExampleLabel"
+            style={{
+              fontWeight: 'bold',
+              fontSize: '15px',
+              overflow: 'scroll',
+              whiteSpace: 'nowrap',
+              width: '150px',
+              color: '#000000',
+            }}
+          >
+            데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
+          </p>
           <h6 className="mt-2"> #ASV2AE985 </h6>
           <button
             type="button"
@@ -60,7 +73,7 @@ const ChannelList = () => {
         </div>
 
         <ChannelSingle />
-
+        <div>
           <div className="d-flex flex-row-reverse">
             <button
               type="button"
@@ -77,6 +90,19 @@ const ChannelList = () => {
             >
               퇴장
             </button>
+            <button
+              type="button"
+              className="m-3 rounded"
+              style={{
+                height: '30px',
+                fontWeight: 'bold',
+                backgroundColor: '#E0CEE8',
+                color: 'black',
+                border: '1px #D64D61',
+              }}
+            >
+              설정
+            </button>
             <div
               className="modal fade"
               id="exitRoom"
@@ -100,7 +126,10 @@ 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
+                        type="submit"
+                        className="col-2 p-1 btn btn-primary"
+                      >
                         예
                       </button>
                       {/* </Link> */}
@@ -119,6 +148,7 @@ const ChannelList = () => {
           </div>
         </div>
       </div>
+    </div>
   )
 }
 

client/src/components/Room/Screen.js

@@ -4,7 +4,23 @@ const Screen = () => {
       <div className="row">
         <div className="col" style={{ backgroundColor: '#FCF4FF' }}>
           <p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}>
-            스크린
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
+            스크린<br/>
           </p>
           <div className="col m-5"></div>
         </div>

client/src/components/Room/User.js

@@ -2,12 +2,12 @@ const User = () => {
   return (
     <div className="container">
       <div className="row">
-        <div className="col" style={{ backgroundColor: "#DEC7F5" }}>
+        <div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px'}}>
           <p
             className="m-2"
             style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
           >
-            참여 중인 사용자
+            화면공유 중인 사용자
           </p>
           <div className="col m-3" xs={6} md={4}>
             <img
@@ -39,38 +39,6 @@ const User = () => {
           </div>
         </div>
       </div>
-      <div className="row">
-        <div className="col" style={{ backgroundColor: "#BCB0C6" }}>
-          <p
-            className="m-2"
-            style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
-          >
-            참여하고 있지 않은 사용자
-          </p>
-          <div className="col m-3" xs={6} md={4}>
-            <img
-              src="/cherry.jpg"
-              width="40"
-              height="40"
-              className="me-2 rounded-circle"
-            />
-            <img
-              src="/cherry.jpg"
-              width="40"
-              height="40"
-              className="me-2 rounded-circle"
-            />
-            <img
-              src="/cherry.jpg"
-              width="40"
-              height="40"
-              className="me-2 rounded-circle"
-            />
-          </div>
-          <div className="col m-3" xs={6} md={4}></div>
-          <div className="col m-5"></div>
-        </div>
-      </div>
     </div>
   );
 };