Setup react-helmet for several pages & fix breaking test code

Author: velopert

package.json

@@ -37,6 +37,7 @@
     "@types/react": "^16.9.0",
     "@types/react-beautiful-dnd": "^11.0.3",
     "@types/react-dom": "^16.9.0",
+    "@types/react-helmet-async": "^1.0.3",
     "@types/react-outside-click-handler": "^1.3.0",
     "@types/react-redux": "^7.1.5",
     "@types/react-router-dom": "^5.1.3",
@@ -106,6 +107,7 @@
     "react-beautiful-dnd": "^12.2.0",
     "react-dev-utils": "^10.0.0",
     "react-dom": "^16.12.0",
+    "react-helmet-async": "^1.0.4",
     "react-icons": "^3.8.0",
     "react-outside-click-handler": "^1.3.0",
     "react-redux": "^7.1.3",

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 // import MainPage from './pages/main/MainPage';
 // import PostPage from './pages/PostPage';
@@ -11,6 +11,7 @@ import PageTemplate from './components/base/PageTemplate';
 import VelogPageFallback from './containers/velog/VelogPageFallback';
 import ErrorBoundary from './components/error/ErrorBoundary';
 import NotFoundPage from './pages/NotFoundPage';
+import { Helmet } from 'react-helmet-async';
 
 const loadableConfig = {
   fallback: <PageTemplate />,
@@ -45,6 +46,15 @@ interface AppProps {}
 const App: React.FC<AppProps> = props => {
   return (
     <JazzbarProvider>
+      <Helmet>
+        <title>velog</title>
+        <meta
+          name="description"
+          content="개발자들을 위한 블로그 서비스. 어디서 글 쓸지 고민하지 말고 벨로그에서 시작하세요."
+        />
+        <meta property="fb:app_id" content="203040656938507" />
+        <meta property="og:image" content="https://images.velog.io/velog.png" />
+      </Helmet>
       <ErrorBoundary>
         <Switch>
           <Route path="/" component={MainPage} exact />

src/components/base/__tests__/__snapshots__/HeaderUserIcon.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`HeaderUserIcon matches snapshot 1`] = `
 <div>
   <div
-    class="sc-bdVaJa dKjqSX"
+    class="sc-bdVaJa gdqjx"
   >
     <img
       alt="thumbnail"
@@ -16,6 +16,7 @@ exports[`HeaderUserIcon matches snapshot 1`] = `
       stroke-width="0"
       viewBox="0 0 24 24"
       width="1em"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M7 10l5 5 5-5z"

src/components/common/__tests__/UserProfile.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import UserProfile, { UserProfileProps } from '../UserProfile';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('UserProfile', () => {
   const setup = (props: Partial<UserProfileProps> = {}) => {
@@ -14,8 +15,13 @@ describe('UserProfile', () => {
         email: '[email protected]',
       },
       thumbnail: 'https://via.placeholder.com/150',
+      username: 'velopert',
     };
-    const utils = render(<UserProfile {...initialProps} {...props} />);
+    const utils = render(
+      <MemoryRouter>
+        <UserProfile {...initialProps} {...props} />
+      </MemoryRouter>,
+    );
     return {
       ...utils,
     };

src/components/policy/PolicyViewer.tsx

@@ -2,14 +2,21 @@ import React from 'react';
 import data from './policyData';
 import MarkdownRender from '../common/MarkdownRender';
 import styled from 'styled-components';
+import { Helmet } from 'react-helmet-async';
 
 export type PolicyViewerProps = {
   type: 'privacy' | 'terms';
 };
 
 function PolicyViewer({ type }: PolicyViewerProps) {
+  const title = type === 'privacy' ? '개인정보 취급 방침' : '이용약관';
+
   return (
     <Block>
+      <Helmet>
+        <title>{`${title} - velog`}</title>
+        <meta name="robots" content="noindex" />
+      </Helmet>
       <MarkdownRender markdown={data[type]} />
     </Block>
   );

src/components/velog/VelogAboutContent.tsx

@@ -22,7 +22,7 @@ const EmptyAbout = styled.div`
   }
   .message {
     font-size: 2rem;
-    color: ${palette.gray4};
+    color: ${palette.gray6};
     margin-bottom: 2rem;
   }
 `;

src/components/velog/VelogTab.tsx

@@ -5,7 +5,7 @@ import PlainNavLink from '../common/PlainNavLink';
 import media from '../../lib/styles/media';
 
 const VelogTabBlock = styled.div`
-  margin-top: 6rem;
+  margin-top: 4.5rem;
   margin-bottom: 4.5rem;
   display: flex;
   justify-content: center;

src/containers/post/PostViewer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useCallback, useRef } from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useEffect, useCallback, useRef, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   READ_POST,
   SinglePost,
@@ -31,6 +31,8 @@ import { useMount } from 'react-use';
 import PostSkeleton from '../../components/post/PostSkeleton';
 import media from '../../lib/styles/media';
 import useNotFound from '../../lib/hooks/useNotFound';
+import { Helmet } from 'react-helmet-async';
+import { RootState } from '../../modules';
 
 const UserProfileWrapper = styled(VelogResponsive)`
   margin-top: 16rem;
@@ -90,6 +92,11 @@ const PostViewer: React.FC<PostViewerProps> = ({
   const [likePost, { loading: loadingLike }] = useMutation(LIKE_POST);
   const [unlikePost, { loading: loadingUnlike }] = useMutation(UNLIKE_POST);
   const { showNotFound } = useNotFound();
+  const userLogo = useSelector((state: RootState) => state.header.userLogo);
+  const velogTitle = useMemo(() => {
+    if (!userLogo || !userLogo.title) return `${username}.log`;
+    return userLogo.title;
+  }, [userLogo, username]);
 
   const { error, data } = readPost;
 
@@ -281,8 +288,32 @@ const PostViewer: React.FC<PostViewerProps> = ({
 
   const { post } = data;
 
+  const url = `https://velog.io/@${username}/${post.url_slug}`;
+
   return (
     <PostViewerProvider prefetchLinkedPosts={prefetchLinkedPosts}>
+      <Helmet>
+        <title>
+          {post.title} - {velogTitle}
+        </title>
+        {post.short_description && (
+          <meta name="description" content={post.short_description} />
+        )}
+        <link rel="canonical" href={url} />
+        <meta property="og:url" content={url} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={post.title} />
+        <meta property="og:description" content={post.short_description} />
+        {post.thumbnail && (
+          <meta property="og:image" content={post.thumbnail} />
+        )}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={post.title} />
+        <meta name="twitter:description" content={post.short_description} />
+        {post.thumbnail && (
+          <meta name="twitter:image" content={post.thumbnail} />
+        )}
+      </Helmet>
       <PostHead
         title={post.title}
         tags={post.tags}

src/containers/post/__tests__/PostViewer.test.tsx

@@ -8,6 +8,7 @@ import { InMemoryCache } from 'apollo-cache-inmemory';
 import { ApolloClient } from 'apollo-client';
 import { ApolloProvider } from '@apollo/react-hooks';
 import renderWithProviders from '../../../lib/renderWithProviders';
+import { HelmetProvider } from 'react-helmet-async';
 
 const samplePost = {
   id: '6533da20-b351-11e8-9696-f1fffe8a36f1',
@@ -93,7 +94,9 @@ describe('PostViewer', () => {
     };
 
     const utils = renderWithProviders(
-      <PostViewer {...initialProps} {...props} />,
+      <HelmetProvider>
+        <PostViewer {...initialProps} {...props} />
+      </HelmetProvider>,
       {
         mocks: overrideMocks,
       },

src/containers/search/SearchResult.tsx

@@ -6,6 +6,7 @@ import { SearchPostsResponse, SEARCH_POSTS } from '../../lib/graphql/post';
 import useScrollPagination from '../../lib/hooks/useScrollPagination';
 import { safe } from '../../lib/utils';
 import styled from 'styled-components';
+import { Helmet } from 'react-helmet-async';
 // import { undrawSearching } from '../../static/images';
 
 export interface SearchResultProps {
@@ -63,6 +64,9 @@ function SearchResult({ keyword, username }: SearchResultProps) {
 
   return (
     <>
+      <Helmet>
+        <title>{`"${keyword}" 검색 결과 - velog`}</title>
+      </Helmet>
       <SearchResultInfo count={data.searchPosts.count} />
       <PostCardList posts={data.searchPosts.posts} hideUser={!!username} />
     </>

src/containers/velog/UserProfileContainer.tsx

@@ -9,6 +9,7 @@ import UserProfile, {
   UserProfileSkeleton,
 } from '../../components/common/UserProfile';
 import media from '../../lib/styles/media';
+import { Helmet } from 'react-helmet-async';
 
 export interface UserProfileContainerProps {
   username: string;
@@ -37,13 +38,19 @@ const UserProfileContainer: React.FC<UserProfileContainerProps> = ({
   } = data.user.profile;
 
   return (
-    <StyledUserProfile
-      displayName={display_name}
-      description={short_bio}
-      profileLinks={profile_links}
-      thumbnail={thumbnail}
-      username={username}
-    />
+    <>
+      <Helmet>
+        <title>{`${username} (${display_name}) - velog`}</title>
+        <meta name="description" content={short_bio} />
+      </Helmet>
+      <StyledUserProfile
+        displayName={display_name}
+        description={short_bio}
+        profileLinks={profile_links}
+        thumbnail={thumbnail}
+        username={username}
+      />
+    </>
   );
 };
 

src/containers/velog/VelogAbout.tsx

@@ -14,6 +14,8 @@ import VelogAboutEdit from '../../components/velog/VelogAboutEdit';
 import VelogAboutRightButton from '../../components/velog/VelogAboutRightButton';
 import styled from 'styled-components';
 import media from '../../lib/styles/media';
+import { Helmet } from 'react-helmet-async';
+import strip from 'strip-markdown';
 
 export interface VelogAboutProps {
   username: string;
@@ -45,6 +47,19 @@ const VelogAbout = ({ username }: VelogAboutProps) => {
 
   return (
     <Block>
+      <Helmet>
+        <title>
+          About {username} ({data.user.profile.display_name}) - velog
+        </title>
+        <meta
+          name="description"
+          content={
+            data.user.profile.about
+              ? strip(data.user.profile.about)
+              : `${username}님의 자기소개가 비어있습니다.`
+          }
+        />
+      </Helmet>
       {own && (data.user.profile.about || edit) && (
         <VelogAboutRightButton edit={edit} onClick={onClick} />
       )}

src/containers/velog/__tests__/ConfigLoader.test.tsx

@@ -6,6 +6,7 @@ import UserProfileContainer, {
 import { MockedResponse } from '@apollo/react-testing';
 import { GET_USER_PROFILE } from '../../../lib/graphql/user';
 import renderWithProviders from '../../../lib/renderWithProviders';
+import { HelmetProvider } from 'react-helmet-async';
 
 describe('UserProfileContainer', () => {
   const setup = (props: Partial<UserProfileContainerProps> = {}) => {
@@ -45,7 +46,9 @@ describe('UserProfileContainer', () => {
     ];
 
     const utils = renderWithProviders(
-      <UserProfileContainer {...initialProps} {...props} />,
+      <HelmetProvider>
+        <UserProfileContainer {...initialProps} {...props} />
+      </HelmetProvider>,
       { mocks },
     );
     return {