aa

client/src/components/Room/ChannelList.js

@@ -4,13 +4,6 @@ import LeftHamberger from './LeftHamberger';
 import RightHamberger from './RightHamberger';
 
 const ChannelList = () => {
-  const [admin, setAdmin] = useState('true')
-
-  // function copytoClipboard() {
-  //   const [code, setCode] = useState()
-  //   const roomcode = document.getElementById("textarea")
-  //   alert("코드를 복사하였습니다.")
-  // }
   return (
     <div>
       <nav className="navbar navbar-light d-flex justify-content-between">

client/src/components/Room/LeftHamberger.js

-import backward from '../../backward.png'
-import ChannelSingle from './ChannelSingle'
+import backward from "../../backward.png";
+import ChannelSingle from "./ChannelSingle";
 
 const LeftHamberger = () => {
-    return (
-        <div>
-            <div>
-                <button
-                    className="navbar-toggler"
-                    type="button"
-                    data-bs-toggle="offcanvas"
-                    data-bs-target="#left-hamburger"
-                    aria-controls="left-hamburger"
-                    aria-expanded="false"
-                    aria-label="Toggle navigation"
-                    style={{ border: '#f4c1f2' }}
-                >
-                    <img src={backward} width="25" height="25" />
-                </button>
-            </div>
+  return (
+    <div>
+      <div>
+        <button
+          className="navbar-toggler"
+          type="button"
+          data-bs-toggle="offcanvas"
+          data-bs-target="#left-hamburger"
+          aria-controls="left-hamburger"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+          style={{ border: "#f4c1f2" }}
+        >
+          <span className="navbar-toggler-icon"></span>
+        </button>
+      </div>
 
-            <div
-                className="offcanvas offcanvas-start"
-                style={{ width: '330px' }}
-                tabIndex="-1"
-                id="left-hamburger"
-                aria-labelledby="hamburgerLabel"
-            >
-                <div className="d-flex justify-content-between offcanvas-header">
-                    <p
-                        className="col-6 offcanvas-title"
-                        id="offcanvasExampleLabel"
-                        style={{
-                            fontWeight: 'bold',
-                            fontSize: '20px',
-                            width: '200px'
-                        }}
-                    >
-                        온/오프라인 사용자
-                    </p>
-                    <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-1 row" style={{ backgroundColor: "#E0CEE8" }}>
-                            <h5 className="col mt-2">온라인 사용자</h5>
-                        </div>
-                        <ul className="mx-5" style={{marker: "#2e873a"}}>
-                            <li className="marker: #2e873a" style={{markerColor: "2px #2e873a"}}>
-                                CHERRY
-                            </li>
-                            <li>
-                                JAEYEON
-                            </li>
-                            <li>
-                                SEOYEON
-                            </li>
-                            <li>
-                                JIWEON
-                            </li>
-                            <li>
-                                BYOUNGYUN
-                            </li>
-                        </ul>
-                    </div>
+      <div
+        className="offcanvas offcanvas-start"
+        style={{ width: "330px" }}
+        tabIndex="-1"
+        id="left-hamburger"
+        aria-labelledby="hamburgerLabel"
+      >
+        <div className="d-flex justify-content-between offcanvas-header">
+          <p
+            className="col-6 offcanvas-title"
+            id="offcanvasExampleLabel"
+            style={{
+              fontWeight: "bold",
+              fontSize: "20px",
+              width: "200px",
+            }}
+          >
+            온/오프라인 사용자
+          </p>
+          <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-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+              <h5 className="col mt-2">온라인 사용자</h5>
+            </div>
 
-                    <div className="mb-3">
-                        <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
-                            <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>
+              <ul className="mx-5" style={{ color: "#76D079" }}>
+                <li>
+                  <p style={{ color: "black" }}>CHERRY</p>
+                </li>
+                <li>
+                  <p style={{ color: "black" }}>JAEYEON</p>
+                </li>
+                <li>
+                  <p style={{ color: "black" }}>SEOYEON</p>
+                </li>
+                <li>
+                  <p style={{ color: "black" }}>JIWEON</p>
+                </li>
+                <li>
+                  <p style={{ color: "black" }}>BYOUNGYUN</p>
+                </li>
+              </ul>
+          </div>
 
+          <div className="mb-3">
+            <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+              <h5 className="col mt-2">오프라인 사용자</h5>
             </div>
-        </div >
-    )
-}
+            <ul className="mx-5">
+              <li>CHERRY</li>
+              <li>JAEYEON</li>
+              <li>SEOYEON</li>
+              <li>JIWEON</li>
+              <li>BYOUNGYUN</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-export default LeftHamberger
\ No newline at end of file
+export default LeftHamberger;