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 154 additions and 101 deletions
...@@ -3,6 +3,7 @@ import { createGlobalStyle } from 'styled-components'; ...@@ -3,6 +3,7 @@ import { createGlobalStyle } from 'styled-components';
3 import { BrowserRouter, Route, Switch } from 'react-router-dom'; 3 import { BrowserRouter, Route, Switch } from 'react-router-dom';
4 import Home from './pages/Home'; 4 import Home from './pages/Home';
5 import LoginPage from './pages/LoginPage'; 5 import LoginPage from './pages/LoginPage';
6 +import SearchPage from './pages/SearchPage';
6 7
7 const GlobalStyle = createGlobalStyle` 8 const GlobalStyle = createGlobalStyle`
8 html, 9 html,
...@@ -27,6 +28,7 @@ const App = () => ( ...@@ -27,6 +28,7 @@ const App = () => (
27 <Switch> 28 <Switch>
28 <Route path="/" exact component={Home} /> 29 <Route path="/" exact component={Home} />
29 <Route path="/login" exact component={LoginPage} /> 30 <Route path="/login" exact component={LoginPage} />
31 + <Route path="/search" exact component={SearchPage} />
30 </Switch> 32 </Switch>
31 </BrowserRouter> 33 </BrowserRouter>
32 ); 34 );
......
...@@ -2,10 +2,11 @@ import React, { useState } from 'react'; ...@@ -2,10 +2,11 @@ import React, { useState } from 'react';
2 import { NavLink, useHistory } from 'react-router-dom'; 2 import { NavLink, useHistory } from 'react-router-dom';
3 import styled from 'styled-components'; 3 import styled from 'styled-components';
4 import InputBlock from './common/Input'; 4 import InputBlock from './common/Input';
5 -import SearchBox from './common/SearchBox';
6 import DropDownButton from './common/DropdownButton'; 5 import DropDownButton from './common/DropdownButton';
7 import Button from './common/Button'; 6 import Button from './common/Button';
8 import Modal from './SearchOptionModal'; 7 import Modal from './SearchOptionModal';
8 +import palette from '../lib/styles/palette';
9 +
9 // 헤더 사이즈 10 // 헤더 사이즈
10 const HeaderHeight = '170px'; 11 const HeaderHeight = '170px';
11 12
...@@ -20,12 +21,12 @@ const MainContainer = styled.div` ...@@ -20,12 +21,12 @@ const MainContainer = styled.div`
20 top: 0; 21 top: 0;
21 width: 100%; 22 width: 100%;
22 z-index: 999; 23 z-index: 999;
23 - background-color: #ffffff; 24 + background-color: white;
24 - border-bottom: 1px solid #868e96; 25 + border-bottom: 1px solid ${palette.gray4};
25 `; 26 `;
26 const MenuContainer = styled.div` 27 const MenuContainer = styled.div`
27 - position: fixed; 28 + position: absolute;
28 - top: 100px; 29 + top: 96px;
29 left: 0px; 30 left: 0px;
30 `; 31 `;
31 32
...@@ -55,11 +56,12 @@ const SLink = styled(NavLink)` ...@@ -55,11 +56,12 @@ const SLink = styled(NavLink)`
55 padding-right: 2em; 56 padding-right: 2em;
56 text-decoration: none !important; 57 text-decoration: none !important;
57 &:hover { 58 &:hover {
58 - background-color: #feebb6; 59 + background-color: ${palette.gray4};
60 + border-bottom: 3px solid ${palette.gray4};
59 } 61 }
60 &.active { 62 &.active {
61 font-weight: 600; 63 font-weight: 600;
62 - background-color: #feebb6; 64 + border-bottom: 3px solid ${palette.gray6};
63 float: left; 65 float: left;
64 line-height: 55px; 66 line-height: 55px;
65 vertical-align: middle; 67 vertical-align: middle;
...@@ -70,7 +72,7 @@ const SLink = styled(NavLink)` ...@@ -70,7 +72,7 @@ const SLink = styled(NavLink)`
70 text-decoration: none !important; 72 text-decoration: none !important;
71 } 73 }
72 `; 74 `;
73 - 75 +const DropDownWrap = styled.div``;
74 const SearchOptionContainer = styled.div` 76 const SearchOptionContainer = styled.div`
75 float: left; 77 float: left;
76 `; 78 `;
...@@ -80,8 +82,8 @@ const SortOptionContainer = styled.div` ...@@ -80,8 +82,8 @@ const SortOptionContainer = styled.div`
80 `; 82 `;
81 83
82 const OptionContainer = styled.div` 84 const OptionContainer = styled.div`
83 - position: fixed; 85 + position: absolute;
84 - top: 130px; 86 + top: 129px;
85 left: 650px; 87 left: 650px;
86 `; 88 `;
87 89
...@@ -96,44 +98,51 @@ const AirContainer = styled.div` ...@@ -96,44 +98,51 @@ const AirContainer = styled.div`
96 height: ${HeaderHeight}; 98 height: ${HeaderHeight};
97 `; 99 `;
98 100
101 +const DropDownContainer = styled.div`
102 + flex-direction: column;
103 +`;
104 +
99 const Header = () => { 105 const Header = () => {
100 const [showModal, setShowModal] = useState(false); 106 const [showModal, setShowModal] = useState(false);
101 const openModal = () => { 107 const openModal = () => {
102 setShowModal(prev => !prev); 108 setShowModal(prev => !prev);
103 }; 109 };
104 - const [setQuery] = useState('');
105 const history = useHistory(); 110 const history = useHistory();
106 const onMainClick = () => { 111 const onMainClick = () => {
107 - setQuery('');
108 history.push(''); 112 history.push('');
109 }; 113 };
110 -
111 return ( 114 return (
112 <> 115 <>
113 <MainContainer> 116 <MainContainer>
114 <HeaderTop /> 117 <HeaderTop />
115 <LogoContainer onClick={onMainClick}>로고</LogoContainer> 118 <LogoContainer onClick={onMainClick}>로고</LogoContainer>
116 <SearchContainer> 119 <SearchContainer>
117 - <DropDownButton 120 + <DropDownContainer>
118 - color="blue" 121 + <DropDownWrap>
119 - float="left" 122 + <DropDownButton
120 - fontsize="20px" 123 + color="blue"
121 - height="34px" 124 + float="left"
122 - > 125 + fontsize="20px"
123 - 전체 126 + height="50px"
124 - </DropDownButton> 127 + options={[
125 - <InputBlock color="blue" size="14px" float="left" width="400px"> 128 + { id: 1, name: '전체' },
129 + { id: 2, name: '개인' },
130 + { id: 3, name: '부서' },
131 + ]}
132 + />
133 + </DropDownWrap>
134 + </DropDownContainer>
135 + <InputBlock color="blue" size="14px" width="400px" display="">
126 <input /> 136 <input />
127 </InputBlock> 137 </InputBlock>
128 - <SearchBox color="blue" size="50px" />
129 </SearchContainer> 138 </SearchContainer>
130 <MenuContainer> 139 <MenuContainer>
131 <ul> 140 <ul>
132 - <SLink activeClassName="active" to="categori0"> 141 + <SLink activeClassName="active" to="/search">
133 전체 142 전체
134 </SLink> 143 </SLink>
135 - <SLink to="/categori1">개인</SLink> 144 + <SLink to="/search_categori1">개인</SLink>
136 - <SLink to="/categori2">부서</SLink> 145 + <SLink to="/search_categori2">부서</SLink>
137 </ul> 146 </ul>
138 </MenuContainer> 147 </MenuContainer>
139 <OptionContainer> 148 <OptionContainer>
...@@ -144,9 +153,15 @@ const Header = () => { ...@@ -144,9 +153,15 @@ const Header = () => {
144 <SortOptionContainer> 153 <SortOptionContainer>
145 <DropDownButton 154 <DropDownButton
146 color="white" 155 color="white"
147 - width="80px" 156 + width="85px"
148 - fontsize="15px" 157 + fontsize="16px"
149 - height="28px" 158 + height="38px"
159 + options={[
160 + { value: 0, name: '정렬' },
161 + { value: 1, name: '날짜빠른순' },
162 + { value: 2, name: '크기높은순' },
163 + { value: 3, name: '크기낮은순' },
164 + ]}
150 > 165 >
151 정렬 166 정렬
152 </DropDownButton> 167 </DropDownButton>
......
...@@ -32,34 +32,34 @@ const ModalContent = styled.div` ...@@ -32,34 +32,34 @@ const ModalContent = styled.div`
32 `; 32 `;
33 33
34 const SearchWrap = styled.div` 34 const SearchWrap = styled.div`
35 - position: fixed; 35 + position: absolute;
36 - top: 50%; 36 + top: 80%;
37 - right: 43%; 37 + left: 20%;
38 `; 38 `;
39 39
40 const CloseWrap = styled.div` 40 const CloseWrap = styled.div`
41 - position: fixed; 41 + position: absolute;
42 - top: 50%; 42 + top: 80%;
43 - right: 32%; 43 + right: 20%;
44 `; 44 `;
45 45
46 const StandardWrap = styled.div` 46 const StandardWrap = styled.div`
47 + position: absolute;
47 width: 50px; 48 width: 50px;
48 - position: fixed; 49 + top: 15px;
49 - top: 18%; 50 + left: 30%;
50 - right: 43%;
51 `; 51 `;
52 52
53 const AdvancedWrap = styled.div` 53 const AdvancedWrap = styled.div`
54 width: 50px; 54 width: 50px;
55 - position: fixed; 55 + position: absolute;
56 - top: 27%; 56 + top: 75px;
57 - right: 43%; 57 + left: 30%;
58 `; 58 `;
59 59
60 const TextWrap = styled.div` 60 const TextWrap = styled.div`
61 - position: fixed; 61 + position: absolute;
62 - width: 340px; 62 + width: 360px;
63 top: ${props => props.top}; 63 top: ${props => props.top};
64 right: ${props => props.right}; 64 right: ${props => props.right};
65 border-bottom: 2px solid #dee2e6; 65 border-bottom: 2px solid #dee2e6;
...@@ -81,21 +81,39 @@ const Modal = ({ showModal, setShowModal }) => { ...@@ -81,21 +81,39 @@ const Modal = ({ showModal, setShowModal }) => {
81 <Background onClick={closeModal}> 81 <Background onClick={closeModal}>
82 <ModalWrapper> 82 <ModalWrapper>
83 <ModalContent> 83 <ModalContent>
84 - <TextWrap top="18.5%" right="28.5%" bottom="19px"> 84 + <TextWrap top="15px" right="20px" bottom="19px">
85 기본검색 85 기본검색
86 </TextWrap> 86 </TextWrap>
87 <StandardWrap> 87 <StandardWrap>
88 <Input float="left" color="blue" width="140px" size="10px" /> 88 <Input float="left" color="blue" width="140px" size="10px" />
89 </StandardWrap> 89 </StandardWrap>
90 - <TextWrap top="27%" right="28.5%" bottom="137px"> 90 + <TextWrap top="75px" right="20px" bottom="137px">
91 고급검색 91 고급검색
92 </TextWrap> 92 </TextWrap>
93 <AdvancedWrap> 93 <AdvancedWrap>
94 - <Input float="left" color="blue" width="140px" size="10px" /> 94 + <Input
95 + float="left"
96 + color="blue"
97 + width="140px"
98 + size="10px"
99 + placeholder="단어/ 문장검색"
100 + />
95 <br /> <br /> 101 <br /> <br />
96 - <Input float="left" color="blue" width="140px" size="10px" /> 102 + <Input
103 + float="left"
104 + color="blue"
105 + width="140px"
106 + size="10px"
107 + placeholder="최초 작성자"
108 + />
97 <br /> <br /> 109 <br /> <br />
98 - <Input float="left" color="blue" width="140px" size="10px" /> 110 + <Input
111 + float="left"
112 + color="blue"
113 + width="140px"
114 + size="10px"
115 + placeholder="최종 수정자"
116 + />
99 </AdvancedWrap> 117 </AdvancedWrap>
100 </ModalContent> 118 </ModalContent>
101 <CloseWrap onClick={() => setShowModal(prev => !prev)}> 119 <CloseWrap onClick={() => setShowModal(prev => !prev)}>
......
1 -import React from 'react';
2 -import styled from 'styled-components';
3 -import { dropdownListColorMap } from '../../lib/styles/palette';
4 -
5 -const DropDownListBlock = styled.div`
6 - float: ${props => props.float || ''};
7 - width: ${props => props.size || '40%'};
8 -`;
9 -
10 -const DropDownList = styled.ul`
11 - padding: 0;
12 - margin: 0;
13 - background-color: ${props => dropdownListColorMap[props.color].background};
14 - border: 2px solid ${props => dropdownListColorMap[props.color].borderColor};
15 - box-sizing: border-box;
16 - color: ${props => dropdownListColorMap[props.color].color};
17 - font-size: 1.3rem;
18 - font-weight: 500;
19 - &:first-child {
20 - padding-top: 0.5em;
21 - }
22 -`;
23 -
24 -const ListItem = styled.li`
25 - list-style: none;
26 - padding-left: 1em;
27 - padding-bottom: 0.3em;
28 - border-bottom: 2px solid #e5e5e5;
29 -`;
30 -
31 -const DropDown = ({ children, color, float, size }) => {
32 - return (
33 - <DropDownListBlock color={color} float={float} size={size}>
34 - <DropDownList color={color}>
35 - <ListItem>{children}</ListItem>
36 - </DropDownList>
37 - </DropDownListBlock>
38 - );
39 -};
40 -
41 -export default DropDown;
...@@ -6,14 +6,14 @@ const DropDownBlock = styled.div` ...@@ -6,14 +6,14 @@ const DropDownBlock = styled.div`
6 margin: 0 auto; 6 margin: 0 auto;
7 float: ${props => props.float || ''}; 7 float: ${props => props.float || ''};
8 `; 8 `;
9 - 9 +const DropDownHeader = styled.select`
10 -const DropDownHeader = styled.button`
11 margin-bottom: 0.8em; 10 margin-bottom: 0.8em;
12 padding: 0.4em; 11 padding: 0.4em;
13 width: ${props => props.width || '100px'}; 12 width: ${props => props.width || '100px'};
14 - line-height: ${props => props.height || '30px'}; 13 + height: ${props => props.height || '30px'};
15 padding-right: 30px; 14 padding-right: 30px;
16 font-size: ${props => props.fontsize || '20px'}; 15 font-size: ${props => props.fontsize || '20px'};
16 + cursor: pointer;
17 color: ${props => dropdownHeaderColorMap[props.color].color}; 17 color: ${props => dropdownHeaderColorMap[props.color].color};
18 background-color: ${props => dropdownHeaderColorMap[props.color].background}; 18 background-color: ${props => dropdownHeaderColorMap[props.color].background};
19 &:hover { 19 &:hover {
...@@ -21,18 +21,37 @@ const DropDownHeader = styled.button` ...@@ -21,18 +21,37 @@ const DropDownHeader = styled.button`
21 dropdownHeaderColorMap[props.color].hoverBackground}; 21 dropdownHeaderColorMap[props.color].hoverBackground};
22 } 22 }
23 border: 1px ${props => dropdownHeaderColorMap[props.color].background}; 23 border: 1px ${props => dropdownHeaderColorMap[props.color].background};
24 +
25 + option {
26 + color: blue;
27 + background-color: blue;
28 + display: flex;
29 + white-space: pre;
30 + min-height: 20px;
31 + padding: 0px 2px 1px;
32 + }
24 `; 33 `;
25 34
26 -const DropDown = ({ children, float, color, fontsize, width, height }) => { 35 +const DropDown = ({
36 + options,
37 + float,
38 + color = 'blue',
39 + fontsize,
40 + width,
41 + height,
42 +}) => {
27 return ( 43 return (
28 <DropDownBlock float={float} color={color}> 44 <DropDownBlock float={float} color={color}>
29 <DropDownHeader 45 <DropDownHeader
46 + options={options}
30 color={color} 47 color={color}
31 fontsize={fontsize} 48 fontsize={fontsize}
32 width={width} 49 width={width}
33 height={height} 50 height={height}
34 > 51 >
35 - {children} 52 + {options.map(friend => (
53 + <option value={friend.id}>{friend.name}</option>
54 + ))}
36 </DropDownHeader> 55 </DropDownHeader>
37 </DropDownBlock> 56 </DropDownBlock>
38 ); 57 );
......
1 import React, { useState } from 'react'; 1 import React, { useState } from 'react';
2 import styled from 'styled-components'; 2 import styled from 'styled-components';
3 import { useHistory } from 'react-router-dom'; 3 import { useHistory } from 'react-router-dom';
4 +import SearchBox from './SearchBox';
4 import { inputColorMap } from '../../lib/styles/palette'; 5 import { inputColorMap } from '../../lib/styles/palette';
5 6
6 const InputBlock = styled.div` 7 const InputBlock = styled.div`
...@@ -17,17 +18,33 @@ const InputBlock = styled.div` ...@@ -17,17 +18,33 @@ const InputBlock = styled.div`
17 color: ${props => inputColorMap[props.color].placeholder}; 18 color: ${props => inputColorMap[props.color].placeholder};
18 text-transform: uppercase; 19 text-transform: uppercase;
19 } 20 }
21 + float: left;
20 } 22 }
21 float: ${props => props.float || ''}; 23 float: ${props => props.float || ''};
22 `; 24 `;
25 +const SearchIconWrap = styled.div``;
23 26
24 -const Input = ({ color, size, float, width }) => { 27 +const Input = ({
28 + color,
29 + size,
30 + float,
31 + width,
32 + placeholder = '내용을 입력해 주세요.',
33 + display,
34 +}) => {
25 const [query, setQuery] = useState(''); 35 const [query, setQuery] = useState('');
26 const history = useHistory(); 36 const history = useHistory();
27 return ( 37 return (
28 - <InputBlock color={color} size={size} float={float} width={width}> 38 + <InputBlock
39 + color={color}
40 + size={size}
41 + float={float}
42 + width={width}
43 + placeholder={placeholder}
44 + display={display}
45 + >
29 <input 46 <input
30 - placeholder="내용을 입력해 주세요." 47 + placeholder={placeholder}
31 type="text" 48 type="text"
32 value={query} 49 value={query}
33 onChange={e => setQuery(e.target.value)} 50 onChange={e => setQuery(e.target.value)}
...@@ -42,6 +59,14 @@ const Input = ({ color, size, float, width }) => { ...@@ -42,6 +59,14 @@ const Input = ({ color, size, float, width }) => {
42 } 59 }
43 }} 60 }}
44 /> 61 />
62 + <SearchIconWrap
63 + onClick={() => {
64 + const params = new URLSearchParams({ query });
65 + history.push(`?${params.toString()}`);
66 + }}
67 + >
68 + <SearchBox color="blue" size="50px" display={display} />
69 + </SearchIconWrap>
45 </InputBlock> 70 </InputBlock>
46 ); 71 );
47 }; 72 };
......
...@@ -5,8 +5,8 @@ import { searchBoxColorMap } from '../../lib/styles/palette'; ...@@ -5,8 +5,8 @@ import { searchBoxColorMap } from '../../lib/styles/palette';
5 const ButtonBlock = styled.button` 5 const ButtonBlock = styled.button`
6 width: ${props => props.size}; 6 width: ${props => props.size};
7 height: ${props => props.size}; 7 height: ${props => props.size};
8 - 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"); 8 + 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");
9 - 9 + display: ${props => props.display};
10 background-color: ${props => searchBoxColorMap[props.color].background}; 10 background-color: ${props => searchBoxColorMap[props.color].background};
11 &:hover { 11 &:hover {
12 background-color: ${props => 12 background-color: ${props =>
...@@ -15,10 +15,13 @@ const ButtonBlock = styled.button` ...@@ -15,10 +15,13 @@ const ButtonBlock = styled.button`
15 color: ${props => searchBoxColorMap[props.color].color}; 15 color: ${props => searchBoxColorMap[props.color].color};
16 float: ${props => props.float || ''}; 16 float: ${props => props.float || ''};
17 border: 1px ${props => searchBoxColorMap[props.color].background}; 17 border: 1px ${props => searchBoxColorMap[props.color].background};
18 + cursor: pointer;
18 `; 19 `;
19 20
20 -const SearchBox = ({ color, float, size }) => { 21 +const SearchBox = ({ color, float, size = '1px', display = 'none' }) => {
21 - return <ButtonBlock color={color} float={float} size={size} />; 22 + return (
23 + <ButtonBlock color={color} float={float} size={size} display={display} />
24 + );
22 }; 25 };
23 26
24 export default SearchBox; 27 export default SearchBox;
......
1 +import React from 'react';
2 +import Header from '../components/Header';
3 +
4 +const LoginPage = () => {
5 + return (
6 + <>
7 + <Header />
8 + </>
9 + );
10 +};
11 +
12 +export default LoginPage;