Fix #80

Author: velopert

.env

@@ -1,2 +1,2 @@
-REACT_APP_API_HOST=https://v2dev.velog.io/
-PUBLIC_URL=https://static.velog.io/
+REACT_APP_API_HOST=http://localhost:5000/
+PUBLIC_URL=/

docker/redis/docker-compose.yml

@@ -6,7 +6,6 @@ services:
     environment:
       # ALLOW_EMPTY_PASSWORD is recommended only for development.
       - ALLOW_EMPTY_PASSWORD=yes
-      - REDIS_DISABLE_COMMANDS=FLUSHDB,FLUSHALL
     ports:
       - '6379:6379'
     volumes:

src/components/velog/SideArea.tsx

@@ -21,7 +21,7 @@ const Wrapper = styled.div`
 
 const Block = styled.div`
   position: absolute;
-  margin-top: 4.25rem;
+
   width: 11.5rem;
   left: -13.5rem;
 

src/pages/velog/UserPage.tsx

@@ -9,9 +9,6 @@ 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)``;
 
@@ -20,23 +17,12 @@ export interface UserPageProps
 
 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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import UserPosts from '../../../containers/velog/UserPosts';
 import { RouteComponentProps } from 'react-router';
 import qs from 'qs';
@@ -8,6 +8,8 @@ import styled from 'styled-components';
 import media from '../../../lib/styles/media';
 import usePreserveScroll from '../../../lib/hooks/usePreserveScroll';
 import { Helmet } from 'react-helmet-async';
+import { usePrevious } from 'react-use';
+import UserTags from '../../../components/velog/UserTags';
 
 export interface UserPostsTabProps
   extends RouteComponentProps<{ username: string }> {
@@ -32,8 +34,15 @@ const UserPostsTab: React.FC<UserPostsTabProps> = ({
   const { username } = match.params;
   usePreserveScroll('user/posts');
 
+  const prevTag = usePrevious(tag);
+  useEffect(() => {
+    if (prevTag !== tag) {
+      window.scrollTo(0, 0);
+    }
+  }, [prevTag, tag]);
+
   return (
-    <>
+    <div>
       <HideOnMobile>
         <Helmet>
           <link
@@ -49,14 +58,17 @@ const UserPostsTab: React.FC<UserPostsTabProps> = ({
           username={match.params.username}
         />
       </HideOnMobile>
+      <TagWrapper>
+        <UserTags username={username} tag={tag || null} />
+      </TagWrapper>
       <Block>
         {q ? (
           <SearchResult username={username} keyword={q} />
         ) : (
           <UserPosts username={match.params.username} tag={tag || null} />
         )}
       </Block>
-    </>
+    </div>
   );
 };
 
@@ -73,4 +85,7 @@ const Block = styled.div`
   }
 `;
 
+const TagWrapper = styled.div`
+  position: relative;
+`;
 export default UserPostsTab;