Merge branch 'style/homepage' into 'develop'

Style/homepage



See merge request !7

 import React from 'react';
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { createGlobalStyle } from 'styled-components';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import Home from './pages/Home';
+import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
 import LoginPage from './pages/LoginPage';
 import SearchPage from './pages/SearchPage';
 import SearchPage from './pages/SearchPage';
 
 
@@ -26,7 +26,7 @@ const App = () => (
   <BrowserRouter>
   <BrowserRouter>
     <GlobalStyle />
     <GlobalStyle />
     <Switch>
     <Switch>
-      <Route path="/" exact component={Home} />
+      <Route path="/" exact component={HomePage} />
       <Route path="/login" exact component={LoginPage} />
       <Route path="/login" exact component={LoginPage} />
       <Route path="/search" exact component={SearchPage} />
       <Route path="/search" exact component={SearchPage} />
     </Switch>
     </Switch>

-import React from 'react';
-import styled from 'styled-components';
-
-const Main = styled.div`
-  width: 100%;
-`;
-
-const Home = () => {
-  return (
-    <>
-      <Main>Home</Main>
-    </>
-  );
-};
-
-export default Home;

+import React from 'react';
+import styled from 'styled-components';
+import Button from '../components/common/Button';
+import DropDownButton from '../components/common/DropdownButton';
+import Input from '../components/common/Input';
+
+const Main = styled.div`
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+`;
+
+const SearchBlock = styled.div`
+  display: flex;
+`;
+
+const LoginButtonBlock = styled.div`
+  position: fixed;
+  top: 20px;
+  right: 20px;
+`;
+
+const HomePage = () => {
+  return (
+    <Main>
+      <div>logo</div>
+      <SearchBlock>
+        <DropDownButton
+          fontsize="20px"
+          height="50px"
+          options={[
+            { id: 1, name: '전체' },
+            { id: 2, name: '개인' },
+            { id: 3, name: '부서' },
+          ]}
+        />
+        <Input color="blue" size="14px" width="400px" display />
+      </SearchBlock>
+
+      {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */}
+      <LoginButtonBlock>
+        <Button>로그인</Button>
+      </LoginButtonBlock>
+    </Main>
+  );
+};
+
+export default HomePage;