이승윤

feat: Input quert state 설정

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