Show ads in old post & conditional mobile ads

Author: velopert

src/components/common/AdFeed.tsx

@@ -1,30 +1,42 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { mediaQuery } from '../../lib/styles/media';
 
 function AdFeed() {
+  const [isMobile, setIsMobile] = useState(false);
+
   useEffect(() => {
-    (window.adsbygoogle = window.adsbygoogle || []).push({});
+    const width = window.innerWidth;
+    if (width < 768) {
+      setIsMobile(true);
+    }
+
+    setTimeout(() => {
+      (window.adsbygoogle = window.adsbygoogle || []).push({});
+    }, 250);
   }, []);
 
   return (
     <Block>
-      {/* <ins
-        className="adsbygoogle"
-        style={{ display: 'block' }}
-        data-ad-format="fluid"
-        data-ad-layout-key="-6z+el+w-4n+70"
-        data-ad-client="ca-pub-5574866530496701"
-        data-ad-slot="8258809297"
-      ></ins> */}
-      <ins
-        className="adsbygoogle"
-        style={{ display: 'block' }}
-        data-ad-client="ca-pub-5574866530496701"
-        data-ad-slot="6548419604"
-        data-ad-format="auto"
-        data-full-width-responsive="true"
-      ></ins>
+      {isMobile ? (
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block' }}
+          data-ad-format="fluid"
+          data-ad-layout-key="-6z+el+w-4n+70"
+          data-ad-client="ca-pub-5574866530496701"
+          data-ad-slot="8258809297"
+        ></ins>
+      ) : (
+        <ins
+          className="adsbygoogle"
+          style={{ display: 'block' }}
+          data-ad-client="ca-pub-5574866530496701"
+          data-ad-slot="6548419604"
+          data-ad-format="auto"
+          data-full-width-responsive="true"
+        ></ins>
+      )}
     </Block>
   );
 }

src/containers/post/PostViewer.tsx

@@ -367,7 +367,12 @@ const PostViewer: React.FC<PostViewerProps> = ({
         />
       </UserProfileWrapper>
       <LinkedPostList linkedPosts={post.linked_posts} />
-      <RelatedPost />
+      <RelatedPost
+        showAds={
+          Date.now() - new Date(post.released_at).getTime() >
+          1000 * 60 * 60 * 24 * 30 * 3
+        }
+      />
       <PostComments
         count={post.comments_count}
         comments={post.comments}

src/containers/post/RelatedPost.tsx

@@ -4,7 +4,7 @@ import VelogResponsive from '../../components/velog/VelogResponsive';
 import { detectAnyAdblocker } from 'just-detect-adblock';
 import media from '../../lib/styles/media';
 
-function RelatedPost() {
+function RelatedPost({ showAds }: { showAds: boolean }) {
   const [isMobile, setIsMobile] = useState(false);
   const [visible, setVisible] = useState(true);
   useEffect(() => {
@@ -37,7 +37,7 @@ function RelatedPost() {
           style={{ display: 'block' }}
           data-ad-format="autorelaxed"
           data-ad-client="ca-pub-5574866530496701"
-          data-ad-slot="7478357897"
+          data-ad-slot={showAds ? '3841144022' : '7478357897'}
           data-matched-content-ui-type="image_stacked"
           data-matched-content-rows-num="2"
           data-matched-content-columns-num="3"
@@ -49,7 +49,7 @@ function RelatedPost() {
           style={{ display: 'block' }}
           data-ad-format="autorelaxed"
           data-ad-client="ca-pub-5574866530496701"
-          data-ad-slot="7478357897"
+          data-ad-slot={showAds ? '3841144022' : '7478357897'}
           data-matched-content-ui-type="image_stacked"
           data-matched-content-rows-num="3"
           data-matched-content-columns-num="2"