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) {
...
@@ -126,7 +126,7 @@ function Chat(props) {
return
(
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
"
}}
>
<
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
>
<
a
href
=
"
#;
"
onClick
=
{
handleClick
}
style
=
{{
margin
:
"
0px 0px 0px 15px
"
}}
><
BsCaretLeftFill
size
=
"
20
"
color
=
"
#333333
"
/><
/a
>
<
div
style
=
{{
justifyContent
:
"
center
"
}}
>
<
div
style
=
{{
justifyContent
:
"
center
"
}}
>
...
@@ -142,7 +142,7 @@ function Chat(props) {
...
@@ -142,7 +142,7 @@ function Chat(props) {
<
a
href
=
"
#;
"
onClick
=
{()
=>
setExit
(
!
exit
)}
><
BsX
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
a
href
=
"
#;
"
onClick
=
{()
=>
setExit
(
!
exit
)}
><
BsX
size
=
"
1em
"
color
=
"
#F2D788
"
/><
/a
>
<
/div
>
<
/div
>
:
null
}
:
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
)
=>
{
{
chat
.
map
((
value
,
index
)
=>
{
if
(
!
(
value
.
msg
===
''
))
{
if
(
!
(
value
.
msg
===
''
))
{
if
(
value
.
sender
===
"
system
"
)
{
if
(
value
.
sender
===
"
system
"
)
{
...
...
client/src/Components/ClosedList.js
View file @
308d5b7f
...
@@ -16,7 +16,8 @@ function ClosedList(props) {
...
@@ -16,7 +16,8 @@ function ClosedList(props) {
}
}
return
(
return
(
<
div
>
<
div
style
=
{{
height
:
"
80vh
"
}}
>
<
div
style
=
{{
overflow
:
'
auto
'
,
height
:
"
100%
"
}}
>
{
props
.
closedlist
.
map
((
item
,
index
)
=>
{
props
.
closedlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
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
}
>
...
@@ -27,6 +28,7 @@ function ClosedList(props) {
...
@@ -27,6 +28,7 @@ function ClosedList(props) {
)
)
}
}
<
/div
>
<
/div
>
<
/div
>
)
)
}
}
...
...
client/src/Components/Menu.js
View file @
308d5b7f
import
React
,
{
useState
}
from
'
react
'
import
React
from
'
react
'
import
{
Navbar
,
Nav
}
from
'
react-bootstrap
'
;
import
{
Nav
}
from
'
react-bootstrap
'
;
import
{
handleLogout
}
from
'
../utils/auth
'
;
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
{
AiOutlineLogout
}
from
"
react-icons/ai
"
;
import
"
../menu.css
"
;
function
Menu
()
{
function
Menu
(
props
)
{
const
[
showIcon
,
setShowIcon
]
=
useState
(
false
);
const
name
=
sessionStorage
.
getItem
(
'
name
'
);
const
name
=
sessionStorage
.
getItem
(
'
name
'
);
console
.
log
(
'
showIcon
'
,
showIcon
)
return
(
return
(
<
MenuDiv
setShowIcon
=
{
setShowIcon
}
>
<
div
className
=
"
container-fluid
"
style
=
{{
display
:
"
flex
"
,
flexDirection
:
"
row
"
,
backgroundColor
:
"
#61477a
"
,
heigth
:
"
100%
"
,
position
:
"
relative
"
}}
>
<
Navbar
style
=
{{
backgroundColor
:
"
#61477a
"
,
heigth
:
"
100%
"
}}
variant
=
"
dark
"
>
<
p
className
=
"
navbar-brand
"
href
=
"
/home
"
style
=
{{
color
:
'
white
'
,
alignItems
:
"
center
"
}}
>
YDK
Messenger
<
/p
>
<
div
className
=
"
container-fluid
"
>
{
name
?
<
Navbar
.
Brand
className
=
"
navbar-brand
"
href
=
"
/home
"
>
YDK
Messenger
<
/Navbar.Brand
>
<>
{
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
>
<
Nav
className
=
"
nav navbar-nav mr-auto
"
style
=
{{
color
:
'
white
'
}}
>
<
div
className
=
"
showText
"
>
<
Nav
.
Item
className
=
"
mt-2 mr-4
"
>
{
name
}
님
환영합니다
<
/Nav.Item
>
<
a
href
=
"
/profile
"
style
=
{{
color
:
"
#FFFFFF
"
,
marginRight
:
"
15px
"
}}
>
{
'
Profile
'
}
<
/a
>
{
showIcon
?
<
a
onClick
=
{()
=>
handleLogout
()}
href
=
"
/login
"
style
=
{{
color
:
"
#FFFFFF
"
}}
>
{
'
logout
'
}
<
/a
>
<
a
href
=
"
/profile
"
><
BsPeopleCircle
size
=
"
15
"
color
=
"
#FFFFFF
"
/><
/a
>
<
/div
>
:
<
Nav
.
Link
href
=
"
/profile
"
>
Profile
<
/Nav.Link>
}
<
div
className
=
"
showIcon
"
>
{
showIcon
?
<
a
href
=
"
/profile
"
style
=
{{
marginRight
:
"
15px
"
}}
><
BsPeopleCircle
size
=
"
25
"
color
=
"
#FFFFFF
"
/><
/a
>
<
a
href
=
"
/login
"
onClick
=
{()
=>
handleLogout
()}
><
AiOutlineLogout
size
=
"
15
"
color
=
"
#FFFFFF
"
/><
/a
>
<
a
href
=
"
/login
"
onClick
=
{()
=>
handleLogout
()}
><
AiOutlineLogout
size
=
"
25
"
color
=
"
#FFFFFF
"
/><
/a
>
:
<
Nav
.
Link
onClick
=
{()
=>
handleLogout
()}
href
=
"
/login
"
>
logout
<
/Nav.Link>
}
<
/div
>
<
/Nav
>
<
/div
>
<
/
>
<
/
>
:
<>
:
<>
<
Nav
className
=
"
nav navbar-nav
"
>
<
Nav
className
=
"
nav navbar-nav
"
>
<
Nav
.
Link
href
=
"
/login
"
>
Login
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/login
"
>
Login
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/signup
"
>
Signup
<
/Nav.Link
>
<
Nav
.
Link
href
=
"
/signup
"
>
Signup
<
/Nav.Link
>
<
/Nav
>
<
/Nav
>
<
/>
}
<
/>
}
<
/div
>
<
/div
>
<
/Navbar
>
<
/MenuDiv
>
)
)
}
}
const
MenuDiv
=
styled
.
div
`
@media (max-width: 500px) {
display: 'none';
}
`
export
default
Menu
export
default
Menu
client/src/Components/OpenList.js
View file @
308d5b7f
...
@@ -17,7 +17,7 @@ function OpenList(props) {
...
@@ -17,7 +17,7 @@ function OpenList(props) {
}
}
return
(
return
(
<
div
>
<
div
style
=
{{
overflow
:
'
auto
'
,
height
:
"
80vh
"
}}
>
{
props
.
openlist
.
map
((
item
,
index
)
=>
{
props
.
openlist
.
map
((
item
,
index
)
=>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
key
=
{
index
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
>
<
ListGroup
.
Item
action
onClick
=
{
enterChatRoomCH
}
name
=
{
item
.
roomId
}
>
...
...
client/src/Pages/HomePage.js
View file @
308d5b7f
...
@@ -170,9 +170,9 @@ function Home() {
...
@@ -170,9 +170,9 @@ function Home() {
},
[])
},
[])
return
(
return
(
<
div
style
=
{{
weight
:
"
100vw
"
,
height
:
"
100vh
"
,
backgroundColor
:
"
#4A5D7E
"
}}
>
<
div
style
=
{{
weight
:
"
100vw
"
,
height
:
"
100vh
"
,
backgroundColor
:
""
}}
>
<
Menu
style
=
{{
weight
:
"
100%
"
,
height
:
"
10%
"
}}
/
>
<
Menu
style
=
{{
weight
:
"
100%
"
,
height
:
"
10%
"
}}
/
>
<
Row
className
=
"
mr-0
"
style
=
{{
weight
:
"
100%
"
,
height
:
"
80%
"
}}
>
<
Row
className
=
"
mr-0
"
style
=
{{
weight
:
"
100%
"
,
height
:
"
80%
"
}}
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Col
className
=
"
list
"
md
=
{
5
}
>
<
Sdiv
chat
=
{
chat
}
>
<
Sdiv
chat
=
{
chat
}
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
<
Tabs
defaultActiveKey
=
"
closed
"
id
=
"
uncontrolled-tab-example
"
>
...
@@ -225,8 +225,8 @@ function Home() {
...
@@ -225,8 +225,8 @@ function Home() {
const
Sdiv
=
styled
.
div
`
const
Sdiv
=
styled
.
div
`
@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {
display:
${({
chat
})
=>
{
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
React
,
{
useState
,
useEffect
}
from
'
react
'
import
Menu
from
'
../Components/Menu
'
;
import
Menu
from
'
../Components/Menu
'
;
import
styled
from
'
styled-components
'
;
import
{
Image
,
Button
,
Container
,
Form
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
Image
,
Button
,
Container
,
Form
,
Row
,
Col
}
from
'
react-bootstrap
'
;
import
{
BrowserRouter
as
Link
}
from
'
react-router-dom
'
;
import
{
BrowserRouter
as
Link
}
from
'
react-router-dom
'
;
import
axios
from
'
axios
'
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