feat: Input quert state 설정

-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
 import { inputColorMap } from '../../lib/styles/palette';
 import { inputColorMap } from '../../lib/styles/palette';
 
 
 const InputBlock = styled.div`
 const InputBlock = styled.div`
   input {
   input {
-    padding: 20px;
-    padding-right: 200px;
+    padding: ${props => props.size};
+    padding-right: ${props => props.width};
     color: ${props => inputColorMap[props.color].color};
     color: ${props => inputColorMap[props.color].color};
     box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
     box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
     border: 3px solid ${props => inputColorMap[props.color].borderColor};
     border: 3px solid ${props => inputColorMap[props.color].borderColor};
@@ -20,10 +21,27 @@ const InputBlock = styled.div`
   float: ${props => props.float || ''};
   float: ${props => props.float || ''};
 `;
 `;
 
 
-const Input = ({ children, color, size, float }) => {
+const Input = ({ color, size, float, width }) => {
+  const [query, setQuery] = useState('');
+  const history = useHistory();
   return (
   return (
-    <InputBlock color={color} size={size} float={float}>
-      <input placeholder={children} color={color} />
+    <InputBlock color={color} size={size} float={float} width={width}>
+      <input
+        placeholder="내용을 입력해 주세요."
+        type="text"
+        value={query}
+        onChange={e => setQuery(e.target.value)}
+        onKeyPress={e => {
+          if (e.key === 'Enter') {
+            if (query === '') {
+              alert('검색어를 입력 해 주세요.');
+              return;
+            }
+            const params = new URLSearchParams({ query });
+            history.push(`?${params.toString()}`);
+          }
+        }}
+      />
     </InputBlock>
     </InputBlock>
   );
   );
 };
 };