Implement search on home header

Author: velopert

src/components/common/RoundButton.tsx

@@ -63,7 +63,7 @@ const RoundButtonBlock = styled.button<RoundButtonBlockProps>`
   ${props =>
     props.border &&
     css<RoundButtonBlockProps>`
-      background: transparent;
+      background: white;
       border: 1px solid ${props => buttonColorMap[props.color].background};
       color: ${props => buttonColorMap[props.color].background};
       &:hover {
@@ -98,6 +98,7 @@ const RoundButton: React.FC<RoundButtonProps> = ({
   color = 'teal',
   size = 'DEFAULT',
   border = false,
+  className,
   ...rest
 }) => {
   if (to) {

src/components/home/HomeHeader.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Logo } from '../../static/svg';
+import { Logo, SearchIcon2 } from '../../static/svg';
 import RoundButton from '../common/RoundButton';
 import HomeResponsive from './HomeResponsive';
 import useHeader from './hooks/useHeader';
 import HeaderUserIcon from '../base/HeaderUserIcon';
 import useToggle from '../../lib/hooks/useToggle';
 import HeaderUserMenu from '../base/HeaderUserMenu';
+import { Link } from 'react-router-dom';
+import { mediaQuery } from '../../lib/styles/media';
 
 export type HomeHeaderProps = {};
 
@@ -20,6 +22,19 @@ function HomeHeader(props: HomeHeaderProps) {
         <Logo />
         {user ? (
           <Right>
+            <SearchButton to="/search">
+              <SearchIcon2 />
+            </SearchButton>
+            <RoundButton
+              border
+              color="darkGray"
+              style={{ marginRight: '1.25rem' }}
+              to="/write"
+              className="write-button"
+            >
+              새 글 작성
+            </RoundButton>
+
             <HeaderUserIcon user={user} onClick={toggleUserMenu} />
             <HeaderUserMenu
               onClose={toggleUserMenu}
@@ -30,6 +45,9 @@ function HomeHeader(props: HomeHeaderProps) {
           </Right>
         ) : (
           <Right>
+            <SearchButton to="/search">
+              <SearchIcon2 />
+            </SearchButton>
             <RoundButton color="darkGray" onClick={onLoginClick}>
               로그인
             </RoundButton>
@@ -44,6 +62,27 @@ const Block = styled.div`
   height: 4rem;
 `;
 
+const SearchButton = styled(Link)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  width: 2.5rem;
+  height: 2.5rem;
+  outline: none;
+  border-radius: 50%;
+  cursor: pointer;
+  &:hover {
+    background: rgba(0, 0, 0, 0.045);
+  }
+  svg {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+  margin-right: 0.75rem;
+`;
+
 const Inner = styled(HomeResponsive)`
   height: 100%;
   display: flex;
@@ -55,6 +94,11 @@ const Right = styled.div`
   display: flex;
   align-items: center;
   position: relative;
+  .write-button {
+    ${mediaQuery(376)} {
+      display: none;
+    }
+  }
 `;
 
 export default HomeHeader;

src/components/home/HomeTab.tsx

@@ -1,16 +1,32 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 import { NavLink, useLocation } from 'react-router-dom';
 import palette from '../../lib/styles/palette';
-import { MdTrendingUp, MdAccessTime } from 'react-icons/md';
+import { MdTrendingUp, MdAccessTime, MdMoreVert } from 'react-icons/md';
 import { useSpring, animated } from 'react-spring';
+import { mediaQuery } from '../../lib/styles/media';
+import useToggle from '../../lib/hooks/useToggle';
+import MainMobileHeadExtra from '../../components/main/MainMobileHeadExtra';
 
 export type HomeTabProps = {};
 
 function HomeTab(props: HomeTabProps) {
   const location = useLocation();
 
   const isRecent = location.pathname === '/recent';
+  const [extra, toggle] = useToggle(false);
+  const moreButtonRef = useRef<HTMLDivElement | null>(null);
+
+  const onClose = (e: React.MouseEvent<HTMLElement>) => {
+    if (!moreButtonRef.current) return;
+    if (
+      e.target === moreButtonRef.current ||
+      moreButtonRef.current.contains(e.target as Node)
+    ) {
+      return;
+    }
+    toggle();
+  };
 
   const springStyle = useSpring({
     left: isRecent ? '50%' : '0%',
@@ -21,31 +37,61 @@ function HomeTab(props: HomeTabProps) {
   });
 
   return (
-    <Block>
-      <NavLink
-        to="/trending"
-        activeClassName="active"
-        isActive={(match, location) => {
-          return ['/', '/trending'].indexOf(location.pathname) !== -1;
-        }}
-      >
-        <MdTrendingUp />
-        트렌딩
-      </NavLink>
-      <NavLink to="/recent" activeClassName="active">
-        <MdAccessTime />
-        최신
-      </NavLink>
-      <Indicator style={springStyle} />
-    </Block>
+    <Wrapper>
+      <Block>
+        <NavLink
+          to="/trending"
+          activeClassName="active"
+          isActive={(match, location) => {
+            return ['/', '/trending'].indexOf(location.pathname) !== -1;
+          }}
+        >
+          <MdTrendingUp />
+          트렌딩
+        </NavLink>
+        <NavLink to="/recent" activeClassName="active">
+          <MdAccessTime />
+          최신
+        </NavLink>
+        <Indicator style={springStyle} />
+      </Block>
+      <MobileMore ref={moreButtonRef}>
+        <MdMoreVert className="more" onClick={toggle} />
+      </MobileMore>
+      <MainMobileHeadExtra visible={extra} onClose={onClose} />
+    </Wrapper>
   );
 }
 
-const Block = styled.div`
+const Wrapper = styled.div`
   margin-top: 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  .more {
+    cursor: pointer;
+    font-size: 1.5rem;
+    color: ${palette.gray6};
+  }
+`;
+
+const MobileMore = styled.div`
+  display: none;
+  ${mediaQuery(944)} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+`;
+
+const Block = styled.div`
   display: flex;
   position: relative;
   width: 14rem;
+  ${mediaQuery(944)} {
+    width: 10rem;
+  }
   a {
     width: 7rem;
     display: flex;
@@ -55,6 +101,7 @@ const Block = styled.div`
     text-decoration: none;
     color: ${palette.gray6};
     height: 2.875rem;
+
     svg {
       font-size: 1.5rem;
       margin-right: 0.5rem;
@@ -63,6 +110,14 @@ const Block = styled.div`
       color: ${palette.gray8};
       font-weight: bold;
     }
+
+    ${mediaQuery(944)} {
+      font-size: 1rem;
+      width: 5rem;
+      svg {
+        font-size: 1.25rem;
+      }
+    }
   }
 `;