diff --git a/public/index.html b/public/index.html index cef60c4..94d6f71 100644 --- a/public/index.html +++ b/public/index.html @@ -28,6 +28,11 @@ +
diff --git a/src/components/connections/DisplayAds.tsx b/src/components/connections/DisplayAds.tsx new file mode 100644 index 0000000..f1634af --- /dev/null +++ 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(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 ( + + ); +}; + +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 index ee44559..9ff51b6 100644 --- 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 index d50ce19..c0cff6f 100644 --- 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 ( - - - - ` - }} - > + + + 지금 가장 인기 있는 책 TOP 10 diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..ae21506 --- /dev/null +++ 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 index beecee5..ead116b 100644 --- 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();