Apply mobile design for search, tag, user posts, temp posts

Author: velopert

src/components/base/Header.tsx

@@ -11,6 +11,7 @@ import { UserLogo } from '../../modules/header';
 import HeaderLogo from './HeaderLogo';
 import media from '../../lib/styles/media';
 import { SearchIcon2 } from '../../static/svg';
+import { Link } from 'react-router-dom';
 
 const HeaderBlock = styled.div<{ floating: boolean }>`
   width: 100%;
@@ -90,6 +91,7 @@ interface HeaderProps {
   custom: boolean;
   userLogo: UserLogo | null;
   velogUsername: string | null;
+  isSearch: boolean;
 }
 
 const { useCallback } = React;
@@ -102,6 +104,7 @@ const Header: React.FC<HeaderProps> = ({
   custom,
   userLogo,
   velogUsername,
+  isSearch,
 }) => {
   const [userMenu, toggleUserMenu] = useToggle(false);
 
@@ -128,7 +131,24 @@ const Header: React.FC<HeaderProps> = ({
             />
           </div>
           <div className="right">
-            <SearchIcon2 className="search" />
+            {/* {velogUsername ? (
+              <SearchIcon2 className="search" />
+            ) : (
+              <Link to="/search">
+                <SearchIcon2 className="search" />
+              </Link>
+            )} */}
+            {!isSearch && (
+              <Link
+                to={
+                  velogUsername
+                    ? `/search?username=${velogUsername}`
+                    : '/search'
+                }
+              >
+                <SearchIcon2 className="search" />
+              </Link>
+            )}
             {user ? (
               <div className="logged-in">
                 <RoundButton

src/components/common/HorizontalTab.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import palette from '../../lib/styles/palette';
 import { useSpring, animated } from 'react-spring';
+import media from '../../lib/styles/media';
 
 export type HorizontalTabProps = {
   className?: string;
@@ -88,6 +89,10 @@ const StyledLink = styled(Link)`
   width: 8rem;
   height: 3rem;
   font-size: 1.3125rem;
+  ${media.small} {
+    height: 2.5rem;
+    font-size: 1rem;
+  }
   color: ${palette.gray7};
   display: flex;
   align-items: center;

src/components/common/PostCard.tsx

@@ -66,7 +66,6 @@ const PostCardBlock = styled.div`
   .post-thumbnail {
     margin-bottom: 1rem;
     ${media.small} {
-      margin-bottom: 0.5rem;
     }
   }
   line-height: 1.5;

src/components/saves/SavesTemplate.tsx

@@ -3,6 +3,7 @@ import VelogResponsive from '../velog/VelogResponsive';
 import styled from 'styled-components';
 import PageTemplate from '../base/PageTemplate';
 import palette from '../../lib/styles/palette';
+import media from '../../lib/styles/media';
 
 export interface SavesTemplateProps {
   children: React.ReactNode;
@@ -17,6 +18,19 @@ const StyledVelogResponsive = styled(VelogResponsive)`
     margin-bottom: 3rem;
     color: ${palette.gray8};
   }
+
+  ${media.medium} {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  ${media.small} {
+    width: 100%;
+    margin-top: 2rem;
+    & > h1 {
+      font-size: 2.5rem;
+      margin-bottom: 1.5rem;
+    }
+  }
 `;
 
 function SavesTemplate({ children }: SavesTemplateProps) {

src/components/search/SearchInput.tsx

@@ -1,10 +1,11 @@
 import React, { useRef, useMemo, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import palette from '../../lib/styles/palette';
-import { SearchIcon } from '../../static/svg';
+import { SearchIcon2 } from '../../static/svg';
 import useToggle from '../../lib/hooks/useToggle';
 import useInput from '../../lib/hooks/useInput';
 import { debounce } from 'throttle-debounce';
+import media from '../../lib/styles/media';
 
 const SearchInputBlock = styled.div<{ focus: boolean; large?: boolean }>`
   display: flex;
@@ -20,7 +21,7 @@ const SearchInputBlock = styled.div<{ focus: boolean; large?: boolean }>`
     margin-right: 0.5rem;
     width: 1rem;
     height: 1rem;
-    color: ${palette.gray5};
+    fill: ${palette.gray5};
   }
   input {
     transition: all 0.125s ease-in;
@@ -43,7 +44,7 @@ const SearchInputBlock = styled.div<{ focus: boolean; large?: boolean }>`
     css`
       border: 1px solid ${palette.gray8};
       svg {
-        color: ${palette.gray9};
+        fill: ${palette.gray9};
       }
       input {
         color: ${palette.gray9};
@@ -54,7 +55,7 @@ const SearchInputBlock = styled.div<{ focus: boolean; large?: boolean }>`
     props.large &&
     css`
       height: 4rem;
-      padding: 1.25rem 1.5rem;
+      padding: 0 1.5rem;
       svg {
         width: 1.5rem;
         height: 1.5rem;
@@ -65,6 +66,22 @@ const SearchInputBlock = styled.div<{ focus: boolean; large?: boolean }>`
         line-height: 2rem;
         height: 2rem;
       }
+      ${media.small} {
+        height: 2.25rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        svg {
+          width: 1rem;
+          height: 1rem;
+          margin-right: 0.75rem;
+        }
+        input {
+          flex: 1;
+          font-size: 1.125rem;
+          line-height: 1.5;
+          height: auto;
+        }
+      }
     `}
 `;
 
