안형욱

style: Homepage UI 컴포넌트 추가

1 import React from 'react'; 1 import React from 'react';
2 import styled from 'styled-components'; 2 import styled from 'styled-components';
3 +import Button from '../components/common/Button';
4 +import DropDownButton from '../components/common/DropdownButton';
5 +import Input from '../components/common/Input';
3 6
4 const Main = styled.div` 7 const Main = styled.div`
5 - width: 100%; 8 + display: flex;
9 + height: 100vh;
10 + align-items: center;
11 + justify-content: center;
12 +`;
13 +
14 +const SearchBlock = styled.div`
15 + display: flex;
16 +`;
17 +
18 +const LoginButtonBlock = styled.div`
19 + position: fixed;
20 + top: 20px;
21 + right: 20px;
6 `; 22 `;
7 23
8 const HomePage = () => { 24 const HomePage = () => {
9 return ( 25 return (
10 - <> 26 + <Main>
11 - <Main>Home</Main> 27 + <div>logo</div>
12 - </> 28 + <SearchBlock>
29 + <DropDownButton
30 + fontsize="20px"
31 + height="50px"
32 + options={[
33 + { id: 1, name: '전체' },
34 + { id: 2, name: '개인' },
35 + { id: 3, name: '부서' },
36 + ]}
37 + />
38 + <Input color="blue" size="14px" width="400px" display />
39 + </SearchBlock>
40 +
41 + {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */}
42 + <LoginButtonBlock>
43 + <Button>로그인</Button>
44 + </LoginButtonBlock>
45 + </Main>
13 ); 46 );
14 }; 47 };
15 48
......