refactor: include hash for discord cdn routing

components/BotCard.tsx

@@ -34,6 +34,7 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 												<DiscordAvatar
 													size={128}
 													userID={bot.id}
+													hash={bot.avatar}
 													alt='Avatar'
 													className='absolute -left-2 -top-8 mx-auto h-32 w-32 rounded-full bg-white'
 												/>

components/DiscordAvatar.tsx

@@ -11,10 +11,12 @@ const DiscordAvatar: React.FC<DiscordAvatarProps> = (props) => {
 			src={KoreanbotsEndPoints.CDN.avatar(props.userID, {
 				format: 'webp',
 				size: props.size ?? 256,
+				hash: props.hash,
 			})}
 			fallbackSrc={KoreanbotsEndPoints.CDN.avatar(props.userID, {
 				format: 'png',
 				size: props.size ?? 256,
+				hash: props.hash,
 			})}
 		/>
 	)
@@ -25,6 +27,7 @@ interface DiscordAvatarProps {
 	userID: string
 	className?: string
 	size?: 128 | 256 | 512
+	hash?: string
 }
 
 interface ImageEvent extends Event {

components/Search.tsx

@@ -138,7 +138,7 @@ const Search: React.FC = () => {
 										data.data.bots.map((el) => (
 											<Link key={el.id} href={makeBotURL(el)} legacyBehavior>
 												<li className='h-15 flex cursor-pointer px-3 py-2'>
-													<DiscordAvatar className='mt-1 h-12 w-12' size={128} userID={el.id} />
+													<DiscordAvatar className='mt-1 h-12 w-12' size={128} userID={el.id} hash={el.avatar}/>
 													<div className='ml-2'>
 														<h1 className='text-lg text-black dark:text-gray-100'>{el.name}</h1>
 														<p className='text-sm text-gray-400'>{el.intro}</p>
@@ -156,7 +156,7 @@ const Search: React.FC = () => {
 										data.data.servers.map((el) => (
 											<Link key={el.id} href={makeServerURL(el)} legacyBehavior>
 												<li className='h-15 flex cursor-pointer px-3 py-2'>
-													<ServerIcon className='mt-1 h-12 w-12' size={128} id={el.id} />
+													<ServerIcon className='mt-1 h-12 w-12' size={128} id={el.id} hash={el.icon} />
 													<div className='ml-2'>
 														<h1 className='text-lg text-black dark:text-gray-100'>{el.name}</h1>
 														<p className='text-sm text-gray-400'>{el.intro}</p>

components/ServerCard.tsx

@@ -43,7 +43,7 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 												<ServerIcon
 													size={128}
 													id={server.id}
-													hash={type === 'add' && server.icon}
+													hash={server.icon}
 													alt='Icon'
 													className='absolute -left-2 -top-8 mx-auto h-32 w-32 rounded-full bg-white'
 												/>

components/ServerIcon.tsx

@@ -1,6 +1,6 @@
 import { SyntheticEvent } from 'react'
 import dynamic from 'next/dynamic'
-import { DiscordEnpoints, KoreanbotsEndPoints } from '@utils/Constants'
+import { KoreanbotsEndPoints } from '@utils/Constants'
 
 const Image = dynamic(() => import('@components/Image'))
 
@@ -9,16 +9,8 @@ const ServerIcon: React.FC<ServerIconProps> = ({ id, size, className, alt, hash
 		<Image
 			className={className}
 			alt={alt}
-			src={
+			src={KoreanbotsEndPoints.CDN.icon(id, { format: 'webp', size: size ?? 256, hash })}
-				hash
+			fallbackSrc={KoreanbotsEndPoints.CDN.icon(id, { format: 'png', size: size ?? 256, hash })}
-					? DiscordEnpoints.CDN.guild(id, hash, { format: 'webp', size: size ?? 256 })
-					: KoreanbotsEndPoints.CDN.icon(id, { format: 'webp', size: size ?? 256 })
-			}
-			fallbackSrc={
-				hash
-					? DiscordEnpoints.CDN.guild(id, hash, { format: 'png', size: size ?? 256 })
-					: KoreanbotsEndPoints.CDN.icon(id, { format: 'png', size: size ?? 256 })
-			}
 		/>
 	)
 }

pages/api/v2/bots/[id]/index.ts

@@ -25,6 +25,7 @@ import {
 } from '@utils/Tools'
 import { discordLog, getMainGuild, webhookClients } from '@utils/DiscordBot'
 import { KoreanbotsEndPoints } from '@utils/Constants'
+import { userInfo } from 'os'
 
 const patchLimiter = rateLimit({
 	windowMs: 2 * 60 * 1000,
@@ -127,7 +128,7 @@ const Bots = RequestHandler()
 								: `${userinfo.username}#${userinfo.tag}`,
 						iconURL:
 							KoreanbotsEndPoints.URL.root +
-							KoreanbotsEndPoints.CDN.avatar(userinfo.id, { format: 'png', size: 256 }),
+							KoreanbotsEndPoints.CDN.avatar(userinfo.id, { format: 'png', size: 256, hash: userinfo.avatar }),
 						url: KoreanbotsEndPoints.URL.user(userinfo.id),
 					})
 					.setTitle('대기 중')

pages/bots/[id]/edit.tsx

@@ -95,7 +95,7 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 				{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
 					<Form>
 						<div className='text-center md:flex md:text-left'>
-							<DiscordAvatar userID={bot.id} className='mx-auto rounded-full md:mx-1' />
+							<DiscordAvatar userID={bot.id} className='mx-auto rounded-full md:mx-1' hash={bot.avatar}/>
 							<div className='px-8 py-6 md:w-2/3'>
 								<h1 className='text-3xl font-bold'>
 									{bot.name}#{bot.tag}
@@ -344,6 +344,7 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 																	<DiscordAvatar
 																		userID={el.id}
 																		size={128}
+																		hash={el.avatar}
 																		className='mr-1 h-6 w-6 rounded-full'
 																	/>{' '}
 																	{el.tag === '0'

pages/bots/[id]/index.tsx

@@ -122,7 +122,7 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 						</div>
 						<div className='w-full lg:flex'>
 							<div className='w-full text-center lg:w-2/12'>
-								<DiscordAvatar userID={data.id} size={256} className='w-full rounded-full' />
+								<DiscordAvatar userID={data.id} size={256} className='w-full rounded-full' hash={data.avatar}/>
 							</div>
 							<div className='w-full grow px-5 py-12 text-center lg:w-5/12 lg:text-left'>
 								<Tag

pages/bots/[id]/vote.tsx

@@ -92,6 +92,7 @@ const VoteBot: NextPage<VoteBotProps> = ({ data, user, theme, csrfToken }) => {
 						<div className='text-center'>
 							<DiscordAvatar
 								userID={data.id}
+								hash={data.avatar}
 								className='mx-auto mb-4 h-52 w-52 rounded-full bg-white'
 							/>
 							<Tag

pages/developers/applications/bots/[id].tsx

@@ -70,7 +70,7 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme,
 			</p>
 			<div className='pt-6 lg:flex'>
 				<div className='lg:w-1/5'>
-					<DiscordAvatar userID={bot.id} />
+					<DiscordAvatar userID={bot.id} hash={bot.avatar} />
 				</div>
 				<div className='relative lg:w-4/5'>
 					<div className='mt-4'>

pages/developers/applications/servers/[id].tsx

@@ -77,7 +77,7 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({
 				<>
 					<div className='pt-6 lg:flex'>
 						<div className='lg:w-1/5'>
-							<ServerIcon id={server.id} />
+							<ServerIcon id={server.id} hash={server.icon} />
 						</div>
 						<div className='relative lg:w-4/5'>
 							<div className='mt-4'>

pages/security.tsx

@@ -64,7 +64,7 @@ const Security: NextPage<SecurityProps> = ({ bugReports }) => {
 					.filter((el) => el)
 					.map((u) => (
 						<div key={u.id} className='mr-2.5 flex items-center'>
-							<DiscordAvatar userID={u.id} size={128} className='mr-1 h-6 w-6 rounded-full' />
+							<DiscordAvatar userID={u.id} size={128} className='mr-1 h-6 w-6 rounded-full' hash={u.avatar} />
 							<span className='text-base font-semibold dark:text-gray-300'>
 								{u.globalName} {`(@${u.username})`}
 							</span>

pages/servers/[id]/edit.tsx

@@ -87,7 +87,11 @@ const ManageServerPage: NextPage<ManageServerProps> = ({
 				{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
 					<Form>
 						<div className='text-center md:flex md:text-left'>
-							<ServerIcon id={server.id} className='mx-auto rounded-full md:mx-1' />
+							<ServerIcon
+								id={server.id}
+								className='mx-auto rounded-full md:mx-1'
+								hash={server.icon}
+							/>
 							<div className='px-8 py-6 md:w-2/3'>
 								<h1 className='text-3xl font-bold'>{server.name}</h1>
 								<h2>ID: {server.id}</h2>

pages/servers/[id]/index.tsx

@@ -143,7 +143,7 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
 						</div>
 						<div className='w-full lg:flex'>
 							<div className='w-full text-center lg:w-2/12'>
-								<ServerIcon id={data.id} size={256} className='w-full rounded-full' />
+								<ServerIcon id={data.id} size={256} className='w-full rounded-full' hash={data.icon} />
 							</div>
 							<div className='w-full grow px-5 py-12 text-center lg:w-5/12 lg:text-left'>
 								<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>

pages/servers/[id]/vote.tsx

@@ -90,7 +90,7 @@ const VoteServer: NextPage<VoteServerProps> = ({ data, user, theme, csrfToken })
 					</Link>
 					<Segment className='mb-16 py-8'>
 						<div className='text-center'>
-							<ServerIcon id={data.id} className='mx-auto mb-4 h-52 w-52 rounded-full bg-white' />
+							<ServerIcon id={data.id} className='mx-auto mb-4 h-52 w-52 rounded-full bg-white' hash={data.icon} />
 							<Tag
 								text={
 									<span>

pages/users/[id]/index.tsx

@@ -55,7 +55,7 @@ const Users: NextPage<UserProps> = ({ user, data }) => {
 			/>
 			<div className='lg:flex'>
 				<div className='mx-auto w-3/5 text-center lg:w-1/6'>
-					<DiscordAvatar size={512} userID={data.id} className='w-full rounded-full' />
+					<DiscordAvatar size={512} userID={data.id} className='w-full rounded-full' hash={data.avatar} />
 				</div>
 				<div className='w-full grow px-5 py-10 text-center lg:w-5/12 lg:text-left'>
 					<div>

types/index.ts

@@ -350,6 +350,7 @@ export interface ImageOptions {
 export interface KoreanbotsImageOptions {
 	format?: 'webp' | 'png' | 'gif'
 	size?: 128 | 256 | 512
+	hash?: string;
 }
 
 export enum DiscordImageType {

utils/Constants.ts

@@ -334,12 +334,20 @@ export const KoreanbotsEndPoints = {
 		}
 	},
 	CDN: class {
-		static root = '//cdn.koreanbots.dev'
+		static root = '/api/image'
+		static cdn = '//cdn.koreanbots.dev'
+
 		static avatar(id: string, options: KoreanbotsImageOptions) {
-			return makeImageURL(`${this.root}/avatars/${id}`, options)
+			if (options.hash) {
+				return makeImageURL(`${this.cdn}/avatars/${id}/${options.hash}`, options)
+			}
+			return makeImageURL(`${this.root}/discord/avatars/${id}`, options)
 		}
 		static icon(id: string, options: KoreanbotsImageOptions) {
-			return makeImageURL(`${this.root}/icons/${id}`, options)
+			if (options.hash) {
+				return makeImageURL(`${this.cdn}/icons/${id}/${options.hash}`, options)
+			}
+			return makeImageURL(`${this.root}/discord/icons/${id}`, options)
 		}
 	},
 	URL: class {