@@ -117,7 +134,7 @@ function SearchInput({
       onClick={onClick}
       large={large}
     >
-      <SearchIcon />
+      <SearchIcon2 />
       <input
         placeholder="검색어를 입력하세요"
         onFocus={toggleFocus}
@@ -126,6 +143,7 @@ function SearchInput({
         ref={inputRef}
         onChange={onChange}
         value={value}
+        autoFocus
       />
     </SearchInputBlock>
   );

src/components/search/SearchResultInfo.tsx

@@ -1,11 +1,16 @@
 import React from 'react';
 import palette from '../../lib/styles/palette';
 import styled from 'styled-components';
+import media from '../../lib/styles/media';
 
 const Info = styled.p`
   margin-bottom: 4rem;
   font-size: 1.125rem;
   line-height: 1.5;
+  ${media.small} {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+  }
   color: ${palette.gray7};
   b {
     color: ${palette.gray9};

src/components/search/SearchTemplate.tsx

@@ -2,9 +2,18 @@ import React from 'react';
 import PageTemplate from '../base/PageTemplate';
 import VelogResponsive from '../velog/VelogResponsive';
 import styled from 'styled-components';
+import media from '../../lib/styles/media';
 
 const StyledVelogResponsive = styled(VelogResponsive)`
   margin-top: 3.5rem;
+  ${media.medium} {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-top: 2rem;
+  }
+  ${media.small} {
+    margin-top: 0.5rem;
+  }
 `;
 
 export interface SearchTemplateProps {

src/components/tags/DetailedTagItem.tsx

@@ -4,6 +4,7 @@ import TagItem from '../common/TagItem';
 import palette from '../../lib/styles/palette';
 import Skeleton from '../common/Skeleton';
 import SkeletonTexts from '../common/SkeletonTexts';
+import media from '../../lib/styles/media';
 
 export type DetailedTagItemProps = {
   name: string;
@@ -58,11 +59,26 @@ const Block = styled.div<{ hasDescription: boolean }>`
   flex-direction: column;
   justify-content: space-between;
   padding: 1rem;
+
   width: 25%;
+  ${media.large} {
+    width: 33.333%;
+  }
+  ${media.medium} {
+    width: 50%;
+    margin-bottom: 1rem;
+  }
+  ${media.custom(470)} {
+    width: 100%;
+    margin-bottom: 0;
+  }
   ${props =>
     props.hasDescription &&
     css`
       height: 12rem;
+      ${media.medium} {
+        height: auto;
+      }
     `}
 
   p {
@@ -76,11 +92,20 @@ const Block = styled.div<{ hasDescription: boolean }>`
     font-size: 0.875rem;
     color: ${palette.gray7};
     line-height: 1.5;
+    ${media.small} {
+      font-size: 0.75rem;
+    }
   }
 
   .count {
     font-size: 0.875rem;
     color: ${palette.gray5};
+    ${media.medium} {
+      margin-top: 0.5rem;
+    }
+    ${media.small} {
+      font-size: 0.75rem;
+    }
   }
 `;
 

src/components/tags/DetailedTagList.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import DetailedTagItem, { DetailedTagItemSkeleton } from './DetailedTagItem';
 import { Tag } from '../../lib/graphql/tags';
+import media from '../../lib/styles/media';
 
 export type DetailedTagListProps = {
   tags: Tag[];
@@ -43,6 +44,17 @@ const Block = styled.section`
   width: 1200px;
   display: flex;
   flex-wrap: wrap;
+  ${media.large} {
+    width: 1024px;
+  }
+  ${media.medium} {
+    width: 100%;
+    margin-top: 2rem;
+  }
+
+  ${media.small} {
+    margin-top: 1rem;
+  }
 `;
 
 const SkeletonBlock = styled(Block)<{

src/components/tags/TagDetail.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import palette from '../../lib/styles/palette';
 import Skeleton from '../common/Skeleton';
 import SkeletonTexts from '../common/SkeletonTexts';
+import media from '../../lib/styles/media';
 
 export type TagDetailProps = {
   thumbnail: string | null;
@@ -60,20 +61,34 @@ const Block = styled.div`
     border-radius: 6rem;
     box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.125);
     margin-bottom: 2rem;
+    ${media.small} {
+      margin-top: 2rem;
+      width: 8rem;
+      height: 8rem;
+      margin-bottom: 1rem;
+    }
   }
 
   h1 {
     font-size: 3rem;
     margin: 0;
     line-height: 1.5;
     color: ${palette.gray8};
+    ${media.small} {
+      font-size: 2rem;
+    }
   }
   p {
     margin-top: 1rem;
     margin-bottom: 1rem;
     font-size: 1.125rem;
     line-height: 1.5;
     color: ${palette.gray7};
+    ${media.small} {
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      font-size: 1rem;
+    }
   }
   .count {
     margin-top: 1rem;
@@ -87,6 +102,10 @@ const SkeletonBlock = styled(Block)`
     height: 4.5rem;
     display: flex;
     align-items: center;
+    margin: 0;
+    ${media.small} {
+      height: 3rem;
+    }
   }
   .lines {
     margin-top: 1rem;
@@ -97,6 +116,14 @@ const SkeletonBlock = styled(Block)`
       align-items: center;
       width: 100%;
     }
+    ${media.small} {
+      margin-top: 0.5rem;
+      margin-bottom: 0.5rem;
+      font-size: 1rem;
+      .line {
+        height: 1.5rem;
+      }
+    }
   }
 `;