Showing
1 changed file
with
24 additions
and
6 deletions
1 | -import React 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 { inputColorMap } from '../../lib/styles/palette'; | 4 | import { inputColorMap } from '../../lib/styles/palette'; |
4 | 5 | ||
5 | const InputBlock = styled.div` | 6 | const InputBlock = styled.div` |
6 | input { | 7 | input { |
7 | - padding: 20px; | 8 | + padding: ${props => props.size}; |
8 | - padding-right: 200px; | 9 | + padding-right: ${props => props.width}; |
9 | color: ${props => inputColorMap[props.color].color}; | 10 | color: ${props => inputColorMap[props.color].color}; |
10 | box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1); | 11 | box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1); |
11 | border: 3px solid ${props => inputColorMap[props.color].borderColor}; | 12 | border: 3px solid ${props => inputColorMap[props.color].borderColor}; |
... | @@ -20,10 +21,27 @@ const InputBlock = styled.div` | ... | @@ -20,10 +21,27 @@ const InputBlock = styled.div` |
20 | float: ${props => props.float || ''}; | 21 | float: ${props => props.float || ''}; |
21 | `; | 22 | `; |
22 | 23 | ||
23 | -const Input = ({ children, color, size, float }) => { | 24 | +const Input = ({ color, size, float, width }) => { |
25 | + const [query, setQuery] = useState(''); | ||
26 | + const history = useHistory(); | ||
24 | return ( | 27 | return ( |
25 | - <InputBlock color={color} size={size} float={float}> | 28 | + <InputBlock color={color} size={size} float={float} width={width}> |
26 | - <input placeholder={children} color={color} /> | 29 | + <input |
30 | + placeholder="내용을 입력해 주세요." | ||
31 | + type="text" | ||
32 | + value={query} | ||
33 | + onChange={e => setQuery(e.target.value)} | ||
34 | + onKeyPress={e => { | ||
35 | + if (e.key === 'Enter') { | ||
36 | + if (query === '') { | ||
37 | + alert('검색어를 입력 해 주세요.'); | ||
38 | + return; | ||
39 | + } | ||
40 | + const params = new URLSearchParams({ query }); | ||
41 | + history.push(`?${params.toString()}`); | ||
42 | + } | ||
43 | + }} | ||
44 | + /> | ||
27 | </InputBlock> | 45 | </InputBlock> |
28 | ); | 46 | ); |
29 | }; | 47 | }; | ... | ... |
-
Please register or login to post a comment