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
308d5b7f
Commit
308d5b7f
authored
Jan 27, 2021
by
Soo Hyun Kim
Browse files
0127 전체css완
parent
6a147e31
Changes
7
Hide whitespace changes
Inline
Side-by-side
client/src/Components/Chat.js
View file @
308d5b7f
...
...
@@ -126,7 +126,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
"
}}
>
...
...
@@ -142,7 +142,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
"
)
{
...
...
client/src/Components/ClosedList.js
View file @
308d5b7f
...
...
@@ -16,7 +16,8 @@ function ClosedList(props) {
}
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
}
>
...
...
@@ -27,6 +28,7 @@ function ClosedList(props) {
)
}
<
/div
>
<
/div
>
)
}
...
...
client/src/Components/Menu.js
View file @
308d5b7f
import
React
,
{
useState
}
from
'
react
'
import
{
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
React
from
'
react
'
import
{
Nav
}
from
'
react-bootstrap
'
;
import
{
handleLogout
}
from
'
../utils/auth
'
;
import
styled
from
'
styled-components
'
;
import
{
BsPeopleCircle
}
from
"
react-icons/bs
"
;
import
{
BsPeopleCircle
}
from
"
react-icons/bs
"
;
import
{
AiOutlineLogout
}
from
"
react-icons/ai
"
;
import
"
../menu.css
"
;
function
Menu
()
{
const
[
showIcon
,
setShowIcon
]
=
useState
(
false
);
function
Menu
(
props
)
{
const
name
=
sessionStorage
.
getItem
(
'
name
'
);
console
.
log
(
'
showIcon
'
,
showIcon
)
return
(
<
MenuDiv
setShowIcon
=
{
setShowIcon
}
>
<
Navbar
style
=
{{
backgroundColor
:
"
#61477a
"
,
heigth
:
"
100%
"
}}
variant
=
"
dark
"
>
<
div
className
=
"
container-fluid
"
>
<
Navbar
.
Brand
className
=
"
navbar-brand
"
href
=
"
/home
"
>
YDK
Messenger
<
/Navbar.Brand
>
{
name
?
<>
<
Nav
className
=
"
nav navbar-nav mr-auto
"
style
=
{{
color
:
'
white
'
}}
>
<
Nav
.
Item
className
=
"
mt-2 mr-4
"
>
{
name
}
님
환영합니다
<
/Nav.Item
>
{
showIcon
?
<
a
href
=
"
/profile
"
><
BsPeopleCircle
size
=
"
15
"
color
=
"
#FFFFFF
"
/><
/a
>
:
<
Nav
.
Link
href
=
"
/profile
"
>
Profile
<
/Nav.Link>
}
{
showIcon
?
<
a
href
=
"
/login
"
onClick
=
{()
=>
handleLogout
()}
><
AiOutlineLogout
size
=
"
15
"
color
=
"
#FFFFFF
"
/><
/a
>
:
<
Nav
.
Link
onClick
=
{()
=>
handleLogout
()}
href
=
"
/login
"
>
logout
<
/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
>
<
/MenuDiv
>
<
div
className
=
"
container-fluid
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
backgroundColor
:
"
#61477a
"
,
heigth
:
"
100%
"
,
position
:
"
relative
"
}}
>
<
p
className
=
"
navbar-brand
"
href
=
"
/home
"
style
=
{{
color
:
'
white
'
,
alignItems
:
"
center
"
}}
>
YDK
Messenger
<
/p
>
{
name
?
<>
<
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
>
)
}
const
MenuDiv
=
styled
.
div
`
@media (max-width: 500px) {
display: 'none';
}
`
export
default
Menu
client/src/Components/OpenList.js
View file @
308d5b7f
...
...
@@ -17,7 +17,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
}
>
...
...
client/src/Pages/HomePage.js
View file @
308d5b7f
...
...
@@ -170,9 +170,9 @@ function Home() {
},
[])
return
(
<
div
style
=
{{
weight
:
"
100vw
"
,
height
:
"
100vh
"
,
backgroundColor
:
"
#4A5D7E
"
}}
>
<
Menu
style
=
{{
weight
:
"
100%
"
,
height
:
"
10%
"
}}
/
>
<
Row
className
=
"
mr-0
"
style
=
{{
weight
:
"
100%
"
,
height
:
"
80%
"
}}
>
<
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
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
...
...
@@ -225,8 +225,8 @@ function Home() {
const
Sdiv
=
styled
.
div
`
@media screen and (max-width: 768px) {
display:
${({
chat
})
=>
{
return
chat
===
false
?
'
block
'
:
'
none
'
}}
return
chat
===
false
?
'
block
'
:
'
none
'
}}
}
`
...
...
client/src/Pages/ProfilePage.js
View file @
308d5b7f
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
Menu
from
'
../Components/Menu
'
;
import
styled
from
'
styled-components
'
;
import
{
Image
,
Button
,
Container
,
Form
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
BrowserRouter
as
Link
}
from
'
react-router-dom
'
;
import
axios
from
'
axios
'
...
...
client/src/menu.css
0 → 100644
View file @
308d5b7f
.showText
{
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