Commit c4b5738e authored by 우지원's avatar 우지원
Browse files

0728

parent dfe5b8fb
import UserState from "./UserState"; import backward from "../../backward.png";
import { Link } from "react-router-dom"; import ChannelSingle from "./ChannelSingle";
import KakaoShareButton from "../KakaoShareButton";
import { useEffect } from "react";
const LeftHamberger = () => { const LeftHamberger = () => {
useEffect(() => {
const script = document.createElement("script");
script.src = "https://developers.kakao.com/sdk/js/kakao.js";
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
// function KakaoCode() {
// window.location.href
// ="https://kauth.kakao.com/oauth/authorize?client_id=ca4c7126765a1dfd4c127c27415d4abc&redirect_uri=http://localhost:3000/room/Invite&response_type=code&prompt=login&scope=talk_message,friends"
// }
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>
...@@ -65,15 +49,58 @@ const LeftHamberger = () => { ...@@ -65,15 +49,58 @@ const LeftHamberger = () => {
{" "} {" "}
#ASV2AE985{" "} #ASV2AE985{" "}
</h6> </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> </div>
<UserState /> <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>
<ul className="mx-5">
<li>CHERRY</li>
<li>JAEYEON</li>
<li>SEOYEON</li>
<li>JIWEON</li>
<li>BYOUNGYUN</li>
</ul>
</div>
</div>
<div> <div>
<div className="d-flex flex-row-reverse"> <div className="d-flex flex-row-reverse">
<button <button
type="button" type="button"
className="m-3 rounded" className="m-3 rounded"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#InviteRoom" data-bs-target="#inviteRoom"
style={{ style={{
height: "30px", height: "30px",
fontWeight: "bold", fontWeight: "bold",
...@@ -86,9 +113,9 @@ const LeftHamberger = () => { ...@@ -86,9 +113,9 @@ const LeftHamberger = () => {
</button> </button>
<div <div
className="modal fade" className="modal fade"
id="InviteRoom" id="inviteRoom"
tabIndex="-1" tabIndex="-1"
aria-labelledby="InviteRoomLabel" aria-labelledby="exitRoomLabel"
aria-hidden="true" aria-hidden="true"
> >
<div className="modal-dialog"> <div className="modal-dialog">
...@@ -106,16 +133,24 @@ const LeftHamberger = () => { ...@@ -106,16 +133,24 @@ const LeftHamberger = () => {
</div> </div>
<div className="row mb-3"> <div className="row mb-3">
<div className="d-flex justify-content-evenly"> <div className="d-flex justify-content-evenly">
{/* <button <button
type="submit" type="submit"
className="col-2 p-1 btn btn-primary" className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
style={{ width: "120px" }} style={{ width: "120px" }}
onClick={KakaoCode}
> >
카카오로 초대 카카오로 초대
</button> */} </button>
<KakaoShareButton /> {/*
<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 <button
type="submit" type="submit"
className="col-2 p-1 btn btn-primary" className="col-2 p-1 btn btn-primary"
......
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