Showing
1 changed file
with
28 additions
and
3 deletions
| 1 | import React, { useState } from 'react'; | 1 | import React, { useState } from 'react'; |
| 2 | import styled from 'styled-components'; | 2 | import styled from 'styled-components'; |
| 3 | import { useHistory } from 'react-router-dom'; | 3 | import { useHistory } from 'react-router-dom'; |
| 4 | +import SearchBox from './SearchBox'; | ||
| 4 | import { inputColorMap } from '../../lib/styles/palette'; | 5 | import { inputColorMap } from '../../lib/styles/palette'; |
| 5 | 6 | ||
| 6 | const InputBlock = styled.div` | 7 | const InputBlock = styled.div` |
| ... | @@ -17,17 +18,33 @@ const InputBlock = styled.div` | ... | @@ -17,17 +18,33 @@ const InputBlock = styled.div` |
| 17 | color: ${props => inputColorMap[props.color].placeholder}; | 18 | color: ${props => inputColorMap[props.color].placeholder}; |
| 18 | text-transform: uppercase; | 19 | text-transform: uppercase; |
| 19 | } | 20 | } |
| 21 | + float: left; | ||
| 20 | } | 22 | } |
| 21 | float: ${props => props.float || ''}; | 23 | float: ${props => props.float || ''}; |
| 22 | `; | 24 | `; |
| 25 | +const SearchIconWrap = styled.div``; | ||
| 23 | 26 | ||
| 24 | -const Input = ({ color, size, float, width }) => { | 27 | +const Input = ({ |
| 28 | + color, | ||
| 29 | + size, | ||
| 30 | + float, | ||
| 31 | + width, | ||
| 32 | + placeholder = '내용을 입력해 주세요.', | ||
| 33 | + value, | ||
| 34 | +}) => { | ||
| 25 | const [query, setQuery] = useState(''); | 35 | const [query, setQuery] = useState(''); |
| 26 | const history = useHistory(); | 36 | const history = useHistory(); |
| 27 | return ( | 37 | return ( |
| 28 | - <InputBlock color={color} size={size} float={float} width={width}> | 38 | + <InputBlock |
| 39 | + color={color} | ||
| 40 | + size={size} | ||
| 41 | + float={float} | ||
| 42 | + width={width} | ||
| 43 | + placeholder={placeholder} | ||
| 44 | + value={value} | ||
| 45 | + > | ||
| 29 | <input | 46 | <input |
| 30 | - placeholder="내용을 입력해 주세요." | 47 | + placeholder={placeholder} |
| 31 | type="text" | 48 | type="text" |
| 32 | value={query} | 49 | value={query} |
| 33 | onChange={e => setQuery(e.target.value)} | 50 | onChange={e => setQuery(e.target.value)} |
| ... | @@ -42,6 +59,14 @@ const Input = ({ color, size, float, width }) => { | ... | @@ -42,6 +59,14 @@ const Input = ({ color, size, float, width }) => { |
| 42 | } | 59 | } |
| 43 | }} | 60 | }} |
| 44 | /> | 61 | /> |
| 62 | + <SearchIconWrap | ||
| 63 | + onClick={() => { | ||
| 64 | + const params = new URLSearchParams({ query }); | ||
| 65 | + history.push(`?${params.toString()}`); | ||
| 66 | + }} | ||
| 67 | + > | ||
| 68 | + <SearchBox color="blue" size="50px" /> | ||
| 69 | + </SearchIconWrap> | ||
| 45 | </InputBlock> | 70 | </InputBlock> |
| 46 | ); | 71 | ); |
| 47 | }; | 72 | }; | ... | ... |
-
Please register or login to post a comment