feat: using local cdn

components/BotCard.tsx

@@ -16,7 +16,7 @@ const BotCard = ({ bot }: BotProps): JSX.Element => {
 							<div className='flex h-44'>
 								<div className='w-2/3'>
 									<div className='flex justify-start'>
-										<DiscordAvatar size={128} userID={bot.id} avatarHash={bot.avatar} tag={bot.tag} alt='Avatar' 	className='rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white'/> 
+										<DiscordAvatar size={128} userID={bot.id} alt='Avatar' 	className='rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white'/> 
 									</div>
 
 									<div className='mt-28 px-4'>

components/DiscordAvatar.tsx

@@ -1,15 +1,12 @@
 import { SyntheticEvent, useEffect, useState } from 'react'
-import { ImageSize } from '../types'
-import { DiscordEnpoints } from '../utils/Constants'
+import { KoreanbotsEndPoints } from '../utils/Constants'
 import { supportsWebP } from '../utils/Tools'
 
 const DiscordAvatar = (props: {
 	alt?: string
 	userID: string
-	avatarHash: string
-	tag: string
 	className?: string
-	size? : ImageSize
+	size? : 128 | 256 | 512
 }) => {
 	const fallback = '/img/default.png'
 	const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>()
@@ -21,9 +18,7 @@ const DiscordAvatar = (props: {
 			alt={props.alt ?? 'Image'}
 			className={props.className}
 			src={
-				props.avatarHash
-					? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
-					: DiscordEnpoints.CDN.default(props.tag, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
+				KoreanbotsEndPoints.CDN.avatar(props.userID, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
 			}
 			onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> {
 				if(webpUnavailable) {
@@ -41,9 +36,7 @@ const DiscordAvatar = (props: {
 						(event.target as ImageTarget).src = fallback
 					}
 					// Webp Load Fail
-					(e.target as ImageTarget).src = props.avatarHash
-						? DiscordEnpoints.CDN.user(props.userID, props.avatarHash, { size: props.size ?? 256 })
-						: DiscordEnpoints.CDN.default(props.tag, { size: props.size ?? 256})
+					(e.target as ImageTarget).src = KoreanbotsEndPoints.CDN.avatar(props.userID, { size: props.size ?? 256})
 					if(!supportsWebP()) localStorage.setItem('webp', 'false')
 				}
 			}}

pages/bots/[id].tsx

@@ -41,8 +41,6 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 			<div className='w-full text-center lg:w-1/4'>
 				<DiscordAvatar
 					userID={data.id}
-					avatarHash={data.avatar}
-					tag={data.tag}
 					className='w-full'
 				/>
 			</div>

pages/users/[id].tsx

@@ -41,8 +41,6 @@ const Users: NextPage<UserProps> = ({ data }) => {
 				<div className='w-full text-center lg:w-1/4'>
 					<DiscordAvatar
 						userID={data.id}
-						avatarHash={data.avatar}
-						tag={data.tag}
 						className='w-full'
 					/>
 				</div>