feat: applying new logger

components/Advertisement.tsx

@@ -1,3 +1,4 @@
+import { Logger } from '@utils/Logger'
 import { useEffect } from 'react'
 
 const Advertisement = ({ size='short' }:AdvertisementProps): JSX.Element => {
@@ -5,7 +6,7 @@ const Advertisement = ({ size='short' }:AdvertisementProps): JSX.Element => {
 		if(process.env.NODE_ENV === 'production') {
 			window.adsbygoogle = window.adsbygoogle || []
 			window.adsbygoogle.push({})
-		} else console.log('Ads Pushed')
+		} else Logger.debug('Ads Pushed')
 	}, [])
 	
 	return <div className={`z-0 mx-auto w-full text-center text-white ${process.env.NODE_ENV === 'production' ? '' : 'py-12 bg-gray-700'}`} style={size === 'short' ? { height: '90px' } : { height: '330px'}}>

components/DiscordAvatar.tsx

@@ -1,6 +1,7 @@
 import { SyntheticEvent, useEffect, useState } from 'react'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 import { supportsWebP } from '@utils/Tools'
+import { Logger } from '@utils/Logger'
 
 const DiscordAvatar = (props: {
 	alt?: string
@@ -25,7 +26,7 @@ const DiscordAvatar = (props: {
 				if(webpUnavailable) {
 					(e.target as ImageTarget).onerror = (event) => {
 						// All Fails
-						(event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') }
+						(event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
 						(event.target as ImageTarget).src = fallback
 					
 					}
@@ -33,7 +34,7 @@ const DiscordAvatar = (props: {
 				else {
 					(e.target as ImageTarget).onerror = (event) => {
 						// All Fails
-						(event.target as ImageTarget).onerror = ()=> { console.log('FALLBACK IMAGE LOAD FAIL') }
+						(event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
 						(event.target as ImageTarget).src = fallback
 					}
 					// Webp Load Fail

pages/_app.tsx

@@ -18,6 +18,7 @@ import '../app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '../github-markdown.css'
 import { Theme } from '@types'
+import { Logger } from '@utils/Logger'
 
 init()
 
@@ -44,7 +45,7 @@ export default function App({ Component, pageProps, err }: KoreanbotsProps): JSX
 			systemColor = 'dark'
 		}
 		if (!localStorage.theme) {
-			console.log(`[THEME] ${systemColor.toUpperCase()} THEME DETECTED`)
+			Logger.debug(`[THEME] ${systemColor.toUpperCase()} THEME DETECTED`)
 			setTheme(systemColor)
 		}
 		else setTheme(localStorage.theme)

utils/Logger.ts

@@ -0,0 +1,21 @@
+export class Logger {
+	private static genStyle(bg: string, text='black') {
+		return `color:${text};background:${bg};padding:1px 3px;border-radius:2px;margin-right:5px;`
+	}
+
+	private static print(level: string, message: string, style: string) {
+		console.log(`%c${level}` + `%c${message}`, style, '')
+	}
+
+	static debug(message: string) {
+		this.print('DEBUG', message, this.genStyle('cyan'))
+	}
+
+	static warn(message: string) {
+		this.print('WARN', message, this.genStyle('yellow'))
+	}
+
+	static error(message: string) {
+		this.print('ERROR', message, this.genStyle('red', 'white'))
+	}
+}