Skip to content

GitLab

Commit 1a75a0de authored by seoyeon's avatar seoyeon
Browse files

0712 UI 수정

parent 139cdb8c
Hide whitespace changes
Inline Side-by-side
client/src/components/Home/RoomSingle.js
View file @ 1a75a0de
import { Link } from "react-router-dom"; import { Link } from 'react-router-dom'
const RoomSingle = () => { const RoomSingle = () => {
const id = 1; const id = 1
const channelId = 1; const channelId = 1
return ( return (
<Link to={`/room/${id}/${channelId}`} className="text-decoration-none text-dark"> <Link
to={`/room/${id}/${channelId}`}
className="text-decoration-none text-dark"
>
<div <div
className="d-flex mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: '#C4C4C4' }}
> >
<div style={{ width: "37px", height: "37px" }}> <div style={{ width: '37px', height: '37px' }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: '37px', height: '37px' }}
/> />
</div> </div>
<div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}> <div
데계 재미있는 수학과 데계데계데계 재미있는 수학과</div> className="mx-3 mt-2"
style={{
width: '250px',
overflow:'scroll',
whiteSpace: 'nowrap',
msOverflowStyle:'none',
}}
>
데계 재미있는 수학과 데계데계데계 재미있는 수학과
</div>
<div className="ms-auto mt-2"> 15/34 </div> <div className="ms-auto mt-2"> 15/34 </div>
</div> </div>
<div <div
className="d-flex mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: '#C4C4C4' }}
> >
<div style={{ width: "37px", height: "37px" }}> <div style={{ width: '37px', height: '37px' }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: '37px', height: '37px' }}
/> />
</div> </div>
<div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}> <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="ms-auto mt-2"> 15/34 </div>
</div> </div>
<div <div
className="d-flex mx-4 my-2 p-2" className="d-flex mx-4 my-2 p-2"
style={{ backgroundColor: "#C4C4C4" }} style={{ backgroundColor: '#C4C4C4' }}
> >
<div style={{ width: "37px", height: "37px" }}> <div style={{ width: '37px', height: '37px' }}>
<img <img
src="BORA.png" src="BORA.png"
className="rounded-circle" className="rounded-circle"
style={{ width: "37px", height: "37px" }} style={{ width: '37px', height: '37px' }}
/> />
</div> </div>
<div className="mx-3 mt-2" style={{ width: "250px", overflow:'scroll', whiteSpace:'nowrap' }}> <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="ms-auto mt-2"> 15/34 </div>
</div> </div>
</Link > </Link>
); )
}; }
export default RoomSingle; export default RoomSingle
client/src/components/Room/ChannelSingle.js
View file @ 1a75a0de
const ChannelSingle = () => { const ChannelSingle = () => {
return ( return (
<div className="overflow-auto" style={{ height: '610px' }}> <div className="overflow-auto" style={{ height: '610px' }}>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
<img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" /> <img
<h5 className="col mt-2">회의</h5> className="col-auto mt-2"
</div> src="/fullSpeaker.png"
<ul className="mx-5"> width="25px"
<li> height="25px"
CHERRY />
</li> <h5 className="col mt-2">회의</h5>
<li> </div>
JAEYEON <ul className="mx-5" style={{ color: '#76D079' }}>
</li> <li>
<li> <p style={{ color: 'black' }}>CHERRY</p>
SEOYEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>JAEYEON</p>
JIWEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>SEOYEON</p>
BYOUNGYUN </li>
</li> <li>
</ul> <p style={{ color: 'black' }}>JIWEON</p>
</div> </li>
<li>
<div className="mb-3"> <p style={{ color: 'black' }}>BYOUNGYUN</p>
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> </li>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" /> </ul>
<h5 className="col mt-2">사담</h5> </div>
</div>
<ul className="mx-5">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" /> <img
<h5 className="col mt-2">일반</h5> className="col-auto mt-2"
</div> src="/emptySpeaker.png"
<ul className="mx-5"> width="25px"
<li> height="25px"
CHERRY />
</li> <h5 className="col mt-2">사담</h5>
<li> </div>
JAEYEON <ul className="mx-5" style={{ color: '#76D079' }}>
</li> <li>
<li> <p style={{ color: 'black' }}>CHERRY</p>
SEOYEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>JAEYEON</p>
JIWEON </li>
</li> <li>
<li> <p style={{ color: 'black' }}>SEOYEON</p>
BYOUNGYUN </li>
</li> <li>
</ul> <p style={{ color: 'black' }}>JIWEON</p>
</div> </li>
<li>
<p style={{ color: 'black' }}>BYOUNGYUN</p>
</li>
</ul>
</div>
<div className="mb-3"> <div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}> <div className="m-3 p-1 row" style={{ backgroundColor: '#E0CEE8' }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" /> <img
<h5 className="col mt-2">공지</h5> className="col-auto mt-2"
</div> src="/emptySpeaker.png"
<ul className="mx-5"> width="25px"
<li> height="25px"
CHERRY />
</li> <h5 className="col mt-2">일반</h5>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
</div> </div>
<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' }}>
<img
className="col-auto mt-2"
src="/emptySpeaker.png"
width="25px"
height="25px"
/>
<h5 className="col mt-2">공지</h5>
</div>
<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>
)
}
export default ChannelSingle; export default ChannelSingle
client/src/components/Room/Screen.js
View file @ 1a75a0de
const Screen = () => { const Screen = () => {
const user = '00'
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="col" style={{ backgroundColor: '#FCF4FF' }}> <div className="col mt-3 d-flex justify-content-space-between" style={{ backgroundColor: '#FCF4FF' }}>
<p className="m-2" style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}> <img
스크린<br/> className="rounded-circle"
src="/cherry.jpg"
width="40px"
height="40px"
/>
<p
className="m-2"
style={{ fontWeight: 'bold', color: '#4A4251', fontSize: '20px' }}
>
{user}님이 화면공유중...
<br />
</p> </p>
<div className="col m-5"></div> <div className="col m-5"></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