이승윤

style: DropdownButton 아이콘 스타일 추가

......@@ -146,7 +146,7 @@ const Header = () => {
<SortOptionContainer>
<DropDownButton
color="white"
width="85px"
width="100px"
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>
......
......@@ -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>
......
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>
}
>
......