이승윤

feat: search box 클릭시 submit 기능 추가

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 };
......