e

client/src/components/Room/LeftHamberger.js

@@ -2,6 +2,12 @@ import backward from '../../backward.png'
 import ChannelSingle from './ChannelSingle'
 
 const LeftHamberger = () => {
+    function roomIdCopy() {
+        const t = document.querySelector('#roomId').innerText;
+        console.log(t)
+        navigator.clipboard.writeText(t);
+        document.execCommand('copy');
+    }
     return (
         <div>
             <div>
@@ -15,10 +21,11 @@ const LeftHamberger = () => {
                     aria-label="Toggle navigation"
                     style={{ border: '#f4c1f2' }}
                 >
-                    <img src={backward} width="25" height="25" />
+                    <span className="navbar-toggler-icon"></span>
                 </button>
             </div>
 
+
             <div
                 className="offcanvas offcanvas-start"
                 style={{ width: '330px' }}
@@ -26,18 +33,20 @@ const LeftHamberger = () => {
                 id="left-hamburger"
                 aria-labelledby="hamburgerLabel"
             >
-                <div className="d-flex justify-content-between offcanvas-header">
+                <div className="offcanvas-header">
                     <p
                         className="col-6 offcanvas-title"
                         id="offcanvasExampleLabel"
                         style={{
                             fontWeight: 'bold',
-                            fontSize: '20px',
-                            width: '200px'
+                            fontSize: '15px',
+                            width: '150px',
+                            color: '#000000',
                         }}
                     >
                         온/오프라인 사용자
                     </p>
+                    <h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
                     <button
                         type="button"
                         className="btn-close text-reset"
@@ -50,8 +59,8 @@ const LeftHamberger = () => {
                         <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"}}>
+                        <ul className="mx-5" style={{ marker: "#2e873a" }}>
+                            <li className="marker: #2e873a" style={{ markerColor: "2px #2e873a" }}>
                                 CHERRY
                             </li>
                             <li>
@@ -93,6 +102,69 @@ const LeftHamberger = () => {
                     </div>
                 </div>
 
+                <div>
+                    <div className="d-flex flex-row-reverse">
+                        <button
+                            type="button"
+                            className="m-3 rounded"
+                            data-bs-toggle="modal"
+                            data-bs-target="#exitRoom"
+                            style={{
+                                height: '30px',
+                                fontWeight: 'bold',
+                                backgroundColor: '#E0CEE8',
+                                color: 'black',
+                                border: '1px #D64D61',
+                            }}
+                        >
+                            초대
+                        </button>
+                        <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>
+                                    </div>
+                                    <div className="modal-body d-flex justify-content-center">
+                                        어떤 방식으로 초대하시겠습니까?
+                                    </div>
+                                    <div className="row mb-3">
+                                        <div className="d-flex justify-content-evenly">
+                                            <button
+                                                type="submit"
+                                                className="col-2 p-1 btn btn-primary"
+                                                style={{ width: "120px" }}
+                                            >
+                                                카카오로 초대
+                                            </button>
+                                            <button
+                                                type="submit"
+                                                className="col-2 p-1 btn btn-primary"
+                                                data-bs-dismiss="modal"
+                                                style={{ width: "120px" }}
+                                                onClick={roomIdCopy}
+                                            >
+                                                방 Id 복사
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
             </div>
         </div >
     )

client/src/components/Room/RightHamberger.js

@@ -49,7 +49,6 @@ const RightHamberger = () => {
                         데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
                     </p>
                     <h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
-                    <button onClick={copyInput} >초대</button>
                     <button
                         type="button"
                         className="btn-close text-reset"