Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2021-1-capstone-design1
/
GCL_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
이승윤
2021-05-03 18:25:09 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
67ccbcfd04aeb6fbcd09d0514c812fb1084d68fa
67ccbcfd
1 parent
456ea9ac
feat: 검색페이지 header 추가
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
149 additions
and
0 deletions
frontend/src/components/Header.js
frontend/src/components/Header.js
0 → 100644
View file @
67ccbcf
import
React
,
{
useState
}
from
'react'
;
import
{
NavLink
,
useHistory
}
from
'react-router-dom'
;
import
styled
from
'styled-components'
;
import
InputBlock
from
'./common/Input'
;
import
SearchBox
from
'./common/SearchBox'
;
import
DropDownButton
from
'./common/DropdownButton'
;
import
Button
from
'./common/Button'
;
// 헤더 사이즈
const
HeaderHeight
=
'170px'
;
const
HeaderTop
=
styled
.
div
`
background-color: black;
float: up;
height: 20px;
`
;
const
MainContainer
=
styled
.
div
`
height:
${
HeaderHeight
}
;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
background-color: #ffffff;
border-bottom: 1px solid black;
`
;
const
MenuContainer
=
styled
.
div
`
position: fixed;
top: 100px;
left: 0px;
`
;
const
LogoContainer
=
styled
.
div
`
margin-top: 20px;
float: left;
padding: 20px;
img {
width: 100px;
vertical-align: bottom;
}
`
;
const
SearchContainer
=
styled
.
div
`
margin-top: 20px;
`
;
const
SLink
=
styled
(
NavLink
)
`
list-style-type: none;
color: black;
float: left;
line-height: 55px;
vertical-align: middle;
text-align: center;
padding-left: 2em;
padding-right: 2em;
text-decoration: none !important;
&:hover {
background-color: #feebb6;
}
&.active {
font-weight: 600;
background-color: #feebb6;
float: left;
line-height: 55px;
vertical-align: middle;
text-align: center;
padding-left: 2em;
padding-right: 2em;
color: black;
text-decoration: none !important;
}
`
;
const
SearchOptionContainer
=
styled
.
div
`
float: left;
`
;
const
SortOptionContainer
=
styled
.
div
`
float: left;
`
;
const
OptionContainer
=
styled
.
div
`
position: fixed;
top: 130px;
left: 650px;
`
;
const
AirContainer
=
styled
.
div
`
height:
${
HeaderHeight
}
;
`
;
const
Header
=
()
=>
{
const
[
setQuery
]
=
useState
(
''
);
const
history
=
useHistory
();
const
onMainClick
=
()
=>
{
setQuery
(
''
);
history
.
push
(
''
);
};
return
(
<>
<
MainContainer
>
<
HeaderTop
/>
<
LogoContainer
onClick
=
{
onMainClick
}
>
로고
<
/LogoContainer
>
<
SearchContainer
>
<
DropDownButton
color
=
"blue"
float
=
"left"
fontsize
=
"20px"
height
=
"34px"
>
전체
<
/DropDownButton
>
<
InputBlock
color
=
"blue"
size
=
"14px"
float
=
"left"
width
=
"400px"
>
<
input
/>
<
/InputBlock
>
<
SearchBox
color
=
"blue"
size
=
"50px"
/>
<
/SearchContainer
>
<
MenuContainer
>
<
ul
>
<
SLink
activeClassName
=
"active"
to
=
"categori0"
>
전체
<
/SLink
>
<
SLink
to
=
"/categori1"
>
개인
<
/SLink
>
<
SLink
to
=
"/categori2"
>
부서
<
/SLink
>
<
/ul
>
<
/MenuContainer
>
<
OptionContainer
>
<
SearchOptionContainer
>
<
Button
color
=
"white"
>
고급검색
<
/Button
>
<
/SearchOptionContainer
>
<
SortOptionContainer
>
<
DropDownButton
color
=
"white"
width
=
"80px"
fontsize
=
"15px"
height
=
"28px"
>
정렬
<
/DropDownButton
>
<
/SortOptionContainer
>
<
/OptionContainer
>
<
/MainContainer
>
<
AirContainer
/>
<
/
>
);
};
export
default
Header
;
Please
register
or
login
to post a comment