Skip to content

GitLab

Commit 776bd873 authored by 우지원's avatar 우지원
Browse files

수정중

parent 98480063
Hide whitespace changes
Inline Side-by-side
client/src/components/Room/LeftHamburger.js
View file @ 776bd873
...@@ -2,163 +2,174 @@ import backward from "../../backward.png"; ...@@ -2,163 +2,174 @@ import backward from "../../backward.png";
import ChannelSingle from "./ChannelSingle"; import ChannelSingle from "./ChannelSingle";
const LeftHamberger = () => { const LeftHamberger = () => {
function roomIdCopy() { function roomIdCopy() {
const t = document.querySelector("#roomId").innerText; const t = document.querySelector("#roomId").innerText;
console.log(t); console.log(t);
navigator.clipboard.writeText(t); navigator.clipboard.writeText(t);
document.execCommand("copy"); document.execCommand("copy");
} }
return ( return (
<div> <div>
<div> <div>
<button <button
className="navbar-toggler" className="navbar-toggler"
type="button" type="button"
data-bs-toggle="offcanvas" data-bs-toggle="offcanvas"
data-bs-target="#left-hamburger" data-bs-target="#left-hamburger"
aria-controls="left-hamburger" aria-controls="left-hamburger"
aria-expanded="false" aria-expanded="false"
aria-label="Toggle navigation" aria-label="Toggle navigation"
style={{ border: "#f4c1f2" }} style={{ border: "#f4c1f2" }}
> >
<span className="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
</div>
<div
className="offcanvas offcanvas-start"
style={{ width: "330px" }}
tabIndex="-1"
id="left-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
width: "150px",
color: "#000000",
}}
>
온/오프라인 사용자
</p>
<h6 className="mt-2" id="roomId">
{" "}
#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-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<h5 className="col mt-2">온라인 사용자</h5>
</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 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 <div
className="modal fade" className="offcanvas offcanvas-start"
id="exitRoom" style={{ width: "330px" }}
tabIndex="-1" tabIndex="-1"
aria-labelledby="exitRoomLabel" id="left-hamburger"
aria-hidden="true" aria-labelledby="hamburgerLabel"
> >
<div className="modal-dialog"> <div className="offcanvas-header">
<div className="modal-content"> <p
<div className="modal-header"> className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: "bold",
fontSize: "15px",
width: "150px",
color: "#000000",
}}
>
온/오프라인 사용자
</p>
<h6 className="mt-2" id="roomId">
{" "}
#ASV2AE985{" "}
</h6>
<button <button
type="button" type="button"
className="btn-close" className="btn-close text-reset"
data-bs-dismiss="modal" data-bs-dismiss="offcanvas"
aria-label="Close" aria-label="Close"
></button> ></button>
</div> </div>
<div className="modal-body d-flex justify-content-center"> <div className="overflow-auto" style={{ height: "610px" }}>
어떤 방식으로 초대하시겠습니까? <div className="mb-3">
</div> <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<div className="row mb-3"> <h5 className="col mt-2">온라인 사용자</h5>
<div className="d-flex justify-content-evenly"> </div>
<button <ul className="mx-5" style={{ color: "#76D079" }}>
type="submit" <li>
className="col-2 p-1 btn btn-primary" <p style={{ color: "black" }}>CHERRY</p>
style={{ width: "120px" }} </li>
> <li>
카카오로 초대 <p style={{ color: "black" }}>JAEYEON</p>
</button> </li>
<button <li>
type="submit" <p style={{ color: "black" }}>SEOYEON</p>
className="col-2 p-1 btn btn-primary" </li>
data-bs-dismiss="modal" <li>
style={{ width: "120px" }} <p style={{ color: "black" }}>JIWEON</p>
onClick={roomIdCopy} </li>
> <li>
방 Id 복사 <p style={{ color: "black" }}>BYOUNGYUN</p>
</button> </li>
</ul>
</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>
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded"
data-bs-toggle="modal"
data-bs-target="#inviteRoom"
style={{
height: "30px",
fontWeight: "bold",
backgroundColor: "#E0CEE8",
color: "black",
border: "1px #D64D61",
}}
>
초대
</button>
<div
className="modal fade"
id="inviteRoom"
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-toggle="modal"
data-bs-target="#copyRoomId"
onClick={roomIdCopy}
style={{ width: "120px" }}
>
방 Id 복사
</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> </div>
</div>
</div> </div>
</div>
</div> </div>
</div> );
</div>
);
}; };
export default LeftHamberger; export default LeftHamberger;
client/src/components/Room/RightHamburger.js
View file @ 776bd873
import { useState } from "react";
import ChannelSingle from './ChannelSingle' import ChannelSingle from './ChannelSingle'
const RightHamberger = () => { const RightHamberger = () => {
function copyInput() { const [admin, setAdmin] = useState('true')
const t = document.querySelector('#roomId').innerText;
console.log(t)
navigator.clipboard.writeText(t);
document.execCommand('copy');
}
return ( return (
<div> <div>
<div> <div>
...@@ -75,6 +69,20 @@ const RightHamberger = () => { ...@@ -75,6 +69,20 @@ const RightHamberger = () => {
> >
퇴장 퇴장
</button> </button>
{admin ? <button
type="button"
className="m-3 rounded"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #D64D61',
}}
>
설정
</button> : null}
<div <div
className="modal fade" className="modal fade"
id="exitRoom" id="exitRoom"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment