Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
bora-it
Commits
66bf5dcc
Commit
66bf5dcc
authored
Jul 07, 2021
by
우지원
Browse files
ui 수정
parent
ccc4ad9c
Changes
5
Show 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
:
"
#f
6c7ba
"
,
borderColor
:
"
#f
6c7ba
"
,
backgroundColor
:
"
#f
5cfe3
"
,
borderColor
:
"
#f
5cfe3
"
,
}}
>
<
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
>
<
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
>
<
div
>
-
JAEYEON
<
ul
className
=
"
mx-5
"
>
<
li
>
CHERRY
<
/li
>
<
li
>
JAEYEON
<
/li
>
<
li
>
SEOYEON
<
/li
>
<
li
>
JIWEON
<
/li
>
<
li
>
BYOUNGYUN
<
/li
>
<
/ul
>
<
/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
>
<
div
>
-
BYOUNGYUN
<
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
=
"
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
'
}}
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
=
"
mt-3 m-2
rounded-circle
"
className
=
"
rounded-circle
"
src
=
"
/cherry.jpg
"
width
=
"
40
"
height
=
"
40
"
width
=
"
40
px
"
height
=
"
40
px
"
/>
<
p
className
=
"
m-4
"
<
a
className
=
"
p-3 ms-1 text-center text-decoration-none
"
style
=
{{
fontWeight
:
'
bold
'
,
fontSize
:
'
15px
'
,
overflow
:
'
scroll
'
,
whiteSpace
:
'
nowrap
'
,
width
:
'
150px
'
width
:
'
280px
'
,
color
:
'
#000000
'
,
}}
>
데계
재밌는
수학과qwerqwerqew
<
/p
>
<
p
className
=
"
m-4
"
데계데계데계데계데계데계데계데계데계데계
재밌는
수학과
<
/a
>
<
/div
>
<
a
className
=
"
text-decoration-none
"
style
=
{{
fontWeight
:
'
bold
'
,
fontSize
:
'
20px
'
,
color
:
'
#6c33a2
'
}}
>
#
회의
<
/p
>
<
/div
>
<
/div
>
<
/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
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment