Show write menu on mobile

Author: velopert

src/components/base/HeaderUserMenu.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import OutsideClickHandler from 'react-outside-click-handler';
 import HeaderUserMenuItem from './HeaderUserMenuItem';
+import media from '../../lib/styles/media';
 
 const HeaderUserMenuBlock = styled.div`
   position: absolute;
@@ -14,6 +15,13 @@ const HeaderUserMenuBlock = styled.div`
     width: 12rem;
     background: white;
     box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+
+    .mobile-only {
+      display: none;
+      ${media.medium} {
+        display: block;
+      }
+    }
   }
 `;
 
@@ -38,6 +46,9 @@ const HeaderUserMenu: React.FC<HeaderUserMenuProps> = ({
           <HeaderUserMenuItem to={`/@${username}`}>
             내 벨로그
           </HeaderUserMenuItem>
+          <div className="mobile-only">
+            <HeaderUserMenuItem to="/write">새 글 작성</HeaderUserMenuItem>
+          </div>
           <HeaderUserMenuItem to="/saves">임시 글</HeaderUserMenuItem>
           <HeaderUserMenuItem to="/lists/liked">읽기 목록</HeaderUserMenuItem>
           <HeaderUserMenuItem to="/setting">설정</HeaderUserMenuItem>

src/components/main/MainHeader.tsx

@@ -8,7 +8,7 @@ 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';
+import media, { mediaQuery } from '../../lib/styles/media';
 
 export type MainHeaderProps = {};
 
@@ -102,7 +102,7 @@ const Right = styled.div`
   align-items: center;
   position: relative;
   .write-button {
-    ${mediaQuery(376)} {
+    ${media.medium} {
       display: none;
     }
   }