style: Search icon display 속성 추가

@@ -132,7 +132,7 @@ const Header = () => {
               />
               />
             </DropDownWrap>
             </DropDownWrap>
           </DropDownContainer>
           </DropDownContainer>
-          <InputBlock color="blue" size="14px" width="400px">
+          <InputBlock color="blue" size="14px" width="400px" display="">
             <input />
             <input />
           </InputBlock>
           </InputBlock>
         </SearchContainer>
         </SearchContainer>

@@ -30,7 +30,7 @@ const Input = ({
   float,
   float,
   width,
   width,
   placeholder = '내용을 입력해 주세요.',
   placeholder = '내용을 입력해 주세요.',
-  value,
+  display,
 }) => {
 }) => {
   const [query, setQuery] = useState('');
   const [query, setQuery] = useState('');
   const history = useHistory();
   const history = useHistory();
@@ -41,7 +41,7 @@ const Input = ({
       float={float}
       float={float}
       width={width}
       width={width}
       placeholder={placeholder}
       placeholder={placeholder}
-      value={value}
+      display={display}
     >
     >
       <input
       <input
         placeholder={placeholder}
         placeholder={placeholder}
@@ -65,7 +65,7 @@ const Input = ({
           history.push(`?${params.toString()}`);
           history.push(`?${params.toString()}`);
         }}
         }}
       >
       >
-        <SearchBox color="blue" size="50px" />
+        <SearchBox color="blue" size="50px" display={display} />
       </SearchIconWrap>
       </SearchIconWrap>
     </InputBlock>
     </InputBlock>
   );
   );

@@ -6,7 +6,7 @@ const ButtonBlock = styled.button`
   width: ${props => props.size};
   width: ${props => props.size};
   height: ${props => props.size};
   height: ${props => props.size};
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 30 30'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 30 30'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-
+  display: ${props => props.display};
   background-color: ${props => searchBoxColorMap[props.color].background};
   background-color: ${props => searchBoxColorMap[props.color].background};
   &:hover {
   &:hover {
     background-color: ${props =>
     background-color: ${props =>
@@ -18,8 +18,10 @@ const ButtonBlock = styled.button`
   cursor: pointer;
   cursor: pointer;
 `;
 `;
 
 
-const SearchBox = ({ color, float, size }) => {
-  return <ButtonBlock color={color} float={float} size={size} />;
+const SearchBox = ({ color, float, size = '1px', display = 'none' }) => {
+  return (
+    <ButtonBlock color={color} float={float} size={size} display={display} />
+  );
 };
 };
 
 
 export default SearchBox;
 export default SearchBox;