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

0707 ui

parent 106c24a3
...@@ -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,7 +73,7 @@ const ChannelList = () => { ...@@ -60,7 +73,7 @@ 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"
...@@ -77,6 +90,19 @@ const ChannelList = () => { ...@@ -77,6 +90,19 @@ const ChannelList = () => {
> >
퇴장 퇴장
</button> </button>
<button
type="button"
className="m-3 rounded"
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#E0CEE8',
color: 'black',
border: '1px #D64D61',
}}
>
설정
</button>
<div <div
className="modal fade" className="modal fade"
id="exitRoom" id="exitRoom"
...@@ -100,7 +126,10 @@ const ChannelList = () => { ...@@ -100,7 +126,10 @@ const ChannelList = () => {
<div className="row mb-3"> <div className="row mb-3">
<div className="d-flex justify-content-evenly"> <div className="d-flex justify-content-evenly">
{/* <Link to="/user"> */} {/* <Link to="/user"> */}
<button type="submit" className="col-2 p-1 btn btn-primary"> <button
type="submit"
className="col-2 p-1 btn btn-primary"
>
</button> </button>
{/* </Link> */} {/* </Link> */}
...@@ -119,6 +148,7 @@ const ChannelList = () => { ...@@ -119,6 +148,7 @@ const ChannelList = () => {
</div> </div>
</div> </div>
</div> </div>
</div>
) )
} }
......
...@@ -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>
......
...@@ -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