Implement horizontal list

Author: velopert

src/components/common/TagItem.tsx

@@ -34,7 +34,7 @@ const tagStyle = css`
   ${media.small} {
     height: 1.5rem;
     font-size: 0.75rem;
-    border-radius: 0.625rem;
+    border-radius: 0.75rem;
     padding-left: 0.75rem;
     padding-right: 0.75rem;
     margin-right: 0.5rem;

src/components/velog/UserTagHorizontalList.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import media from '../../lib/styles/media';
+import { Tag } from '../../lib/graphql/tags';
+import palette from '../../lib/styles/palette';
+import { Link } from 'react-router-dom';
+import { escapeForUrl } from '../../lib/utils';
+
+export type UserTagHorizontalListProps = {
+  active: string | null;
+  tags: Tag[];
+  postsCount: number;
+  username: string;
+};
+
+function UserTagHorizontalList({
+  active,
+  tags,
+  postsCount,
+  username,
+}: UserTagHorizontalListProps) {
+  return (
+    <Block>
+      <TagItem to={`/@${username}`} active={active === null}>
+        전체보기 <span>({postsCount})</span>
+      </TagItem>
+      {tags.map(tag => (
+        <TagItem
+          active={active === escapeForUrl(tag.name)}
+          key={tag.id}
+          to={`@${username}?tag=${escapeForUrl(tag.name)}`}
+        >
+          {tag.name}
+          <span>({tag.posts_count})</span>
+        </TagItem>
+      ))}
+    </Block>
+  );
+}
+
+const Block = styled.div`
+  display: none;
+  ${media.large} {
+    display: flex;
+  }
+  overflow-x: auto;
+  margin-top: -1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  ${media.small} {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  margin-bottom: 0.5rem;
+`;
+
+const TagItem = styled(Link)<{ active?: boolean }>`
+  flex-shrink: 0;
+  height: 1.5rem;
+  font-size: 0.75rem;
+  border-radius: 0.75rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  background: ${palette.gray1};
+  color: ${palette.gray8};
+  display: flex;
+  align-items: center;
+  line-height: 1.5;
+
+  span {
+    margin-left: 0.25rem;
+    color: ${palette.gray6};
+    font-size: 0.75rem;
+  }
+
+  ${props =>
+    props.active &&
+    css`
+      background: ${palette.teal6};
+      color: white;
+      span {
+        color: white;
+        opacity: 0.8;
+      }
+    `}
+
+  text-decoration: none;
+
+  & + & {
+    margin-left: 0.5rem;
+  }
+`;
+
+export default UserTagHorizontalList;

src/components/velog/UserTags.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import UserTagVerticalList from './UserTagVerticalList';
 import useUserTags from './hooks/useUserTags';
+import UserTagHorizontalList from './UserTagHorizontalList';
 
 export type UserTagsProps = {
   username: string;
@@ -20,6 +21,12 @@ function UserTags({ username, tag }: UserTagsProps) {
         postsCount={data.postsCount}
         username={username}
       />
+      <UserTagHorizontalList
+        active={tag}
+        tags={data.tags}
+        postsCount={data.postsCount}
+        username={username}
+      />
     </>
   );
 }

src/pages/velog/tabs/UserPostsTab.tsx

@@ -10,6 +10,7 @@ import usePreserveScroll from '../../../lib/hooks/usePreserveScroll';
 import { Helmet } from 'react-helmet-async';
 import { usePrevious } from 'react-use';
 import UserTags from '../../../components/velog/UserTags';
+import { getScrollTop } from '../../../lib/utils';
 
 export interface UserPostsTabProps
   extends RouteComponentProps<{ username: string }> {
@@ -36,7 +37,11 @@ const UserPostsTab: React.FC<UserPostsTabProps> = ({
 
   const prevTag = usePrevious(tag);
   useEffect(() => {
-    if (prevTag !== tag) {
+    if (
+      prevTag !== tag &&
+      window.screen.width > 768 &&
+      getScrollTop() > window.screen.height * 0.6
+    ) {
       window.scrollTo(0, 0);
     }
   }, [prevTag, tag]);