Showing
1 changed file
with
46 additions
and
24 deletions
... | @@ -7,7 +7,21 @@ import Input from '../components/common/Input'; | ... | @@ -7,7 +7,21 @@ import Input from '../components/common/Input'; |
7 | 7 | ||
8 | const Main = styled.div` | 8 | const Main = styled.div` |
9 | display: flex; | 9 | display: flex; |
10 | - height: 100vh; | 10 | + align-items: center; |
11 | + justify-content: center; | ||
12 | + padding-left: 7%; | ||
13 | +`; | ||
14 | + | ||
15 | +const Container = styled.div` | ||
16 | + justify-content: center; | ||
17 | + align-items: center; | ||
18 | + flex-direction: column; | ||
19 | +`; | ||
20 | + | ||
21 | +const LogoWrap = styled.div` | ||
22 | + display: flex; | ||
23 | + margin-top: 11%; | ||
24 | + height: 30vh; | ||
11 | align-items: center; | 25 | align-items: center; |
12 | justify-content: center; | 26 | justify-content: center; |
13 | `; | 27 | `; |
... | @@ -23,31 +37,39 @@ const LoginButtonBlock = styled.div` | ... | @@ -23,31 +37,39 @@ const LoginButtonBlock = styled.div` |
23 | right: 20px; | 37 | right: 20px; |
24 | `; | 38 | `; |
25 | 39 | ||
40 | +const SLink = styled(Link)` | ||
41 | + text-decoration: none !important; | ||
42 | +`; | ||
43 | + | ||
26 | const HomePage = () => { | 44 | const HomePage = () => { |
27 | return ( | 45 | return ( |
28 | - <Main> | 46 | + <Container> |
29 | - <div>logo</div> | 47 | + <LogoWrap> |
30 | - <SearchBlock> | 48 | + <img src="eDrive_logo.png" alt="" /> |
31 | - <DropDownButton | 49 | + </LogoWrap> |
32 | - fontsize="20px" | 50 | + <Main> |
33 | - height="50px" | 51 | + <SearchBlock> |
34 | - options={[ | 52 | + <DropDownButton |
35 | - { id: 1, name: '전체' }, | 53 | + fontsize="20px" |
36 | - { id: 2, name: '개인' }, | 54 | + height="50px" |
37 | - { id: 3, name: '부서' }, | 55 | + options={[ |
38 | - ]} | 56 | + { id: 1, name: '전체' }, |
39 | - float="left" | 57 | + { id: 2, name: '개인' }, |
40 | - /> | 58 | + { id: 3, name: '부서' }, |
41 | - <Input color="blue" paddingsize="10px" width="700px" display /> | 59 | + ]} |
42 | - </SearchBlock> | 60 | + float="left" |
43 | - | 61 | + /> |
44 | - {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */} | 62 | + <Input color="blue" paddingsize="10px" width="700px" display /> |
45 | - <LoginButtonBlock> | 63 | + </SearchBlock> |
46 | - <Link to="/login"> | 64 | + |
47 | - <Button>로그인</Button> | 65 | + {/* Todo : 로그인 했을 경우 로그인 버튼 숨기기 */} |
48 | - </Link> | 66 | + <LoginButtonBlock> |
49 | - </LoginButtonBlock> | 67 | + <SLink to="/login"> |
50 | - </Main> | 68 | + <Button>로그인</Button> |
69 | + </SLink> | ||
70 | + </LoginButtonBlock> | ||
71 | + </Main> | ||
72 | + </Container> | ||
51 | ); | 73 | ); |
52 | }; | 74 | }; |
53 | 75 | ... | ... |
-
Please register or login to post a comment