Handle adblock and add subtitle

Author: velopert

src/containers/post/RelatedPost.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import VelogResponsive from '../../components/velog/VelogResponsive';
+import { detectAnyAdblocker } from 'just-detect-adblock';
 
 type RelatedPostProps = {
   type: 'desktop' | 'mobile';
@@ -20,10 +21,19 @@ function RelatedPost({ type }: RelatedPostProps) {
     (window.adsbygoogle = window.adsbygoogle || []).push({});
   }, [type]);
 
+  useEffect(() => {
+    detectAnyAdblocker().then((detected: boolean) => {
+      if (detected) {
+        setVisible(false);
+      }
+    });
+  }, []);
+
   if (!visible) return null;
 
   return (
     <Wrapper>
+      <h4>관심 있을 만한 포스트</h4>
       <ins
         className="adsbygoogle"
         style={{ display: 'block' }}
@@ -36,8 +46,8 @@ function RelatedPost({ type }: RelatedPostProps) {
 }
 
 const Wrapper = styled(VelogResponsive)`
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: 4rem;
+  margin-bottom: 3rem;
 `;
 
 export default RelatedPost;