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
881ef1ba
Commit
881ef1ba
authored
Jun 28, 2021
by
Kim, Chaerin
Browse files
merge seoyeon + link
parent
2857525e
Changes
17
Hide whitespace changes
Inline
Side-by-side
client/public/
image2
.jpg
→
client/public/
cherry
.jpg
View file @
881ef1ba
File moved
client/src/App.js
View file @
881ef1ba
...
@@ -15,7 +15,7 @@ function App() {
...
@@ -15,7 +15,7 @@ function App() {
<
Route
exact
path
=
"
/user
"
component
=
{
HomeUserPage
}
/
>
<
Route
exact
path
=
"
/user
"
component
=
{
HomeUserPage
}
/
>
<
Route
path
=
"
/profile/:id/update
"
component
=
{
InfoUpdatePage
}
/
>
<
Route
path
=
"
/profile/:id/update
"
component
=
{
InfoUpdatePage
}
/
>
<
Route
path
=
"
/profile/:id
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/profile/:id
"
component
=
{
ProfilePage
}
/
>
<
Route
path
=
"
/
R
oom/:id/:channel
"
component
=
{
RoomPage
}
/
>
<
Route
path
=
"
/
r
oom/:id/:channel
"
component
=
{
RoomPage
}
/
>
<
/Switch
>
<
/Switch
>
{
/* </AuthProvider> */
}
{
/* </AuthProvider> */
}
<
/Router
>
<
/Router
>
...
...
client/src/components/Home/AddRoom.js
View file @
881ef1ba
import
React
from
'
react
'
const
AddRoom
=
()
=>
{
const
AddRoom
=
()
=>
{
return
(
<
form
className
=
"
m-3
"
>
<
div
className
=
"
row justify-content-around
"
>
<
div
className
=
"
col
"
>
<
h4
>
참여중인
방목록
<
/h4
>
<
/div
>
<
button
type
=
"
button
"
className
=
"
col-2
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#myModal
"
style
=
{{
backgroundColor
:
"
#FCF4FF
"
,
borderColor
:
"
#FCF4FF
"
}}
>
+
<
/button
>
<
/div
>
return
(
<
div
className
=
"
modal
"
id
=
"
myModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
form
className
=
"
m-3
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
row justify-content-around
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
col
"
>
<
div
className
=
"
modal-header
"
>
<
h4
>
참여중인
방목록
<
/h4
>
<
button
<
/div
>
type
=
"
button
"
<
button
type
=
"
button
"
className
=
"
col-2
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#myModal
"
style
=
{{
backgroundColor
:
"
#FCF4FF
"
,
borderColor
:
"
#FCF4FF
"
}}
>
className
=
"
btn-close
"
+
data
-
bs
-
dismiss
=
"
modal
"
<
/button
>
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
modal
"
id
=
"
myModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
row justify-content-around mt-4 mb-4
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
col-5
"
>
<
div
className
=
"
modal-content
"
>
<
button
<
div
className
=
"
modal-header
"
>
type
=
"
button
"
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
className
=
"
p-4
"
<
/div
>
data
-
bs
-
toggle
=
"
modal
"
<
div
className
=
"
modal-body
"
>
data
-
bs
-
target
=
"
#joinModal
"
<
div
className
=
"
row justify-content-around mt-4 mb-4
"
>
style
=
{{
<
div
className
=
"
col-5
"
>
display
:
"
flex
"
,
<
button
type
=
"
button
"
className
=
"
p-4
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#joinModal
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
borderColor
:
"
#C4C4C4
"
,
backgroundColor
:
"
#C4C4C4
"
,
padding
:
'
10px
'
}}
>
flexDirection
:
"
column
"
,
방참여하기
<
/button
>
borderStyle
:
"
solid
"
,
<
/div
>
borderRadius
:
"
5px
"
,
<
div
className
=
"
col-5
"
>
borderColor
:
"
#C4C4C4
"
,
<
button
type
=
"
button
"
className
=
"
p-4
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#makeModal
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
borderColor
:
"
#C4C4C4
"
,
backgroundColor
:
"
#C4C4C4
"
,
padding
:
'
10px
'
}}
>
backgroundColor
:
"
#C4C4C4
"
,
방생성하기
<
/button
>
padding
:
"
10px
"
,
<
/div
>
}}
<
/div
>
>
<
/div
>
방참여하기
<
/div
>
<
/button
>
<
/div
>
<
div
className
=
"
col-5
"
>
<
button
type
=
"
button
"
className
=
"
p-4
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#makeModal
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
borderColor
:
"
#C4C4C4
"
,
backgroundColor
:
"
#C4C4C4
"
,
padding
:
"
10px
"
,
}}
>
방생성하기
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
{
/* 방참여하기 모달 */
}
{
/* 방참여하기 모달 */
}
<
div
className
=
"
modal
"
id
=
"
joinModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal
"
id
=
"
joinModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-header
"
>
<
div
className
=
"
modal-header
"
>
<
div
>
방참여하기
<
/div
>
<
div
>
방참여하기
<
/div
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
button
<
/div
>
type
=
"
button
"
<
div
className
=
"
modal-body
"
>
className
=
"
btn-close
"
<
div
className
=
"
input-group mb-3
"
>
data
-
bs
-
dismiss
=
"
modal
"
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
참여코드를 입력하세요
"
aria
-
label
=
"
참여코드를 입력하세요
"
aria
-
describedby
=
"
basic-addon1
"
/>
aria
-
label
=
"
Close
"
<
/div
>
><
/button
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
button
"
className
=
"
btn-primary
"
style
=
{{
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
padding
:
'
15px
'
}}
>
확인
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
input-group mb-3
"
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
참여코드를 입력하세요
"
aria
-
label
=
"
참여코드를 입력하세요
"
aria
-
describedby
=
"
basic-addon1
"
/>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
button
"
className
=
"
btn-primary
"
style
=
{{
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
padding
:
"
15px
"
,
}}
>
확인
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
{
/* 방생성하기 모달 */
}
{
/* 방생성하기 모달 */
}
<
div
className
=
"
modal
"
id
=
"
makeModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal
"
id
=
"
makeModal
"
tabIndex
=
"
-1
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-header
"
>
<
div
className
=
"
modal-header
"
>
<
div
>
방생성하기
<
/div
>
<
div
>
방생성하기
<
/div
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
button
<
/div
>
type
=
"
button
"
<
div
className
=
"
modal-body
"
>
className
=
"
btn-close
"
<
h5
>
방프로필사진
<
/h5
>
data
-
bs
-
dismiss
=
"
modal
"
<
div
className
=
"
filebox mb-4
"
>
aria
-
label
=
"
Close
"
<
input
type
=
"
file
"
id
=
"
ex_filename
"
className
=
"
upload-hidden
"
/>
><
/button
>
<
/div
>
<
/div
>
<
h5
>
방이름
<
/h5
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
input-group
"
>
<
h5
>
방프로필사진
<
/h5
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
방이름을 입력해주세요
"
aria
-
label
=
"
방이름 입력해주세요
"
aria
-
describedby
=
"
basic-addon1
"
/>
<
div
className
=
"
filebox mb-4
"
>
<
/div
>
<
input
type
=
"
file
"
id
=
"
ex_filename
"
className
=
"
upload-hidden
"
/>
<
div
className
=
"
modal-footer
"
>
<
/div
>
<
button
type
=
"
button
"
className
=
"
btn-primary
"
style
=
{{
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
padding
:
'
15px
'
}}
>
생성
<
/button
>
<
h5
>
방이름
<
/h5
>
<
/div
>
<
div
className
=
"
input-group
"
>
<
/div
>
<
input
<
/div
>
type
=
"
text
"
<
/div
>
className
=
"
form-control
"
placeholder
=
"
방이름을 입력해주세요
"
aria
-
label
=
"
방이름 입력해주세요
"
aria
-
describedby
=
"
basic-addon1
"
/>
<
/div
>
<
div
className
=
"
modal-footer
"
>
<
button
type
=
"
button
"
className
=
"
btn-primary
"
style
=
{{
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
padding
:
"
15px
"
,
}}
>
생성
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/form
>
<
/div
>
);
<
/div
>
}
<
/div
>
<
/form
>
);
};
export
default
AddRoom
;
export
default
AddRoom
;
client/src/components/Home/HomeProfile.js
View file @
881ef1ba
import
React
from
'
react
'
import
{
Link
}
from
"
react
-router-dom
"
;
const
HomeProfile
=
()
=>
{
const
HomeProfile
=
()
=>
{
return
(
const
id
=
1
;
<>
return
(
<
form
className
=
"
flex-column align-items-center justify-content-center m-2
"
>
<
Link
to
=
{
`/profile/
${
id
}
`
}
className
=
"
text-decoration-none text-dark
"
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
form
className
=
"
flex-column align-items-center justify-content-center m-2
"
>
<
img
src
=
"
/image2.jpg
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
157px
"
,
height
:
"
157px
"
,
borderStyle
:
"
solid
"
,
borderColor
:
"
#262626
"
}}
/
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
/div
>
<
img
<
h1
className
=
"
d-flex justify-content-center
"
>
CHERRY
<
/h1
>
src
=
"
cherry.jpg
"
<
h2
className
=
"
d-flex justify-content-center
"
>
#
0805
<
/h2
>
className
=
"
rounded-circle
"
<
/form
>
style
=
{{
<
div
style
=
{{
backgroundColor
:
"
#262626
"
,
width
:
"
auto
"
,
height
:
"
2px
"
}}
/
>
width
:
"
157px
"
,
<
/
>
height
:
"
157px
"
,
)
borderStyle
:
"
solid
"
,
borderColor
:
"
#262626
"
,
}}
/
>
<
/div
>
<
h1
className
=
"
d-flex justify-content-center
"
>
CHERRY
<
/h1
>
<
h2
className
=
"
d-flex justify-content-center
"
>
#
0805
<
/h2
>
<
/form
>
<
div
style
=
{{
backgroundColor
:
"
#262626
"
,
width
:
"
auto
"
,
height
:
"
2px
"
}}
/
>
<
/Link
>
);
};
};
export
default
HomeProfile
;
export
default
HomeProfile
;
client/src/components/Home/RoomSingle.js
View file @
881ef1ba
import
{
Link
}
from
"
react-router-dom
"
;
const
RoomSingle
=
()
=>
{
const
RoomSingle
=
()
=>
{
return
(
const
id
=
1
;
<>
const
channelId
=
1
;
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
return
(
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/BORA.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
<
Link
to
=
{
`/room/
${
id
}
/
${
channelId
}
`
}
className
=
"
text-decoration-none text-dark
"
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
className
=
"
row justify-content-start mx-4 my-2 p-2
"
<
/div
>
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/BORA_LOGO.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
img
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
src
=
"
BORA.png
"
<
/div
>
className
=
"
rounded-circle
"
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/image2.jpg
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
/
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
/div
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/BORA_LOGO.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
<
div
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
className
=
"
row justify-content-start mx-4 my-2 p-2
"
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
/div
>
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
"
BORA_LOGO.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
"
cherry.jpg
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
"
BORA_LOGO.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
div
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/BORA.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
className
=
"
row justify-content-start mx-4 my-2 p-2
"
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
>
<
/div
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
"
BORA.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
div
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/image2.jpg
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
className
=
"
row justify-content-start mx-4 my-2 p-2
"
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
>
<
/div
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
"
cherry.jpg
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
div
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/BORA_LOGO.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
className
=
"
row justify-content-start mx-4 my-2 p-2
"
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
>
<
/div
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
"
BORA_LOGO.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
div
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/BORA.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
className
=
"
row justify-content-start mx-4 my-2 p-2
"
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
>
<
/div
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
img
src
=
"
BORA.png
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
div
className
=
"
row justify-content-start mx-4 my-2 p-2
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
div
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
><
img
src
=
"
/image2.jpg
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/></
div
>
className
=
"
row justify-content-start mx-4 my-2 p-2
"
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
>
<
/div
>
<
div
className
=
"
col-2
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
>
<
/
>
<
img
)
src
=
"
cherry.jpg
"
className
=
"
rounded-circle
"
style
=
{{
width
:
"
37px
"
,
height
:
"
37px
"
}}
/
>
<
/div
>
<
div
className
=
"
col-8 m-2
"
>
데계
재미있는
수학과
<
/div
>
<
div
className
=
"
col-2 mt-2
"
>
15
/
34
<
/div
>
<
/div
>
<
/Link
>
);
};
};
export
default
RoomSingle
;
export
default
RoomSingle
;
client/src/components/Profile/InfoUpdate.js
View file @
881ef1ba
...
@@ -33,7 +33,7 @@ const InfoUpdate = () => {
...
@@ -33,7 +33,7 @@ const InfoUpdate = () => {
<
div
class
=
"
row
"
>
<
div
class
=
"
row
"
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
img
<
img
src
=
"
/
image2
.jpg
"
src
=
"
/
cherry
.jpg
"
className
=
"
rounded-circle
"
className
=
"
rounded-circle
"
style
=
{{
height
:
"
320px
"
,
width
:
"
320px
"
}}
style
=
{{
height
:
"
320px
"
,
width
:
"
320px
"
}}
/
>
/
>
...
...
client/src/components/Profile/Profile.js
View file @
881ef1ba
...
@@ -31,7 +31,7 @@ const Profile = () => {
...
@@ -31,7 +31,7 @@ const Profile = () => {
<
div
className
=
"
col
"
>
<
div
className
=
"
col
"
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
img
<
img
src
=
"
/
image2
.jpg
"
src
=
"
/
cherry
.jpg
"
className
=
"
rounded-circle
"
className
=
"
rounded-circle
"
style
=
{{
height
:
"
320px
"
,
width
:
"
320px
"
}}
style
=
{{
height
:
"
320px
"
,
width
:
"
320px
"
}}
/
>
/
>
...
...
client/src/components/Room/ChannelSingle.js
View file @
881ef1ba
const
ChannelSingle
=
()
=>
{
const
ChannelSingle
=
()
=>
{
return
(
return
(
<
div
>
<
div
>
ChannelSingle
Component
입니다
.
음성
채널
목록
<
/div
>
<
/div
>
)
)
};
};
...
...
client/src/components/Room/Controller.js
View file @
881ef1ba
import
ScreenSelect
from
"
./ScreenSelect
"
;
import
ScreenSelect
from
'
./ScreenSelect
'
import
video_btn
from
'
../../videobtn.png
'
import
speaker_btn
from
'
../../speakerbtn.png
'
import
mic_btn
from
'
../../micbtn.png
'
const
Controller
=
()
=>
{
const
Controller
=
()
=>
{
return
(
return
(
<
div
>
<
div
className
=
"
container
"
>
Controller
Component
입니다
.
<
div
className
=
"
row
"
>
<
ScreenSelect
/>
<
div
className
=
"
col d-flex justify-content-center
"
style
=
{{
backgroundColor
:
'
#C4C4C4
'
}}
>
<
div
className
=
"
col d-flex justify-content-center
"
>
<
button
type
=
"
button
"
className
=
"
btn
"
>
<
img
src
=
{
mic_btn
}
width
=
"
45
"
height
=
"
40
"
/>
<
/button
>
<
/div
>
<
div
className
=
"
col d-flex justify-content-center
"
>
<
button
type
=
"
button
"
className
=
"
btn
"
>
<
img
src
=
{
speaker_btn
}
width
=
"
45
"
/>
<
/button
>
<
/div
>
<
div
className
=
"
col d-flex justify-content-center
"
>
<
button
type
=
"
button
"
className
=
"
btn
"
data
-
bs
-
toggle
=
"
modal
"
data
-
bs
-
target
=
"
#exampleModal
"
src
=
{
video_btn
}
onClick
=
"
location.href='ScreenSelect.js'
"
>
<
img
src
=
{
video_btn
}
width
=
"
45
"
/>
<
/button
>
<
/div
>
<
/div
>
<
ScreenSelect
/>
<
/div
>
<
/div
>
<
/div
>
)
;
)
}
;
}
export
default
Controller
;
export
default
Controller
client/src/components/Room/RoomHeader.js
View file @
881ef1ba
const
RoomHeader
=
()
=>
{
const
RoomHeader
=
()
=>
{
return
(
return
(
<
div
>
<
div
className
=
"
container
"
>
RoomHeader
Component
입니다
.
<
div
className
=
"
row
"
>
<
div
className
=
"
col d-flex justify-content-space-between
"
style
=
{{
backgroundColor
:
"
#C4C4C4
"
}}
>
<
img
className
=
"
m-2 rounded-circle
"
src
=
"
/cherry.jpg
"
width
=
"
40
"
height
=
"
40
"
/>
<
p
className
=
"
m-2
"
style
=
{{
fontWeight
:
"
bold
"
,
fontSize
:
"
15px
"
,
whiteSpace
:
"
pre-wrap
"
,
}}
>
<
p
>
데계
재밌는
수학과
<
/p> #ASV2AE9
8
<
/p
>
<
p
className
=
"
m-2
"
style
=
{{
fontWeight
:
"
bold
"
,
fontSize
:
"
20px
"
}}
>
회의
<
/p
>
<
button
type
=
"
button
"
className
=
"
m-2 rounded
"
style
=
{{
height
:
"
30px
"
,
fontWeight
:
"
bold
"
,
backgroundColor
:
"
#E8B7FF
"
,
color
:
"
black
"
,
border
:
"
1px #f4c1f2
"
,
}}
>
돌아가기
<
/button
>
<
/div
>
<
/div
>
)
<
/div
>
<
/div
>
);
};
};
export
default
RoomHeader
;
export
default
RoomHeader
;
client/src/components/Room/Screen.js
View file @
881ef1ba
const
Screen
=
()
=>
{
const
Screen
=
()
=>
{
return
(
return
(
<
div
>
<
div
className
=
"
container
"
>
Screen
Component
입니다
.
<
div
className
=
"
row
"
>
<
div
className
=
"
col
"
style
=
{{
backgroundColor
:
'
#FCF4FF
'
}}
>
<
p
className
=
"
m-2
"
style
=
{{
fontWeight
:
'
bold
'
,
color
:
'
#4A4251
'
,
fontSize
:
'
20px
'
}}
>
스크린
<
/p
>
<
div
className
=
"
col m-5
"
><
/div
>
<
/div
>
<
/div
>
)
<
/div
>
};
<
/div
>
)
}
export
default
Screen
;
export
default
Screen
client/src/components/Room/ScreenSelect.js
View file @
881ef1ba
const
ScreenSelect
=
()
=>
{
const
ScreenSelect
=
()
=>
{
return
(
return
(
<
div
>
<
div
className
=
"
container
"
>
ScreenSelect
Component
입니다
.
<
div
className
=
"
modal fade
"
id
=
"
exampleModal
"
tabindex
=
"
-1
"
aria
-
labelledby
=
"
exampleModalLabel
"
aria
-
hidden
=
"
true
"
>
<
div
className
=
"
modal-dialog
"
>
<
div
className
=
"
modal-content
"
>
<
div
className
=
"
modal-header
"
>
<
h5
className
=
"
modal-title
"
id
=
"
exampleModalLabel
"
>
공유
화면
선택
<
/h5
>
<
button
type
=
"
button
"
className
=
"
btn-close
"
data
-
bs
-
dismiss
=
"
modal
"
aria
-
label
=
"
Close
"
><
/button
>
<
/div
>
<
div
className
=
"
modal-body
"
>
<
div
className
=
"
row
"
>
<
div
className
=
"
col-sm-6 mb-3
"
>
<
div
className
=
"
card
"
>
<
div
style
=
{{
height
:
'
150px
'
}}
className
=
"
card-body
"
>
<
p
className
=
"
card-text
"
>
공유화면1
<
/p
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
col-sm-6
"
>
<
div
className
=
"
card
"
>
<
div
style
=
{{
height
:
'
150px
'
}}
className
=
"
card-body
"
>
<
p
className
=
"
card-text
"
>
공유화면2
<
/p
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
)
<
/div
>
};
<
/div
>
)
}
export
default
ScreenSelect
;
export
default
ScreenSelect
client/src/components/Room/User.js
View file @
881ef1ba
const
User
=
()
=>
{
const
User
=
()
=>
{
return
(
return
(
<
div
>
<
div
className
=
"
container
"
>
User
Component
입니다
.
<
div
className
=
"
row
"
>
<
div
className
=
"
col
"
style
=
{{
backgroundColor
:
"
#DEC7F5
"
}}
>
<
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
=
"
rounded-circle
"
/>
<
img
src
=
"
/cherry.jpg
"
width
=
"
40
"
height
=
"
40
"
className
=
"
rounded-circle
"
/>
<
img
src
=
"
/cherry.jpg
"
width
=
"
40
"
height
=
"
40
"
className
=
"
rounded-circle
"
/>
<
/div
>
<
div
className
=
"
col m-3
"
xs
=
{
6
}
md
=
{
4
}
>
<
img
src
=
"
/cherry.jpg
"
width
=
"
40
"
height
=
"
40
"
className
=
"
rounded-circle
"
/>
<
/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
=
"
rounded-circle
"
/>
<
img
src
=
"
/cherry.jpg
"
width
=
"
40
"
height
=
"
40
"
className
=
"
rounded-circle
"
/>
<
img
src
=
"
/cherry.jpg
"
width
=
"
40
"
height
=
"
40
"
className
=
"
rounded-circle
"
/>
<
/div
>
<
div
className
=
"
col m-3
"
xs
=
{
6
}
md
=
{
4
}
><
/div
>
<
div
className
=
"
col m-5
"
><
/div
>
<
/div
>
<
/div
>
<
/div
>
);
};
};
export
default
User
;
export
default
User
;
client/src/micbtn.png
0 → 100644
View file @
881ef1ba
17.6 KB
client/src/pages/RoomPage.js
View file @
881ef1ba
import
Header
from
"
../components/Header
"
;
import
Header
from
'
../components/Header
'
import
ChannelList
from
"
../components/Room/ChannelList
"
;
import
ChannelList
from
'
../components/Room/ChannelList
'
import
RoomHeader
from
"
../components/Room/RoomHeader
"
;
import
RoomHeader
from
'
../components/Room/RoomHeader
'
import
Screen
from
"
../components/Room/Screen
"
;
import
Screen
from
'
../components/Room/Screen
'
import
User
from
"
../components/Room/User
"
;
import
User
from
'
../components/Room/User
'
import
Controller
from
"
../components/Room/Controller
"
;
import
Controller
from
'
../components/Room/Controller
'
const
RoomPage
=
()
=>
{
const
RoomPage
=
()
=>
{
return
(
return
(
<
div
>
<
div
>
Room
Page
입니다
.
<
Header
hamburger
=
{
ChannelList
}
/
>
<
Header
hamburger
=
{
ChannelList
}
/
>
<
RoomHeader
/>
<
RoomHeader
/>
<
Screen
/>
<
Screen
/>
<
User
/>
<
User
/>
<
Controller
/>
<
Controller
/>
<
/div
>
<
/div
>
)
;
)
}
;
}
export
default
RoomPage
;
export
default
RoomPage
client/src/speakerbtn.png
0 → 100644
View file @
881ef1ba
20 KB
client/src/videobtn.png
0 → 100644
View file @
881ef1ba
9 KB
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