왼쪽 햄버거바 수정

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 = () => {
   function roomIdCopy() {
-        const t = document.querySelector('#roomId').innerText;
-        console.log(t)
+    const t = document.querySelector("#roomId").innerText;
+    console.log(t);
     navigator.clipboard.writeText(t);
-        document.execCommand('copy');
+    document.execCommand("copy");
   }
   return (
     <div>
@@ -19,16 +19,15 @@ const LeftHamberger = () => {
           aria-controls="left-hamburger"
           aria-expanded="false"
           aria-label="Toggle navigation"
-                    style={{ border: '#f4c1f2' }}
+          style={{ border: "#f4c1f2" }}
         >
           <span className="navbar-toggler-icon"></span>
         </button>
       </div>
 
-
       <div
         className="offcanvas offcanvas-start"
-                style={{ width: '330px' }}
+        style={{ width: "330px" }}
         tabIndex="-1"
         id="left-hamburger"
         aria-labelledby="hamburgerLabel"
@@ -38,15 +37,18 @@ const LeftHamberger = () => {
             className="col-6 offcanvas-title"
             id="offcanvasExampleLabel"
             style={{
-                            fontWeight: 'bold',
-                            fontSize: '15px',
-                            width: '150px',
-                            color: '#000000',
+              fontWeight: "bold",
+              fontSize: "15px",
+              width: "150px",
+              color: "#000000",
             }}
           >
             온/오프라인 사용자
           </p>
-                    <h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
+          <h6 className="mt-2" id="roomId">
+            {" "}
+            #ASV2AE985{" "}
+          </h6>
           <button
             type="button"
             className="btn-close text-reset"
@@ -54,26 +56,26 @@ const LeftHamberger = () => {
             aria-label="Close"
           ></button>
         </div>
-                <div className="overflow-auto" style={{ height: '610px' }}>
+        <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
+            <ul className="mx-5" style={{ color: "#76D079" }}>
+              <li>
+                <p style={{ color: "black" }}>CHERRY</p>
               </li>
               <li>
-                                JAEYEON
+                <p style={{ color: "black" }}>JAEYEON</p>
               </li>
               <li>
-                                SEOYEON
+                <p style={{ color: "black" }}>SEOYEON</p>
               </li>
               <li>
-                                JIWEON
+                <p style={{ color: "black" }}>JIWEON</p>
               </li>
               <li>
-                                BYOUNGYUN
+                <p style={{ color: "black" }}>BYOUNGYUN</p>
               </li>
             </ul>
           </div>
@@ -83,21 +85,11 @@ const LeftHamberger = () => {
               <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>
+              <li>CHERRY</li>
+              <li>JAEYEON</li>
+              <li>SEOYEON</li>
+              <li>JIWEON</li>
+              <li>BYOUNGYUN</li>
             </ul>
           </div>
         </div>
@@ -110,11 +102,11 @@ const LeftHamberger = () => {
               data-bs-toggle="modal"
               data-bs-target="#exitRoom"
               style={{
-                                height: '30px',
-                                fontWeight: 'bold',
-                                backgroundColor: '#E0CEE8',
-                                color: 'black',
-                                border: '1px #D64D61',
+                height: "30px",
+                fontWeight: "bold",
+                backgroundColor: "#E0CEE8",
+                color: "black",
+                border: "1px #D64D61",
               }}
             >
               초대
@@ -164,10 +156,9 @@ const LeftHamberger = () => {
             </div>
           </div>
         </div>
-
       </div>
-        </div >
-    )
-}
+    </div>
+  );
+};
 
-export default LeftHamberger
\ No newline at end of file
+export default LeftHamberger;