Skip to content

GitLab

Commit 66bf5dcc authored by 우지원's avatar 우지원
Browse files

ui 수정

parent ccc4ad9c
Hide whitespace changes
Inline Side-by-side
client/src/components/Home/AddRoom.js
View file @ 66bf5dcc
const AddRoom = () => {
return (
<form className="m-3">
<div className="row justify-content-around">
<div className="col pt-2">
<h4>참여중인 방목록</h4>
<div>
<div className="mx-4 my-3 d-flex justify-content-between">
<div className="fs-4">
참여중인 방목록
</div>
<button
type="button"
className="col-2 btn btn-info"
className="py-1 px-2"
data-bs-toggle="modal"
data-bs-target="#myModal"
style={{
display: "flex",
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
>
+
추가
</button>
</div>
......@@ -39,8 +47,8 @@ const AddRoom = () => {
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
backgroundColor: "#f6c7ba",
borderColor: "#f6c7ba",
backgroundColor: "#E0CEE8",
borderColor: "#E0CEE8",
}}
>
<div style={{ width: "6rem" }} >
......@@ -59,8 +67,8 @@ const AddRoom = () => {
flexDirection: "column",
borderStyle: "solid",
borderRadius: "5px",
backgroundColor: "#f6c7ba",
borderColor: "#f6c7ba",
backgroundColor: "#f5cfe3",
borderColor: "#f5cfe3",
}}
>
<div style={{ width: "6rem" }} >
......@@ -144,7 +152,7 @@ const AddRoom = () => {
</div>
</div>
</div>
</form>
</div>
);
};
......
client/src/components/Room/ChannelList.js
View file @ 66bf5dcc
......@@ -5,8 +5,8 @@ import backward from '../../backward.png'
const ChannelList = () => {
return (
<div>
<nav className="row navbar navbar-light">
<div className="col-4">
<nav className="navbar navbar-light d-flex justify-content-between">
<div>
<Link to="/user">
<button
type="button"
......@@ -17,13 +17,13 @@ const ChannelList = () => {
</Link>
</div>
<div className="col-4 d-flex justify-content-center">
<div>
<Link to="/user">
<img src="/BORA.png" style={{ width: '160px' }} />
</Link>
</div>
<div className="col-4 d-flex justify-content-end">
<div>
<button
className="navbar-toggler"
type="button"
......@@ -41,12 +41,13 @@ const ChannelList = () => {
<div
className="offcanvas offcanvas-start"
tabindex="-1"
style={{ width: "330px" }}
tabIndex="-1"
id="hamburger"
aria-labelledby="hamburgerLabel"
>
<div className="offcanvas-header">
<h5 className="col-5 offcanvas-title" id="offcanvasExampleLabel">
<h5 className="col-6 offcanvas-title" id="offcanvasExampleLabel">
음성 채널 목록
</h5>
<h6 className="mt-2"> #ASV2AE985 </h6>
......@@ -58,48 +59,7 @@ const ChannelList = () => {
></button>
</div>
<div className="overflow-auto" style={{ height: '610px' }}>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
<img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">회의</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">사담</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">일반</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#ab9aba" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<h5 className="col mt-2">공지</h5>
</div>
<div className="mx-5">
<ChannelSingle />
</div>
</div>
</div>
<ChannelSingle />
<div className="d-flex flex-row-reverse">
<button
......@@ -110,9 +70,9 @@ const ChannelList = () => {
style={{
height: '30px',
fontWeight: 'bold',
backgroundColor: '#FF0000',
backgroundColor: '#D64D61',
color: 'black',
border: '1px #f4c1f2',
border: '1px #D64D61',
}}
>
퇴장
......
client/src/components/Room/ChannelSingle.js
View file @ 66bf5dcc
const ChannelSingle = () => {
return (
<div>
<div>
- CHERRY
<div className="overflow-auto" style={{ height: '610px' }}>
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
<img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
<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>
- JAEYEON
</div>
<div>
- SEOYEON
<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">
<li>
CHERRY
</li>
<li>
JAEYEON
</li>
<li>
SEOYEON
</li>
<li>
JIWEON
</li>
<li>
BYOUNGYUN
</li>
</ul>
</div>
<div>
- JIWEON
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#f5cfe385" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<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>
- BYOUNGYUN
<div className="mb-3">
<div className="m-3 p-1 row" style={{ backgroundColor: "#f5cfe385" }}>
<img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
<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>
)
};
......
client/src/components/Room/RoomHeader.js
View file @ 66bf5dcc
......@@ -2,38 +2,37 @@ import { Link } from 'react-router-dom'
const RoomHeader = () => {
return (
<div className="container">
<div className="row">
<div
className="col d-flex justify-content-space-between"
style={{ backgroundColor: '#C4C4C4' }}
<div
className="d-flex justify-content-between align-items-center p-2"
style={{ backgroundColor: '#C4C4C4', height: "60px" }}
>
<div className="d-flex align-items-center">
<img
className="rounded-circle"
src="/cherry.jpg"
width="40px"
height="40px"
/>
<a
className="p-3 ms-1 text-center text-decoration-none"
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '280px',
color: '#000000',
}}
>
<img
className="mt-3 m-2 rounded-circle"
src="/cherry.jpg"
width="40"
height="40"
/>
<p
className="m-4"
style={{
fontWeight: 'bold',
fontSize: '15px',
overflow: 'scroll',
whiteSpace: 'nowrap',
width: '150px'
}}
>
데계 재밌는 수학과qwerqwerqew
</p>
<p
className="m-4"
style={{ fontWeight: 'bold', fontSize: '20px', color: '#6c33a2' }}
>
# 회의
</p>
</div>
데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
</a>
</div>
<a
className="text-decoration-none"
style={{ fontWeight: 'bold', fontSize: '20px', color: '#6c33a2' }}
>
# 회의
</a>
</div>
)
}
......
client/src/components/Room/User.js
View file @ 66bf5dcc
......@@ -14,19 +14,19 @@ const User = () => {
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
</div>
<div className="col m-3" xs={6} md={4}>
......@@ -34,7 +34,7 @@ const User = () => {
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
</div>
</div>
......@@ -52,19 +52,19 @@ const User = () => {
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
<img
src="/cherry.jpg"
width="40"
height="40"
className="rounded-circle"
className="me-2 rounded-circle"
/>
</div>
<div className="col m-3" xs={6} md={4}></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