Implement user tag view (only for desktop for now)

Mobile view will be implemented tomorrow.
#59

Author: velopert

src/components/search/SearchInput.tsx

@@ -104,6 +104,7 @@ function SearchInput({
 }: SearchInputProps) {
   const [focus, toggleFocus] = useToggle(false);
   const [value, onChange] = useInput(initial);
+  const mounted = useRef(false);
 
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -124,6 +125,10 @@ function SearchInput({
   };
 
   useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
     if (searchAsYouType) {
       debouncedSearch(value);
     }

src/components/velog/SideArea.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+import media from '../../lib/styles/media';
+import palette from '../../lib/styles/palette';
+
+export type SideAreaProps = {
+  children: React.ReactNode;
+};
+
+function SideArea({ children }: SideAreaProps) {
+  return (
+    <Wrapper>
+      <Block>{children}</Block>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  position: relative;
+`;
+
+const Block = styled.div`
+  position: absolute;
+  margin-top: 4.25rem;
+  width: 11.5rem;
+  left: -13.5rem;
+
+  ${media.large} {
+    display: none;
+  }
+`;
+
+export default SideArea;

src/components/velog/UserTagVerticalList.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from 'styled-components';
+import palette from '../../lib/styles/palette';
+import SideArea from './SideArea';
+import { Tag } from '../../lib/graphql/tags';
+import { Link } from 'react-router-dom';
+import { escapeForUrl } from '../../lib/utils';
+
+export type UserTagVerticalListProps = {
+  active: string | null;
+  tags: Tag[];
+  postsCount: number;
+  username: string;
+};
+
+function UserTagVerticalList({
+  tags,
+  active,
+  postsCount,
+  username,
+}: UserTagVerticalListProps) {
+  return (
+    <SideArea>
+      <Block>
+        <div className="title">태그 목록</div>
+        <ul>
+          <ListItem active={active === null}>
+            <Link to={`/@${username}`}>전체보기</Link>
+            <span>({postsCount})</span>
+          </ListItem>
+          {tags.map(tag => (
+            <ListItem active={active === escapeForUrl(tag.name)} key={tag.id}>
+              <Link to={`@${username}?tag=${escapeForUrl(tag.name)}`}>
+                {tag.name}
+              </Link>
+              <span>({tag.posts_count})</span>
+            </ListItem>
+          ))}
+        </ul>
+      </Block>
+    </SideArea>
+  );
+}
+
+const Block = styled.div`
+  .title {
+    font-size: 1rem;
+    line-height: 1.5;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid ${palette.gray5};
+    margin-bottom: 1rem;
+    color: ${palette.gray7};
+    font-weight: bold;
+  }
+  ul {
+    list-style: none;
+    /* margin-left: 0; */
+    padding-left: 0;
+  }
+`;
+
+const ListItem = styled.li<{ active?: boolean }>`
+  color: ${palette.gray8};
+  font-size: 0.875rem;
+  line-height: 1.5;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    &:hover {
+      color: ${palette.gray9};
+      ${props =>
+        props.active &&
+        `
+    color: ${palette.teal5};
+  `}
+      text-decoration: underline;
+      span {
+        text-decoration: none;
+      }
+    }
+  }
+
+  ${props =>
+    props.active &&
+    `
+    color: ${palette.teal5};
+    font-weight: bold;
+  `}
+
+  span {
+    margin-left: 0.5rem;
+    color: ${palette.gray6};
+    font-weight: normal;
+  }
+
+  & + & {
+    margin-top: 0.25rem;
+  }
+`;
+
+export default UserTagVerticalList;

src/components/velog/UserTags.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import UserTagVerticalList from './UserTagVerticalList';
+import useUserTags from './hooks/useUserTags';
+
+export type UserTagsProps = {
+  username: string;
+  tag: string | null;
+};
+
+function UserTags({ username, tag }: UserTagsProps) {
+  const { data, loading } = useUserTags(username);
+  if (!data || loading) return null;
+
+  return (
+    <>
+      <UserTagVerticalList
+        active={tag}
+        tags={data.tags}
+        postsCount={data.postsCount}
+        username={username}
+      />
+    </>
+  );
+}
+
+export default UserTags;

src/components/velog/hooks/useUserTags.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@apollo/react-hooks';
+import { GET_USER_TAGS, GetUserTagsResponse } from '../../../lib/graphql/tags';
+
+export default function useUserTags(username: string) {
+  const { data, loading } = useQuery<GetUserTagsResponse>(GET_USER_TAGS, {
+    variables: {
+      username,
+    },
+  });
+
+  return {
+    data: data
+      ? { tags: data.userTags.tags, postsCount: data.userTags.posts_count }
+      : null,
+    loading,
+  };
+}

src/components/write/Toolbar.tsx

@@ -9,11 +9,9 @@ import {
   MdFormatQuote,
   MdImage,
   MdCode,
-  MdRemoveRedEye,
 } from 'react-icons/md';
 import palette from '../../lib/styles/palette';
 import zIndexes from '../../lib/styles/zIndexes';
-import { FaMarkdown } from 'react-icons/fa';
 
 // box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.09);
 const ToolbarBlock = styled.div<{

src/containers/velog/UserPosts.tsx

@@ -11,12 +11,14 @@ import styled from 'styled-components';
 
 interface UserPostsProps {
   username: string;
+  tag: string | null;
 }
 
-const UserPosts: React.FC<UserPostsProps> = ({ username }) => {
+const UserPosts: React.FC<UserPostsProps> = ({ username, tag }) => {
   const getPostList = useQuery<{ posts: PartialPost[] }>(GET_POST_LIST, {
     variables: {
       username,
+      tag,
     },
     notifyOnNetworkStatusChange: true,
   });
@@ -29,6 +31,7 @@ const UserPosts: React.FC<UserPostsProps> = ({ username }) => {
         variables: {
           cursor,
           username,
+          tag,
         },
         updateQuery: (prev, { fetchMoreResult }) => {
           if (!fetchMoreResult) return prev;
@@ -38,7 +41,7 @@ const UserPosts: React.FC<UserPostsProps> = ({ username }) => {
         },
       });
     },
-    [getPostList, username],
+    [getPostList, tag, username],
   );
 
   if (!data || !data.posts) return <PostCardListSkeleton hideUser={true} />;

src/lib/graphql/tags.ts

@@ -20,6 +20,21 @@ export const GET_TAGS = gql`
   }
 `;
 
+export const GET_USER_TAGS = gql`
+  query UserTags($username: String) {
+    userTags(username: $username) {
+      tags {
+        id
+        name
+        description
+        posts_count
+        thumbnail
+      }
+      posts_count
+    }
+  }
+`;
+
 export const GET_TAG = gql`
   query Tag($name: String!) {
     tag(name: $name) {
@@ -36,6 +51,13 @@ export type GetTagsResponse = {
   tags: Tag[];
 };
 
+export type GetUserTagsResponse = {
+  userTags: {
+    tags: Tag[];
+    posts_count: number;
+  };
+};
+
 export type GetTagResponse = {
   tag: Tag;
 };

src/pages/velog/UserPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import VelogResponsive from '../../components/velog/VelogResponsive';
 import UserProfileContainer from '../../containers/velog/UserProfileContainer';
@@ -9,20 +9,34 @@ import SeriesTab from './tabs/SeriesTab';
 import AboutTab from './tabs/AboutTab';
 import palette from '../../lib/styles/palette';
 import media from '../../lib/styles/media';
+import UserTags from '../../components/velog/UserTags';
+import qs from 'qs';
+import { usePrevious } from 'react-use';
 
 const UserPageBlock = styled(VelogResponsive)``;
 
 export interface UserPageProps
   extends RouteComponentProps<{ username: string; tab?: 'series' | 'about' }> {}
 
-const UserPage: React.FC<UserPageProps> = ({ match }) => {
+const UserPage: React.FC<UserPageProps> = ({ match, location }) => {
   const { username, tab } = match.params;
+  const { tag } = qs.parse(location.search, {
+    ignoreQueryPrefix: true,
+  }) as { tag: string | undefined };
+
+  const prevTag = usePrevious(tag);
+  useEffect(() => {
+    if (prevTag !== tag) {
+      window.scrollTo(0, 0);
+    }
+  }, [prevTag, tag]);
 
   return (
     <UserPageBlock>
       <UserProfileContainer username={username} />
       <MobileSeparator />
       <VelogTab username={username} tab={tab || 'posts'} />
+      <UserTags username={username} tag={tag || null} />
       <Route path="/@:username" exact component={UserPostsTab} />
       <Route path="/@:username/series" component={SeriesTab} />
       <Route path="/@:username/about" component={AboutTab} />

src/pages/velog/tabs/UserPostsTab.tsx

@@ -19,9 +19,15 @@ const UserPostsTab: React.FC<UserPostsTabProps> = ({
   location,
   history,
 }) => {
-  const { q }: { q: string | undefined } = qs.parse(location.search, {
-    ignoreQueryPrefix: true,
-  });
+  const {
+    q,
+    tag,
+  }: { q: string | undefined; tag: string | undefined } = qs.parse(
+    location.search,
+    {
+      ignoreQueryPrefix: true,
+    },
+  );
 
   const { username } = match.params;
   usePreserveScroll('user/posts');
@@ -47,7 +53,7 @@ const UserPostsTab: React.FC<UserPostsTabProps> = ({
         {q ? (
           <SearchResult username={username} keyword={q} />
         ) : (
-          <UserPosts username={match.params.username} />
+          <UserPosts username={match.params.username} tag={tag || null} />
         )}
       </Block>
     </>