Modify ads config

Author: velopert

src/containers/post/HorizontalAd.tsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+interface Props {}
+
+function HorizontalAd({}: Props) {
+  const ref = useRef<HTMLDivElement>(null);
+  const initializedRef = useRef(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && !initializedRef.current) {
+            initializedRef.current = true;
+            (window.adsbygoogle = window.adsbygoogle || []).push({});
+            console.log('initialized!');
+          }
+        });
+      },
+      {
+        rootMargin: '90px',
+        threshold: 0,
+      },
+    );
+    observer.observe(ref.current!);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <Wrapper>
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-client="ca-pub-5574866530496701"
+        data-ad-slot="8809887603"
+        data-ad-format="auto"
+        data-full-width-responsive="true"
+      />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+`;
+
+export default HorizontalAd;

src/containers/post/PostViewer.tsx

@@ -36,6 +36,7 @@ import MobileLikeButton from '../../components/post/MobileLikeButton';
 import RelatedPost from './RelatedPost';
 import optimizeImage from '../../lib/optimizeImage';
 import RelatedPostsForGuest from './RelatedPostsForGuest';
+import HorizontalAd from './HorizontalAd';
 
 const UserProfileWrapper = styled(VelogResponsive)`
   margin-top: 16rem;
@@ -308,6 +309,10 @@ const PostViewer: React.FC<PostViewerProps> = ({
 
   const { post } = data;
 
+  const isVeryOld =
+    Date.now() - new Date(post.released_at).getTime() >
+    1000 * 60 * 60 * 24 * 365;
+
   const url = `https://velog.io/@${username}/${post.url_slug}`;
 
   return (
@@ -387,11 +392,13 @@ const PostViewer: React.FC<PostViewerProps> = ({
         <RelatedPostsForGuest
           postId={post.id}
           showAds={
+            !isVeryOld &&
             Date.now() - new Date(post.released_at).getTime() >
-            1000 * 60 * 60 * 24 * 21
+              1000 * 60 * 60 * 24 * 21
           }
         />
       )}
+      {isVeryOld && <HorizontalAd />}
       <PostComments
         count={post.comments_count}
         comments={post.comments}
@@ -401,6 +408,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
         <RelatedPost
           postId={post.id}
           showAds={
+            !isVeryOld &&
             post.user.id !== userId &&
             Date.now() - new Date(post.released_at).getTime() >
               1000 * 60 * 60 * 24 * 30