2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
이승윤
351d1100 2 parents aae0eb04 1f717094

Merge branch 'style/Header-details' into 'develop' 

Style/header details



See merge request !6
Inline Side-by-side
Showing 8 changed files with 150 additions and 97 deletions
......@@ -3,6 +3,7 @@ import { createGlobalStyle } from 'styled-components';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import LoginPage from './pages/LoginPage';
import SearchPage from './pages/SearchPage';
const GlobalStyle = createGlobalStyle`
html,
......@@ -27,6 +28,7 @@ const App = () => (
<Switch>
<Route path="/" exact component={Home} />
<Route path="/login" exact component={LoginPage} />
<Route path="/search" exact component={SearchPage} />
</Switch>
</BrowserRouter>
);
......
......@@ -2,10 +2,11 @@ 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';
import Modal from './SearchOptionModal';
import palette from '../lib/styles/palette';
// 헤더 사이즈
const HeaderHeight = '170px';
......@@ -20,12 +21,12 @@ const MainContainer = styled.div`
top: 0;
width: 100%;
z-index: 999;
background-color: #ffffff;
border-bottom: 1px solid #868e96;
background-color: white;
border-bottom: 1px solid ${palette.gray4};
`;
const MenuContainer = styled.div`
position: fixed;
top: 100px;
position: absolute;
top: 96px;
left: 0px;
`;
......@@ -55,11 +56,12 @@ const SLink = styled(NavLink)`
padding-right: 2em;
text-decoration: none !important;
&:hover {
background-color: #feebb6;
background-color: ${palette.gray4};
border-bottom: 3px solid ${palette.gray4};
}
&.active {
font-weight: 600;
background-color: #feebb6;
border-bottom: 3px solid ${palette.gray6};
float: left;
line-height: 55px;
vertical-align: middle;
......@@ -70,7 +72,7 @@ const SLink = styled(NavLink)`
text-decoration: none !important;
}
`;
const DropDownWrap = styled.div``;
const SearchOptionContainer = styled.div`
float: left;
`;
......@@ -80,8 +82,8 @@ const SortOptionContainer = styled.div`
`;
const OptionContainer = styled.div`
position: fixed;
top: 130px;
position: absolute;
top: 129px;
left: 650px;
`;
......@@ -96,44 +98,51 @@ const AirContainer = styled.div`
height: ${HeaderHeight};
`;
const DropDownContainer = styled.div`
flex-direction: column;
`;
const Header = () => {
const [showModal, setShowModal] = useState(false);
const openModal = () => {
setShowModal(prev => !prev);
};
const [setQuery] = useState('');
const history = useHistory();
const onMainClick = () => {
setQuery('');
history.push('');
};
return (
<>
<MainContainer>
<HeaderTop />
<LogoContainer onClick={onMainClick}>로고</LogoContainer>
<SearchContainer>
<DropDownContainer>
<DropDownWrap>
<DropDownButton
color="blue"
float="left"
fontsize="20px"
height="34px"
>
전체
</DropDownButton>
<InputBlock color="blue" size="14px" float="left" width="400px">
height="50px"
options={[
{ id: 1, name: '전체' },
{ id: 2, name: '개인' },
{ id: 3, name: '부서' },
]}
/>
</DropDownWrap>
</DropDownContainer>
<InputBlock color="blue" size="14px" width="400px" display="">
<input />
</InputBlock>
<SearchBox color="blue" size="50px" />
</SearchContainer>
<MenuContainer>
<ul>
<SLink activeClassName="active" to="categori0">
<SLink activeClassName="active" to="/search">
전체
</SLink>
<SLink to="/categori1">개인</SLink>
<SLink to="/categori2">부서</SLink>
<SLink to="/search_categori1">개인</SLink>
<SLink to="/search_categori2">부서</SLink>
</ul>
</MenuContainer>
<OptionContainer>
......@@ -144,9 +153,15 @@ const Header = () => {
<SortOptionContainer>
<DropDownButton
color="white"
width="80px"
fontsize="15px"
height="28px"
width="85px"
fontsize="16px"
height="38px"
options={[
{ value: 0, name: '정렬' },
{ value: 1, name: '날짜빠른순' },
{ value: 2, name: '크기높은순' },
{ value: 3, name: '크기낮은순' },
]}
>
정렬
</DropDownButton>
......
......@@ -32,34 +32,34 @@ const ModalContent = styled.div`
`;
const SearchWrap = styled.div`
position: fixed;
top: 50%;
right: 43%;
position: absolute;
top: 80%;
left: 20%;
`;
const CloseWrap = styled.div`
position: fixed;
top: 50%;
right: 32%;
position: absolute;
top: 80%;
right: 20%;
`;
const StandardWrap = styled.div`
position: absolute;
width: 50px;
position: fixed;
top: 18%;
right: 43%;
top: 15px;
left: 30%;
`;
const AdvancedWrap = styled.div`
width: 50px;
position: fixed;
top: 27%;
right: 43%;
position: absolute;
top: 75px;
left: 30%;
`;
const TextWrap = styled.div`
position: fixed;
width: 340px;
position: absolute;
width: 360px;
top: ${props => props.top};
right: ${props => props.right};
border-bottom: 2px solid #dee2e6;
......@@ -81,21 +81,39 @@ const Modal = ({ showModal, setShowModal }) => {
<Background onClick={closeModal}>
<ModalWrapper>
<ModalContent>
<TextWrap top="18.5%" right="28.5%" bottom="19px">
<TextWrap top="15px" right="20px" bottom="19px">
기본검색
</TextWrap>
<StandardWrap>
<Input float="left" color="blue" width="140px" size="10px" />
</StandardWrap>
<TextWrap top="27%" right="28.5%" bottom="137px">
<TextWrap top="75px" right="20px" bottom="137px">
고급검색
</TextWrap>
<AdvancedWrap>
<Input float="left" color="blue" width="140px" size="10px" />
<Input
float="left"
color="blue"
width="140px"
size="10px"
placeholder="단어/ 문장검색"
/>
<br /> <br />
<Input float="left" color="blue" width="140px" size="10px" />
<Input
float="left"
color="blue"
width="140px"
size="10px"
placeholder="최초 작성자"
/>
<br /> <br />
<Input float="left" color="blue" width="140px" size="10px" />
<Input
float="left"
color="blue"
width="140px"
size="10px"
placeholder="최종 수정자"
/>
</AdvancedWrap>
</ModalContent>
<CloseWrap onClick={() => setShowModal(prev => !prev)}>
......
import React from 'react';
import styled from 'styled-components';
import { dropdownListColorMap } from '../../lib/styles/palette';
const DropDownListBlock = styled.div`
float: ${props => props.float || ''};
width: ${props => props.size || '40%'};
`;
const DropDownList = styled.ul`
padding: 0;
margin: 0;
background-color: ${props => dropdownListColorMap[props.color].background};
border: 2px solid ${props => dropdownListColorMap[props.color].borderColor};
box-sizing: border-box;
color: ${props => dropdownListColorMap[props.color].color};
font-size: 1.3rem;
font-weight: 500;
&:first-child {
padding-top: 0.5em;
}
`;
const ListItem = styled.li`
list-style: none;
padding-left: 1em;
padding-bottom: 0.3em;
border-bottom: 2px solid #e5e5e5;
`;
const DropDown = ({ children, color, float, size }) => {
return (
<DropDownListBlock color={color} float={float} size={size}>
<DropDownList color={color}>
<ListItem>{children}</ListItem>
</DropDownList>
</DropDownListBlock>
);
};
export default DropDown;
......@@ -6,14 +6,14 @@ const DropDownBlock = styled.div`
margin: 0 auto;
float: ${props => props.float || ''};
`;
const DropDownHeader = styled.button`
const DropDownHeader = styled.select`
margin-bottom: 0.8em;
padding: 0.4em;
width: ${props => props.width || '100px'};
line-height: ${props => props.height || '30px'};
height: ${props => props.height || '30px'};
padding-right: 30px;
font-size: ${props => props.fontsize || '20px'};
cursor: pointer;
color: ${props => dropdownHeaderColorMap[props.color].color};
background-color: ${props => dropdownHeaderColorMap[props.color].background};
&:hover {
......@@ -21,18 +21,37 @@ const DropDownHeader = styled.button`
dropdownHeaderColorMap[props.color].hoverBackground};
}
border: 1px ${props => dropdownHeaderColorMap[props.color].background};
option {
color: blue;
background-color: blue;
display: flex;
white-space: pre;
min-height: 20px;
padding: 0px 2px 1px;
}
`;
const DropDown = ({ children, float, color, fontsize, width, height }) => {
const DropDown = ({
options,
float,
color = 'blue',
fontsize,
width,
height,
}) => {
return (
<DropDownBlock float={float} color={color}>
<DropDownHeader
options={options}
color={color}
fontsize={fontsize}
width={width}
height={height}
>
{children}
{options.map(friend => (
<option value={friend.id}>{friend.name}</option>
))}
</DropDownHeader>
</DropDownBlock>
);
......
import React, { useState } from 'react';
import styled from 'styled-components';
import { useHistory } from 'react-router-dom';
import SearchBox from './SearchBox';
import { inputColorMap } from '../../lib/styles/palette';
const InputBlock = styled.div`
......@@ -17,17 +18,33 @@ const InputBlock = styled.div`
color: ${props => inputColorMap[props.color].placeholder};
text-transform: uppercase;
}
float: left;
}
float: ${props => props.float || ''};
`;
const SearchIconWrap = styled.div``;
const Input = ({ color, size, float, width }) => {
const Input = ({
color,
size,
float,
width,
placeholder = '내용을 입력해 주세요.',
display,
}) => {
const [query, setQuery] = useState('');
const history = useHistory();
return (
<InputBlock color={color} size={size} float={float} width={width}>
<InputBlock
color={color}
size={size}
float={float}
width={width}
placeholder={placeholder}
display={display}
>
<input
placeholder="내용을 입력해 주세요."
placeholder={placeholder}
type="text"
value={query}
onChange={e => setQuery(e.target.value)}
......@@ -42,6 +59,14 @@ const Input = ({ color, size, float, width }) => {
}
}}
/>
<SearchIconWrap
onClick={() => {
const params = new URLSearchParams({ query });
history.push(`?${params.toString()}`);
}}
>
<SearchBox color="blue" size="50px" display={display} />
</SearchIconWrap>
</InputBlock>
);
};
......
......@@ -5,8 +5,8 @@ import { searchBoxColorMap } from '../../lib/styles/palette';
const ButtonBlock = styled.button`
width: ${props => props.size};
height: ${props => props.size};
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 30 30'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
display: ${props => props.display};
background-color: ${props => searchBoxColorMap[props.color].background};
&:hover {
background-color: ${props =>
......@@ -15,10 +15,13 @@ const ButtonBlock = styled.button`
color: ${props => searchBoxColorMap[props.color].color};
float: ${props => props.float || ''};
border: 1px ${props => searchBoxColorMap[props.color].background};
cursor: pointer;
`;
const SearchBox = ({ color, float, size }) => {
return <ButtonBlock color={color} float={float} size={size} />;
const SearchBox = ({ color, float, size = '1px', display = 'none' }) => {
return (
<ButtonBlock color={color} float={float} size={size} display={display} />
);
};
export default SearchBox;
......
import React from 'react';
import Header from '../components/Header';
const LoginPage = () => {
return (
<>
<Header />
</>
);
};
export default LoginPage;