이승윤

style: 아이콘 스타일 추가

1 import React, { useState } from 'react'; 1 import React, { useState } from 'react';
2 import { NavLink, useHistory } from 'react-router-dom'; 2 import { NavLink, useHistory } from 'react-router-dom';
3 +import { FaSearch } from 'react-icons/fa';
3 import styled from 'styled-components'; 4 import styled from 'styled-components';
4 import InputBlock from './common/Input'; 5 import InputBlock from './common/Input';
5 import DropDownButton from './common/DropdownButton'; 6 import DropDownButton from './common/DropdownButton';
...@@ -123,6 +124,8 @@ const Header = () => { ...@@ -123,6 +124,8 @@ const Header = () => {
123 <DropDownContainer> 124 <DropDownContainer>
124 <DropDownWrap> 125 <DropDownWrap>
125 <DropDownButton 126 <DropDownButton
127 + menuPosition={{ top: 40 }}
128 + size={100}
126 color="blue" 129 color="blue"
127 float="left" 130 float="left"
128 fontsize="20px" 131 fontsize="20px"
...@@ -150,6 +153,8 @@ const Header = () => { ...@@ -150,6 +153,8 @@ const Header = () => {
150 fontsize="15px" 153 fontsize="15px"
151 height="36px" 154 height="36px"
152 title="정렬(기본)" 155 title="정렬(기본)"
156 + menuPosition={{ top: 29 }}
157 + size="100"
153 options={[ 158 options={[
154 { id: 0, name: '정렬(기본)' }, 159 { id: 0, name: '정렬(기본)' },
155 { id: 1, name: '날짜빠른순' }, 160 { id: 1, name: '날짜빠른순' },
...@@ -159,7 +164,9 @@ const Header = () => { ...@@ -159,7 +164,9 @@ const Header = () => {
159 />{' '} 164 />{' '}
160 </SortOptionContainer> 165 </SortOptionContainer>
161 <SearchOptionContainer onClick={openModal}> 166 <SearchOptionContainer onClick={openModal}>
162 - <Button color="gray">고급 검색</Button> 167 + <Button color="gray" size="md" icon={<FaSearch />}>
168 + 고급 검색
169 + </Button>
163 </SearchOptionContainer> 170 </SearchOptionContainer>
164 <Modal showModal={showModal} setShowModal={setShowModal} /> 171 <Modal showModal={showModal} setShowModal={setShowModal} />
165 </OptionContainer> 172 </OptionContainer>
......
1 import React from 'react'; 1 import React from 'react';
2 import styled from 'styled-components'; 2 import styled from 'styled-components';
3 +import { AiOutlineSearch } from 'react-icons/ai';
3 import { searchBoxColorMap } from '../../lib/styles/palette'; 4 import { searchBoxColorMap } from '../../lib/styles/palette';
4 5
5 -const ButtonBlock = styled.button` 6 +const ButtonBlock = styled.div`
7 + text-align: center;
8 + display: table-cell;
9 + vertical-align: middle;
6 width: ${props => props.size}; 10 width: ${props => props.size};
7 height: ${props => props.size}; 11 height: ${props => props.size};
8 - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 30 30'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
9 display: ${props => props.display}; 12 display: ${props => props.display};
10 background-color: ${props => searchBoxColorMap[props.color].background}; 13 background-color: ${props => searchBoxColorMap[props.color].background};
11 &:hover { 14 &:hover {
...@@ -18,9 +21,17 @@ const ButtonBlock = styled.button` ...@@ -18,9 +21,17 @@ const ButtonBlock = styled.button`
18 cursor: pointer; 21 cursor: pointer;
19 `; 22 `;
20 23
24 +const SFaSearch = styled(AiOutlineSearch)`
25 + width: 35px;
26 + height: 35px;
27 + margin-right: 5px;
28 + margin-top: 2px;
29 +`;
21 const SearchBox = ({ color, float, size = '1px', display = 'none' }) => { 30 const SearchBox = ({ color, float, size = '1px', display = 'none' }) => {
22 return ( 31 return (
23 - <ButtonBlock color={color} float={float} size={size} display={display} /> 32 + <ButtonBlock color={color} float={float} size={size} display={display}>
33 + <SFaSearch />
34 + </ButtonBlock>
24 ); 35 );
25 }; 36 };
26 37
......