2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
안형욱
9f29621a 2 parents 351d1100 de64e208

Merge branch 'style/homepage' into 'develop' 

Style/homepage



See merge request !7
Inline Side-by-side
Showing 3 changed files with 51 additions and 18 deletions
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import HomePage from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import SearchPage from './pages/SearchPage';
......@@ -26,7 +26,7 @@ const App = () => (
<BrowserRouter>
<GlobalStyle />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/" exact component={HomePage} />
<Route path="/login" exact component={LoginPage} />
<Route path="/search" exact component={SearchPage} />
</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;