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