Skip to content

GitLab

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

0712

parent 1808a062
Hide whitespace changes
Inline Side-by-side
client/src/components/Home/RoomSingle.js
View file @ ea478de8
......@@ -16,7 +16,7 @@ const RoomSingle = () => {
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
<div className="mx-3 mt-2" style={{ width: "250px", overflow: 'scroll', whiteSpace: 'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
......@@ -32,9 +32,11 @@ const RoomSingle = () => {
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div>
<div className="view" style={{ height: "100px", overflow: 'scroll', whiteSpace: 'nowrap' }}>
<div className="mx-3 mt-2" style={{ width: "200px" }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
</div>
<div
......@@ -48,7 +50,7 @@ const RoomSingle = () => {
style={{ width: "37px", height: "37px" }}
/>
</div>
<div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}>
<div className="mx-3 mt-2" style={{ width: "250px", overflow: 'scroll', whiteSpace: 'nowrap' }}>
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div>
<div className="ms-auto mt-2"> 15/34 </div>
</div>
......
client/src/components/Room/ChannelList.js
View file @ ea478de8
import ChannelSingle from './ChannelSingle'
import { Link } from 'react-router-dom'
import backward from '../../backward.png'
import React, { useState } from 'react';
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")
......@@ -11,156 +14,14 @@ const ChannelList = () => {
return (
<div>
<nav className="navbar navbar-light d-flex justify-content-between">
<div>
<Link to="/user">
<button type="button" className="btn">
<img src={backward} width="25" height="25" />
</button>
</Link>
</div>
<LeftHamberger />
<div>
<Link to="/user">
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#hamburger"
aria-controls="hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: '#f4c1f2' }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<RightHamberger />
</nav>
<div
className="offcanvas offcanvas-end"
style={{ width: '330px' }}
tabIndex="-1"
id="hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
}}
>
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
</p>
<h6 className="mt-2"> #ASV2AE985 </h6>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<ChannelSingle />
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded text-white"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#D64D61',
color: 'black',
border: '1px #D64D61',
}}
>
퇴장
</button>
{/* {admin ? <button
type="button"
className="m-3 rounded"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #D64D61',
}}
>
설정
</button> : null} */}
<button
type="button"
className="m-3 rounded"
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">
{/* <Link to="/user"> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
>
예
</button>
{/* </Link> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
......
client/src/components/Room/LeftHamberger.js 0 → 100644
View file @ ea478de8
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>
<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: '20px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
}}
>
온/오프라인 사용자
</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="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 >
)
}
export default LeftHamberger
\ No newline at end of file
client/src/components/Room/RightHamberger.js 0 → 100644
View file @ ea478de8
import ChannelSingle from './ChannelSingle'
const RightHamberger = () => {
function copyInput() {
const t = document.querySelector('#roomId').innerText;
console.log(t)
navigator.clipboard.writeText(t);
document.execCommand('copy');
}
return (
<div>
<div>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#right-hamburger"
aria-controls="right-hamburger"
aria-expanded="false"
aria-label="Toggle navigation"
style={{ border: '#f4c1f2' }}
>
<span className="navbar-toggler-icon"></span>
</button>
</div>
<div
className="offcanvas offcanvas-end"
style={{ width: '330px' }}
tabIndex="-1"
id="right-hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<p
className="col-6 offcanvas-title"
id="offcanvasExampleLabel"
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
}}
>
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
</p>
<h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
<button onClick={copyInput} >초대</button>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<ChannelSingle />
<div>
<div className="d-flex flex-row-reverse">
<button
type="button"
className="m-3 rounded text-white"
data-bs-toggle="modal"
data-bs-target="#exitRoom"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#D64D61',
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">
{/* <Link to="/user"> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
>
예
</button>
{/* </Link> */}
<button
type="submit"
className="col-2 p-1 btn btn-primary"
data-bs-dismiss="modal"
>
아니요
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div >
)
}
export default RightHamberger
\ No newline at end of file
client/src/components/Room/Screen.js
View file @ ea478de8
const Screen = () => {
return (
<div className="container">
<div className="row">
<div className="col" style={{ backgroundColor: '#FCF4FF' }}>
<p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}>
스크린<br/>
</p>
<div className="col m-5"></div>
</div>
<div>
<div className="m-2 fs-6 d-flex align-items-center" style={{ color: '#4A4251', height:'30px' }}>
<img
className="rounded-circle"
src="/cherry.jpg"
width="30px"
height="30px"
/>
<a
className="p-3 text-center text-decoration-none"
style={{ color: '#4A4251' }}
>
CHERRY님의 화면공유중입니다
</a>
</div>
</div>
)
......
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