[Ticket-v1.3.1] 카카오 애드핏 추가

apps/ticket/next.config.js

@@ -32,9 +32,9 @@ module.exports = withBundleAnalyzer(
       },
       images: {
         imageSizes: [32, 64, 128, 256, 384],
-        deviceSizes: [750, 1080, 1920, 3840],
+        deviceSizes: [750, 1920],
         domains: ['asset.dudoong.com'],
-        minimumCacheTTL: 5184000,
+        minimumCacheTTL: 31536000,
       },
       rewrites: async () => [
         {

apps/ticket/src/components/events/blocks/Mobile/MobilePage.tsx

@@ -22,6 +22,7 @@ import Tickets from '../Tickets';
 import MobileMap from './MobileMap';
 import Image from 'next/image';
 import { useState, useEffect } from 'react';
+import KakaoAdFit from '@components/shared/KakaoAdfit';
 
 const MobilePage = ({
   tickets,
@@ -122,9 +123,10 @@ const MobilePage = ({
         </Block>
       </Container>
       <Divider />
+      <KakaoAdFit />
       <DetailMenu content={detail.content} MdViewer={MdViewer} />
-
       <Spacing size={60} />
+
       <Footer />
       <Spacing size={120} color={'gray_200'} />
       <ButtonSet

apps/ticket/src/components/events/blocks/PC/PcPage.tsx

@@ -44,7 +44,8 @@ const PcPage = ({
           />
         </RightSticky>
       </Container>
-      <Spacing size={120} />
+      <Spacing size={80} />
+      <Spacing size={40} />
       <section>
         <Footer />
       </section>

apps/ticket/src/components/home/blocks/EventLink.tsx

@@ -21,7 +21,7 @@ const EventLink = (props: EventResponse) => {
           <Image
             src={img || ''}
             fill={true}
-            sizes="(max-width: 768px) 50vw, 25vw"
+            sizes="400px"
             alt={`${props.name}`}
             onError={() => setImg(`/no-poster.png`)}
             className="poster"

apps/ticket/src/components/mypage/Ticket/index.tsx

@@ -12,6 +12,7 @@ import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import Image from 'next/image';
 import TicketList from './TicketList';
+import KakaoAdFit from '@components/shared/KakaoAdfit';
 
 const Ticket = () => {
   const {
@@ -64,6 +65,7 @@ const Ticket = () => {
             />
             <Spacing size={20} />
             <Divider />
+            <KakaoAdFit />
             <Shortcuts
               text="공연정보"
               url={`/events/${data.eventProfile.eventId}`}

apps/ticket/src/components/mypage/index.tsx

@@ -33,6 +33,7 @@ import useOverlay from '@lib/hooks/useOverlay';
 import { AuthAPi } from '@lib/apis/axios';
 import { useEffect } from 'react';
 import { css } from '@emotion/react';
+import KakaoAdFit from '@components/shared/KakaoAdfit';
 
 const Mypage = ({ info }: { info: UserInfo }) => {
   const { userProfile } = useRecoilValue(authState);
@@ -118,6 +119,7 @@ const Mypage = ({ info }: { info: UserInfo }) => {
       <Shortcuts text="내 예매내역" url="/history" />
       <Shortcuts text="내 쿠폰함" url="/history/mycoupon" />
       <Divider />
+      <KakaoAdFit />
       <Shortcuts text="공연 준비하기" url="/admin" />
       <Divider />
       <Shortcuts

apps/ticket/src/components/shared/KakaoAdfit.tsx

@@ -0,0 +1,34 @@
+import { useResponsive } from '@dudoong/utils';
+import { useEffect, useRef } from 'react';
+
+export const KakaoAdFit = () => {
+  const scriptElementWrapper = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.setAttribute('src', 'https://t1.daumcdn.net/kas/static/ba.min.js');
+    scriptElementWrapper.current?.appendChild(script);
+
+    return () => {
+      const globalAdfit = window.adfit;
+      if (globalAdfit) globalAdfit.destroy(MOBILE_AD_UNIT);
+    };
+  }, []);
+
+  return (
+    <div ref={scriptElementWrapper}>
+      <ins
+        className="kakao_ad_area"
+        style={{ display: 'none' }}
+        data-ad-unit={MOBILE_AD_UNIT}
+        data-ad-width={320}
+        data-ad-height={50}
+      ></ins>
+    </div>
+  );
+};
+
+export default KakaoAdFit;
+
+const MOBILE_AD_UNIT = 'DAN-VLC9FkVziYKDw7p7';
+const PC_AD_UNIT = 'DAN-yCtsOw04YWNgeowm';

custom.d.ts

@@ -2,3 +2,13 @@ declare module '*.svg' {
   const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   export default value;
 }
+
+declare global {
+  interface Window {
+    adfit?: {
+      destroy: (unit: string) => void;
+    };
+  }
+}
+
+export {};