[마이페이지] 하단에 카카오 광고 배너 삽입 (#518)

* style: 중복 되어 있던 globalstyle 컴포넌트 삭제

* feat: 광고 시스템 코드 생성

* feat: 광고 컴포넌트에 에러 시 callback UI 적용

* feat: mypage 하단에 광고 배너 넣기

---------

Co-authored-by: Wang HoEun <[email protected]>

src/App.tsx

@@ -1,7 +1,6 @@
 import { QueryClient, QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
 import { RouterProvider } from 'react-router-dom';
 import router from './router/Router';
-import GlobalStyle from './style/GlobalStyle';
 import Loading from './pages/Loading/Loading';
 import { Suspense } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -25,7 +24,6 @@ function App() {
                 <RouterProvider router={router} />
                 <Analytics />
                 <SpeedInsights />
-                <GlobalStyle />
                 <StyledToastContainer
                   position='bottom-center'
                   autoClose={3000}

src/components/KakaoAd/KakaoAd.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+import KakaoAdCallback from './KakaoAdCallback';
+
+const KakaoAd = () => {
+  const scriptElement = useRef<HTMLDivElement>(null);
+
+  // script 태그를 동적으로 추가
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.setAttribute('src', 'https://t1.daumcdn.net/kas/static/ba.min.js');
+    script.setAttribute('charset', 'utf-8');
+
+    script.setAttribute('async', 'true');
+    scriptElement.current?.appendChild(script);
+  }, []);
+
+  return (
+    <>
+      ...
+      <div ref={scriptElement}>
+        <ins
+          className='kakao_ad_area'
+          style={{ display: 'none' }}
+          data-ad-unit='DAN-ZAZ2jcyFWckRtcrp'
+          data-ad-width='320'
+          data-ad-height='50'
+          data-ad-onfail={<KakaoAdCallback />}
+        />
+      </div>
+    </>
+  );
+};
+
+export default KakaoAd;

src/components/KakaoAd/KakaoAdCallback.style.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const KakaoAdCallbackWrapper = styled.div`
+  ${({ theme }) => theme.mixin.flexCenter({})};
+  background-color: white;
+  width: 100%;
+  color: black;
+  ${({ theme: { fonts } }) => fonts.body_03};
+`;

src/components/KakaoAd/KakaoAdCallback.tsx

@@ -0,0 +1,7 @@
+import * as S from './KakaoAdCallback.style';
+
+const KakaoAdCallback = () => {
+  return <S.KakaoAdCallbackWrapper>광고가 생성 될 부분입니다.</S.KakaoAdCallbackWrapper>;
+};
+
+export default KakaoAdCallback;

src/pages/MyPage/MyPage.tsx

@@ -10,6 +10,7 @@ import { useNavigate } from 'react-router';
 import { useState } from 'react';
 import DeleteModal from '../../components/common/Modal/DeleteModal';
 import { logOutInstance } from '../../apis/client';
+import KakaoAd from '../../components/KakaoAd/KakaoAd';
 interface MyPage {
   memberData: MyPageType;
 }
@@ -90,6 +91,7 @@ const MyPage = () => {
           </BtnFill>
         </S.ProfileWrapper>
         {renderGiftRoom()}
+        <KakaoAd />
       </S.MyPageWrapper>
     </>
   );