Merge branch 'feat/components-header' into 'develop'

Feat/components header



See merge request !5

+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';
+// 헤더 사이즈
+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 #868e96;
+`;
+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 UserContainer = styled.div`
+  position: fixed;
+  top: 35px;
+  right: 0;
+  padding-right: 20px;
+`;
+
+const AirContainer = styled.div`
+  height: ${HeaderHeight};
+`;
+
+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>
+          <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 onClick={openModal}>
+            <Button color="white">고급 검색</Button>
+          </SearchOptionContainer>
+          <Modal showModal={showModal} setShowModal={setShowModal} />
+          <SortOptionContainer>
+            <DropDownButton
+              color="white"
+              width="80px"
+              fontsize="15px"
+              height="28px"
+            >
+              정렬
+            </DropDownButton>
+          </SortOptionContainer>
+        </OptionContainer>
+        <UserContainer>
+          <Button color="white" width="100px" height="50px" fontsize="20px">
+            사용자 님
+          </Button>
+        </UserContainer>
+      </MainContainer>
+      <AirContainer />
+    </>
+  );
+};
+export default Header;

+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import Button from './common/Button';
+import Input from './common/Input';
+
+const Background = styled.div`
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+const ModalWrapper = styled.div`
+  width: 400px;
+  height: 350px;
+  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
+  background: #fff;
+  color: #000;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  position: relative;
+  z-index: 10;
+  border-radius: 10px;
+`;
+
+const ModalContent = styled.div`
+  line-height: 1.8;
+  color: #141414;
+  p {
+    margin-bottom: 1rem;
+  }
+  align-content: left;
+`;
+
+const SearchWrap = styled.div`
+  position: fixed;
+  top: 50%;
+  right: 43%;
+`;
+
+const CloseWrap = styled.div`
+  position: fixed;
+  top: 50%;
+  right: 32%;
+`;
+
+const StandardWrap = styled.div`
+  width: 50px;
+  position: fixed;
+  top: 18%;
+  right: 43%;
+`;
+
+const AdvancedWrap = styled.div`
+  width: 50px;
+  position: fixed;
+  top: 27%;
+  right: 43%;
+`;
+
+const TextWrap = styled.div`
+  position: fixed;
+  width: 340px;
+  top: ${props => props.top};
+  right: ${props => props.right};
+  border-bottom: 2px solid #dee2e6;
+  padding-left: 20px;
+  padding-bottom: ${props => props.bottom};
+`;
+
+const Modal = ({ showModal, setShowModal }) => {
+  const modalRef = useRef();
+  const closeModal = e => {
+    if (modalRef.current === e.target) {
+      setShowModal(false);
+    }
+  };
+
+  return (
+    <>
+      {showModal ? (
+        <Background onClick={closeModal}>
+          <ModalWrapper>
+            <ModalContent>
+              <TextWrap top="18.5%" right="28.5%" bottom="19px">
+                기본검색
+              </TextWrap>
+              <StandardWrap>
+                <Input float="left" color="blue" width="140px" size="10px" />
+              </StandardWrap>
+              <TextWrap top="27%" right="28.5%" bottom="137px">
+                고급검색
+              </TextWrap>
+              <AdvancedWrap>
+                <Input float="left" color="blue" width="140px" size="10px" />
+                <br /> <br />
+                <Input float="left" color="blue" width="140px" size="10px" />
+                <br /> <br />
+                <Input float="left" color="blue" width="140px" size="10px" />
+              </AdvancedWrap>
+            </ModalContent>
+            <CloseWrap onClick={() => setShowModal(prev => !prev)}>
+              <Button width="100px" color="blue">
+                닫기
+              </Button>
+            </CloseWrap>
+            <SearchWrap>
+              <Button width="100px" color="gray">
+                검색
+              </Button>
+            </SearchWrap>
+          </ModalWrapper>
+        </Background>
+      ) : null}
+    </>
+  );
+};
+export default Modal;

