이승윤

style: DropdownButton 아이콘 스타일 추가

...@@ -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 >
......