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
d36c5c41
Commit
d36c5c41
authored
Jan 29, 2021
by
Choi Ga Young
Browse files
Merge remote-tracking branch 'origin/sooModalTest' into young
parents
7ed274d3
1464d40d
Changes
8
Show whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
d36c5c41
...
...
@@ -142,7 +142,7 @@ function Chat(props) {
return
(
<
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
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
column
"
,
borderStyle
:
"
solid
"
,
borderRadius
:
"
5px
"
,
borderColor
:
"
#4A5D7E
"
,
backgroundColor
:
"
#FFFFFF
"
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
90vh
"
,
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
"
}}
>
...
...
@@ -158,7 +158,7 @@ function Chat(props) {
<
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
:
''
}}
>
<
div
id
=
"
chat-body
"
style
=
{{
overflow
:
'
auto
'
,
padding
:
'
15px
'
,
width
:
"
100%
"
,
height
:
"
75%
"
,
margin
:
"
1%
"
,
background
:
''
}}
>
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
.
msg
===
''
))
{
if
(
value
.
sender
===
"
system
"
)
{
...
...
@@ -169,25 +169,25 @@ function Chat(props) {
)
}
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
:
'
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
{
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
>
)
...
...
client/src/Components/ClosedList.js
View file @
d36c5c41
...
...
@@ -38,10 +38,8 @@ function ClosedList(props) {
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//안읽은 메세지 count하는 부분
useEffect
(()
=>
{
// 누군가 보내면 다시 개수 셈
console
.
log
(
'
chat 클라이언트 변경!
'
)
props
.
unreadMessage
()
...
...
@@ -64,7 +62,8 @@ function ClosedList(props) {
},
[
props
.
unreadnumber
])
return
(
<
div
>
<
div
style
=
{{
height
:
"
80vh
"
}}
>
<
div
style
=
{{
overflow
:
'
auto
'
,
height
:
"
100%
"
}}
>
{
props
.
closedlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
value
=
{
item
.
roomName
}
...
...
@@ -76,6 +75,7 @@ function ClosedList(props) {
)
}
<
/div
>
<
/div
>
)
}
...
...
client/src/Components/Menu.js
View file @
d36c5c41
import
React
from
'
react
'
import
{
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
Nav
}
from
'
react-bootstrap
'
;
import
{
handleLogout
}
from
'
../utils/auth
'
;
import
{
BsPeopleCircle
}
from
"
react-icons/bs
"
;
import
{
AiOutlineLogout
}
from
"
react-icons/ai
"
;
import
"
../menu.css
"
;
function
Menu
()
{
function
Menu
(
props
)
{
const
name
=
sessionStorage
.
getItem
(
'
name
'
);
return
(
<
Navbar
style
=
{{
backgroundColor
:
"
#61477a
"
}}
variant
=
"
dark
"
>
<
div
className
=
"
container-fluid
"
>
<
Navbar
.
Brand
className
=
"
navbar-brand
"
href
=
"
/home
"
>
YDK
Messenger
<
/Navbar.Brand
>
<
div
className
=
"
container-fluid
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
backgroundColor
:
"
#61477a
"
,
heigth
:
"
100%
"
,
position
:
"
relative
"
}}
>
<
a
href
=
"
/
"
className
=
"
navbar-brand
"
href
=
"
/home
"
style
=
{{
color
:
'
white
'
,
alignItems
:
"
center
"
}}
>
{
'
YDK Messenger
'
}
<
/a
>
{
name
?
<>
<
Nav
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
>
<
div
className
=
"
nav navbar-nav mr-auto
"
style
=
{{
color
:
'
white
'
,
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
alignItems
:
"
center
"
}}
>
<
p
className
=
"
mt-2 mr-4
"
>
{
`
${
name
}
님 환영합니다`
}
<
/p
>
<
div
className
=
"
showText
"
>
<
a
href
=
"
/profile
"
style
=
{{
color
:
"
#FFFFFF
"
,
marginRight
:
"
15px
"
}}
>
{
'
Profile
'
}
<
/a
>
<
a
onClick
=
{()
=>
handleLogout
()}
href
=
"
/login
"
style
=
{{
color
:
"
#FFFFFF
"
}}
>
{
'
logout
'
}
<
/a
>
<
/div
>
<
div
className
=
"
showIcon
"
>
<
a
href
=
"
/profile
"
style
=
{{
marginRight
:
"
15px
"
}}
><
BsPeopleCircle
size
=
"
25
"
color
=
"
#FFFFFF
"
/><
/a
>
<
a
href
=
"
/login
"
onClick
=
{()
=>
handleLogout
()}
><
AiOutlineLogout
size
=
"
25
"
color
=
"
#FFFFFF
"
/><
/a
>
<
/div
>
<
/div
>
<
/
>
:
<>
<
Nav
className
=
"
nav navbar-nav
"
>
<
Nav
.
Link
href
=
"
/login
"
>
Login
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/signup
"
>
Signup
<
/Nav.Link
>
<
/Nav
>
<
div
className
=
"
nav navbar-nav
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
alignItems
:
"
center
"
}}
>
<
div
className
=
"
showTextBFLogin
"
>
<
a
href
=
"
/login
"
style
=
{{
color
:
"
#FFFFFF
"
,
marginRight
:
"
15px
"
}}
>
{
'
Login
'
}
<
/a
>
<
a
href
=
"
/signup
"
style
=
{{
color
:
"
#FFFFFF
"
}}
>
{
'
Signup
'
}
<
/a
>
<
/div
>
<
/div
>
<
/>
}
<
/div
>
<
/Navbar
>
)
}
export
default
Menu
client/src/Components/OpenList.js
View file @
d36c5c41
...
...
@@ -14,7 +14,7 @@ function OpenList(props) {
}
return
(
<
div
>
<
div
style
=
{{
overflow
:
'
auto
'
,
height
:
"
80vh
"
}}
>
{
props
.
openlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
className
=
'
rounded-0
'
>
...
...
client/src/Pages/HomePage.js
View file @
d36c5c41
...
...
@@ -219,11 +219,11 @@ function Home() {
},
[])
return
(
<>
<
Menu
/>
<
Row
className
=
"
mr-0
"
>
<
Col
className
=
"
list
"
md
=
{
5
}
style
=
{{
overflow
:
'
auto
'
,
height
:
"
80%
"
}}
>
<
Sdiv
chat
=
{
chat
}
>
<
div
style
=
{{
weight
:
"
100vw
"
,
height
:
"
100vh
"
,
backgroundColor
:
""
}}
>
<
Menu
style
=
{{
weight
:
"
100%
"
,
height
:
"
10%
"
}}
/
>
<
Row
className
=
"
mr-0
"
style
=
{{
weight
:
"
100%
"
,
height
:
"
80%
"
}}
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Sdiv
chat
=
{
chat
}
open
=
{
open
}
>
<
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
}
/
>
...
...
@@ -241,10 +241,11 @@ function Home() {
<
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
"
>
:
<>
{
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
>
<
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
>
<
h5
className
=
"
mb-3
"
>
▷
방코드
(
방코드를
통해서도
참여할
수
있습니다
.)
:
{
room
.
roomId
}
<
/h5
>
...
...
@@ -262,14 +263,14 @@ function Home() {
<
/Row
>
<
RoomMake
showModal
=
{
showModal
}
handleCloseModal
=
{
handleCloseModal
}
/
>
<
EnterRoom
showEnter
=
{
showEnter
}
enterChatRoom
=
{
enterChatRoom
}
handleCloseEnter
=
{
handleCloseEnter
}
handleChato
=
{
handleChato
}
setRoomCode
=
{
setRoomCode
}
setRoomName
=
{
setRoomName
}
sysmsg
=
{
sysmsg
}
setSysmsg
=
{
setSysmsg
}
/
>
<
/
>
<
/
div
>
);
}
const
Sdiv
=
styled
.
div
`
@media screen and (max-width: 768px) {
display:
${({
chat
})
=>
{
return
chat
===
false
?
'
block
'
:
'
none
'
display:
${({
chat
,
open
})
=>
{
return
(
chat
||
open
)
?
'
none
'
:
'
block
'
}}
}
`
...
...
client/src/Pages/LogInPage.js
View file @
d36c5c41
...
...
@@ -54,7 +54,7 @@ function LogIn() {
return
(
<>
<
Menu
/>
<
Form
onSubmit
=
{
handleSubmit
}
className
=
'
vh-
100
flex-column align-items-center justify-content-center mt-2
'
>
<
Form
onSubmit
=
{
handleSubmit
}
className
=
'
vh-
85
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
"
>
<
h2
className
=
"
text-center
"
>
로그인
<
/h2
>
...
...
client/src/Pages/ProfilePage.js
View file @
d36c5c41
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
Menu
from
'
../Components/Menu
'
;
import
{
Image
,
Button
,
Container
,
Form
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
BrowserRouter
as
Link
}
from
'
react-router-dom
'
;
import
axios
from
'
axios
'
import
catchErrors
from
'
../utils/catchErrors
'
import
{
isAuthenticated
}
from
'
../utils/auth
'
;
...
...
@@ -137,8 +136,7 @@ function ProfilePage() {
<
Row
className
=
'
m-3 justify-content-center
'
>
<
Form
onSubmit
=
{
handleSubmit
}
>
<
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
>
<
Button
href
=
"
/
"
size
=
"
sm
"
className
=
"
ml-4
"
variant
=
"
outline
"
style
=
{{
border
:
"
3px solid
"
,
borderColor
:
"
#9174ad
"
,
background
:
'
white
'
}}
>
홈
화면으로
<
/Button
>
<
/Form
>
<
/Row
>
<
/Col
>
...
...
client/src/menu.css
0 → 100644
View file @
d36c5c41
.showText
{
display
:
flex
;
flex-direction
:
row
;
margin-right
:
5px
;
margin-left
:
5px
;
position
:
absolute
;
right
:
0
;
}
.showTextBFLogin
{
display
:
flex
;
flex-direction
:
row
;
margin-right
:
5px
;
margin-left
:
5px
;
position
:
absolute
;
right
:
0
;
}
.showIcon
{
display
:
none
;
}
@media
screen
and
(
max-width
:
768px
)
{
.showText
{
display
:
none
;
}
.showIcon
{
display
:
flex
;
flex-direction
:
row
;
margin-right
:
5px
;
margin-left
:
5px
;
position
:
absolute
;
right
:
0
;
}
}
\ No newline at end of file
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