Showing
3 changed files
with
8 additions
and
4 deletions
... | @@ -146,7 +146,7 @@ const Header = () => { | ... | @@ -146,7 +146,7 @@ const Header = () => { |
146 | <SortOptionContainer> | 146 | <SortOptionContainer> |
147 | <DropDownButton | 147 | <DropDownButton |
148 | color="white" | 148 | color="white" |
149 | - width="85px" | 149 | + width="100px" |
150 | fontsize="15px" | 150 | fontsize="15px" |
151 | height="36px" | 151 | height="36px" |
152 | title="정렬(기본)" | 152 | title="정렬(기본)" |
... | @@ -156,7 +156,7 @@ const Header = () => { | ... | @@ -156,7 +156,7 @@ const Header = () => { |
156 | { id: 2, name: '크기높은순' }, | 156 | { id: 2, name: '크기높은순' }, |
157 | { id: 3, name: '크기낮은순' }, | 157 | { id: 3, name: '크기낮은순' }, |
158 | ]} | 158 | ]} |
159 | - /> | 159 | + />{' '} |
160 | </SortOptionContainer> | 160 | </SortOptionContainer> |
161 | <SearchOptionContainer onClick={openModal}> | 161 | <SearchOptionContainer onClick={openModal}> |
162 | <Button color="gray">고급 검색</Button> | 162 | <Button color="gray">고급 검색</Button> | ... | ... |
... | @@ -13,7 +13,7 @@ const ButtonBlock = styled.div` | ... | @@ -13,7 +13,7 @@ const ButtonBlock = styled.div` |
13 | const Buttons = ({ children, color, float, width, fontsize }) => { | 13 | const Buttons = ({ children, color, float, width, fontsize }) => { |
14 | return ( | 14 | return ( |
15 | <ButtonBlock float={float} width={width} fontsize={fontsize}> | 15 | <ButtonBlock float={float} width={width} fontsize={fontsize}> |
16 | - <Button fullWidth size="lg" color={color || 'blue'}> | 16 | + <Button size="lg" color={color || 'blue'}> |
17 | {children} | 17 | {children} |
18 | </Button> | 18 | </Button> |
19 | </ButtonBlock> | 19 | </ButtonBlock> | ... | ... |
1 | import React, { useState, useEffect } from 'react'; | 1 | import React, { useState, useEffect } from 'react'; |
2 | +import { TiArrowSortedDown } from 'react-icons/ti'; | ||
2 | import { Menu, MenuItem } from '@mantine/core'; | 3 | import { Menu, MenuItem } from '@mantine/core'; |
3 | import styled from 'styled-components'; | 4 | import styled from 'styled-components'; |
4 | import { dropdownHeaderColorMap } from '../../lib/styles/palette'; | 5 | import { dropdownHeaderColorMap } from '../../lib/styles/palette'; |
... | @@ -10,6 +11,9 @@ const DropDownBlock = styled.div` | ... | @@ -10,6 +11,9 @@ const DropDownBlock = styled.div` |
10 | const DropDownHeader = styled(Menu)``; | 11 | const DropDownHeader = styled(Menu)``; |
11 | 12 | ||
12 | const DropDownWrap = styled.button` | 13 | const DropDownWrap = styled.button` |
14 | + display: flex; | ||
15 | + justify-content: space-around; | ||
16 | + align-items: center; | ||
13 | color: ${props => dropdownHeaderColorMap[props.color].color}; | 17 | color: ${props => dropdownHeaderColorMap[props.color].color}; |
14 | background-color: ${props => dropdownHeaderColorMap[props.color].background}; | 18 | background-color: ${props => dropdownHeaderColorMap[props.color].background}; |
15 | cursor: pointer; | 19 | cursor: pointer; |
... | @@ -18,7 +22,6 @@ const DropDownWrap = styled.button` | ... | @@ -18,7 +22,6 @@ const DropDownWrap = styled.button` |
18 | dropdownHeaderColorMap[props.color].hoverBackground}; | 22 | dropdownHeaderColorMap[props.color].hoverBackground}; |
19 | } | 23 | } |
20 | margin-bottom: 0.8em; | 24 | margin-bottom: 0.8em; |
21 | - padding: 0.4em; | ||
22 | width: ${props => props.width || '100px'}; | 25 | width: ${props => props.width || '100px'}; |
23 | height: ${props => props.height || '30px'}; | 26 | height: ${props => props.height || '30px'}; |
24 | padding-right: 7%; | 27 | padding-right: 7%; |
... | @@ -51,6 +54,7 @@ const DropDown = ({ | ... | @@ -51,6 +54,7 @@ const DropDown = ({ |
51 | height={height} | 54 | height={height} |
52 | > | 55 | > |
53 | {menuTitle} | 56 | {menuTitle} |
57 | + <TiArrowSortedDown /> | ||
54 | </DropDownWrap> | 58 | </DropDownWrap> |
55 | } | 59 | } |
56 | > | 60 | > | ... | ... |
-
Please register or login to post a comment