Merge pull request #472 from velopert/fix/follow

Fix/follow

Author: velopert

src/components/common/FollowButton.tsx

@@ -8,7 +8,6 @@ import { gql } from 'apollo-boost';
 import useUser from '../../lib/hooks/useUser';
 import { toast } from 'react-toastify';
 import { themedPalette } from '../../lib/styles/themes';
-import palette from '../../lib/styles/palette';
 
 export interface PostFollowButtonProps {
   followingUserId: string;
@@ -84,6 +83,7 @@ const FollowButton: React.FC<PostFollowButtonProps> = ({
             __typename: 'User',
           },
         });
+
         follow({ variables });
         setButtonText('팔로잉');
       }

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(() => {
@@ -432,7 +448,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
           />
         }
       />
-      {shouldShowBanner ? <HorizontalBanner /> : null}
+      {shouldShowBanner ? <PostBanner customAd={customAd} /> : null}
       <PostContent isMarkdown={post.is_markdown} body={post.body} />
       <UserProfileWrapper>
         <UserProfile
@@ -451,8 +467,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
+    }
+  }
+`;

src/lib/graphql/user.ts

@@ -185,13 +185,19 @@ export const CONFIRM_CHANGE_EMAIL = gql`
 
 export const FOLLOW_USER = gql`
   mutation Follow($following_user_id: ID!) {
-    follow(following_user_id: $following_user_id)
+    follow(following_user_id: $following_user_id) {
+      id
+      is_followed
+    }
   }
 `;
 
 export const UNFOLLOW_USER = gql`
   mutation Unfollow($following_user_id: ID!) {
-    unfollow(following_user_id: $following_user_id)
+    unfollow(following_user_id: $following_user_id) {
+      id
+      is_followed
+    }
   }
 `;
 

src/pages/velog/UserPage.tsx

@@ -21,7 +21,7 @@ const UserPage: React.FC<UserPageProps> = ({ match, location }) => {
   useEffect(() => {
     window.location.href = `${process.env
       .REACT_APP_CLIENT_V3_HOST!}/@${username}/posts`;
-  }, []);
+  }, [username]);
 
   return (
     <UserPageBlock>