fix: adsense

components/Advertisement.tsx

@@ -1,37 +1,19 @@
-import { useEffect } from 'react'
-import Logger from '@utils/Logger'
+import AdSense from 'react-adsense'
 
 const Advertisement: React.FC<AdvertisementProps> = ({ size = 'short' }) => {
-	useEffect(() => {
-		if (process.env.NODE_ENV === 'production') {
-			window.adsbygoogle = window.adsbygoogle || []
-			try {
-				window.adsbygoogle.push({})
-				Logger.debug('Ad Pushed')
-			}
-			catch {
-				Logger.debug('Ad Push Fail')
-			}
-		}
-		
-	}, [])
-
 	return <div className='py-5'>
 		<div
 			className={`z-0 mx-auto w-full text-center text-white ${
-				process.env.NODE_ENV === 'production' ? '' : 'py-12 bg-gray-700'
+				true ? '' : 'py-12 bg-gray-700'
 			}`}
 			style={size === 'short' ? { height: '90px' } : { height: '330px' }}
 		>
-			{process.env.NODE_ENV === 'production' ? (
-				<ins
-					className='adsbygoogle'
-					style={{ display: 'block', width: '100%' }}
-					data-ad-client='ca-pub-4856582423981759'
-					data-ad-slot='3250141451'
-					data-ad-format={size === 'short' ? 'horizontal' : 'vertical'}
-					data-full-width-responsive='true'
-					data-adtest='on'
+			{true ? (
+				<AdSense.Google
+					style={{ display: 'inline-block', width: '100%', height: size === 'short' ? '90px' : '330px'}}
+					client='ca-pub-4856582423981759'
+					slot='3250141451'
+					format=''
 				/>
 			) : (
 				'Advertisement'

package.json

@@ -49,6 +49,7 @@
 		"postcss-preset-env": "6.7.0",
 		"rc-tooltip": "5.1.1",
 		"react": "17.0.2",
+		"react-adsense": "0.1.0",
 		"react-dom": "17.0.2",
 		"react-hotkeys": "2.0.0",
 		"react-responsive-modal": "6.0.1",

pages/bots/[id]/index.tsx

@@ -322,17 +322,12 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 											<p>자세한 내용은 <a className='text-blue-500 hover:text-blue-400' href='https://blog.koreanbots.dev/first-hackathon-results/'>해당 글</a>을 확인해주세요.</p>
 										</Segment> : ''
 									}
-									<div className='markdown-body pt-4 w-full'>
 									<Segment className='my-4'>
 										<Markdown text={desc}/>
 									</Segment>
-									</div>
-								</div>
-								
-							</div>
-							<div className='pt-5'>
 									<Advertisement />
 								</div>
+							</div>
 						</>
 			}
 		</Container>

yarn.lock

@@ -7931,6 +7931,11 @@ re2@^1.15.9:
     nan "^2.14.2"
     node-gyp "^7.1.2"
 
+react-adsense@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-adsense/-/react-adsense-0.1.0.tgz#f170007a9ab05ee2cd1c915cdc9788624658e3c1"
+  integrity sha512-VzGMH9qA7bBKAveK1joFWphhB7e2Y1ToSGzUa8b7eit3+VSkg/2MSvKxe5d/r4mcmkOHu6CHNJW0nn6RQC3IZA==
+
 react-dom@17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"