@@ -10,22 +10,28 @@ const DropDownBlock = styled.div`
 const DropDownHeader = styled.button`
   margin-bottom: 0.8em;
   padding: 0.4em;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
-  font-weight: 500;
-  font-size: ${props => props.size};
-  border: 2px solid ${props => dropdownHeaderColorMap[props.color].borderColor};
+  width: ${props => props.width || '100px'};
+  line-height: ${props => props.height || '30px'};
+  padding-right: 30px;
+  font-size: ${props => props.fontsize || '20px'};
   color: ${props => dropdownHeaderColorMap[props.color].color};
   background-color: ${props => dropdownHeaderColorMap[props.color].background};
   &:hover {
     background-color: ${props =>
       dropdownHeaderColorMap[props.color].hoverBackground};
   }
+  border: 1px ${props => dropdownHeaderColorMap[props.color].background};
 `;
 
-const DropDown = ({ children, float, color, size }) => {
+const DropDown = ({ children, float, color, fontsize, width, height }) => {
   return (
-    <DropDownBlock float={float} color={color} size={size}>
-      <DropDownHeader color={color} size={size}>
+    <DropDownBlock float={float} color={color}>
+      <DropDownHeader
+        color={color}
+        fontsize={fontsize}
+        width={width}
+        height={height}
+      >
         {children}
       </DropDownHeader>
     </DropDownBlock>

-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
+import { useHistory } from 'react-router-dom';
 import { inputColorMap } from '../../lib/styles/palette';
 
 const InputBlock = styled.div`
   input {
-    padding: 20px;
-    padding-right: 200px;
+    padding: ${props => props.size};
+    padding-right: ${props => props.width};
     color: ${props => inputColorMap[props.color].color};
     box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
     border: 3px solid ${props => inputColorMap[props.color].borderColor};
@@ -20,10 +21,27 @@ const InputBlock = styled.div`
   float: ${props => props.float || ''};
 `;
 
-const Input = ({ children, color, size, float }) => {
+const Input = ({ color, size, float, width }) => {
+  const [query, setQuery] = useState('');
+  const history = useHistory();
   return (
-    <InputBlock color={color} size={size} float={float}>
-      <input placeholder={children} color={color} />
+    <InputBlock color={color} size={size} float={float} width={width}>
+      <input
+        placeholder="내용을 입력해 주세요."
+        type="text"
+        value={query}
+        onChange={e => setQuery(e.target.value)}
+        onKeyPress={e => {
+          if (e.key === 'Enter') {
+            if (query === '') {
+              alert('검색어를 입력 해 주세요.');
+              return;
+            }
+            const params = new URLSearchParams({ query });
+            history.push(`?${params.toString()}`);
+          }
+        }}
+      />
     </InputBlock>
   );
 };

@@ -14,6 +14,7 @@ const ButtonBlock = styled.button`
   }
   color: ${props => searchBoxColorMap[props.color].color};
   float: ${props => props.float || ''};
+  border: 1px ${props => searchBoxColorMap[props.color].background};
 `;
 
 const SearchBox = ({ color, float, size }) => {

@@ -40,6 +40,16 @@ export const buttonColorMap = {
     color: 'white',
     hoverBackground: palette.blue5,
   },
+  gray: {
+    background: palette.gray2,
+    color: 'black',
+    hoverBackground: palette.gray5,
+  },
+  white: {
+    background: 'white',
+    color: 'black',
+    hoverBackground: palette.gray2,
+  },
 };
 
 export const inputColorMap = {
@@ -65,6 +75,11 @@ export const dropdownHeaderColorMap = {
     hoverBackground: palette.blue5,
     borderColor: palette.blue8,
   },
+  white: {
+    background: 'white',
+    color: 'black',
+    hoverBackground: palette.gray2,
+  },
 };
 
 export const searchBoxColorMap = {