fix: 🎨 Fixes banner style

Author: velopert

src/components/velog/VelogPageTemplate.tsx

@@ -1,6 +1,7 @@
 import React, { createContext, useContext, useState } from 'react';
 import styled from 'styled-components';
 import { useTheme } from '../../lib/hooks/useTheme';
+import { themedPalette } from '../../lib/styles/themes';
 import PageTemplate from '../base/PageTemplate';
 
 const VelogPageTemplateBlock = styled(PageTemplate)`
@@ -15,10 +16,8 @@ const VelogPageTemplate: React.FC<VelogPageTemplateProps> = ({ children }) => {
   const [showFooter, setShowFooter] = useState(false);
   return (
     <FooterContext.Provider value={setShowFooter}>
-      <VelogPageTemplateBlock>
-        {children}
-        {showFooter && <GraphCDNFooter />}
-      </VelogPageTemplateBlock>
+      <VelogPageTemplateBlock>{children}</VelogPageTemplateBlock>
+      {showFooter && <GraphCDNFooter />}
     </FooterContext.Provider>
   );
 };
@@ -43,13 +42,17 @@ function GraphCDNFooter() {
 }
 
 const Block = styled.div`
+  background: ${themedPalette.bg_page1};
   display: flex;
   justify-content: center;
   padding-top: 1rem;
   padding-bottom: 1rem;
   position: relative;
-  z-index: 50;
+  a {
+    display: block;
+  }
   img {
+    display: block;
     width: 150px;
     height: auto;
   }

src/containers/post/HorizontalAd.tsx

@@ -39,7 +39,7 @@ function HorizontalAd({}: Props) {
           data-ad-client="ca-pub-5574866530496701"
           data-ad-slot="8809887603"
           data-ad-format="auto"
-          // data-full-width-responsive="true"
+          data-full-width-responsive="true"
         />
       </Wrapper>
     </VelogResponsive>

src/containers/post/RelatedPost.tsx

@@ -87,7 +87,7 @@ const Title = styled.div`
 `;
 
 const Background = styled.div`
-  z-index: 30;
+  z-index: 5;
   position: relative;
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -98,7 +98,7 @@ const Background = styled.div`
   }
   margin-top: 4rem;
   background: ${themedPalette.bg_page1};
-  box-shadow: 0px 0 32px rgb(0 0 0 / 8%);
+  box-shadow: 0px -16px 16px rgb(0 0 0 / 4%);
 `;
 const Wrapper = styled.div`
   width: 1376px;

src/lib/styles/zIndexes.ts

@@ -2,7 +2,7 @@ const zIndexes = {
   OpaqueLayer: 10,
   AuthModal: 20,
   Toolbar: 10,
-  Popup: 25,
+  Popup: 60,
   WriteFooter: 10,
   PublishScreen: 15,
   DragDropUpload: 100,