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
f7b7d734
Commit
f7b7d734
authored
Jan 29, 2021
by
JeongYeonwoo
Browse files
Merge remote-tracking branch 'origin/young' into yeonwoo
parents
0a100f42
7ed274d3
Changes
21
Show whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
f7b7d734
...
...
@@ -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
:
''
,
...
...
@@ -13,7 +14,7 @@ const INIT_CHAT = {
}
function
Chat
(
props
)
{
const
[
sender
,
setSender
]
=
useState
([])
//
const [sender, setSender] = useState([])
//const [roomName, setRoomName] = useState('')
const
[
inner
,
setInner
]
=
useState
([
''
])
...
...
@@ -84,7 +85,6 @@ function Chat(props) {
props
.
setRecievedMsg
(
''
)
props
.
handleChatc
()
setChat
([
''
])
recordEntryLog
()
props
.
setRoomCode
(
''
)
}
...
...
@@ -124,7 +124,6 @@ function Chat(props) {
props
.
handleChatc
()
}
useEffect
(()
=>
{
getProfile
(
userId
)
},
[
userId
])
...
...
@@ -143,29 +142,32 @@ function Chat(props) {
return
(
<>
<
Container
id
=
"
chat
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
20px
'
,
border
:
"
2px solid
"
,
height
:
"
500px
"
,
margin
:
"
1%
"
,
borderColor
:
"
#BDBDBD
"
,
background
:
''
}}
>
<
Row
className
=
"
justify-content-center
"
style
=
{{
border
:
"
2px solid
"
,
borderWidth
:
"
medium
"
,
borderColor
:
"
#FFD75F
"
,
height
:
"
80px
"
}}
>
<
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
(
true
)}
>
{
'
=
'
}
<
/Button
>
<
/Col
>
<
/Row
>
<
div
id
=
"
chat
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
borderColor
:
"
#4A5D7E
"
,
backgroundColor
:
"
#FFFFFF
"
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
580px
"
,
position
:
"
relative
"
}}
>
<
div
id
=
"
chat-head
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
justifyContent
:
"
space-between
"
,
alignItems
:
"
center
"
,
width
:
"
100%
"
,
height
:
"
80px
"
}}
>
<
a
href
=
"
#;
"
onClick
=
{
handleClick
}
style
=
{{
margin
:
"
0px 0px 0px 15px
"
}}
><
BsCaretLeftFill
size
=
"
20
"
color
=
"
#333333
"
/><
/a
>
<
div
style
=
{{
justifyContent
:
"
center
"
}}
>
<
p
style
=
{{
color
:
"
#333333
"
,
fontWeight
:
"
bold
"
,
fontSize
:
"
1.6em
"
,
textAlign
:
"
center
"
,
margin
:
"
0px 0px 0.5px 0px
"
}}
>
{
props
.
roomName
}
<
/p
>
<
p
style
=
{{
color
:
"
#333333
"
,
fontSize
:
"
0.8em
"
,
textAlign
:
"
center
"
,
margin
:
"
0.5px 0px 0px 0px
"
}}
>
{
props
.
roomCode
}
<
/p
>
<
/div
>
<
a
href
=
"
#;
"
onClick
=
{()
=>
setExit
(
!
exit
)}
style
=
{{
margin
:
"
0px 15px 0px 0px
"
}}
><
BsList
size
=
"
20
"
color
=
"
#333333
"
/><
/a
>
<
/div
>
{
exit
?
<
Row
>
<
Col
>
퇴장하시겠습니까
?
<
/Col
>
<
Col
md
=
"
auto
"
><
Button
variant
=
"
light
"
onClick
=
{
exitAndCloseRoom
}
>
{
"
나가기
"
}
<
/Button></
Col
>
<
/Row
>
<
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
href
=
"
#;
"
onClick
=
{
exitAndCloseRoom
}
><
BsCheck
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
a
href
=
"
#;
"
onClick
=
{()
=>
setExit
(
!
exit
)}
><
BsX
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
/div
>
:
null
}
<
div
id
=
"
chat-body
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
400px
"
,
margin
:
"
1%
"
,
background
:
''
}}
>
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
.
msg
===
''
))
{
if
(
!
(
value
.
sender
===
user
.
nickname
))
{
if
(
value
.
sender
===
"
system
"
)
{
return
(
<
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
}
>
...
...
@@ -174,22 +176,18 @@ function Chat(props) {
<
Col
xs
=
{
8
}
>
<
Row
><
strong
>
{
value
.
sender
}
<
/strong></
Row
>
<
Row
className
=
'
d-flex flex-wrap-nowrap
'
>
<
Row
className
=
'
border
border-dark
'
style
=
{{
width
:
'
max-content
'
,
maxWidth
:
'
300px
'
,
height
:
'
auto
'
,
paddingLeft
:
'
15px
'
,
paddingRight
:
'
15px
'
,
background
:
'
white
'
,
borderRadius
:
'
5px
'
,
fontSize
:
'
x-large
'
}}
>
{
value
.
msg
}
<
/Row
>
<
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
>
<
/Col
>
<
/Row
>
)
}
else
if
(
sender
[
index
]
===
""
)
{
return
(
{
value
}
)
}
else
{
return
(
//내가 보낸 메시지
<
Row
key
=
{
index
}
className
=
'
m-1 justify-content-end
'
>
<
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
:
'
yellow
'
,
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
>
)
...
...
@@ -199,19 +197,20 @@ function Chat(props) {
}
})
}
<
/Container
>
<
Form
onSubmit
=
{
sendMsgCH
}
fluid
>
<
Form
.
Group
className
=
'
d-flex flex-wrap-nowrap justify-content-center m-3
'
>
<
Form
.
Control
className
=
'
border border-warning
'
name
=
'
chat
'
type
=
"
text
"
value
=
{
inner
}
onChange
=
{
handleChange
}
style
=
{{
width
:
'
85%
'
}}
/
>
<
Button
variant
=
"
warning
"
type
=
"
submit
"
disabled
=
{
disabled
}
style
=
{{
width
:
'
10%
'
}}
>
전송
<
/div
>
<
div
id
=
"
chat-low-side
"
style
=
{{
width
:
"
95%
"
,
height
:
"
60px
"
,
position
:
"
absolute
"
,
bottom
:
"
0
"
,
padding
:
"
10px 5px 5px 10px
"
}}
>
<
div
id
=
"
chat-form
"
style
=
{{
width
:
"
100%
"
,
height
:
"
100%
"
,
borderStyle
:
"
solid
"
,
borderWidth
:
"
2px
"
,
borderColor
:
"
#C1C1C1
"
,
borderRadius
:
"
25px
"
,
padding
:
"
3px 2px 2px 3px
"
}}
>
<
Form
onSubmit
=
{
sendMsgCH
}
>
<
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
"
/>
<
/Button
>
<
/Form.Group
>
<
/Form
>
<
/
>
<
/
div
>
<
/div
>
<
/div
>
);
}
...
...
client/src/Components/ClosedList.js
View file @
f7b7d734
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Badge
,
ListGroup
}
from
'
react-bootstrap
'
;
import
"
../Pages/Home.css
"
;
import
axios
from
'
axios
'
import
catchErrors
from
'
../utils/catchErrors
'
;
...
...
@@ -44,7 +45,7 @@ function ClosedList(props) {
useEffect
(()
=>
{
// 누군가 보내면 다시 개수 셈
console
.
log
(
'
chat 클라이언트 변경!
'
)
props
.
unreadMessage
()
console
.
log
(
'
새 메세지가 도착했습니다.
'
,
props
.
leftInfo
)
console
.
log
(
'
새 메세지가 도착했습니다.
'
,
props
.
leftInfo
)
},
[
props
.
checknew
])
useEffect
(()
=>
{
//일단 들오면 실행해야지
...
...
@@ -53,7 +54,7 @@ function ClosedList(props) {
let
count
=
[]
let
count
=
[]
const
[
unread
,
setUnread
]
=
useState
([])
useEffect
(()
=>
{
//unread정보가 들어오면 재정비해서 뿌려주기 위한 작업!
for
(
let
i
=
0
;
i
<
props
.
unreadnumber
.
length
;
i
++
)
{
...
...
@@ -66,7 +67,8 @@ function ClosedList(props) {
<
div
>
{
props
.
closedlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
value
=
{
item
.
roomName
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
value
=
{
item
.
roomName
}
className
=
'
rounded-0
'
>
{
item
.
roomName
}
{
unread
[
index
]
?
<
Badge
className
=
'
ml-2
'
pill
variant
=
'
danger
'
>
{
unread
[
index
]}
<
/Badge> : ''
}
<
/ListGroup.Item
>
...
...
client/src/Components/EnterRoom.js
View file @
f7b7d734
...
...
@@ -23,7 +23,6 @@ function EnterRoom(props) {
let
res
=
await
axios
.
post
(
'
/room/enterRoom
'
,
{
enterCode
})
await
axios
.
put
(
'
/room/member
'
,
{
userId
:
userId
,
roomId
:
enterCode
})
const
response
=
await
axios
.
get
(
'
/users/check
'
,
{
params
:
{
'
_id
'
:
userId
}
})
// console.log('res확인22', response.data.nickname)
const
userNick
=
response
.
data
.
nickname
;
props
.
setRoomName
(
res
.
data
)
props
.
setRoomCode
(
enterCode
)
...
...
@@ -53,7 +52,7 @@ function EnterRoom(props) {
<
/Form.Group
>
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
참가
<
/Button
>
<
Button
type
=
"
submit
"
style
=
{{
backgroundColor
:
"
#9174ad
"
,
borderColor
:
"
#9174ad
"
}}
>
참가
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
...
...
client/src/Components/Menu.js
View file @
f7b7d734
import
React
from
'
react
'
import
{
Navbar
,
Nav
,
Button
}
from
'
react-bootstrap
'
;
import
{
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
handleLogout
}
from
'
../utils/auth
'
;
...
...
@@ -8,22 +8,27 @@ function Menu() {
const
name
=
sessionStorage
.
getItem
(
'
name
'
);
return
(
<
Navbar
bg
=
"
dark
"
variant
=
"
dark
"
>
<
Navbar
.
Brand
href
=
"
/home
"
>
YDK
Messenger
<
/Navbar.Brand
>
<
Navbar
style
=
{{
backgroundColor
:
"
#61477a
"
}}
variant
=
"
dark
"
>
<
div
className
=
"
container-fluid
"
>
<
Navbar
.
Brand
className
=
"
navbar-brand
"
href
=
"
/home
"
>
YDK
Messenger
<
/Navbar.Brand
>
{
name
?
<>
<
di
v
className
=
'
ml-1 mr-2
'
style
=
{{
color
:
'
white
'
}}
>
{
name
}
님
환영합니다
<
/div
>
<
Nav
className
=
"
mr-auto
"
>
<
Na
v
className
=
"
nav navbar-nav mr-auto
"
style
=
{{
color
:
'
white
'
}}
>
<
Nav
.
Item
className
=
"
mt-2 mr-4
"
>
{
name
}
님
환영합니다
<
/Nav.Item
>
<
Nav
.
Link
href
=
"
/profile
"
>
Profile
<
/Nav.Link
>
<
Nav
.
Link
onClick
=
{()
=>
handleLogout
()}
href
=
"
/login
"
>
logout
<
/Nav.Link
>
<
/Nav
>
<
Button
className
=
"
ml-auto
"
onClick
=
{()
=>
handleLogout
()}
variant
=
"
light
"
>
Logout
<
/Button
>
<
/
>
:
<
Nav
className
=
"
ml-auto
"
>
<
Nav
.
Link
href
=
'
/login
'
>
로그인
<
/Nav.Link
>
<
Nav
.
Link
href
=
'
/signup
'
>
회원가입
<
/Nav.Link
>
<
/Nav>
}
:
<>
<
Nav
className
=
"
nav navbar-nav
"
>
<
Nav
.
Link
href
=
"
/login
"
>
Login
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/signup
"
>
Signup
<
/Nav.Link
>
<
/Nav
>
<
/>
}
<
/div
>
<
/Navbar
>
)
}
export
default
Menu
client/src/Components/OpenList.js
View file @
f7b7d734
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
React
from
'
react
'
import
{
ListGroup
}
from
'
react-bootstrap
'
;
import
axios
from
'
axios
'
import
"
../Pages/Home.css
"
;
function
OpenList
(
props
)
{
function
enterChatRoomCH
(
e
)
{
if
(
props
.
roomCode
){
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
(
<
div
>
{
props
.
openlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
className
=
'
rounded-0
'
>
{
item
.
roomName
}
<
/ListGroup.Item
>
<
/ListGroup
>
...
...
client/src/Components/RoomMake.js
View file @
f7b7d734
...
...
@@ -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
"
>
...
...
@@ -82,7 +80,7 @@ function RoomMake(props) {
}
<
Form
.
Group
as
=
{
Row
}
>
<
Col
sm
=
{{
span
:
5
,
offset
:
4
}}
>
<
Button
type
=
"
submit
"
>
방
생성
<
/Button
>
<
Button
type
=
"
submit
"
style
=
{{
backgroundColor
:
"
#9174ad
"
,
borderColor
:
"
#9174ad
"
}}
>
방
생성
<
/Button
>
<
/Col
>
<
/Form.Group
>
<
/Form
>
...
...
client/src/Pages/Home.css
0 → 100644
View file @
f7b7d734
.nav-tabs
.nav-item.nav-link
{
color
:
silver
!important
;
}
.nav-tabs
.nav-item.nav-link.active
{
color
:
slateblue
!important
;
}
.list-group-item-action
{
border-top
:
none
;
}
client/src/Pages/HomePage.js
View file @
f7b7d734
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
{
Row
,
Col
,
Button
,
Tabs
,
Tab
,
Form
}
from
'
react-bootstrap
'
;
import
styled
from
'
styled-components
'
;
import
ClosedList
from
'
../Components/ClosedList
'
;
import
OpenList
from
'
../Components/OpenList
'
;
import
Menu
from
'
../Components/Menu
'
;
...
...
@@ -8,6 +9,7 @@ import Chat from "../Components/Chat";
import
RoomMake
from
"
../Components/RoomMake
"
import
EnterRoom
from
"
../Components/EnterRoom
"
import
axios
from
'
axios
'
;
import
"
./Home.css
"
const
socket
=
io
();
...
...
@@ -59,7 +61,12 @@ function Home() {
const
[
singleTime
,
setSingleTime
]
=
useState
(
''
)
const
[
recievedTime
,
setRecievedTime
]
=
useState
(
''
)
const
handleCloseModal
=
()
=>
setShowModal
(
false
);
const
handleCloseModal
=
()
=>
{
setShowModal
(
false
);
getClosedList
()
getOpenList
()
}
const
handleShowModal
=
()
=>
setShowModal
(
true
);
const
handleCloseEnter
=
()
=>
setShowEnter
(
false
);
const
handleShowEnter
=
()
=>
setShowEnter
(
true
);
...
...
@@ -72,7 +79,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
)
//여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
console
.
log
(
'
HomePage/enterChatRoom 끝났습니다
'
)
}
...
...
@@ -84,8 +93,10 @@ function Home() {
async
function
exitRoom
(
roomId
)
{
const
response
=
await
axios
.
get
(
'
/users/check
'
,
{
params
:
{
'
_id
'
:
userId
}
})
const
userNick
=
response
.
data
.
nickname
;
await
axios
.
put
(
'
/room/deleteMem
'
,
{
userId
:
userId
,
roomId
:
roomId
})
console
.
log
(
`
${
roomId
}
방
${
userId
}
탈퇴
`
)
setSysmsg
(
`
${
userNick
}
님이 나갔습니다.
`
)
setRoomCode
(
""
)
}
...
...
@@ -98,19 +109,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
})
...
...
@@ -119,6 +127,7 @@ function Home() {
if
(
tf
.
data
)
{
alert
(
'
참가되었습니다.
'
)
setSysmsg
(
`
${
userNick
}
님이 들어왔습니다.`
)
getClosedList
()
}
else
{
alert
(
'
이미 참가된 방입니다.
'
)
}
...
...
@@ -158,7 +167,6 @@ function Home() {
sendInfo
:
{
msg
:
sysmsg
,
sender
:
"
system
"
,
// time: singleTime
}
})
setSysmsg
(
''
)
...
...
@@ -214,7 +222,8 @@ function Home() {
<>
<
Menu
/>
<
Row
className
=
"
mr-0
"
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Col
className
=
"
list
"
md
=
{
5
}
style
=
{{
overflow
:
'
auto
'
,
height
:
"
80%
"
}}
>
<
Sdiv
chat
=
{
chat
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tab
eventKey
=
"
closed
"
title
=
"
내 채팅
"
onClick
=
{
handleChato
}
>
<
ClosedList
closedlist
=
{
closedlist
}
leftInfo
=
{
leftInfo
}
checknew
=
{
checknew
}
unreadMessage
=
{
unreadMessage
}
unreadnumber
=
{
unreadnumber
}
setUnreadnumber
=
{
setUnreadnumber
}
userId
=
{
userId
}
singleChat
=
{
singleChat
}
recievedMsg
=
{
recievedMsg
}
enterChatRoom
=
{
enterChatRoom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
closeChatRoom
=
{
closeChatRoom
}
/
>
...
...
@@ -223,36 +232,32 @@ function Home() {
<
OpenList
openlist
=
{
openlist
}
enterChatRoom
=
{
enterChatRoom
}
openListroom
=
{
openListroom
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
roomCode
=
{
roomCode
}
closeChatRoom
=
{
closeChatRoom
}
/
>
<
/Tab
>
<
/Tabs
>
<
/Sdiv
>
<
/Col
>
<
Col
style
=
{{
padding
:
"
0
"
}}
>
<>
{(
show
||
chat
)
?
null
<
Col
style
=
{{
padding
:
"
5px
"
,
marginLeft
:
"
15px
"
}}
>
{
show
?
<>
{
chat
?
<
Chat
leftInfo
=
{
leftInfo
}
setLeftInfo
=
{
setLeftInfo
}
handleChatc
=
{
handleChatc
}
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
}
setRoomCode
=
{
setRoomCode
}
/
>
:
<
div
style
=
{{
position
:
"
fixed
"
,
bottom
:
"
20px
"
,
right
:
"
30px
"
}}
>
<
Button
variant
=
"
primary
"
onClick
=
{
handleShowModal
}
size
=
"
lg
"
block
>
생성
<
/Button
>
<
Button
variant
=
"
secondary
"
onClick
=
{
handleShowEnter
}
size
=
"
lg
"
block
>
참가
<
/Button
>
<
/div
>
}
{
chat
?
<
Chat
leftInfo
=
{
leftInfo
}
setLeftInfo
=
{
setLeftInfo
}
handleChatc
=
{
handleChatc
}
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
}
setRoomCode
=
{
setRoomCode
}
roomName
=
{
roomName
}
closeChatRoom
=
{
closeChatRoom
}
exitRoom
=
{
exitRoom
}
closedlist
=
{
closedlist
}
/
>
:
null
}
{
open
?
<
div
className
=
"
vh-90 flex-column align-items-center justify-content-center mt-2
"
variant
=
"
dark
"
>
<
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>} </
>
:
<>
{
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
"
>
<
h2
className
=
"
d-flex justify-content-center mb-3
"
>
현재
{
room
.
roomName
}
방
입니다
.
<
/h2
>
<
h2
className
=
"
d-flex justify-content-center mb-3
"
>
현재
{
room
.
roomName
}
입니다
.
<
/h2
>
<
h5
>
▷
관심분야
:
{
room
.
interest
}
<
/h5
>
<
h5
>
▷
참여인원
:
{
room
.
member
.
length
}
<
/h5
>
<
h5
className
=
"
mb-3
"
>
▷
방코드
(
방코드를
통해서도
참여할
수
있습니다
.)
:
{
room
.
roomId
}
<
/h5
>
<
Row
className
=
'
justify-content-center
'
>
<
Button
variant
=
"
outline
-warning
"
size
=
"
sm
"
className
=
"
mr-4
"
onClick
=
{
enterButton
}
>
뒤로가기
<
/Button
>
<
Button
variant
=
"
outline
-warning
"
size
=
"
sm
"
className
=
"
ml-4
"
type
=
'
submit
'
onClick
=
{
attendListRoom
}
>
참가
<
/Button
>
<
Button
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#b49dc9
"
}}
size
=
"
sm
"
className
=
"
mr-4
"
onClick
=
{
enterButton
}
>
뒤로가기
<
/Button
>
<
Button
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#b49dc9
"
}}
size
=
"
sm
"
className
=
"
ml-4
"
type
=
'
submit
'
onClick
=
{
attendListRoom
}
>
참가
<
/Button
>
<
/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
}
/
>
...
...
@@ -261,5 +266,12 @@ function Home() {
);
}
export
default
Home
;
const
Sdiv
=
styled
.
div
`
@media screen and (max-width: 768px) {
display:
${({
chat
})
=>
{
return
chat
===
false
?
'
block
'
:
'
none
'
}}
}
`
export
default
Home
;
\ No newline at end of file
client/src/Pages/LogInPage.js
View file @
f7b7d734
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
axios
from
'
axios
'
import
{
Button
,
Form
,
Container
,
Navbar
,
Spinner
,
Alert
}
from
'
react-bootstrap
'
;
import
{
Button
,
Form
,
Container
,
Spinner
,
Alert
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
import
{
Redirect
}
from
'
react-router-dom
'
import
{
handleLogin
}
from
'
../utils/auth
'
import
Menu
from
'
../Components/Menu
'
;
...
...
@@ -38,8 +38,6 @@ function LogIn() {
setSucces
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
//setError(error.response.data)
//error객체가 들어감.
}
finally
{
setLoading
(
false
)
}
...
...
@@ -91,11 +89,12 @@ function LogIn() {
<
Button
disabled
=
{
disabled
||
loading
}
type
=
"
submit
"
variant
=
"
outline
-success
"
variant
=
"
outline
"
size
=
"
lg
"
className
=
"
mr-4
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#b49dc9
"
,
background
:
'
white
'
,
font
:
'
dark
'
}}
block
>
{
loading
&&
<
Spinner
as
=
'
span
'
animation
=
'
border
'
size
=
'
sm
'
role
=
'
status
'
aria
-
hidden
=
'
true
'
/>
}
{
'
'
}
로그인
{
loading
&&
<
Spinner
as
=
'
span
'
animation
=
'
border
'
size
=
'
sm
'
role
=
'
status
'
aria
-
hidden
=
'
true
'
style
=
{{
color
:
"
#b49dc9
"
}}
/>} {' '} 로그
인
<
/Button
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
...
...
client/src/Pages/ProfilePage.js
View file @
f7b7d734
...
...
@@ -126,7 +126,7 @@ function ProfilePage() {
<
/Col
>
<
Col
xs
=
{
3
}
>
<
Form
className
=
"
d-flex
"
onSubmit
=
{
handleSubmitHidVis
}
>
<
Button
className
=
"
ml-3 d-flex justify-content-end
"
variant
=
"
outline
-primary
"
size
=
"
sm
"
type
=
'
submit
'
>
수정
<
/Button
>
<
Button
className
=
"
ml-3 d-flex justify-content-end
"
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#b49dc9
"
,
background
:
'
white
'
}}
size
=
"
sm
"
type
=
'
submit
'
>
수정
<
/Button
>
<
/Form
>
<
/Col
>
<
/Row
>
...
...
@@ -136,10 +136,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
'
>
저장
<
/Button
>
<
Link
to
=
'
/
'
>
<
Button
variant
=
"
outline-success
"
size
=
"
sm
"
className
=
"
ml-4
"
>
홈
화면으로
<
/Button
>
<
/Link
>
<
Button
size
=
"
sm
"
className
=
"
mr-4
"
type
=
'
submit
'
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#9174ad
"
,
background
:
'
white
'
}}
>
저장
<
/Button
>
<
Button
href
=
'
/
'
size
=
"
sm
"
className
=
"
ml-4
"
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#9174ad
"
,
background
:
'
white
'
}}
>
홈
화면으로
<
/Button
>
<
/Form
>
<
/Row
>
<
/Col
>
...
...
client/src/Pages/SignUpPage.js
View file @
f7b7d734
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
import
axios
from
'
axios
'
import
{
Button
,
Form
,
Container
,
Alert
,
Navbar
}
from
'
react-bootstrap
'
;
import
{
Button
,
Form
,
Container
,
Alert
,
Spinner
}
from
'
react-bootstrap
'
;
import
catchErrors
from
'
../utils/catchErrors
'
;
import
{
Redirect
}
from
'
react-router-dom
'
;
import
Menu
from
'
../Components/Menu
'
;
...
...
@@ -18,6 +18,7 @@ function SingUp() {
const
[
error
,
setError
]
=
useState
(
''
)
const
[
disabled
,
setDisabled
]
=
useState
(
true
)
const
[
success
,
setSuccess
]
=
useState
(
false
)
const
[
loading
,
setLoading
]
=
useState
(
false
)
useEffect
(()
=>
{
const
isUser
=
Object
.
values
(
user
).
every
(
el
=>
Boolean
(
el
))
...
...
@@ -32,22 +33,15 @@ function SingUp() {
async
function
handleSubmit
(
event
)
{
event
.
preventDefault
();
//빈문자열 입력 시 오류 문자 출력
//const form = event.currentTarget;
//if (form.checkValidity() === false) {
// event.preventDefault();
// event.stopPropagation();
// //event.stopPropagation() : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.
//}
//setValidated(true);
// console.log(user)
try
{
setLoading
(
true
)
setError
(
''
)
await
axios
.
post
(
'
/users/signup
'
,
user
)
setSuccess
(
true
)
}
catch
(
error
)
{
catchErrors
(
error
,
setError
)
}
finally
{
setLoading
(
false
)
}
}
...
...
@@ -57,11 +51,9 @@ function SingUp() {
return
<
Redirect
to
=
'
/login
'
/>
}
return
(
<>
<
Menu
/>
<
Form
onSubmit
=
{
handleSubmit
}
className
=
'
vh-100 flex-column align-items-center justify-content-center mt-2
'
>
<
Container
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
mt-5 p-5 shadow w-75
"
>
...
...
@@ -127,10 +119,12 @@ function SingUp() {
<
Button
disabled
=
{
disabled
}
type
=
'
submit
'
variant
=
"
outline
-success
"
variant
=
"
outline
"
size
=
"
lg
"
className
=
"
mr-4
"
block
>
가입
<
/Button
>
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#b49dc9
"
,
background
:
'
white
'
,
font
:
'
dark
'
}}
block
>
{
loading
&&
<
Spinner
as
=
'
span
'
animation
=
'
border
'
size
=
'
sm
'
role
=
'
status
'
aria
-
hidden
=
'
true
'
style
=
{{
color
:
"
#b49dc9
"
}}
/>}가입</
Button
>
{
error
&&
<
Alert
variant
=
'
danger
'
>
{
error
}
<
/Alert>
}
...
...
client/src/utils/auth.js
View file @
f7b7d734
...
...
@@ -10,7 +10,7 @@ export async function handleLogout() {
sessionStorage
.
clear
();
await
axios
.
get
(
'
/auth/logout
'
)
//login페이지로 이동
window
.
location
.
href
=
'
/login
'
//
window.location.href='/login'
}
export
function
isAuthenticated
()
{
...
...
server/controllers/room.controller.js
View file @
f7b7d734
import
Room
from
"
../models/Room.js
"
import
{
customAlphabet
}
from
'
nanoid
'
import
isLength
from
'
validator/lib/isLength.js
'
//import AccessInfo from '../models/AccessInfo.js'
import
Chat
from
"
../models/Chat.js
"
import
EntryLog
from
"
../models/EntryLog.js
"
...
...
@@ -70,25 +69,6 @@ const getRoomName = async (req, res) => {
}
}
// const sysMsg = async (req, res) => {
// try {
// console.log('sysreq', req.query)
// let rmif = await Room.find({ roomId: req.query.roomCode })
// console.log('rmif', rmif)
// let rmid = await AccessInfo.find({ room: rmif._id })
// console.log('rmid', rmid)
// if (rmid.isEnt) {
// let msg = `${rmif.nickname}이 들어왔습니다`
// } else {
// }
// } catch (error) {
// res.status(500).send('')
// }
// }
const
changemember
=
async
(
req
,
res
)
=>
{
const
{
userId
,
roomId
}
=
req
.
body
// console.log(roomId)
...
...
@@ -127,10 +107,7 @@ const deleteUserId = async (req, res) => {
const
roomInf
=
async
(
req
,
res
)
=>
{
try
{
// console.log(req.query.roomId)
// let roomInf = await Room.findOne({ member: req.query.roomId }).select('interest roomId member').exec()
let
roomInf
=
await
Room
.
find
({
roomId
:
req
.
query
.
roomId
})
// console.log('room_member로 정보 가져오기:', roomInf)
return
res
.
json
(
roomInf
)
}
catch
(
error
)
{
alert
(
'
올바르지 못한 접근입니다.
'
)
...
...
server/controllers/roomEnter.controller.js
View file @
f7b7d734
...
...
@@ -5,16 +5,13 @@ import EntryLog from "../models/EntryLog.js";
const
roomEnter
=
async
(
req
,
res
)
=>
{
const
roomId
=
req
.
body
.
enterCode
// console.log(req)
try
{
const
room
=
await
Room
.
findOne
({
roomId
})
if
(
!
room
)
{
return
res
.
status
(
404
).
send
(
`참여코드가 존재하지 않습니다.`
)
}
console
.
log
(
'
roomId존재
'
)
const
name
=
await
Room
.
findOne
({
roomId
:
roomId
}).
select
(
'
roomName
'
)
return
res
.
json
(
name
.
roomName
)
...
...
server/controllers/user.controller.js
View file @
f7b7d734
...
...
@@ -86,7 +86,6 @@ const getProfile = (req, res) => {
const
checkUser
=
async
(
req
,
res
)
=>
{
try
{
const
info
=
await
User
.
findOne
({
_id
:
req
.
query
.
_id
})
console
.
log
(
'
info 확인
'
,
info
)
return
res
.
json
(
info
)
}
catch
(
error
)
{
console
.
log
(
error
)
...
...
server/models/Room.js
View file @
f7b7d734
...
...
@@ -25,7 +25,7 @@ const RoomSchema = new mongoose.Schema({
member
:
{
type
:
Array
,
required
:
true
,
}
}
,
},
{
timestamps
:
true
})
...
...
server/models/User.js
View file @
f7b7d734
...
...
@@ -35,11 +35,10 @@ const UserSchema = new mongoose.Schema({
default
:
'
3cd14b9bcb2007f324fcb82e0b566cce
'
,
},
},
{
//옵셥을 정의함.
timestamps
:
true
//기본이 false로 되어있음
//user가 추가될때마다 createdAt(만들어진 시간 저장)과 updatedAt(수정될때 시간이 변경되어 저장)가 추가되어 시간을 저장함.
})
export
default
mongoose
.
models
.
User
||
mongoose
.
model
(
'
User
'
,
UserSchema
)
//user라는 이름이 있으면 앞을 return하고 없으면 뒤를 실행함
server/routes/auth.routes.js
View file @
f7b7d734
...
...
@@ -10,11 +10,6 @@ router.route('/auth/login')
router
.
route
(
'
/auth/logout
'
)
.
get
(
authCtrl
.
logout
)
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
//express middleware : (req, res) => {}
//node(req(client의 정보), res)를 넘겨줌.
export
default
router
\ No newline at end of file
server/server.js
View file @
f7b7d734
...
...
@@ -34,12 +34,6 @@ io.on("connection", (socket) => { // 기본 연결
socket
.
leave
(
roomInfo
);
//클라이언트에서 data에 적힌 room정보를 브로드캐스팅 받지 않는다.
});
socket
.
on
(
'
newUser
'
,
(
data
)
=>
{
// console.log('newUser', data)
let
userInfo
=
data
.
userInfo
;
io
.
to
(
data
.
rmIf
).
emit
(
'
sendUser
'
,
userInfo
)
})
socket
.
on
(
'
chat
'
,
async
(
data
)
=>
{
// console.log('roomname확인', data)
const
room
=
await
Room
.
findOne
({
roomId
:
data
.
roomInfo
})
...
...
uploads/19877e6cdeb6d21139ee57df54bc0ddd
0 → 100644
View file @
f7b7d734
File added
Prev
1
2
Next
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