Different position for mobile & desktop

Author: velopert

src/containers/post/PostViewer.tsx

@@ -367,12 +367,13 @@ const PostViewer: React.FC<PostViewerProps> = ({
         />
       </UserProfileWrapper>
       <LinkedPostList linkedPosts={post.linked_posts} />
-      <RelatedPost />
+      <RelatedPost type="desktop" />
       <PostComments
         count={post.comments_count}
         comments={post.comments}
         postId={post.id}
       />
+      <RelatedPost type="mobile" />
     </PostViewerProvider>
   );
 };

src/containers/post/RelatedPost.tsx

@@ -1,11 +1,26 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import VelogResponsive from '../../components/velog/VelogResponsive';
 
-function RelatedPost() {
+type RelatedPostProps = {
+  type: 'desktop' | 'mobile';
+};
+function RelatedPost({ type }: RelatedPostProps) {
+  const [visible, setVisible] = useState(true);
   useEffect(() => {
+    const width = window.innerWidth;
+    if (type === 'desktop' && width < 468) {
+      setVisible(false);
+      return;
+    }
+    if (type === 'mobile' && width >= 468) {
+      setVisible(false);
+      return;
+    }
     (window.adsbygoogle = window.adsbygoogle || []).push({});
-  }, []);
+  }, [type]);
+
+  if (!visible) return null;
 
   return (
     <Wrapper>