반응형 스타일 개선 및 모바일 환경 Header 항상 표시 Fixed cotes2020#37

- Header 및 Index Page 반응형 스타일 개선
- install mobile-detect package
- 모바일 환경에서 Header를 숨기지 않고 항상 표시하도록 구현

Author: junhobaik

package-lock.json

@@ -31,6 +31,7 @@
     "gatsby-source-filesystem": "^2.1.43",
     "gatsby-transformer-remark": "^2.6.45",
     "gatsby-transformer-sharp": "^2.3.7",
+    "mobile-detect": "^1.4.4",
     "node-sass": "^4.13.0",
     "prism-themes": "^1.3.0",
     "prismjs": "^1.17.1",

package.json

@@ -8,7 +8,7 @@
   width: 100%;
   align-items: flex-end;
   justify-content: space-between;
-  padding: 0.5rem 2rem 1rem 2rem;
+  padding: 0 2rem 1rem 2rem;
   height: $header-height;
   max-height: $header-height;
   transition: top 0.3s;
@@ -18,14 +18,19 @@
 
   @media screen and (max-width: $break-l) {
     background-color: #fff;
-    padding: 0.5rem 1.25rem 1rem 1rem;
+    padding: 0 1.5rem 1rem 1.5rem;
   }
   @media screen and (max-width: $break-m) {
+    padding: 0 1rem 0.5rem 1rem;
     height: $header-height-m;
   }
   @media screen and (max-width: $break-s) {
     height: $header-height-s;
-    padding: 0 1.25rem 0.25rem 1rem;
+    padding: 0 1rem 0.25rem 1rem;
+  }
+
+  &.mobile {
+    top: 0 !important;
   }
 
   &.show {
@@ -39,15 +44,22 @@
     display: flex;
     align-items: flex-end;
 
+    @media screen and (max-width: $break-s) {
+      align-items: center;
+    }
+
     .header-profile-image-wrap {
       display: flex;
       align-items: center;
       border: 1px solid #aaa;
       padding: 2px;
-
       border-radius: 100%;
       margin-right: 0.25rem;
 
+      @media screen and (max-width: $break-s) {
+        padding: 1px;
+      }
+
       img {
         border-radius: 100%;
         margin: 0;
@@ -60,6 +72,11 @@
           height: 25px !important;
         }
 
+        @media screen and (max-width: $break-s) {
+          width: 15px !important;
+          height: 15px !important;
+        }
+
         &:hover {
           opacity: 1;
         }
@@ -87,6 +104,10 @@
       &:hover {
         opacity: 1;
       }
+
+      @media screen and (max-width: $break-s) {
+        font-size: 1.1rem;
+      }
     }
   }
 }
@@ -110,6 +131,10 @@
         &:hover {
           opacity: 0.8;
         }
+
+        @media screen and (max-width: $break-s) {
+          font-size: 1rem;
+        }
       }
 
       span {

src/components/Header/header.scss

@@ -4,6 +4,7 @@ import { Link } from 'gatsby';
 import { FontAwesomeIcon as Fa } from '@fortawesome/react-fontawesome';
 import { faTags, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { connect } from 'react-redux';
+import MobileDetect from 'mobile-detect';
 
 import './header.scss';
 const config = require('../../../config');
@@ -19,6 +20,7 @@ const Header = (props: headerPropsType) => {
   const { siteTitle, path, setPath, size } = props;
   const [, setYPos] = useState(0);
   const [isHide, setIsHide] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
     const bio: HTMLDivElement | null = document.querySelector('.bio');
@@ -34,6 +36,11 @@ const Header = (props: headerPropsType) => {
   }, [isHide]);
 
   useEffect(() => {
+    const md = new MobileDetect(window.navigator.userAgent);
+    if (md.mobile()) {
+      setIsMobile(true);
+    }
+
     const profile: HTMLImageElement | null = document.querySelector('.header-profile-image-wrap>img');
 
     const prevPath = path;
@@ -80,7 +87,7 @@ const Header = (props: headerPropsType) => {
   };
 
   return (
-    <header id="Header" className={isHide ? 'hide' : 'show'}>
+    <header id="Header" className={`${isHide ? 'hide' : 'show'} ${isMobile ? 'mobile' : ''}`}>
       <div className="header-title">
         <Link to="/">
           <div className="header-profile-image-wrap">

src/components/Header/index.tsx

@@ -4,7 +4,7 @@
   display: flex;
 
   @media screen and (max-width: $break-m) {
-    margin-top: 1.5rem;
+    margin-top: 1rem;
   }
 
   .bio {

src/pages/styles/index.scss

@@ -4,7 +4,7 @@ $font-color-0: #24292e;
 // header
 $header-height: 6rem;
 $header-height-m: 4rem;
-$header-height-s: 3rem;
+$header-height-s: 2.5rem;
 
 // media query
 $break-l: 1119px;