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
e851bc83
Commit
e851bc83
authored
Jan 29, 2021
by
Soo Hyun Kim
Browse files
0129 머지
parents
308d5b7f
60db2082
Changes
6
Show whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
e851bc83
...
...
@@ -147,31 +147,31 @@ function Chat(props) {
if
(
!
(
value
.
msg
===
''
))
{
if
(
value
.
sender
===
"
system
"
)
{
return
(
<
Row
style
=
{{
background
:
"
#F5F5F5
"
,
border
:
"
none
"
}}
>
<
Row
style
=
{{
background
:
"
#F5F5F5
"
,
border
:
"
none
"
,
justifyContent
:
"
center
"
}}
>
{
value
.
msg
}
<
/Row
>
)
}
else
if
(
!
(
value
.
sender
===
user
.
nickname
))
{
return
(
<
Row
key
=
{
index
}
className
=
'
m-1
'
>
<
Col
xs
=
{
2
}
>
<
Image
src
=
{
value
.
img
&&
`/images/
${
value
.
img
}
`
}
style
=
{{
width
:
"
5
0
px
"
,
height
:
"
5
0
px
"
}}
roundedCircle
/>
<
Row
key
=
{
index
}
className
=
'
d-flex flex-wrap-nowrap mt-2
'
style
=
{{
width
:
"
95%
"
,
maxWidth
:
'
95%
'
}}
>
<
Col
xs
=
"
auto
"
>
<
Image
src
=
{
value
.
img
&&
`/images/
${
value
.
img
}
`
}
style
=
{{
width
:
"
5
5
px
"
,
height
:
"
5
5
px
"
}}
roundedCircle
/>
<
/Col
>
<
Col
xs
=
{
8
}
>
<
Col
className
=
"
ml-2
"
>
<
Row
><
strong
>
{
value
.
sender
}
<
/strong></
Row
>
<
Row
className
=
'
d-flex flex-wrap-nowrap
'
>
<
Row
className
=
'
border
'
style
=
{{
width
:
'
max-content
'
,
maxWidth
:
'
300px
'
,
height
:
'
auto
'
,
paddingLeft
:
'
15px
'
,
paddingRight
:
'
15px
'
,
background
:
'
#f1ebf7
'
,
borderRadius
:
'
5px
'
,
fontSize
:
'
x-large
'
}}
>
{
value
.
msg
}
<
/Row
>
<
Col
className
=
'
ml-1
'
>
{
value
.
time
}
<
/Col
>
<
Row
xs
=
"
auto
"
className
=
'
d-flex flex-wrap-nowrap
'
>
<
Row
style
=
{{
width
:
'
max-content
'
,
maxWidth
:
'
80%
'
,
height
:
'
auto
'
,
paddingLeft
:
'
15px
'
,
paddingRight
:
'
15px
'
,
background
:
'
#f1ebf7
'
,
borderRadius
:
'
5px
'
,
fontSize
:
'
x-large
'
}}
>
{
value
.
msg
}
<
/Row
>
<
Col
className
=
"
ml-1
"
>
{
value
.
time
}
<
/Col
>
<
/Row
>
<
/Col
>
<
/Row
>
)
}
else
{
return
(
//내가 보낸 메시지
<
Row
key
=
{
index
}
className
=
'
m
-1
justify-content-end
'
>
<
Row
key
=
{
index
}
className
=
'
m
t-2
justify-content-end
'
style
=
{{
width
:
"
100%
"
}}
>
<
Row
className
=
'
d-flex flex-wrap-nowrap
'
>
<
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
:
'
px
'
,
fontSize
:
'
x-large
'
}}
>
{
value
.
msg
}
<
/
Row
>
<
Col
xs
=
"
auto
"
className
=
"
ml-3
"
>
{
value
.
time
}
<
/Col
>
<
Col
className
=
'
mr-
1
'
name
=
'
msg
'
style
=
{{
width
:
'
max-content
'
,
maxWidth
:
'
300px
'
,
height
:
'
auto
'
,
paddingLeft
:
'
15px
'
,
paddingRight
:
'
15px
'
,
background
:
"
#d6c8e3
"
,
borderRadius
:
'
5
px
'
,
fontSize
:
'
x-large
'
}}
>
{
value
.
msg
}
<
/
Col
>
<
/Row
>
<
/Row
>
)
...
...
@@ -188,7 +188,7 @@ function Chat(props) {
<
Form
.
Group
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-evenly
"
}}
>
<
Form
.
Control
name
=
'
chat
'
type
=
"
text
"
value
=
{
inner
}
onChange
=
{
handleChange
}
style
=
{{
width
:
"
80%
"
,
height
:
"
90%
"
,
borderColor
:
"
#FFFFFF
"
}}
/
>
<
Button
type
=
"
submit
"
disabled
=
{
disabled
}
style
=
{{
justifyContent
:
"
center
"
,
width
:
"
10%
"
,
height
:
"
90%
"
,
borderRadius
:
"
20px
"
,
backgroundColor
:
"
#C1C1C1
"
,
borderColor
:
"
#FFFFFF
"
}}
>
<
FiSend
size
=
"
16px
"
color
=
"
FAFAFA
"
/>
<
FiSend
size
=
"
16px
"
color
=
"
#
FAFAFA
"
/>
<
/Button
>
<
/Form.Group
>
<
/Form
>
...
...
client/src/Components/OpenList.js
View file @
e851bc83
...
...
@@ -7,13 +7,9 @@ function OpenList(props) {
if
(
props
.
roomCode
){
props
.
closeChatRoom
(
props
.
roomCode
)
}
console
.
log
(
'
e확인
'
,
e
.
target
)
const
roomCode
=
e
.
target
.
name
// props.enterChatRoom(roomCode) // 각각의 room으로 들어가도록 설정해야 함
props
.
openListroom
(
roomCode
)
props
.
setRoomCode
(
roomCode
)
// props.clearChat()
}
return
(
...
...
client/src/Components/RoomMake.js
View file @
e851bc83
...
...
@@ -28,7 +28,6 @@ function RoomMake(props) {
const
Id
=
res
.
data
.
roomId
alert
(
`방암호는
${
Id
}
입니다`
)
props
.
handleCloseModal
()
props
.
handleChato
()
setRoom
(
INIT_ROOM
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
...
...
@@ -62,7 +61,6 @@ function RoomMake(props) {
<
option
>
언어
<
/option
>
<
option
>
취미
<
/option
>
<
/Form.Control
>
{
/* <Form.Control type="text" /> */
}
<
/Col
>
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
controlId
=
"
chatIsOpen
"
>
...
...
client/src/Pages/HomePage.js
View file @
e851bc83
...
...
@@ -54,7 +54,12 @@ function Home() {
const
[
recievedTime
,
setRecievedTime
]
=
useState
(
''
)
const
[
leaveInfo
,
setLeaveInfo
]
=
useState
([{
roomName
:
""
,
leaveTime
:
""
}])
const
handleCloseModal
=
()
=>
setShowModal
(
false
);
const
handleCloseModal
=
()
=>
{
setShowModal
(
false
);
getClosedList
()
getOpenList
()
}
const
handleShowModal
=
()
=>
setShowModal
(
true
);
const
handleCloseEnter
=
()
=>
setShowEnter
(
false
);
const
handleShowEnter
=
()
=>
setShowEnter
(
true
);
...
...
@@ -67,7 +72,9 @@ function Home() {
async
function
enterChatRoom
(
rCode
)
{
//방 입장하기
socket
.
emit
(
'
joinRoom
'
,
rCode
)
socket
.
emit
(
'
newUser
'
,
{
rmIf
:
rCode
,
userInfo
:
userName
})
setShow
(
true
)
console
.
log
(
`joinRoom :
${
rCode
}
입장`
)
console
.
log
(
'
show:
'
,
show
)
//여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
}
...
...
@@ -81,7 +88,6 @@ function Home() {
const
userNick
=
response
.
data
.
nickname
;
await
axios
.
put
(
'
/room/deleteMem
'
,
{
userId
:
userId
,
roomId
:
roomId
})
setSysmsg
(
`
${
userNick
}
님이 나갔습니다.`
)
console
.
log
(
`
${
roomId
}
방
${
userId
}
탈퇴`
)
setRoomCode
(
""
)
}
...
...
@@ -93,19 +99,16 @@ function Home() {
async
function
getOpenList
()
{
let
res
=
await
axios
.
get
(
'
/room/openlist
'
)
console
.
log
(
'
getOpenlist
'
,
res
.
data
)
setOpenlist
(
res
.
data
)
}
//오픈채팅방에서 참가하기
async
function
openListroom
(
roomId
)
{
console
.
log
(
roomId
)
const
roomInf
=
await
axios
.
get
(
'
/room/changeMem
'
,
{
params
:
{
'
roomId
'
:
roomId
}
})
setRoom
(
roomInf
.
data
[
0
])
setOpen
(
true
)
setShow
(
false
)
setOpen
(
true
)
}
//오픈채팅방에서 참가하기
async
function
attendListRoom
()
{
const
roomId
=
room
.
roomId
const
tf
=
await
axios
.
put
(
'
/room/changeMem
'
,
{
userId
:
userId
,
roomId
:
roomId
})
...
...
@@ -114,6 +117,7 @@ function Home() {
if
(
tf
.
data
)
{
alert
(
'
참가되었습니다.
'
)
setSysmsg
(
`
${
userNick
}
님이 들어왔습니다.`
)
getClosedList
()
}
else
{
alert
(
'
이미 참가된 방입니다.
'
)
}
...
...
@@ -186,21 +190,16 @@ function Home() {
<
/Sdiv
>
<
/Col
>
<
Col
style
=
{{
padding
:
"
5px
"
,
marginLeft
:
"
15px
"
}}
>
<>
{(
show
||
chat
)
?
null
{
show
?
<>
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
leaveInfo
=
{
leaveInfo
}
setLeaveInfo
=
{
setLeaveInfo
}
sendMsg
=
{
sendMsg
}
singleChat
=
{
singleChat
}
singleUser
=
{
singleUser
}
singleImg
=
{
singleImg
}
singleTime
=
{
singleTime
}
recievedMsg
=
{
recievedMsg
}
recievedUser
=
{
recievedUser
}
recievedImg
=
{
recievedImg
}
recievedTime
=
{
recievedTime
}
setSingleChat
=
{
setSingleChat
}
setSingleUser
=
{
setSingleUser
}
setSingleImg
=
{
setSingleImg
}
setSingleTime
=
{
setSingleTime
}
setRecievedMsg
=
{
setRecievedMsg
}
roomCode
=
{
roomCode
}
roomName
=
{
roomName
}
closeChatRoom
=
{
closeChatRoom
}
exitRoom
=
{
exitRoom
}
/
>
:
<
div
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
20px
"
,
right
:
"
30px
"
}}
>
<
Button
style
=
{{
borderColor
:
"
#9174ad
"
,
backgroundColor
:
"
#9174ad
"
,
color
:
'
white
'
}}
onClick
=
{
handleShowModal
}
size
=
"
lg
"
block
>
생성
<
/Button
>
<
Button
style
=
{{
borderColor
:
"
#9174ad
"
,
backgroundColor
:
"
#9174ad
"
,
color
:
'
white
'
}}
onClick
=
{
handleShowEnter
}
size
=
"
lg
"
block
>
참가
<
/Button
>
<
/div
>
}
{
chat
?
<
Chat
handleChatc
=
{
handleChatc
}
leaveInfo
=
{
leaveInfo
}
setLeaveInfo
=
{
setLeaveInfo
}
sendMsg
=
{
sendMsg
}
singleChat
=
{
singleChat
}
singleUser
=
{
singleUser
}
singleImg
=
{
singleImg
}
singleTime
=
{
singleTime
}
recievedMsg
=
{
recievedMsg
}
recievedUser
=
{
recievedUser
}
recievedImg
=
{
recievedImg
}
recievedTime
=
{
recievedTime
}
setSingleChat
=
{
setSingleChat
}
setSingleUser
=
{
setSingleUser
}
setSingleImg
=
{
setSingleImg
}
setSingleTime
=
{
setSingleTime
}
setRecievedMsg
=
{
setRecievedMsg
}
roomCode
=
{
roomCode
}
roomName
=
{
roomName
}
closeChatRoom
=
{
closeChatRoom
}
exitRoom
=
{
exitRoom
}
/
>
:
null
}
{(
open
&&
!
chat
)
?
<
/div>} </
>
:
<>
{
open
?
<
div
className
=
"
vh-90 flex-column align-items-center justify-content-center mt-2
"
variant
=
"
dark
"
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
mt-5 p-5
shadow w-75
"
>
<
div
className
=
"
mt-5 p-5
mr-2
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
borderColor
:
"
#4A5D7E
"
,
backgroundColor
:
"
#FFFFFF
"
,
padding
:
'
15px
'
,
position
:
"
relative
"
}}
>
<
h2
className
=
"
d-flex justify-content-center mb-3
"
>
현재
{
room
.
roomName
}
방
입니다
.
<
/h2
>
<
h5
>
▷
관심분야
:
{
room
.
interest
}
<
/h5
>
<
h5
>
▷
참여인원
:
{
room
.
member
.
length
}
<
/h5
>
...
...
@@ -211,9 +210,10 @@ function Home() {
<
/Row
>
<
/div
>
<
/div
>
<
/div
>
:
null
}
<
/
>
<
/div> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}
>
<
Button
style
=
{{
borderColor
:
"
#9174ad
"
,
backgroundColor
:
"
#9174ad
"
,
color
:
'
white
'
}}
onClick
=
{
handleShowModal
}
size
=
"
lg
"
block
>
생성
<
/Button
>
<
Button
style
=
{{
borderColor
:
"
#9174ad
"
,
backgroundColor
:
"
#9174ad
"
,
color
:
'
white
'
}}
onClick
=
{
handleShowEnter
}
size
=
"
lg
"
block
>
참가
<
/Button
>
<
/div>} </
>
}
<
/Col
>
<
/Row
>
<
RoomMake
showModal
=
{
showModal
}
handleCloseModal
=
{
handleCloseModal
}
/
>
...
...
client/src/Pages/LogInPage.js
View file @
e851bc83
...
...
@@ -38,8 +38,6 @@ function LogIn() {
setSucces
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
//setError(error.response.data)
//error객체가 들어감.
}
finally
{
setLoading
(
false
)
}
...
...
client/src/Pages/ProfilePage.js
View file @
e851bc83
...
...
@@ -124,9 +124,9 @@ function ProfilePage() {
<
/Row
>
<
Row
className
=
'
m-3 justify-content-center
'
>
<
Form
onSubmit
=
{
handleSubmit
}
>
<
Button
variant
=
"
outline-success
"
size
=
"
sm
"
className
=
"
mr-4
"
type
=
'
submit
'
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#9174ad
"
,
background
:
'
white
'
}}
>
저장
<
/Button
>
<
Button
size
=
"
sm
"
className
=
"
mr-4
"
type
=
'
submit
'
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#9174ad
"
,
background
:
'
white
'
}}
>
저장
<
/Button
>
<
Link
to
=
'
/
'
>
<
Button
variant
=
"
outline-success
"
size
=
"
sm
"
className
=
"
ml-4
"
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#9174ad
"
,
background
:
'
white
'
}}
>
홈
화면으로
<
/Button
>
<
Button
size
=
"
sm
"
className
=
"
ml-4
"
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#9174ad
"
,
background
:
'
white
'
}}
>
홈
화면으로
<
/Button
>
<
/Link
>
<
/Form
>
<
/Row
>
...
...
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