이승윤

feat: 검색페이지 header 추가

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;