Merge pull request #463 from velopert/feature/follow

Feature/follow

Author: velopert

.env.development

@@ -0,0 +1,7 @@
+PUBLIC_URL=/
+
+REACT_APP_CLIENT_V3_HOST=http://localhost:3001
+REACT_APP_API_HOST=http://localhost:5002/
+
+REACT_APP_GRAPHQL_HOST=http://localhost:5002/
+REACT_APP_GRAPHQL_HOST_NOCDN=https://v2.velog.io/

.env renamed to .env.production

@@ -1,4 +1,7 @@
-REACT_APP_API_HOST=http://localhost:5001/
 PUBLIC_URL=/
+
+REACT_APP_CLIENT_V3_HOST=http://localhost:3001
+REACT_APP_API_HOST=http://localhost:5002/
+
 REACT_APP_GRAPHQL_HOST=https://v2cdn.velog.io/
 REACT_APP_GRAPHQL_HOST_NOCDN=https://v2.velog.io/

.gitignore

@@ -29,4 +29,4 @@ jspm_packages
 
 # Serverless directories
 .serverless
-.webpack
+.webpack

src/components/auth/AuthSocialButton.tsx

@@ -62,7 +62,7 @@ const AuthSocialButton: React.FC<AuthSocialButtonProps> = ({
   const host =
     process.env.NODE_ENV === 'production'
       ? process.env.REACT_APP_API_HOST
-      : 'http://localhost:5001/';
+      : 'http://localhost:5002/';
 
   const redirectTo = `${host}api/v2/auth/social/redirect/${provider}?next=${currentPath}&isIntegrate=${
     isIntegrate ? 1 : 0

src/components/base/HeaderLogo.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { Link } from 'react-router-dom';
 import { Logo, VelogIcon } from '../../static/svg';
 import { UserLogo } from '../../modules/header';
 import { themedPalette } from '../../lib/styles/themes';
 import { createFallbackTitle } from '../../lib/utils';
 import media from '../../lib/styles/media';
 import { ellipsis } from '../../lib/styles/utils';
+import VLink from '../common/VLink';
 
 export interface HeaderLogoProps {
   custom: boolean;
@@ -22,23 +22,23 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({
   if (!custom) {
     return (
       <HeaderLogoBlock>
-        <a href="/">
+        <VLink to="/">
           <Logo data-testid="velog-logo" className="velog-logo" />
-        </a>
+        </VLink>
       </HeaderLogoBlock>
     );
   }
   if (!userLogo) return <div />;
   if (!username) return <div />;
-  const velogPath = `/@${username}`;
+  const velogPath = `/@${username}/posts`;
   return (
     <HeaderLogoBlock>
-      <VelogLogoLink href="/">
+      <VelogLogoLink to={velogPath}>
         <VelogIcon />
       </VelogLogoLink>
-      <Link to={velogPath} className="user-logo">
+      <VLink to={velogPath} className="user-logo">
         {userLogo.title || createFallbackTitle(username)}
-      </Link>
+      </VLink>
     </HeaderLogoBlock>
   );
 };
@@ -74,7 +74,7 @@ const HeaderLogoBlock = styled.div`
   }
 `;
 
-const VelogLogoLink = styled.a`
+const VelogLogoLink = styled(VLink)`
   color: inherit;
 
   svg {

src/components/base/HeaderUserMenu.tsx

@@ -44,7 +44,7 @@ const HeaderUserMenu: React.FC<HeaderUserMenuProps> = ({
     <OutsideClickHandler onOutsideClick={onClose}>
       <HeaderUserMenuBlock onClick={onClose}>
         <div className="menu-wrapper">
-          <HeaderUserMenuItem to={`/@${username}`}>
+          <HeaderUserMenuItem to={`/@${username}/posts`} isMigrated={true}>
             내 벨로그
           </HeaderUserMenuItem>
           <div className="mobile-only">

src/components/base/HeaderUserMenuItem.tsx

@@ -2,13 +2,20 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { themedPalette } from '../../lib/styles/themes';
+import VLink from '../common/VLink';
 
 const WrapperLink = styled(Link)`
   display: block;
   color: inherit;
   text-decoration: none;
 `;
 
+const WrapperVLink = styled(VLink)`
+  display: block;
+  color: inherit;
+  text-decoration: none;
+`;
+
 const HeaderUserMenuItemBlock = styled.div`
   color: ${themedPalette.text1};
   padding: 0.75rem 1rem;
@@ -24,25 +31,38 @@ const HeaderUserMenuItemBlock = styled.div`
 interface HeaderUserMenuItemProps {
   to?: string;
   onClick?: () => void;
+  isMigrated?: boolean;
 }
 
 const HeaderUserMenuItem: React.FC<HeaderUserMenuItemProps> = ({
   children,
   to,
   onClick,
+  isMigrated = false,
 }) => {
   const jsx = (
     <HeaderUserMenuItemBlock onClick={onClick}>
       {children}
     </HeaderUserMenuItemBlock>
   );
-  return to ? (
-    <WrapperLink to={to} style={{ display: 'block' }}>
-      {jsx}
-    </WrapperLink>
-  ) : (
-    jsx
-  );
+
+  if (to && !isMigrated) {
+    return (
+      <WrapperLink to={to} style={{ display: 'block' }}>
+        {jsx}
+      </WrapperLink>
+    );
+  }
+
+  if (to && isMigrated) {
+    return (
+      <WrapperVLink to={to} style={{ display: 'block' }}>
+        {jsx}
+      </WrapperVLink>
+    );
+  }
+
+  return jsx;
 };
 
 export default HeaderUserMenuItem;

src/components/common/FlatPostCard.tsx

@@ -14,6 +14,7 @@ import media from '../../lib/styles/media';
 import PrivatePostLabel from './PrivatePostLabel';
 import optimizeImage from '../../lib/optimizeImage';
 import { LikeIcon } from '../../static/svg';
+import VLink from './VLink';
 
 const PostCardBlock = styled.div`
   padding-top: 4rem;
@@ -150,7 +151,7 @@ const FlatPostCard = ({ post, hideUser }: PostCardProps) => {
   };
 
   const url = `/@${post.user.username}/${post.url_slug}`;
-  const velogUrl = `/@${post.user.username}`;
+  const velogUrl = `/@${post.user.username}/posts`;
 
   if (!post.user.profile) {
     console.log(post);
@@ -159,17 +160,17 @@ const FlatPostCard = ({ post, hideUser }: PostCardProps) => {
     <PostCardBlock onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
       {!hideUser && (
         <div className="user-info">
-          <Link to={velogUrl}>
+          <VLink to={velogUrl}>
             <img
               src={optimizeImage(
                 post.user.profile?.thumbnail || userThumbnail,
                 120,
               )}
               alt="thumbnail"
             />
-          </Link>
+          </VLink>
           <div className="username">
-            <Link to={`/@${post.user.username}`}>{post.user.username}</Link>
+            <VLink to={`${velogUrl}`}>{post.user.username}</VLink>
           </div>
         </div>
       )}