Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
students
messenger
Commits
8dfaaaab
Commit
8dfaaaab
authored
Jan 27, 2021
by
Soo Hyun Kim
Browse files
0127 채팅테마
parent
0ab8917f
Changes
3
Hide whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
8dfaaaab
...
@@ -126,14 +126,14 @@ function Chat(props) {
...
@@ -126,14 +126,14 @@ function Chat(props) {
return
(
return
(
<
div
id
=
"
chat
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
justifyContent
:
"
space-between
"
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
60
0px
"
,
position
:
"
relative
"
}}
>
<
div
id
=
"
chat
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
borderColor
:
"
#4A5D7E
"
,
backgroundColor
:
"
#FFFFFF
"
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
58
0px
"
,
position
:
"
relative
"
}}
>
<
div
id
=
"
chat-head
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-between
"
,
alignItems
:
"
center
"
,
borderColor
:
"
9174ad
"
,
width
:
"
100%
"
,
height
:
"
80px
"
}}
>
<
div
id
=
"
chat-head
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-between
"
,
alignItems
:
"
center
"
,
width
:
"
100%
"
,
height
:
"
80px
"
}}
>
<
a
onClick
=
{
handleClick
}
style
=
{{
margin
:
"
0px 0px 0px 15px
"
}}
><
BsCaretLeftFill
size
=
"
20
"
color
=
"
#
513B66
"
/><
/a
>
<
a
onClick
=
{
handleClick
}
style
=
{{
margin
:
"
0px 0px 0px 15px
"
}}
><
BsCaretLeftFill
size
=
"
20
"
color
=
"
#
333333
"
/><
/a
>
<
div
style
=
{{
justifyContent
:
"
center
"
}}
>
<
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
=
{{
color
:
"
#
333333
"
,
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
>
<
p
style
=
{{
color
:
"
#333333
"
,
fontSize
:
"
0.8em
"
,
textAlign
:
"
center
"
,
margin
:
"
0.5px 0px 0px 0px
"
}}
>
{
props
.
roomCode
}
<
/p
>
<
/div
>
<
/div
>
<
a
onClick
=
{()
=>
setExit
(
!
exit
)}
style
=
{{
margin
:
"
0px 15px 0px 0px
"
}}
><
BsList
size
=
"
20
"
color
=
"
#
513B66
"
/><
/a
>
<
a
onClick
=
{()
=>
setExit
(
!
exit
)}
style
=
{{
margin
:
"
0px 15px 0px 0px
"
}}
><
BsList
size
=
"
20
"
color
=
"
#
333333
"
/><
/a
>
<
/div
>
<
/div
>
{
exit
?
{
exit
?
<
div
id
=
"
chat-exit-check
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-evenly
"
,
alignItems
:
"
center
"
,
margin
:
"
1%
"
,
backgroundColor
:
"
#30284D
"
,
borderRadius
:
"
5px
"
,
height
:
"
50px
"
}}
>
<
div
id
=
"
chat-exit-check
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-evenly
"
,
alignItems
:
"
center
"
,
margin
:
"
1%
"
,
backgroundColor
:
"
#30284D
"
,
borderRadius
:
"
5px
"
,
height
:
"
50px
"
}}
>
...
@@ -142,7 +142,7 @@ function Chat(props) {
...
@@ -142,7 +142,7 @@ function Chat(props) {
<
a
onClick
=
{()
=>
setExit
(
!
exit
)}
><
BsX
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
a
onClick
=
{()
=>
setExit
(
!
exit
)}
><
BsX
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
/div
>
<
/div
>
:
null
}
:
null
}
<
Container
id
=
"
chat-body
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
margin
:
"
1%
"
,
background
:
''
}}
>
<
div
id
=
"
chat-body
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
400px
"
,
margin
:
"
1%
"
,
background
:
''
}}
>
{
chat
.
map
((
value
,
index
)
=>
{
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
.
msg
===
''
))
{
if
(
!
(
value
.
msg
===
''
))
{
if
(
value
.
sender
===
"
system
"
)
{
if
(
value
.
sender
===
"
system
"
)
{
...
@@ -171,7 +171,7 @@ function Chat(props) {
...
@@ -171,7 +171,7 @@ function Chat(props) {
<
Row
key
=
{
index
}
className
=
'
m-1 justify-content-end
'
>
<
Row
key
=
{
index
}
className
=
'
m-1 justify-content-end
'
>
<
Row
className
=
'
d-flex flex-wrap-nowrap
'
>
<
Row
className
=
'
d-flex flex-wrap-nowrap
'
>
<
Col
className
=
'
mr-1
'
>
{
value
.
time
}
<
/Col
>
<
Col
className
=
'
mr-1
'
>
{
value
.
time
}
<
/Col
>
<
Row
className
=
'
mr-2
'
name
=
'
msg
'
style
=
{{
width
:
'
max-content
'
,
maxWidth
:
'
300px
'
,
height
:
'
auto
'
,
paddingLeft
:
'
15px
'
,
paddingRight
:
'
15px
'
,
background
:
"
#d6c8e3
"
,
borderRadius
:
'
3
px
'
,
fontSize
:
'
x-large
'
}}
>
{
value
.
msg
}
<
/Row
>
<
Row
className
=
'
mr-2
'
name
=
'
msg
'
style
=
{{
width
:
'
max-content
'
,
maxWidth
:
'
300px
'
,
height
:
'
auto
'
,
paddingLeft
:
'
15px
'
,
paddingRight
:
'
15px
'
,
background
:
"
#d6c8e3
"
,
borderRadius
:
'
px
'
,
fontSize
:
'
x-large
'
}}
>
{
value
.
msg
}
<
/Row
>
<
/Row
>
<
/Row
>
<
/Row
>
<
/Row
>
)
)
...
@@ -181,15 +181,19 @@ function Chat(props) {
...
@@ -181,15 +181,19 @@ function Chat(props) {
}
}
})
})
}
}
<
/Container
>
<
/div
>
<
Form
onSubmit
=
{
sendMsgCH
}
style
=
{{
width
:
"
100%
"
,
height
:
"
40px
"
,
position
:
"
absolute
"
,
bottom
:
"
0
"
}}
>
<
div
id
=
"
chat-low-side
"
style
=
{{
width
:
"
95%
"
,
height
:
"
60px
"
,
position
:
"
absolute
"
,
bottom
:
"
0
"
,
padding
:
"
10px 5px 5px 10px
"
}}
>
<
Form
.
Group
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-evenly
"
}}
>
<
div
id
=
"
chat-form
"
style
=
{{
width
:
"
100%
"
,
height
:
"
100%
"
,
borderStyle
:
"
solid
"
,
borderWidth
:
"
2px
"
,
borderColor
:
"
#C1C1C1
"
,
borderRadius
:
"
25px
"
,
padding
:
"
3px 2px 2px 3px
"
}}
>
<
Form
.
Control
name
=
'
chat
'
type
=
"
text
"
value
=
{
inner
}
onChange
=
{
handleChange
}
style
=
{{
borderColor
:
"
#9174ad
"
,
width
:
"
75%
"
}}
/
>
<
Form
onSubmit
=
{
sendMsgCH
}
>
<
Button
className
=
"
ml-1
"
type
=
"
submit
"
disabled
=
{
disabled
}
style
=
{{
width
:
"
15%
"
,
backgroundColor
:
"
#513B66
"
}}
>
<
Form
.
Group
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-evenly
"
}}
>
<
FiSend
size
=
"
1em
"
color
=
"
FAFAFA
"
/>
<
Form
.
Control
name
=
'
chat
'
type
=
"
text
"
value
=
{
inner
}
onChange
=
{
handleChange
}
style
=
{{
width
:
"
80%
"
,
height
:
"
90%
"
,
borderColor
:
"
#FFFFFF
"
}}
/
>
<
/Button
>
<
Button
type
=
"
submit
"
disabled
=
{
disabled
}
style
=
{{
justifyContent
:
"
center
"
,
width
:
"
10%
"
,
height
:
"
90%
"
,
borderRadius
:
"
20px
"
,
backgroundColor
:
"
#C1C1C1
"
,
borderColor
:
"
#FFFFFF
"
}}
>
<
/Form.Group
>
<
FiSend
size
=
"
16px
"
color
=
"
FAFAFA
"
/>
<
/Form
>
<
/Button
>
<
/Form.Group
>
<
/Form
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
);
);
}
}
...
...
client/src/Pages/HomePage.js
View file @
8dfaaaab
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Row
,
Col
,
Button
,
Tabs
,
Tab
}
from
'
react-bootstrap
'
;
import
{
Row
,
Col
,
Button
,
Tabs
,
Tab
}
from
'
react-bootstrap
'
;
import
styled
from
'
styled-components
'
;
import
ClosedList
from
'
../Components/ClosedList
'
;
import
ClosedList
from
'
../Components/ClosedList
'
;
import
OpenList
from
'
../Components/OpenList
'
;
import
OpenList
from
'
../Components/OpenList
'
;
import
Menu
from
'
../Components/Menu
'
;
import
Menu
from
'
../Components/Menu
'
;
...
@@ -174,20 +175,21 @@ function Home() {
...
@@ -174,20 +175,21 @@ function Home() {
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse>
<Navbar.Collapse>
<Nav> */
}
<Nav> */
}
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Sdiv
chat
=
{
chat
}
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
ClosedList
closedlist
=
{
closedlist
}
singleChat
=
{
singleChat
}
recievedMsg
=
{
recievedMsg
}
leaveInfo
=
{
leaveInfo
}
setLeaveInfo
=
{
setLeaveInfo
}
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
closeChatRoom
=
{
closeChatRoom
}
/
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
/Tab
>
<
ClosedList
closedlist
=
{
closedlist
}
singleChat
=
{
singleChat
}
recievedMsg
=
{
recievedMsg
}
leaveInfo
=
{
leaveInfo
}
setLeaveInfo
=
{
setLeaveInfo
}
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
closeChatRoom
=
{
closeChatRoom
}
/
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
onClick
=
{
handleChatc
}
>
<
/Tab
>
<
OpenList
openlist
=
{
openlist
}
enterChatRoom
=
{
enterChatRoom
}
openListroom
=
{
openListroom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
closeChatRoom
=
{
closeChatRoom
}
/
>
<
Tab
eventKey
=
"
open
"
title
=
"
공개방
"
onClick
=
{
handleChatc
}
>
<
/Tab
>
<
OpenList
openlist
=
{
openlist
}
enterChatRoom
=
{
enterChatRoom
}
openListroom
=
{
openListroom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
closeChatRoom
=
{
closeChatRoom
}
/
>
<
/Tabs
>
<
/Tab
>
<
/Tabs
>
<
/Sdiv
>
{
/* </Nav>
{
/* </Nav>
</Navbar.Collapse>
</Navbar.Collapse>
</Navbar> */
}
</Navbar> */
}
<
/Col
>
<
/Col
>
<
Col
style
=
{{
padding
:
"
0
"
}}
>
<
Col
style
=
{{
padding
:
"
5px
"
,
marginLeft
:
"
15px
"
}}
>
<>
<>
{(
show
||
chat
)
?
{(
show
||
chat
)
?
null
null
...
@@ -224,4 +226,12 @@ function Home() {
...
@@ -224,4 +226,12 @@ function Home() {
);
);
}
}
const
Sdiv
=
styled
.
div
`
@media screen and (max-width: 768px) {
display:
${({
chat
})
=>
{
return
chat
===
false
?
'
block
'
:
'
none
'
}}
}
`
export
default
Home
;
export
default
Home
;
\ No newline at end of file
package.json
View file @
8dfaaaab
...
@@ -29,6 +29,7 @@
...
@@ -29,6 +29,7 @@
"
nodemon
"
:
"
^2.0.6
"
,
"
nodemon
"
:
"
^2.0.6
"
,
"
react-icons
"
:
"
^4.1.0
"
,
"
react-icons
"
:
"
^4.1.0
"
,
"
socket.io
"
:
"
^3.0.5
"
,
"
socket.io
"
:
"
^3.0.5
"
,
"
styled-components
"
:
"
^5.2.1
"
,
"
validator
"
:
"
^13.5.2
"
"
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