style: styled component 수정

@@ -13,7 +13,6 @@ const HeaderHeight = '170px';
 
 
 const HeaderTop = styled.div`
 const HeaderTop = styled.div`
   background-color: black;
   background-color: black;
-  float: up;
   height: 20px;
   height: 20px;
 `;
 `;
 const MainContainer = styled.div`
 const MainContainer = styled.div`
@@ -32,9 +31,9 @@ const MenuContainer = styled.div`
 `;
 `;
 
 
 const LogoContainer = styled.div`
 const LogoContainer = styled.div`
-  margin-top: 10px;
-  float: left;
-  padding: 20px;
+  padding-right: 20px;
+  padding-left: 20px;
+  padding-top: 1%;
   img {
   img {
     width: 130px;
     width: 130px;
 
 
@@ -44,13 +43,15 @@ const LogoContainer = styled.div`
 `;
 `;
 
 
 const SearchContainer = styled.div`
 const SearchContainer = styled.div`
+  display: flex;
+  width: 70%;
+  position: relative;
   margin-top: 20px;
   margin-top: 20px;
 `;
 `;
 
 
 const SLink = styled(NavLink)`
 const SLink = styled(NavLink)`
   list-style-type: none;
   list-style-type: none;
   color: black;
   color: black;
-  float: left;
   line-height: 55px;
   line-height: 55px;
   vertical-align: middle;
   vertical-align: middle;
   text-align: center;
   text-align: center;
@@ -75,16 +76,13 @@ const SLink = styled(NavLink)`
   }
   }
 `;
 `;
 const DropDownWrap = styled.div``;
 const DropDownWrap = styled.div``;
-const SearchOptionContainer = styled.div`
-  float: left;
-`;
+const SearchOptionContainer = styled.div``;
 
 
-const SortOptionContainer = styled.div`
-  float: left;
-`;
+const SortOptionContainer = styled.div``;
 
 
 const OptionContainer = styled.div`
 const OptionContainer = styled.div`
   position: absolute;
   position: absolute;
+  display: flex;
   top: 132px;
   top: 132px;
   left: 750px;
   left: 750px;
 `;
 `;
@@ -100,9 +98,7 @@ const AirContainer = styled.div`
   height: ${HeaderHeight};
   height: ${HeaderHeight};
 `;
 `;
 
 
-const DropDownContainer = styled.div`
-  flex-direction: column;
-`;
+const DropDownContainer = styled.div``;
 
 
 const Header = () => {
 const Header = () => {
   const [showModal, setShowModal] = useState(false);
   const [showModal, setShowModal] = useState(false);
@@ -117,10 +113,10 @@ const Header = () => {
     <>
     <>
       <MainContainer>
       <MainContainer>
         <HeaderTop />
         <HeaderTop />
-        <LogoContainer onClick={onMainClick}>
-          <img src="eDrive_logo_v2.png" alt="" />
-        </LogoContainer>
         <SearchContainer>
         <SearchContainer>
+          <LogoContainer onClick={onMainClick}>
+            <img src="eDrive_logo_v2.png" alt="" />
+          </LogoContainer>
           <DropDownContainer>
           <DropDownContainer>
             <DropDownWrap>
             <DropDownWrap>
               <DropDownButton
               <DropDownButton
@@ -134,7 +130,7 @@ const Header = () => {
               />
               />
             </DropDownWrap>
             </DropDownWrap>
           </DropDownContainer>
           </DropDownContainer>
-          <InputBlock color="blue" fontsize="20px" width="850px" display="">
+          <InputBlock color="blue" fontsize="20px" width="70%" display>
             <input />
             <input />
           </InputBlock>
           </InputBlock>
         </SearchContainer>
         </SearchContainer>

@@ -7,23 +7,25 @@ import { inputColorMap } from '../../lib/styles/palette';
 
 
 const InputBlock = styled.div`
 const InputBlock = styled.div`
   width: ${props => props.width};
   width: ${props => props.width};
-  float: ${props => props.float || 'left'};
   height: ${props => props.height};
   height: ${props => props.height};
+  position: relative;
 `;
 `;
 
 
 const InputWrap = styled.div`
 const InputWrap = styled.div`
   padding-top: ${props => props.paddingsize};
   padding-top: ${props => props.paddingsize};
+  position: relative;
   padding-left: 10px;
   padding-left: 10px;
-  width: 70%;
   height: 100%;
   height: 100%;
   color: ${props => inputColorMap[props.color].color};
   color: ${props => inputColorMap[props.color].color};
   outline: none;
   outline: none;
   font-size: ${props => props.size};
   font-size: ${props => props.size};
   border: 3px solid ${props => inputColorMap[props.color].borderColor};
   border: 3px solid ${props => inputColorMap[props.color].borderColor};
-  float: left;
+  width: 100%;
 `;
 `;
 const SearchIconWrap = styled.div`
 const SearchIconWrap = styled.div`
-  float: left;
+  position: absolute;
+  right: 0;
+  top: 0;
 `;
 `;
 
 
 const MyInput = ({
 const MyInput = ({

@@ -9,7 +9,6 @@ const Main = styled.div`
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
-  padding-left: 7%;
 `;
 `;
 
 
 const Container = styled.div`
 const Container = styled.div`
@@ -27,9 +26,8 @@ const LogoWrap = styled.div`
 `;
 `;
 
 
 const SearchBlock = styled.div`
 const SearchBlock = styled.div`
-  display: inline-block;
-  width: 100%;
-  margin-left: 23%;
+  display: flex;
+  width: 50%;
 `;
 `;
 const LoginButtonBlock = styled.div`
 const LoginButtonBlock = styled.div`
   position: fixed;
   position: fixed;
@@ -57,9 +55,8 @@ const HomePage = () => {
               { id: 2, name: '개인' },
               { id: 2, name: '개인' },
               { id: 3, name: '부서' },
               { id: 3, name: '부서' },
             ]}
             ]}
-            float="left"
           />
           />
-          <Input color="blue" paddingsize="10px" width="700px" display />
+          <Input color="blue" paddingsize="10px" width="100%" display />
         </SearchBlock>
         </SearchBlock>
 
 
         {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */}
         {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */}