feat: add banner ads in postViewer

Author: winverse

src/components/post/PostBanner.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import HorizontalBanner from '../../containers/post/HorizontalBanner';
+import PostCustomBanner from './PostCustomBanner';
+
+interface PostBannerProps {
+  isDisplayAd?: boolean;
+  customAd: { image: string; url: string } | null;
+}
+
+const PostBanner: React.FC<PostBannerProps> = ({ isDisplayAd, customAd }) => {
+  if (customAd) {
+    return <PostCustomBanner image={customAd.image} url={customAd.url} />;
+  }
+  return <HorizontalBanner isDisplayAd={isDisplayAd} />;
+};
+
+export default PostBanner;

src/components/post/PostCustomBanner.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import VelogResponsive from '../velog/VelogResponsive';
+import gtag from '../../lib/gtag';
+import media from '../../lib/styles/media';
+
+interface PostCustomBannerProps {
+  image: string;
+  url: string;
+}
+
+const onClick = () => {
+  gtag('event', 'ads_banner_click');
+};
+
+const PostCustomBanner: React.FC<PostCustomBannerProps> = ({ image, url }) => {
+  return (
+    <PostCustomBannerBlock onClick={onClick}>
+      <a href={url}>
+        <img src={image} alt="post-custom-banner" />
+      </a>
+    </PostCustomBannerBlock>
+  );
+};
+
+const PostCustomBannerBlock = styled(VelogResponsive)`
+  max-width: 100%;
+  height: auto;
+  margin-top: 1rem;
+
+  ${media.small} {
+    margin-top: 0.5rem;
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    object-fit: contain;
+  }
+`;
+
+export default PostCustomBanner;

src/containers/post/PostViewer.tsx

@@ -45,6 +45,8 @@ import { useSetShowFooter } from '../../components/velog/VelogPageTemplate';
 import HorizontalBanner from './HorizontalBanner';
 import gtag from '../../lib/gtag';
 import FollowButton from '../../components/common/FollowButton';
+import { BANNER_ADS } from '../../lib/graphql/ad';
+import PostBanner from '../../components/post/PostBanner';
 
 const UserProfileWrapper = styled(VelogResponsive)`
   margin-top: 16rem;
@@ -105,6 +107,20 @@ const PostViewer: React.FC<PostViewerProps> = ({
   const [likePost, { loading: loadingLike }] = useMutation(LIKE_POST);
   const [unlikePost, { loading: loadingUnlike }] = useMutation(UNLIKE_POST);
   const { showNotFound } = useNotFound();
+  const { data: ads } = useQuery(BANNER_ADS, {
+    variables: {
+      writerUsername: username,
+    },
+  });
+
+  const customAd = useMemo(() => {
+    if (!ads) return null;
+    if (ads.bannerAds.length === 0) return null;
+    return {
+      image: ads.bannerAds[0].image,
+      url: ads.bannerAds[0].url,
+    };
+  }, [ads]);
 
   // const userLogo = useSelector((state: RootState) => state.header.userLogo);
   // const velogTitle = useMemo(() => {
@@ -433,7 +449,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
           />
         }
       />
-      {shouldShowBanner ? <HorizontalBanner /> : null}
+      {shouldShowBanner ? <PostBanner customAd={customAd} /> : null}
       <PostContent isMarkdown={post.is_markdown} body={post.body} />
       <UserProfileWrapper>
         <UserProfile
@@ -453,8 +469,12 @@ const PostViewer: React.FC<PostViewerProps> = ({
         />
       </UserProfileWrapper>
       <LinkedPostList linkedPosts={post.linked_posts} />
-      {shouldShowBanner && isContentLongEnough ? <HorizontalBanner /> : null}
-      {shouldShowFooterBanner ? <HorizontalBanner isDisplayAd /> : null}
+      {shouldShowBanner && isContentLongEnough ? (
+        <PostBanner customAd={customAd} />
+      ) : null}
+      {shouldShowFooterBanner ? (
+        <PostBanner isDisplayAd={true} customAd={customAd} />
+      ) : null}
       <PostComments
         count={post.comments_count}
         comments={post.comments}

src/lib/graphql/ad.ts

@@ -0,0 +1,21 @@
+import { gql } from 'apollo-boost';
+
+export type Ad = {
+  id: string;
+  title: string;
+  body: string;
+  image: string;
+  url: string;
+};
+
+export const BANNER_ADS = gql`
+  query BannerAds($writerUsername: String!) {
+    bannerAds(writer_username: $writerUsername) {
+      id
+      title
+      body
+      url
+      image
+    }
+  }
+`;