Prepare mobile view for rleated posts

Author: velopert

src/containers/post/RelatedPostAd.tsx

@@ -1,11 +1,27 @@
 import React, { useEffect } from 'react';
-interface Props {}
+interface Props {
+  isMobile?: boolean;
+}
 
-function RelatedPostAd(props: Props) {
+function RelatedPostAd({ isMobile }: Props) {
   useEffect(() => {
-    (window.adsbygoogle = window.adsbygoogle || []).push({});
-  }, []);
+    try {
+      (window.adsbygoogle = window.adsbygoogle || []).push({});
+    } catch (e) {}
+  }, [isMobile]);
 
+  if (isMobile) {
+    return (
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-format="fluid"
+        data-ad-layout-key="-g0+60+3y-ct+85"
+        data-ad-client="ca-pub-5574866530496701"
+        data-ad-slot="8237449336"
+      ></ins>
+    );
+  }
   return (
     <ins
       className="adsbygoogle"

src/containers/post/RelatedPostsForGuest.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
 import media from '../../lib/styles/media';
 import { useQuery } from '@apollo/react-hooks';
@@ -14,6 +14,7 @@ import { Link } from 'react-router-dom';
 import gtag from '../../lib/gtag';
 import optimizeImage from '../../lib/optimizeImage';
 import RelatedPostAd from './RelatedPostAd';
+import { ellipsis } from '../../lib/styles/utils';
 // import { detectAnyAdblocker } from 'just-detect-adblock';
 
 function RelatedPostsForGuest({
@@ -29,6 +30,19 @@ function RelatedPostsForGuest({
     },
   });
 
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    setIsMobile(window.innerWidth < 519);
+    const handler = () => {
+      setIsMobile(window.innerWidth < 519);
+    };
+    window.addEventListener('resize', handler);
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, []);
+
   const postsWithAds = useMemo(() => {
     if (!data?.post) return null;
     let sliced: (PartialPost | undefined)[] =
@@ -60,13 +74,52 @@ function RelatedPostsForGuest({
 
   if (!postsWithAds) return null;
 
+  if (isMobile) {
+    return (
+      <Wrapper>
+        <h4>관심 있을 만한 포스트</h4>
+        {postsWithAds.map((post, index) => {
+          return post ? (
+            <Row key={post.id ?? index}>
+              <div className="fourty">
+                <div className="thumbnail-wrapper">
+                  <img
+                    src={optimizeImage(
+                      post.thumbnail ??
+                        post.user.profile.thumbnail ??
+                        userThumbnail,
+                      640,
+                    )}
+                    alt={post.title}
+                  />
+                </div>
+              </div>
+              <div className="content">
+                <h5>{post.title}</h5>
+                <p>
+                  {post.short_description.replace(/&#x3A;/g, ':')}
+                  {post.short_description.length === 150 && '...'}
+                </p>
+              </div>
+            </Row>
+          ) : (
+            <RelatedPostAd isMobile />
+          );
+        })}
+      </Wrapper>
+    );
+  }
+
   return (
     <Wrapper>
       <h4>관심 있을 만한 포스트</h4>
       <Grid>
-        {postsWithAds.map((post) =>
+        {postsWithAds.map((post, index) =>
           post ? (
-            <Item onClick={() => gtag('event', 'recommend_guest_click')}>
+            <Item
+              onClick={() => gtag('event', 'recommend_guest_click')}
+              key={post.id ?? index}
+            >
               <StyledLink to={`/@${post.user.username}/${post.url_slug}`}>
                 <div className="thumbnail-wrapper">
                   <img
@@ -83,7 +136,7 @@ function RelatedPostsForGuest({
               </StyledLink>
             </Item>
           ) : (
-            <Item>
+            <Item style={{ margin: '-3.375rem' }}>
               <RelatedPostAd />
             </Item>
           ),
@@ -115,6 +168,55 @@ const Grid = styled.div`
   margin-top: 1.5rem;
 `;
 
+const Row = styled.div`
+  display: flex;
+  .fourty {
+    width: 40%;
+    margin-right: 0.75rem;
+  }
+  .thumbnail-wrapper {
+    width: 100%;
+    padding-top: 52.35%;
+    position: relative;
+
+    img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  }
+  & + & {
+    margin-top: 0.5rem;
+  }
+  .content {
+    width: 60%;
+  }
+  h5 {
+    margin-top: 0;
+    margin-bottom: 0.625rem;
+    font-size: 0.875rem;
+    color: ${palette.gray8};
+    ${ellipsis}
+  }
+
+  p {
+    margin: 0;
+    font-size: 0.75rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-height: 1.5;
+    height: 3.375rem;
+    overflow: hidden;
+    word-break: keep-all;
+    color: ${palette.gray6};
+    -webkit-box-orient: vertical;
+  }
+`;
+
 const Item = styled.div`
   position: relative;
   width: 33.333%;