Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2021-1-capstone-design1
/
GCL_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이승윤
2021-06-11 22:45:51 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
36eddf49293de9342b64cf33e734a1b88e177a94
36eddf49
1 parent
c7ca6c16
style: DropdownButton 아이콘 스타일 추가
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
8 additions
and
4 deletions
frontend/src/components/Header.js
frontend/src/components/common/Button.js
frontend/src/components/common/DropdownButton.js
frontend/src/components/Header.js
View file @
36eddf4
...
...
@@ -146,7 +146,7 @@ const Header = () => {
<
SortOptionContainer
>
<
DropDownButton
color
=
"white"
width
=
"
85
px"
width
=
"
100
px"
fontsize
=
"15px"
height
=
"36px"
title
=
"정렬(기본)"
...
...
@@ -156,7 +156,7 @@ const Header = () => {
{
id
:
2
,
name
:
'크기높은순'
},
{
id
:
3
,
name
:
'크기낮은순'
},
]}
/
>
/>
{' '
}
<
/SortOptionContainer
>
<
SearchOptionContainer
onClick
=
{
openModal
}
>
<
Button
color
=
"gray"
>
고급
검색
<
/Button
>
...
...
frontend/src/components/common/Button.js
View file @
36eddf4
...
...
@@ -13,7 +13,7 @@ const ButtonBlock = styled.div`
const
Buttons
=
({
children
,
color
,
float
,
width
,
fontsize
})
=>
{
return
(
<
ButtonBlock
float
=
{
float
}
width
=
{
width
}
fontsize
=
{
fontsize
}
>
<
Button
fullWidth
size
=
"lg"
color
=
{
color
||
'blue'
}
>
<
Button
size
=
"lg"
color
=
{
color
||
'blue'
}
>
{
children
}
<
/Button>
<
/ButtonBlock>
...
...
frontend/src/components/common/DropdownButton.js
View file @
36eddf4
import
React
,
{
useState
,
useEffect
}
from
'react'
;
import
{
TiArrowSortedDown
}
from
'react-icons/ti'
;
import
{
Menu
,
MenuItem
}
from
'@mantine/core'
;
import
styled
from
'styled-components'
;
import
{
dropdownHeaderColorMap
}
from
'../../lib/styles/palette'
;
...
...
@@ -10,6 +11,9 @@ const DropDownBlock = styled.div`
const
DropDownHeader
=
styled
(
Menu
)
``
;
const
DropDownWrap
=
styled
.
button
`
display: flex;
justify-content: space-around;
align-items: center;
color:
${
props
=>
dropdownHeaderColorMap
[
props
.
color
].
color
}
;
background-color:
${
props
=>
dropdownHeaderColorMap
[
props
.
color
].
background
}
;
cursor: pointer;
...
...
@@ -18,7 +22,6 @@ const DropDownWrap = styled.button`
dropdownHeaderColorMap
[
props
.
color
].
hoverBackground
}
;
}
margin-bottom: 0.8em;
padding: 0.4em;
width:
${
props
=>
props
.
width
||
'100px'
}
;
height:
${
props
=>
props
.
height
||
'30px'
}
;
padding-right: 7%;
...
...
@@ -51,6 +54,7 @@ const DropDown = ({
height
=
{
height
}
>
{
menuTitle
}
<
TiArrowSortedDown
/>
<
/DropDownWrap
>
}
>
...
...
Please
register
or
login
to post a comment