Showing
2 changed files
with
22 additions
and
4 deletions
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 | ... | ... |
-
Please register or login to post a comment