Show related posts

Author: velopert

src/components/common/AdFeed.tsx

@@ -2,12 +2,6 @@ import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { mediaQuery } from '../../lib/styles/media';
 
-declare global {
-  interface Window {
-    adsbygoogle: { [key: string]: unknown }[];
-  }
-}
-
 function AdFeed() {
   useEffect(() => {
     (window.adsbygoogle = window.adsbygoogle || []).push({});

src/containers/post/PostViewer.tsx

@@ -33,6 +33,7 @@ import useNotFound from '../../lib/hooks/useNotFound';
 import { Helmet } from 'react-helmet-async';
 import { toast } from 'react-toastify';
 import MobileLikeButton from '../../components/post/MobileLikeButton';
+import RelatedPost from './RelatedPost';
 
 const UserProfileWrapper = styled(VelogResponsive)`
   margin-top: 16rem;
@@ -366,6 +367,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
         />
       </UserProfileWrapper>
       <LinkedPostList linkedPosts={post.linked_posts} />
+      <RelatedPost />
       <PostComments
         count={post.comments_count}
         comments={post.comments}

src/containers/post/RelatedPost.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+
+function RelatedPost() {
+  useEffect(() => {
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+  }, []);
+
+  return (
+    <Wrapper>
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-format="autorelaxed"
+        data-ad-client="ca-pub-5574866530496701"
+        data-ad-slot="4990574169"
+      ></ins>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+`;
+
+export default RelatedPost;

src/types/window.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  interface Window {
+    adsbygoogle: { [key: string]: unknown }[];
+  }
+}
+
+export {};