Skip to content

GitLab

Commit 2efbfd3a authored by seoyeon's avatar seoyeon
Browse files

0707 ui

parent 106c24a3
Hide whitespace changes
Inline Side-by-side
client/src/components/Room/ChannelList.js
View file @ 2efbfd3a
......@@ -3,15 +3,17 @@ import { Link } from 'react-router-dom'
import backward from '../../backward.png'
const ChannelList = () => {
// function copytoClipboard() {
// const [code, setCode] = useState()
// const roomcode = document.getElementById("textarea")
// alert("코드를 복사하였습니다.")
// }
return (
<div>
<nav className="navbar navbar-light d-flex justify-content-between">
<div>
<Link to="/user">
<button
type="button"
className="btn"
>
<button type="button" className="btn">
<img src={backward} width="25" height="25" />
</button>
</Link>
......@@ -40,16 +42,27 @@ const ChannelList = () => {
</nav>
<div
className="offcanvas offcanvas-start"
style={{ width: "330px" }}
className="offcanvas offcanvas-end"
style={{ width: '330px' }}
tabIndex="-1"
id="hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<h5 className="col-6 offcanvas-title" id="offcanvasExampleLabel">
음성 채널 목록
</h5>
<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"
......@@ -60,57 +73,74 @@ const ChannelList = () => {
</div>
<ChannelSingle />
<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> */}
<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>
<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="submit"
className="col-2 p-1 btn btn-primary"
type="button"
className="btn-close"
data-bs-dismiss="modal"
>
아니요
</button>
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>
......
client/src/components/Room/Screen.js
View file @ 2efbfd3a
......@@ -4,7 +4,23 @@ const Screen = () => {
<div className="row">
<div className="col" style={{ backgroundColor: '#FCF4FF' }}>
<p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}>
스크린
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
스크린<br/>
</p>
<div className="col m-5"></div>
</div>
......
client/src/components/Room/User.js
View file @ 2efbfd3a
......@@ -2,12 +2,12 @@ const User = () => {
return (
<div className="container">
<div className="row">
<div className="col" style={{ backgroundColor: "#DEC7F5" }}>
<div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px'}}>
<p
className="m-2"
style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
>
참여 중인 사용자
화면공유 중인 사용자
</p>
<div className="col m-3" xs={6} md={4}>
<img
......@@ -39,38 +39,6 @@ const User = () => {
</div>
</div>
</div>
<div className="row">
<div className="col" style={{ backgroundColor: "#BCB0C6" }}>
<p
className="m-2"
style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
>
참여하고 있지 않은 사용자
</p>
<div className="col m-3" xs={6} md={4}>
<img
src="/cherry.jpg"
width="40"
height="40"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="me-2 rounded-circle"
/>
</div>
<div className="col m-3" xs={6} md={4}></div>
<div className="col m-5"></div>
</div>
</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