style: Dropdown 폼 변경(ul-li -> select)

-import React from 'react';
-import styled from 'styled-components';
-import { dropdownListColorMap } from '../../lib/styles/palette';
-
-const DropDownListBlock = styled.div`
-  float: ${props => props.float || ''};
-  width: ${props => props.size || '40%'};
-`;
-
-const DropDownList = styled.ul`
-  padding: 0;
-  margin: 0;
-  background-color: ${props => dropdownListColorMap[props.color].background};
-  border: 2px solid ${props => dropdownListColorMap[props.color].borderColor};
-  box-sizing: border-box;
-  color: ${props => dropdownListColorMap[props.color].color};
-  font-size: 1.3rem;
-  font-weight: 500;
-  &:first-child {
-    padding-top: 0.5em;
-  }
-`;
-
-const ListItem = styled.li`
-  list-style: none;
-  padding-left: 1em;
-  padding-bottom: 0.3em;
-  border-bottom: 2px solid #e5e5e5;
-`;
-
-const DropDown = ({ children, color, float, size }) => {
-  return (
-    <DropDownListBlock color={color} float={float} size={size}>
-      <DropDownList color={color}>
-        <ListItem>{children}</ListItem>
-      </DropDownList>
-    </DropDownListBlock>
-  );
-};
-
-export default DropDown;

@@ -6,14 +6,14 @@ const DropDownBlock = styled.div`
   margin: 0 auto;
   margin: 0 auto;
   float: ${props => props.float || ''};
   float: ${props => props.float || ''};
 `;
 `;
-
-const DropDownHeader = styled.button`
+const DropDownHeader = styled.select`
   margin-bottom: 0.8em;
   margin-bottom: 0.8em;
   padding: 0.4em;
   padding: 0.4em;
   width: ${props => props.width || '100px'};
   width: ${props => props.width || '100px'};
-  line-height: ${props => props.height || '30px'};
+  height: ${props => props.height || '30px'};
   padding-right: 30px;
   padding-right: 30px;
   font-size: ${props => props.fontsize || '20px'};
   font-size: ${props => props.fontsize || '20px'};
+  cursor: pointer;
   color: ${props => dropdownHeaderColorMap[props.color].color};
   color: ${props => dropdownHeaderColorMap[props.color].color};
   background-color: ${props => dropdownHeaderColorMap[props.color].background};
   background-color: ${props => dropdownHeaderColorMap[props.color].background};
   &:hover {
   &:hover {
@@ -21,18 +21,37 @@ const DropDownHeader = styled.button`
       dropdownHeaderColorMap[props.color].hoverBackground};
       dropdownHeaderColorMap[props.color].hoverBackground};
   }
   }
   border: 1px ${props => dropdownHeaderColorMap[props.color].background};
   border: 1px ${props => dropdownHeaderColorMap[props.color].background};
+
+  option {
+    color: blue;
+    background-color: blue;
+    display: flex;
+    white-space: pre;
+    min-height: 20px;
+    padding: 0px 2px 1px;
+  }
 `;
 `;
 
 
-const DropDown = ({ children, float, color, fontsize, width, height }) => {
+const DropDown = ({
+  options,
+  float,
+  color = 'blue',
+  fontsize,
+  width,
+  height,
+}) => {
   return (
   return (
     <DropDownBlock float={float} color={color}>
     <DropDownBlock float={float} color={color}>
       <DropDownHeader
       <DropDownHeader
+        options={options}
         color={color}
         color={color}
         fontsize={fontsize}
         fontsize={fontsize}
         width={width}
         width={width}
         height={height}
         height={height}
       >
       >
-        {children}
+        {options.map(friend => (
+          <option value={friend.id}>{friend.name}</option>
+        ))}
       </DropDownHeader>
       </DropDownHeader>
     </DropDownBlock>
     </DropDownBlock>
   );
   );