🐛 광고 스크립트 수정

Read-bird · Jan 2, 2024 · b87692b · b87692b
2 parents c7b8b79 + 01a3bda
commit b87692b
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 15 deletions.
diff --git a/public/index.html b/public/index.html
@@ -28,6 +28,11 @@
     <script defer src="https://cdn.swygbro.com/public/widget/swyg-widget.js"></script>
   </head>
   <body>
+    <script
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1919598055512436"
+      crossorigin="anonymous"
+    ></script>
     <div id="root"></div>
   </body>
 </html>
diff --git a/src/components/connections/DisplayAds.tsx b/src/components/connections/DisplayAds.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+
+export const DisplayAds = () => {
+  const intervalId = useRef<NodeJS.Timeout | null>(null);
+
+  const clearTimer = () => {
+    if (intervalId.current) {
+      clearInterval(intervalId.current);
+      intervalId.current = null;
+    }
+  };
+
+  useEffect(() => {
+    const pushAd = () => {
+      try {
+        const adsbygoogle = window.adsbygoogle || [];
+        adsbygoogle.push({});
+      } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+          throw e;
+        }
+      }
+    };
+
+    clearTimer();
+    intervalId.current = setInterval(() => {
+      if (window.adsbygoogle) {
+        pushAd();
+        clearTimer();
+      }
+    }, 1000);
+
+    return () => {
+      clearTimer();
+    };
+  }, []);
+
+  return (
+    <InsertedStyle
+      className="adsbygoogle"
+      data-ad-client="ca-pub-1919598055512436"
+      data-ad-slot="3745103035"
+    ></InsertedStyle>
+  );
+};
+
+const InsertedStyle = styled.ins`
+  display: inline-block;
+  width: 100%;
+  height: 66px;
+`;
diff --git a/src/components/connections/index.tsx b/src/components/connections/index.tsx
@@ -1,3 +1,4 @@
 export { CheckModal } from './CheckModal';
+export { DisplayAds } from './DisplayAds';
 export { MyInfo } from './MyInfo';
 export { ProtectedLogin } from './ProtectedLogin';
diff --git a/src/components/templates/SearchTemplate/SearchMain/SearchMain.tsx b/src/components/templates/SearchTemplate/SearchMain/SearchMain.tsx
@@ -1,6 +1,7 @@
 import { axiosFetch } from '@api/axios';
 import { TBookDetail } from '@api/types';
 import { Spacing } from '@components/common/Spacing';
+import { DisplayAds } from '@components/connections';
 import { Book } from '@components/templates/SearchTemplate/Book';
 import { Alert } from '@utils/Alert';
 import { convertError } from '@utils/errors';
@@ -58,20 +59,9 @@ export const SearchMain = () => {
   return (
     <Wrap>
       <Spacing height={20} />
-      <BannerWrap
-        dangerouslySetInnerHTML={{
-          __html: `<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1919598055512436"
-          crossorigin="anonymous"></script>
-     <!-- contents/336x66 -->
-     <ins class="adsbygoogle"
-          style="display:inline-block;width:336px;height:66px"
-          data-ad-client="ca-pub-1919598055512436"
-          data-ad-slot="3745103035"></ins>
-     <script>
-          (adsbygoogle = window.adsbygoogle || []).push({});
-     </script>`
-        }}
-      ></BannerWrap>
+      <BannerWrap>
+        <DisplayAds />
+      </BannerWrap>
       <Spacing height={18} />
       <Title>지금 가장 인기 있는 책 TOP 10</Title>
       <Spacing height={18} />

diff --git a/src/global.d.ts b/src/global.d.ts
@@ -0,0 +1,3 @@
+export declare global {
+  var adsbygoogle: any[];
+}
diff --git a/src/hooks/axiosInterceptor.ts b/src/hooks/axiosInterceptor.ts
@@ -2,6 +2,7 @@ import { setAccessToken, setLoading } from '@/store/reducers';
 import { TAppDispatch } from '@/store/state';
 import { authFetch, axiosFetch } from '@api/axios';
 import { Alert } from '@utils/Alert';
+import { convertError } from '@utils/errors';
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -80,7 +81,7 @@ export const useAxiosInterceptor = () => {
         // 유저 토큰이 유효하지 않을 떄
         else if (status === 401) {
           Alert.error({
-            title: '유저정보가 올바르지 않습니다.',
+            title: convertError(message),
             action: () => {
               dispatch(setAccessToken(''));
               localStorage.clear();