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' ...@@ -3,15 +3,17 @@ import { Link } from 'react-router-dom'
import backward from '../../backward.png' import backward from '../../backward.png'
const ChannelList = () => { const ChannelList = () => {
// function copytoClipboard() {
// const [code, setCode] = useState()
// const roomcode = document.getElementById("textarea")
// alert("코드를 복사하였습니다.")
// }
return ( return (
<div> <div>
<nav className="navbar navbar-light d-flex justify-content-between"> <nav className="navbar navbar-light d-flex justify-content-between">
<div> <div>
<Link to="/user"> <Link to="/user">
<button <button type="button" className="btn">
type="button"
className="btn"
>
<img src={backward} width="25" height="25" /> <img src={backward} width="25" height="25" />
</button> </button>
</Link> </Link>
...@@ -40,16 +42,27 @@ const ChannelList = () => { ...@@ -40,16 +42,27 @@ const ChannelList = () => {
</nav> </nav>
<div <div
className="offcanvas offcanvas-start" className="offcanvas offcanvas-end"
style={{ width: "330px" }} style={{ width: '330px' }}
tabIndex="-1" tabIndex="-1"
id="hamburger" id="hamburger"
aria-labelledby="hamburgerLabel" aria-labelledby="hamburgerLabel"
> >
<div className="offcanvas-header"> <div className="offcanvas-header">
<h5 className="col-6 offcanvas-title" id="offcanvasExampleLabel"> <p
음성 채널 목록 className="col-6 offcanvas-title"
</h5> id="offcanvasExampleLabel"
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '150px',
color: '#000000',
}}
>
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
</p>
<h6 className="mt-2"> #ASV2AE985 </h6> <h6 className="mt-2"> #ASV2AE985 </h6>
<button <button
type="button" type="button"
...@@ -60,57 +73,74 @@ const ChannelList = () => { ...@@ -60,57 +73,74 @@ const ChannelList = () => {
</div> </div>
<ChannelSingle /> <ChannelSingle />
<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 text-white" className="m-3 rounded text-white"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#exitRoom" data-bs-target="#exitRoom"
style={{ style={{
height: '30px', height: '30px',
fontWeight: 'bold', fontWeight: 'bold',
backgroundColor: '#D64D61', backgroundColor: '#D64D61',
color: 'black', color: 'black',
border: '1px #D64D61', border: '1px #D64D61',
}} }}
> >
퇴장 퇴장
</button> </button>
<div <button
className="modal fade" type="button"
id="exitRoom" className="m-3 rounded"
tabIndex="-1" style={{
aria-labelledby="exitRoomLabel" height: '30px',
aria-hidden="true" fontWeight: 'bold',
> backgroundColor: '#E0CEE8',
<div className="modal-dialog"> color: 'black',
<div className="modal-content"> border: '1px #D64D61',
<div className="modal-header"> }}
<button >
type="button" 설정
className="btn-close" </button>
data-bs-dismiss="modal" <div
aria-label="Close" className="modal fade"
></button> id="exitRoom"
</div> tabIndex="-1"
<div className="modal-body d-flex justify-content-center"> aria-labelledby="exitRoomLabel"
이방에서 퇴장하시겠습니까? aria-hidden="true"
</div> >
<div className="row mb-3"> <div className="modal-dialog">
<div className="d-flex justify-content-evenly"> <div className="modal-content">
{/* <Link to="/user"> */} <div className="modal-header">
<button type="submit" className="col-2 p-1 btn btn-primary">
예
</button>
{/* </Link> */}
<button <button
type="submit" type="button"
className="col-2 p-1 btn btn-primary" className="btn-close"
data-bs-dismiss="modal" data-bs-dismiss="modal"
> aria-label="Close"
아니요 ></button>
</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>
......
client/src/components/Room/Screen.js
View file @ 2efbfd3a
...@@ -4,7 +4,23 @@ const Screen = () => { ...@@ -4,7 +4,23 @@ const Screen = () => {
<div className="row"> <div className="row">
<div className="col" style={{ backgroundColor: '#FCF4FF' }}> <div className="col" style={{ backgroundColor: '#FCF4FF' }}>
<p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}> <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> </p>
<div className="col m-5"></div> <div className="col m-5"></div>
</div> </div>
......
client/src/components/Room/User.js
View file @ 2efbfd3a
...@@ -2,12 +2,12 @@ const User = () => { ...@@ -2,12 +2,12 @@ const User = () => {
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col" style={{ backgroundColor: "#DEC7F5" }}> <div className="col" style={{ backgroundColor: "#DEC7F5", position:'absolute', bottom:'58px'}}>
<p <p
className="m-2" className="m-2"
style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }} style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
> >
참여 중인 사용자 화면공유 중인 사용자
</p> </p>
<div className="col m-3" xs={6} md={4}> <div className="col m-3" xs={6} md={4}>
<img <img
...@@ -39,38 +39,6 @@ const User = () => { ...@@ -39,38 +39,6 @@ const User = () => {
</div> </div>
</div> </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> </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