Setup helemt and fix small bugs in reading list

Author: velopert

src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, Redirect } from 'react-router-dom';
 // import PostPage from './pages/PostPage';
 
 import loadable from '@loadable/component';
@@ -80,6 +80,7 @@ const App: React.FC<AppProps> = props => {
           <Route path="/setting" component={SettingPage} />
           <Route path="/success" component={SuccessPage} />
           <Route path="/lists/:type(liked|read)" component={ReadingListPage} />
+          <Route path="/lists" render={() => <Redirect to="/lists/liked" />} />
           <Route component={NotFoundPage} />
         </Switch>
       </ErrorBoundary>

src/components/base/HeaderUserMenu.tsx

@@ -39,6 +39,7 @@ const HeaderUserMenu: React.FC<HeaderUserMenuProps> = ({
             내 벨로그
           </HeaderUserMenuItem>
           <HeaderUserMenuItem to="/saves">임시 글</HeaderUserMenuItem>
+          <HeaderUserMenuItem to="/lists/liked">읽기 목록</HeaderUserMenuItem>
           <HeaderUserMenuItem to="/setting">설정</HeaderUserMenuItem>
           <HeaderUserMenuItem onClick={onLogout}>로그아웃</HeaderUserMenuItem>
         </div>

src/components/base/HeaderUserMenuItem.tsx

@@ -14,6 +14,7 @@ const HeaderUserMenuItemBlock = styled.div`
   padding: 0.75rem 1rem;
   line-height: 1.5;
   font-weight: 500;
+  cursor: pointer;
   &:hover {
     background: ${palette.gray0};
   }

src/pages/SearchPage.tsx

@@ -4,6 +4,7 @@ import LargeSearchInput from '../containers/search/LargeSearchInput';
 import SearchResult from '../containers/search/SearchResult';
 import { RouteComponentProps } from 'react-router';
 import qs from 'qs';
+import { Helmet } from 'react-helmet-async';
 
 export interface SearchPageProps extends RouteComponentProps {}
 
@@ -17,6 +18,11 @@ function SearchPage({ location }: SearchPageProps) {
 
   return (
     <SearchTemplate>
+      <Helmet>
+        {(query.q || query.username) && (
+          <meta name="robots" content="noindex" />
+        )}
+      </Helmet>
       <LargeSearchInput initialKeyword={query.q} />
       <SearchResult keyword={query.q} username={query.username} />
     </SearchTemplate>

src/pages/home/RecentPostsPage.tsx

@@ -3,18 +3,28 @@ import useRecentPosts from './hooks/useRecentPosts';
 import PostCardGrid, {
   PostCardGridSkeleton,
 } from '../../components/common/PostCardGrid';
+import { Helmet } from 'react-helmet-async';
 
 export type RecentPostsPageProps = {};
 
 function RecentPostsPage(props: RecentPostsPageProps) {
   const { data, loading } = useRecentPosts();
 
   return (
-    <PostCardGrid
-      posts={data?.posts || []}
-      forHome
-      loading={!data || loading}
-    />
+    <>
+      <Helmet>
+        <title>최신 포스트 - velog</title>
+        <meta
+          name="description"
+          content="벨로그에서 다양한 개발자들이 작성한 따끈따끈한 최신 포스트들을 읽어보세요."
+        />
+      </Helmet>
+      <PostCardGrid
+        posts={data?.posts || []}
+        forHome
+        loading={!data || loading}
+      />
+    </>
   );
 }
 

src/pages/home/TrendingPostsPage.tsx

@@ -3,18 +3,24 @@ import PostCardGrid, {
   PostCardGridSkeleton,
 } from '../../components/common/PostCardGrid';
 import useTrendingPosts from './hooks/useTrendingPosts';
+import { Helmet } from 'react-helmet-async';
 
 export type TrendingPageProps = {};
 
 function TrendingPage(props: TrendingPageProps) {
   const { data, loading } = useTrendingPosts();
 
   return (
-    <PostCardGrid
-      posts={data?.trendingPosts || []}
-      forHome
-      loading={!data || loading}
-    />
+    <>
+      <Helmet>
+        <link rel="canonical" href="https://velog.io/" />
+      </Helmet>
+      <PostCardGrid
+        posts={data?.trendingPosts || []}
+        forHome
+        loading={!data || loading}
+      />
+    </>
   );
 }
 

src/pages/readingList/ReadingListPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import MainPageTemplate from '../../components/main/MainPageTemplate';
 import MainResponsive from '../../components/main/MainResponsive';
 import ReadingListTab from '../../components/readingList/ReadingListTab';
@@ -8,22 +8,36 @@ import useReadingList from './hooks/useReadingList';
 import PostCardGrid, {
   PostCardGridSkeleton,
 } from '../../components/common/PostCardGrid';
+import { undrawEmpty } from '../../static/images';
+import palette from '../../lib/styles/palette';
+import media from '../../lib/styles/media';
+import { Helmet } from 'react-helmet-async';
 
 export type ReadingListPageProps = {} & RouteComponentProps<{
   type: 'liked' | 'read';
 }>;
 
-function ReadingListPage({ match }: ReadingListPageProps) {
+function ReadingListPage({ match, history }: ReadingListPageProps) {
   const { type } = match.params;
 
   const { data, loading, isFinished } = useReadingList(type);
 
   return (
     <MainPageTemplate>
+      <Helmet>
+        {<meta name="robots" content="noindex" />}
+        <title>읽기 목록 - velog</title>
+      </Helmet>
       <StyledResponsive>
         <ReadingListTab type={type} />
         <Wrapper>
           <PostCardGrid posts={data?.readingList || []} loading={!isFinished} />
+          {data && data.readingList.length === 0 && (
+            <EmptyWrapper>
+              <img src={undrawEmpty} alt="list is empty" />
+              <div className="description">리스트가 비어있습니다.</div>
+            </EmptyWrapper>
+          )}
         </Wrapper>
       </StyledResponsive>
     </MainPageTemplate>
@@ -38,4 +52,35 @@ const Wrapper = styled.div`
   margin-top: 2rem;
 `;
 
+const EmptyWrapper = styled.div`
+  margin-top: 6rem;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  img {
+    width: 25rem;
+    height: auto;
+    display: block;
+    margin-bottom: 2rem;
+  }
+
+  .description {
+    color: ${palette.gray7};
+    font-size: 1.5rem;
+  }
+
+  ${media.small} {
+    margin-top: 3rem;
+    img {
+      max-width: 300px;
+      width: calc(100% - 2rem);
+      margin-bottom: 1rem;
+    }
+    .description {
+      font-size: 1.25rem;
+    }
+  }
+`;
+
 export default ReadingListPage;

src/pages/readingList/hooks/useReadingList.ts

@@ -14,13 +14,22 @@ export default function useReadingList(type: 'liked' | 'read') {
         type: type.toUpperCase(),
         limit: 20,
       },
+      fetchPolicy: 'cache-and-network',
     },
   );
   const [isFinished, setIsFinished] = useState(false);
+
   useEffect(() => {
     setIsFinished(false);
   }, [type]);
 
+  useEffect(() => {
+    if (!data) return;
+    if (data.readingList.length < 20) {
+      setIsFinished(true);
+    }
+  }, [data]);
+
   const onLoadMore = useCallback(
     (cursor: string) => {
       fetchMore({