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