feat: ✨ Applies GraphCDN

Author: velopert

src/components/base/HeaderUserMenu.tsx

@@ -27,7 +27,7 @@ const HeaderUserMenuBlock = styled.div`
 `;
 
 interface HeaderUserMenuProps {
-  onClose: (e: React.MouseEvent) => void;
+  onClose: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   onLogout: () => void;
   username: string;
   visible: boolean;

src/components/home/HomeMobileHeadExtra.tsx

@@ -5,6 +5,7 @@ import palette from '../../lib/styles/palette';
 import { Link } from 'react-router-dom';
 import { useTransition, animated } from 'react-spring';
 import OutsideClickHandler from 'react-outside-click-handler';
+import { useTheme } from '../../lib/hooks/useTheme';
 
 export type MainMobileHeadExtraProps = {
   visible: boolean;
@@ -31,6 +32,12 @@ function MainMobileHeadExtra({ visible, onClose }: MainMobileHeadExtraProps) {
     },
   });
 
+  const theme = useTheme();
+  const img =
+    theme === 'dark'
+      ? 'https://graphcdn.io/badge-light.svg'
+      : 'https://graphcdn.io/badge.svg';
+
   return (
     <>
       {transition((styles, item) =>
@@ -62,6 +69,11 @@ function MainMobileHeadExtra({ visible, onClose }: MainMobileHeadExtraProps) {
                   <h5>문의</h5>
                   <div className="email">[email protected]</div>
                 </div>
+                <GraphCDNWrapper>
+                  <a href="https://graphcdn.io/?ref=powered-by">
+                    <img src={img} alt="Powered by GraphCDN, the GraphQL CDN" />
+                  </a>
+                </GraphCDNWrapper>
               </Block>
             </OutsideClickHandler>
           </Aligner>
@@ -78,6 +90,7 @@ const Aligner = styled.div`
   z-index: 5;
 `;
 const Block = styled(animated.div)`
+  border: 1px solid ${themedPalette.border3};
   margin-top: 0.5rem;
   width: 12rem;
   box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
@@ -122,4 +135,15 @@ const Block = styled(animated.div)`
   }
 `;
 
+const GraphCDNWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  img {
+    width: 120px;
+    height: auto;
+  }
+`;
+
 export default MainMobileHeadExtra;

src/components/velog/VelogPageTemplate.tsx

@@ -1,5 +1,6 @@
-import * as React from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import styled from 'styled-components';
+import { useTheme } from '../../lib/hooks/useTheme';
 import PageTemplate from '../base/PageTemplate';
 
 const VelogPageTemplateBlock = styled(PageTemplate)`
@@ -8,8 +9,50 @@ const VelogPageTemplateBlock = styled(PageTemplate)`
 
 export interface VelogPageTemplateProps {}
 
+const FooterContext = createContext<(value: boolean) => void>(() => {});
+
 const VelogPageTemplate: React.FC<VelogPageTemplateProps> = ({ children }) => {
-  return <VelogPageTemplateBlock>{children}</VelogPageTemplateBlock>;
+  const [showFooter, setShowFooter] = useState(false);
+  return (
+    <FooterContext.Provider value={setShowFooter}>
+      <VelogPageTemplateBlock>
+        {children}
+        {showFooter && <GraphCDNFooter />}
+      </VelogPageTemplateBlock>
+    </FooterContext.Provider>
+  );
 };
 
+export function useSetShowFooter() {
+  return useContext(FooterContext);
+}
+
+function GraphCDNFooter() {
+  const theme = useTheme();
+  const img =
+    theme === 'dark'
+      ? 'https://graphcdn.io/badge-light.svg'
+      : 'https://graphcdn.io/badge.svg';
+  return (
+    <Block>
+      <a href="https://graphcdn.io/?ref=powered-by">
+        <img src={img} alt="Powered by GraphCDN, the GraphQL CDN" />
+      </a>
+    </Block>
+  );
+}
+
+const Block = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  position: relative;
+  z-index: 50;
+  img {
+    width: 150px;
+    height: auto;
+  }
+`;
+
 export default VelogPageTemplate;

src/containers/post/PostViewer.tsx

@@ -37,6 +37,7 @@ import RelatedPost from './RelatedPost';
 import optimizeImage from '../../lib/optimizeImage';
 import RelatedPostsForGuest from './RelatedPostsForGuest';
 import HorizontalAd from './HorizontalAd';
+import { useSetShowFooter } from '../../components/velog/VelogPageTemplate';
 
 const UserProfileWrapper = styled(VelogResponsive)`
   margin-top: 16rem;
@@ -64,6 +65,7 @@ const PostViewer: React.FC<PostViewerProps> = ({
   history,
   match,
 }) => {
+  const setShowFooter = useSetShowFooter();
   const [showRecommends, setShowRecommends] = useState(false);
   useEffect(() => {
     window.scrollTo(0, 0);
@@ -142,6 +144,16 @@ const PostViewer: React.FC<PostViewerProps> = ({
 
   const postReady = !!data?.post;
 
+  useEffect(() => {
+    setShowFooter(postReady);
+  }, [setShowFooter, postReady]);
+
+  useEffect(() => {
+    return () => {
+      setShowFooter(false);
+    };
+  }, [setShowFooter]);
+
   const onScroll = useCallback(() => {
     const scrollTop = getScrollTop();
     const { scrollHeight } = document.body;

src/lib/graphql/post.ts

@@ -177,6 +177,44 @@ export const GET_POST_LIST = gql`
   }
 `;
 
+export const GET_RECENT_POSTS = gql`
+  query RecentPosts(
+    $cursor: ID
+    $username: String
+    $temp_only: Boolean
+    $tag: String
+    $limit: Int
+  ) {
+    posts(
+      cursor: $cursor
+      username: $username
+      temp_only: $temp_only
+      tag: $tag
+      limit: $limit
+    ) {
+      id
+      title
+      short_description
+      thumbnail
+      user {
+        id
+        username
+        profile {
+          id
+          thumbnail
+        }
+      }
+      url_slug
+      released_at
+      updated_at
+      comments_count
+      tags
+      is_private
+      likes
+    }
+  }
+`;
+
 export const GET_TRENDING_POSTS = gql`
   query TrendingPosts($limit: Int, $offset: Int, $timeframe: String) {
     trendingPosts(limit: $limit, offset: $offset, timeframe: $timeframe) {

src/pages/home/hooks/useRecentPosts.ts

@@ -1,11 +1,11 @@
 import { useQuery } from '@apollo/react-hooks';
-import { GET_POST_LIST, PartialPost } from '../../../lib/graphql/post';
+import { GET_RECENT_POSTS, PartialPost } from '../../../lib/graphql/post';
 import { useCallback, useState } from 'react';
 import useScrollPagination from '../../../lib/hooks/useScrollPagination';
 
 export default function useRecentPosts() {
   const { data, loading, fetchMore } = useQuery<{ posts: PartialPost[] }>(
-    GET_POST_LIST,
+    GET_RECENT_POSTS,
     {
       variables: {
         limit: 24,