Showing
1 changed file
with
149 additions
and
0 deletions
frontend/src/components/Header.js
0 → 100644
1 | +import React, { useState } from 'react'; | ||
2 | +import { NavLink, useHistory } from 'react-router-dom'; | ||
3 | +import styled from 'styled-components'; | ||
4 | +import InputBlock from './common/Input'; | ||
5 | +import SearchBox from './common/SearchBox'; | ||
6 | +import DropDownButton from './common/DropdownButton'; | ||
7 | +import Button from './common/Button'; | ||
8 | + | ||
9 | +// 헤더 사이즈 | ||
10 | +const HeaderHeight = '170px'; | ||
11 | + | ||
12 | +const HeaderTop = styled.div` | ||
13 | + background-color: black; | ||
14 | + float: up; | ||
15 | + height: 20px; | ||
16 | +`; | ||
17 | + | ||
18 | +const MainContainer = styled.div` | ||
19 | + height: ${HeaderHeight}; | ||
20 | + position: fixed; | ||
21 | + top: 0; | ||
22 | + width: 100%; | ||
23 | + z-index: 999; | ||
24 | + background-color: #ffffff; | ||
25 | + border-bottom: 1px solid black; | ||
26 | +`; | ||
27 | +const MenuContainer = styled.div` | ||
28 | + position: fixed; | ||
29 | + top: 100px; | ||
30 | + left: 0px; | ||
31 | +`; | ||
32 | + | ||
33 | +const LogoContainer = styled.div` | ||
34 | + margin-top: 20px; | ||
35 | + float: left; | ||
36 | + padding: 20px; | ||
37 | + img { | ||
38 | + width: 100px; | ||
39 | + | ||
40 | + vertical-align: bottom; | ||
41 | + } | ||
42 | +`; | ||
43 | + | ||
44 | +const SearchContainer = styled.div` | ||
45 | + margin-top: 20px; | ||
46 | +`; | ||
47 | + | ||
48 | +const SLink = styled(NavLink)` | ||
49 | + list-style-type: none; | ||
50 | + color: black; | ||
51 | + float: left; | ||
52 | + line-height: 55px; | ||
53 | + vertical-align: middle; | ||
54 | + text-align: center; | ||
55 | + padding-left: 2em; | ||
56 | + padding-right: 2em; | ||
57 | + text-decoration: none !important; | ||
58 | + &:hover { | ||
59 | + background-color: #feebb6; | ||
60 | + } | ||
61 | + &.active { | ||
62 | + font-weight: 600; | ||
63 | + background-color: #feebb6; | ||
64 | + float: left; | ||
65 | + line-height: 55px; | ||
66 | + vertical-align: middle; | ||
67 | + text-align: center; | ||
68 | + padding-left: 2em; | ||
69 | + padding-right: 2em; | ||
70 | + color: black; | ||
71 | + text-decoration: none !important; | ||
72 | + } | ||
73 | +`; | ||
74 | + | ||
75 | +const SearchOptionContainer = styled.div` | ||
76 | + float: left; | ||
77 | +`; | ||
78 | + | ||
79 | +const SortOptionContainer = styled.div` | ||
80 | + float: left; | ||
81 | +`; | ||
82 | + | ||
83 | +const OptionContainer = styled.div` | ||
84 | + position: fixed; | ||
85 | + top: 130px; | ||
86 | + left: 650px; | ||
87 | +`; | ||
88 | + | ||
89 | +const AirContainer = styled.div` | ||
90 | + height: ${HeaderHeight}; | ||
91 | +`; | ||
92 | + | ||
93 | +const Header = () => { | ||
94 | + const [setQuery] = useState(''); | ||
95 | + const history = useHistory(); | ||
96 | + const onMainClick = () => { | ||
97 | + setQuery(''); | ||
98 | + history.push(''); | ||
99 | + }; | ||
100 | + | ||
101 | + return ( | ||
102 | + <> | ||
103 | + <MainContainer> | ||
104 | + <HeaderTop /> | ||
105 | + <LogoContainer onClick={onMainClick}>로고</LogoContainer> | ||
106 | + <SearchContainer> | ||
107 | + <DropDownButton | ||
108 | + color="blue" | ||
109 | + float="left" | ||
110 | + fontsize="20px" | ||
111 | + height="34px" | ||
112 | + > | ||
113 | + 전체 | ||
114 | + </DropDownButton> | ||
115 | + <InputBlock color="blue" size="14px" float="left" width="400px"> | ||
116 | + <input /> | ||
117 | + </InputBlock> | ||
118 | + <SearchBox color="blue" size="50px" /> | ||
119 | + </SearchContainer> | ||
120 | + <MenuContainer> | ||
121 | + <ul> | ||
122 | + <SLink activeClassName="active" to="categori0"> | ||
123 | + 전체 | ||
124 | + </SLink> | ||
125 | + <SLink to="/categori1">개인</SLink> | ||
126 | + <SLink to="/categori2">부서</SLink> | ||
127 | + </ul> | ||
128 | + </MenuContainer> | ||
129 | + <OptionContainer> | ||
130 | + <SearchOptionContainer> | ||
131 | + <Button color="white">고급검색</Button> | ||
132 | + </SearchOptionContainer> | ||
133 | + <SortOptionContainer> | ||
134 | + <DropDownButton | ||
135 | + color="white" | ||
136 | + width="80px" | ||
137 | + fontsize="15px" | ||
138 | + height="28px" | ||
139 | + > | ||
140 | + 정렬 | ||
141 | + </DropDownButton> | ||
142 | + </SortOptionContainer> | ||
143 | + </OptionContainer> | ||
144 | + </MainContainer> | ||
145 | + <AirContainer /> | ||
146 | + </> | ||
147 | + ); | ||
148 | +}; | ||
149 | +export default Header; |
-
Please register or login to post a comment