Merge pull request velopert#123 from velopert/feature/mobile-write

Feature/mobile write

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;
     }
   }

src/components/write/PublishActionButtons.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import Button from '../common/Button';
+import media from '../../lib/styles/media';
 
 const PublishActionButtonsBlock = styled.div`
   display: flex;
   justify-content: flex-end;
+  ${media.custom(767)} {
+    margin-top: 2rem;
+  }
 `;
 
 export interface PublishActionButtonsProps {

src/components/write/PublishPrivacySetting.tsx

@@ -41,11 +41,16 @@ const Button = styled.button<{ active: boolean }>`
     `}
 
   svg {
-    margin-right: 1.5rem;
   }
   & + & {
     margin-left: 1rem;
   }
+  .description {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 `;
 
 export interface PublishPrivacySettingProps {
@@ -69,11 +74,11 @@ const PublishPrivacySetting: React.FC<PublishPrivacySettingProps> = ({
     <PublishPrivacySettingBlock title="공개 설정">
       <Button active={!isPrivate} onClick={onClickPublic}>
         <GlobeIcon />
-        전체 공개
+        <div className="description">전체 공개</div>
       </Button>
       <Button active={isPrivate} onClick={onClickPrivate}>
         <LockIcon />
-        비공개
+        <div className="description">비공개</div>
       </Button>
     </PublishPrivacySettingBlock>
   );

src/components/write/PublishScreenTemplate.tsx

@@ -4,12 +4,29 @@ import palette from '../../lib/styles/palette';
 import zIndexes from '../../lib/styles/zIndexes';
 import transitions from '../../lib/styles/transitions';
 import HideScroll from '../common/HideScroll';
+import media from '../../lib/styles/media';
 
 const PublishScreenTemplateBlock = styled.div<{ visible: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
+  @media (max-width: 1024px) and (orientation: landscape) {
+    align-items: flex-start;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    overflow: auto;
+  }
+
+  ${media.custom(767)} {
+    align-items: flex-start;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+    overflow: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   left: 0;
   top: 0;
   width: 100%;
@@ -30,6 +47,12 @@ const PublishScreenTemplateBlock = styled.div<{ visible: boolean }>`
 const Wrapper = styled.div`
   width: 768px;
   display: flex;
+  ${media.medium} {
+    width: 704px;
+  }
+  ${media.custom(767)} {
+    flex-direction: column;
+  }
 `;
 const Pane = styled.div`
   flex: 1;
@@ -46,6 +69,9 @@ const Separator = styled.div`
   background: ${palette.gray2};
   margin-left: 2rem;
   margin-right: 2rem;
+  ${media.custom(767)} {
+    display: none;
+  }
 `;
 
 export interface PublishScreenTemplateProps {

src/components/write/TagInput.tsx

@@ -2,50 +2,8 @@ import * as React from 'react';
 import styled, { css } from 'styled-components';
 import palette from '../../lib/styles/palette';
 import transitions from '../../lib/styles/transitions';
-
-const TagInputBlock = styled.div`
-  color: ${palette.gray8};
-  font-size: 1.125rem;
-  margin-bottom: 4rem;
-  display: flex;
-  flex-wrap: wrap;
-  [contenteditable='true']:empty:before {
-    content: attr(placeholder);
-    display: block; /* For Firefox */
-    color: ${palette.gray5};
-  }
-`;
-const StyledInput = styled.input`
-  display: inline-flex;
-  outline: none;
-  cursor: text;
-  font-size: 1.125rem;
-  line-height: 2rem;
-  margin-bottom: 0.75rem;
-  min-width: 8rem;
-  border: none;
-`;
-
-const Tag = styled.div`
-  color: ${palette.gray9};
-  font-size: 1rem;
-  display: inline-flex;
-  align-items: center;
-  height: 2rem;
-  border-radius: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  background: ${palette.gray1};
-  color: ${palette.teal7};
-  margin-right: 0.75rem;
-  transition: ease-in 0.125s;
-  cursor: pointer;
-  &:hover {
-    opacity: 0.6;
-  }
-  margin-bottom: 0.75rem;
-  animation: ${transitions.popIn} 0.125s forwards ease-in-out;
-`;
+import media, { mediaQuery } from '../../lib/styles/media';
+import { useTransition, animated } from 'react-spring';
 
 export interface TagInputProps {
   ref?: React.RefObject<HTMLDivElement>;
@@ -59,24 +17,6 @@ const TagItem: React.FC<{
   return <Tag onClick={onClick}>{children}</Tag>;
 };
 
-const Help = styled.div<{ visible: boolean }>`
-  display: block;
-  width: 100%;
-  font-size: 0.875rem;
-  color: ${palette.gray7};
-  transition: ease-in 0.125s;
-  opacity: 0;
-  & > .inside {
-    margin-top: 0.5rem;
-    position: absolute;
-  }
-  ${props =>
-    props.visible &&
-    css`
-      opacity: 1;
-    `}
-`;
-
 const { useState, useCallback, useEffect, useRef } = React;
 const TagInput: React.FC<TagInputProps> = ({ onChange, tags: initialTags }) => {
   const [tags, setTags] = useState<string[]>(initialTags);
@@ -170,15 +110,110 @@ const TagInput: React.FC<TagInputProps> = ({ onChange, tags: initialTags }) => {
         onFocus={() => setFocus(true)}
         onBlur={() => setFocus(false)}
       />
-      <Help visible={focus}>
-        <div className="inside">
-          쉼표 혹은 엔터를 입력하여 태그를 등록 할 수 있습니다.
-          <br />
-          등록된 태그를 클릭하면 삭제됩니다.
-        </div>
-      </Help>
+      <Help focus={focus} />
     </TagInputBlock>
   );
 };
 
+function Help({ focus }: { focus: boolean }) {
+  const transitions = useTransition(focus, null, {
+    from: { opacity: 0, transform: 'translateY(-1rem)' },
+    enter: { opacity: 1, transform: 'translateY(0rem)' },
+    leave: { opacity: 0, transform: 'translateY(-1rem)' },
+    config: {
+      tension: 350,
+      friction: 22,
+    },
+  });
+
+  return (
+    <HelpBlock>
+      {transitions.map(({ item, key, props }) =>
+        item ? (
+          <animated.div className="inside" style={props} key={key}>
+            쉼표 혹은 엔터를 입력하여 태그를 등록 할 수 있습니다.
+            <br />
+            등록된 태그를 클릭하면 삭제됩니다.
+          </animated.div>
+        ) : null,
+      )}
+    </HelpBlock>
+  );
+}
+
+const HelpBlock = styled.div`
+  display: block;
+  width: 100%;
+
+  color: ${palette.gray7};
+  transition: ease-in 0.125s;
+
+  & > .inside {
+    position: absolute;
+    background: ${palette.gray8};
+    color: white;
+    padding: 0.75rem;
+    z-index: 20;
+    line-height: 1.5;
+    font-size: 0.75rem;
+  }
+`;
+
+const TagInputBlock = styled.div`
+  color: ${palette.gray8};
+  font-size: 1.125rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  [contenteditable='true']:empty:before {
+    content: attr(placeholder);
+    display: block; /* For Firefox */
+    color: ${palette.gray5};
+  }
+`;
+const StyledInput = styled.input`
+  display: inline-flex;
+  outline: none;
+  cursor: text;
+  font-size: 1.125rem;
+  line-height: 2rem;
+  ${mediaQuery(767)} {
+    line-height: 1.5rem;
+    font-size: 0.75rem;
+  }
+  margin-bottom: 0.75rem;
+  min-width: 8rem;
+  border: none;
+`;
+
+const Tag = styled.div`
+  color: ${palette.gray9};
+  font-size: 1rem;
+  display: inline-flex;
+  align-items: center;
+  height: 2rem;
+  border-radius: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  background: ${palette.gray1};
+  color: ${palette.teal7};
+  margin-right: 0.75rem;
+  transition: ease-in 0.125s;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.6;
+  }
+  margin-bottom: 0.75rem;
+  animation: ${transitions.popIn} 0.125s forwards ease-in-out;
+  ${mediaQuery(767)} {
+    height: 1.5rem;
+    font-size: 0.75rem;
+    border-radius: 0.75rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+`;
+
 export default TagInput;

src/components/write/TitleTextarea.tsx

@@ -1,11 +1,15 @@
 import styled, { css } from 'styled-components';
 import TextareaAutosize from 'react-textarea-autosize';
 import palette from '../../lib/styles/palette';
+import { mediaQuery } from '../../lib/styles/media';
 
 const style = css`
   display: block;
   padding: 0;
   font-size: 2.75rem;
+  ${mediaQuery(767)} {
+    font-size: 1.8rem;
+  }
   width: 100%;
   resize: none;
   line-height: 1.5;