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
messenger
Commits
0ab8917f
Commit
0ab8917f
authored
Jan 27, 2021
by
Soo Hyun Kim
Browse files
0127에러뜸
parent
7b2efa8f
Changes
2
Hide whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
0ab8917f
...
...
@@ -3,7 +3,8 @@ import React, { useState, useEffect } from 'react';
import
{
Form
,
Button
,
Row
,
Image
,
Col
,
Container
}
from
'
react-bootstrap
'
;
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
BsCaretLeftFill
,
BsList
,
BsExclamationCircleFill
,
BsCheck
,
BsX
}
from
"
react-icons/bs
"
;
import
{
FiSend
}
from
"
react-icons/fi
"
;
const
INIT_CHAT
=
{
msg
:
''
,
...
...
@@ -125,26 +126,23 @@ function Chat(props) {
return
(
<>
<
Container
id
=
"
chat
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
20px
'
,
border
:
"
2px solid
"
,
height
:
"
500px
"
,
margin
:
"
1%
"
,
borderColor
:
"
9174ad
"
,
background
:
''
}}
>
<
Row
className
=
"
d-flex justify-content-center
"
style
=
{{
border
:
"
2px solid
"
,
borderWidth
:
"
medium
"
,
borderColor
:
"
9174ad
"
,
height
:
"
80px
"
,
margin
:
"
1%
"
}}
>
<
Col
md
=
"
auto
"
>
<
Button
variant
=
"
light
"
onClick
=
{
handleClick
}
>
{
`<`
}
<
/Button
>
<
/Col
>
<
Col
>
<
Row
style
=
{{
fontWeight
:
"
bold
"
,
fontSize
:
"
x-large
"
}}
>
{
props
.
roomName
}
<
/Row
>
<
Row
>
{
props
.
roomCode
}
<
/Row
>
<
/Col
>
<
Col
md
=
"
auto
"
>
<
Button
variant
=
"
light
"
onClick
=
{()
=>
setExit
(
!
exit
)}
>
{
'
=
'
}
<
/Button
>
<
/Col
>
<
/Row
>
{
exit
?
<
Row
style
=
{{
margin
:
"
1%
"
,
backgroundColor
:
"
#F8F9FA
"
,
borderRadius
:
"
30px
"
,
height
:
"
50px
"
}}
>
<
Col
style
=
{{
fontWeight
:
"
bold
"
,
margin
:
"
1%
"
}}
>
퇴장하시겠습니까
?
<
/Col
>
<
Col
md
=
"
auto
"
><
Button
variant
=
"
light
"
onClick
=
{
exitAndCloseRoom
}
style
=
{{
fontWeight
:
"
bold
"
}}
>
{
"
나가기
"
}
<
/Button></
Col
>
<
/Row
>
:
null
}
<
div
id
=
"
chat
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
justifyContent
:
"
space-between
"
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
600px
"
,
position
:
"
relative
"
}}
>
<
div
id
=
"
chat-head
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-between
"
,
alignItems
:
"
center
"
,
borderColor
:
"
9174ad
"
,
width
:
"
100%
"
,
height
:
"
80px
"
}}
>
<
a
onClick
=
{
handleClick
}
style
=
{{
margin
:
"
0px 0px 0px 15px
"
}}
><
BsCaretLeftFill
size
=
"
20
"
color
=
"
#513B66
"
/><
/a
>
<
div
style
=
{{
justifyContent
:
"
center
"
}}
>
<
p
style
=
{{
color
:
"
#513B66
"
,
fontWeight
:
"
bold
"
,
fontSize
:
"
1.6em
"
,
textAlign
:
"
center
"
,
margin
:
"
0px 0px 0.5px 0px
"
}}
>
{
props
.
roomName
}
<
/p
>
<
p
style
=
{{
fontSize
:
"
0.8em
"
,
textAlign
:
"
center
"
,
margin
:
"
0.5px 0px 0px 0px
"
}}
>
{
props
.
roomCode
}
<
/p
>
<
/div
>
<
a
onClick
=
{()
=>
setExit
(
!
exit
)}
style
=
{{
margin
:
"
0px 15px 0px 0px
"
}}
><
BsList
size
=
"
20
"
color
=
"
#513B66
"
/><
/a
>
<
/div
>
{
exit
?
<
div
id
=
"
chat-exit-check
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-evenly
"
,
alignItems
:
"
center
"
,
margin
:
"
1%
"
,
backgroundColor
:
"
#30284D
"
,
borderRadius
:
"
5px
"
,
height
:
"
50px
"
}}
>
<
p
style
=
{{
width
:
"
70%
"
,
color
:
"
#FAFAFA
"
,
fontSize
:
"
1em
"
,
margin
:
"
0px 10px 0px 20px
"
}}
><
BsExclamationCircleFill
size
=
"
1em
"
color
=
"
#F2D788
"
/>
퇴장하시겠습니까
?
<
/p
>
<
a
onClick
=
{
exitAndCloseRoom
}
><
BsCheck
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
a
onClick
=
{()
=>
setExit
(
!
exit
)}
><
BsX
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
/div
>
:
null
}
<
Container
id
=
"
chat-body
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
margin
:
"
1%
"
,
background
:
''
}}
>
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
.
msg
===
''
))
{
if
(
value
.
sender
===
"
system
"
)
{
...
...
@@ -183,18 +181,16 @@ function Chat(props) {
}
})
}
<
/Container
>
<
Form
onSubmit
=
{
sendMsgCH
}
fluid
>
<
Form
.
Group
className
=
'
d-flex flex-wrap-nowrap justify-content-center m-3
'
>
<
Form
.
Control
name
=
'
chat
'
type
=
"
text
"
value
=
{
inner
}
onChange
=
{
handleChange
}
style
=
{{
borderColor
:
"
#9174ad
"
}}
/
>
<
Button
className
=
"
ml-1
"
type
=
"
submit
"
disabled
=
{
disabled
}
style
=
{{
width
:
'
25%
'
,
backgroundColor
:
"
#9174ad
"
,
borderColor
:
"
#9174ad
"
}}
>
전송
<
Form
onSubmit
=
{
sendMsgCH
}
style
=
{{
width
:
"
100%
"
,
height
:
"
40px
"
,
position
:
"
absolute
"
,
bottom
:
"
0
"
}}
>
<
Form
.
Group
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-evenly
"
}}
>
<
Form
.
Control
name
=
'
chat
'
type
=
"
text
"
value
=
{
inner
}
onChange
=
{
handleChange
}
style
=
{{
borderColor
:
"
#9174ad
"
,
width
:
"
75%
"
}}
/
>
<
Button
className
=
"
ml-1
"
type
=
"
submit
"
disabled
=
{
disabled
}
style
=
{{
width
:
"
15%
"
,
backgroundColor
:
"
#513B66
"
}}
>
<
FiSend
size
=
"
1em
"
color
=
"
FAFAFA
"
/>
<
/Button
>
<
/Form.Group
>
<
/Form
>
<
/
>
<
/div
>
);
}
...
...
package.json
View file @
0ab8917f
...
...
@@ -27,6 +27,7 @@
"
multer
"
:
"
^1.4.2
"
,
"
nanoid
"
:
"
^3.1.20
"
,
"
nodemon
"
:
"
^2.0.6
"
,
"
react-icons
"
:
"
^4.1.0
"
,
"
socket.io
"
:
"
^3.0.5
"
,
"
validator
"
:
"
^13.5.2
"
}
...
...
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