From 4d6a65c5a4adf71a1d79c2068448d8f9ff132d41 Mon Sep 17 00:00:00 2001
From: Junseo Park <wonderlandpark@outlook.kr>
Date: Wed, 17 Feb 2021 15:56:13 +0900
Subject: [PATCH] feat: applying new logger

---
 components/Advertisement.tsx |  3 ++-
 components/DiscordAvatar.tsx |  5 +++--
 pages/_app.tsx               |  3 ++-
 utils/Logger.ts              | 21 +++++++++++++++++++++
 4 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 utils/Logger.ts

diff --git a/components/Advertisement.tsx b/components/Advertisement.tsx
index 3bbdd1f..b3efc67 100644
--- a/components/Advertisement.tsx
+++ b/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'}}>
diff --git a/components/DiscordAvatar.tsx b/components/DiscordAvatar.tsx
index 5930e81..b08cb7a 100644
--- a/components/DiscordAvatar.tsx
+++ b/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
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bb360fe..829ee5e 100644
--- a/pages/_app.tsx
+++ b/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)
diff --git a/utils/Logger.ts b/utils/Logger.ts
new file mode 100644
index 0000000..e6b2354
--- /dev/null
+++ b/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'))
+	}
+}
\ No newline at end of file