From b421d1ab64b7f89e3d83666390835ab6c04ff5dd Mon Sep 17 00:00:00 2001
From: SKINMAKER <me@skinmaker.dev>
Date: Wed, 29 Nov 2023 22:04:33 +0900
Subject: [PATCH] chore: apply prettier (#637)

* chore: apply prettier

* chore: edit ready comment

* chore: move ts comment
---
 components/Advertisement.tsx                  |  42 +-
 components/Application.tsx                    |  15 +-
 components/BotCard.tsx                        |  65 +-
 components/Button.tsx                         |  48 +-
 components/Captcha.tsx                        |  17 +-
 components/ColorCard.tsx                      |   2 +-
 components/DeveloperLayout.tsx                | 193 ++--
 components/DiscordAvatar.tsx                  |  23 +-
 components/Docs.tsx                           |  16 +-
 components/Footer.tsx                         |  22 +-
 components/Forbidden.tsx                      |  28 +-
 components/Form/CheckBox.tsx                  |   9 +-
 components/Form/Input.tsx                     |  16 +-
 components/Form/Label.tsx                     |  42 +-
 components/Form/Select.tsx                    |  82 +-
 components/Form/Selects.tsx                   | 116 ++-
 components/Form/TextArea.tsx                  | 125 ++-
 components/Hero.tsx                           | 201 ++--
 components/Image.tsx                          |  71 +-
 components/Loader.tsx                         |   4 +-
 components/Login.tsx                          |   6 +-
 components/LongButton.tsx                     |  86 +-
 components/Markdown.tsx                       |  17 +-
 components/Message.tsx                        |   4 +-
 components/Modal.tsx                          |  14 +-
 components/NSFW.tsx                           |  53 +-
 components/Navbar.tsx                         | 562 ++++++-----
 components/Notice.tsx                         |   2 +-
 components/Owner.tsx                          |  24 +-
 components/Paginator.tsx                      |  42 +-
 components/PlatformDisplay.tsx                |  11 +-
 components/Redirect.tsx                       |  26 +-
 components/ReportTemplate.tsx                 | 171 ++--
 components/ResponsiveGrid.tsx                 |  10 +-
 components/Search.tsx                         | 217 +++--
 components/Segment.tsx                        |   2 +-
 components/ServerCard.tsx                     | 185 ++--
 components/ServerIcon.tsx                     |  25 +-
 components/SubmittedBotCard.tsx               |  21 +-
 components/Tag.tsx                            |  39 +-
 components/Toggle.tsx                         |   6 +-
 components/Tooltip.tsx                        |  18 +-
 pages/404.tsx                                 |  15 +-
 pages/_app.tsx                                | 252 ++---
 pages/_document.tsx                           | 193 +++-
 pages/_error.tsx                              |  31 +-
 pages/_offline.tsx                            |  27 +-
 pages/about.tsx                               | 154 +--
 pages/addbot.tsx                              | 369 ++++++--
 pages/addserver/[id].tsx                      | 416 +++++---
 pages/addserver/index.tsx                     |  95 +-
 pages/api/auth/discord/callback.ts            |  16 +-
 pages/api/auth/github/callback.ts             |  34 +-
 pages/api/auth/github/index.ts                |  12 +-
 pages/api/image/discord/avatars/[id].ts       |  50 +-
 pages/api/image/discord/icons/[id].ts         |  44 +-
 pages/api/index.ts                            |   2 +-
 pages/api/v1/bots/servers.ts                  |  62 +-
 pages/api/v1/bots/voted/[id].ts               |  35 +-
 pages/api/v2/applications/bots/[id]/index.ts  |  25 +-
 pages/api/v2/applications/bots/[id]/reset.ts  |   7 +-
 .../api/v2/applications/servers/[id]/index.ts |  22 +-
 .../api/v2/applications/servers/[id]/reset.ts |  14 +-
 pages/api/v2/bots/[id]/index.ts               | 174 +++-
 pages/api/v2/bots/[id]/owners.ts              |  95 +-
 pages/api/v2/bots/[id]/report.ts              |  38 +-
 pages/api/v2/bots/[id]/stats.ts               |  78 +-
 pages/api/v2/bots/[id]/vote.ts                |  53 +-
 pages/api/v2/list/bots/new.ts                 |   2 +-
 pages/api/v2/list/bots/votes.ts               |  16 +-
 .../bots/submits/[id]/[date]/approve.ts       |  65 +-
 .../bots/submits/[id]/[date]/deny.ts          |  89 +-
 .../bots/submits/[id]/[date]/index.ts         |  25 +-
 .../management/bots/submits/[id]/history.ts   |  19 +-
 .../v2/management/bots/submits/[id]/index.ts  |  25 +-
 pages/api/v2/management/bots/submits/index.ts |  15 +-
 pages/api/v2/management/index.ts              |   9 +-
 pages/api/v2/management/load.ts               |   1 -
 pages/api/v2/search/all.ts                    |   9 +-
 pages/api/v2/search/bots.ts                   |   9 +-
 pages/api/v2/search/servers.ts                |   9 +-
 pages/api/v2/servers/[id]/index.ts            | 158 +++-
 pages/api/v2/servers/[id]/owners.ts           |  19 +-
 pages/api/v2/servers/[id]/report.ts           |  38 +-
 pages/api/v2/servers/[id]/vote.ts             |  55 +-
 pages/api/v2/users/[id]/report.ts             |  46 +-
 pages/api/widget/bots/[type]/[id].ts          |   8 +-
 pages/api/widget/servers/[type]/[id].ts       |   8 +-
 pages/bots/[id]/edit.tsx                      | 603 ++++++++----
 pages/bots/[id]/index.tsx                     | 666 +++++++------
 pages/bots/[id]/invite.tsx                    |  24 +-
 pages/bots/[id]/report.tsx                    | 212 +++--
 pages/bots/[id]/vote.tsx                      | 165 ++--
 pages/bots/categories/[category].tsx          |  86 +-
 pages/bots/categories/index.tsx               |  68 +-
 pages/bots/index.tsx                          |  39 +-
 pages/bots/list/new.tsx                       |  40 +-
 pages/bots/list/votes.tsx                     |  59 +-
 pages/bots/search.tsx                         | 114 ++-
 pages/calculator.tsx                          | 211 +++--
 pages/callback/discord.tsx                    |  20 +-
 pages/community-rule.tsx                      |  18 +-
 pages/debug.tsx                               |  80 +-
 pages/developers/applications/bots/[id].tsx   | 213 +++--
 pages/developers/applications/index.tsx       |  57 +-
 .../developers/applications/servers/[id].tsx  | 217 +++--
 pages/developers/docs/[first]/[second].tsx    | 107 ++-
 pages/developers/docs/[first]/index.tsx       |   2 +-
 pages/discord.tsx                             |   6 +-
 pages/guidelines.tsx                          |   9 +-
 pages/index.tsx                               |  30 +-
 pages/iu.tsx                                  |   6 +-
 pages/license.tsx                             | 102 +-
 pages/panel.tsx                               | 156 +--
 pages/pendingBots/[id]/[date].tsx             | 223 +++--
 pages/privacy.tsx                             |  12 +-
 pages/profile.tsx                             |   6 +-
 pages/search.tsx                              | 142 +--
 pages/security.tsx                            | 131 +--
 pages/servers/[id]/edit.tsx                   | 389 +++++---
 pages/servers/[id]/index.tsx                  | 486 ++++++----
 pages/servers/[id]/join.tsx                   |   6 +-
 pages/servers/[id]/report.tsx                 | 212 +++--
 pages/servers/[id]/vote.tsx                   | 162 ++--
 pages/servers/categories/[category].tsx       |  73 +-
 pages/servers/categories/index.tsx            |  46 +-
 pages/servers/index.tsx                       |  65 +-
 pages/servers/list/votes.tsx                  |  59 +-
 pages/servers/search.tsx                      | 114 ++-
 pages/tos.tsx                                 |   9 +-
 pages/users/[id]/index.tsx                    | 123 +--
 pages/users/[id]/report.tsx                   | 209 ++--
 pages/verification.tsx                        |  20 +-
 types/global.d.ts                             |   3 +-
 types/index.ts                                |  16 +-
 utils/Constants.ts                            | 383 +++++---
 utils/Csrf.ts                                 |   2 +-
 utils/DiscordBot.ts                           |  43 +-
 utils/Fetch.ts                                |  10 +-
 utils/Jwt.ts                                  |  21 +-
 utils/Knex.ts                                 |   2 +-
 utils/Logger.ts                               |   6 +-
 utils/Mongo.ts                                |  56 +-
 utils/Query.ts                                | 894 ++++++++++++------
 utils/Regex.ts                                |   2 +-
 utils/RequestHandler.ts                       |   9 +-
 utils/ResponseWrapper.ts                      |   2 +-
 utils/ShowdownExtensions.ts                   |  29 +-
 utils/Tools.ts                                | 131 ++-
 utils/Webhook.ts                              | 332 ++++---
 utils/Yup.ts                                  | 120 +--
 utils/useOutsideClick.ts                      |   2 +-
 152 files changed, 8356 insertions(+), 5120 deletions(-)

diff --git a/components/Advertisement.tsx b/components/Advertisement.tsx
index d24bba0..73a4baa 100644
--- a/components/Advertisement.tsx
+++ b/components/Advertisement.tsx
@@ -1,25 +1,31 @@
 import AdSense from 'react-adsense'
 
 const Advertisement: React.FC<AdvertisementProps> = ({ size = 'short' }) => {
-	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'
-			}`}
-			style={size === 'short' ? { height: '90px' } : { height: '330px' }}
-		>
-			{process.env.NODE_ENV === 'production' ? (
-				<AdSense.Google
-					style={{ display: 'inline-block', width: '100%', height: size === 'short' ? '90px' : '330px'}}
-					client='ca-pub-4856582423981759'
-					slot='3250141451'
-					format=''
-				/>
-			) : (
-				'Advertisement'
-			)}
+	return (
+		<div className='py-5'>
+			<div
+				className={`z-0 mx-auto w-full text-center text-white ${
+					process.env.NODE_ENV === 'production' ? '' : 'bg-gray-700 py-12'
+				}`}
+				style={size === 'short' ? { height: '90px' } : { height: '330px' }}
+			>
+				{process.env.NODE_ENV === 'production' ? (
+					<AdSense.Google
+						style={{
+							display: 'inline-block',
+							width: '100%',
+							height: size === 'short' ? '90px' : '330px',
+						}}
+						client='ca-pub-4856582423981759'
+						slot='3250141451'
+						format=''
+					/>
+				) : (
+					'Advertisement'
+				)}
+			</div>
 		</div>
-	</div>
+	)
 }
 
 declare global {
diff --git a/components/Application.tsx b/components/Application.tsx
index 90f9df2..3caa2db 100644
--- a/components/Application.tsx
+++ b/components/Application.tsx
@@ -7,17 +7,16 @@ const ServerIcon = dynamic(() => import('@components/ServerIcon'))
 const Application: React.FC<ApplicationProps> = ({ type, id, name }) => {
 	return (
 		<Link href={`/developers/applications/${type + 's'}/${id}`} legacyBehavior>
-			<div className='relative px-2 py-4 text-center dark:bg-discord-black bg-little-white rounded-lg cursor-pointer transform hover:-translate-y-1 transition duration-100 ease-in'>
-				{
-					type === 'bot' ?
-						<DiscordAvatar userID={id} className='px-2 w-full rounded-xl' /> :
-						<ServerIcon id={id} className='px-2 w-full rounded-xl' />
-				}
-				<h2 className='pt-2 whitespace-nowrap text-xl font-medium truncate'>{name}</h2>
+			<div className='relative transform cursor-pointer rounded-lg bg-little-white px-2 py-4 text-center transition duration-100 ease-in hover:-translate-y-1 dark:bg-discord-black'>
+				{type === 'bot' ? (
+					<DiscordAvatar userID={id} className='w-full rounded-xl px-2' />
+				) : (
+					<ServerIcon id={id} className='w-full rounded-xl px-2' />
+				)}
+				<h2 className='truncate whitespace-nowrap pt-2 text-xl font-medium'>{name}</h2>
 			</div>
 		</Link>
 	)
-
 }
 
 interface ApplicationProps {
diff --git a/components/BotCard.tsx b/components/BotCard.tsx
index 468518c..d78f493 100644
--- a/components/BotCard.tsx
+++ b/components/BotCard.tsx
@@ -11,18 +11,18 @@ const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 
 const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 	return (
-		<div className='min-w-0 container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
+		<div className='container mb-16 min-w-0 transform cursor-pointer transition duration-100 ease-in hover:-translate-y-1'>
 			<div className='relative'>
 				<div className='container mx-auto'>
 					<div className='h-full'>
 						<div
-							className='relative mx-auto h-full text-black dark:text-white dark:bg-discord-black bg-little-white rounded-2xl shadow-xl'
+							className='relative mx-auto h-full rounded-2xl bg-little-white text-black shadow-xl dark:bg-discord-black dark:text-white'
 							style={
 								checkBotFlag(bot.flags, 'trusted') && bot.banner
 									? {
-										background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${bot.banner}") center top / cover no-repeat`,
-										color: 'white',
-									}
+											background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${bot.banner}") center top / cover no-repeat`,
+											color: 'white',
+									  }
 									: {}
 							}
 						>
@@ -30,15 +30,15 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 								<div>
 									<div className='flex flex-col'>
 										<div className='flex'>
-											<div className='w-3/5 flex justify-start'>
+											<div className='flex w-3/5 justify-start'>
 												<DiscordAvatar
 													size={128}
 													userID={bot.id}
 													alt='Avatar'
-													className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
+													className='absolute -left-2 -top-8 mx-auto h-32 w-32 rounded-full bg-white'
 												/>
 											</div>
-											<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
+											<div className='grid w-2/5 grid-cols-1 pr-5 pt-5'>
 												<Tag
 													text={
 														<>
@@ -55,19 +55,19 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 											</div>
 										</div>
 									</div>
-									<div className='mt-3 px-4 h-16'>
+									<div className='mt-3 h-16 px-4'>
 										<h2 className='px-1 text-sm'>
 											<i className={`fas fa-circle text-${Status[bot.status]?.color}`} />
 											{Status[bot.status]?.text}
 										</h2>
-										<h1 className='mb-3 text-left text-xl sm:text-2xl font-bold truncate'>{bot.name}</h1>
+										<h1 className='mb-3 truncate text-left text-xl font-bold sm:text-2xl'>
+											{bot.name}
+										</h1>
 									</div>
-									<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm'>
-										{bot.intro}
-									</p>
+									<p className='mb-10 h-6 px-4 text-left text-sm text-gray-400'>{bot.intro}</p>
 									<div>
 										<div className='category flex flex-wrap px-2'>
-											{bot.category.slice(0, 3).map(el => (
+											{bot.category.slice(0, 3).map((el) => (
 												<Tag key={el} text={el} href={`/bots/categories/${el}`} dark />
 											))}{' '}
 											{bot.category.length > 3 && <Tag text={`+${bot.category.length - 3}`} dark />}
@@ -80,35 +80,31 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 								<div className='flex justify-evenly'>
 									<Link
 										href={makeBotURL(bot)}
-										className='py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue rounded-bl-2xl hover:shadow-lg transition duration-100 ease-in'>
-                                        
-                                            보기
-                                        
+										className='w-full rounded-bl-2xl py-3 text-center text-sm font-bold text-koreanbots-blue transition duration-100 ease-in hover:bg-koreanbots-blue hover:text-white hover:shadow-lg'
+									>
+										보기
 									</Link>
 									{manage ? (
 										<Link
 											href={`/bots/${bot.id}/edit`}
-											className='py-3 w-full text-center text-emerald-500 hover:text-white text-sm font-bold hover:bg-emerald-500 rounded-br-2xl hover:shadow-lg transition duration-100 ease-in'>
-                                            
-                                                관리하기
-                                            
+											className='w-full rounded-br-2xl py-3 text-center text-sm font-bold text-emerald-500 transition duration-100 ease-in hover:bg-emerald-500 hover:text-white hover:shadow-lg'
+										>
+											관리하기
 										</Link>
-									) : bot.state !== 'ok' ? <a
-										className='py-3 w-full text-center text-discord-blurple text-sm font-bold rounded-br-2xl hover:shadow-lg transition duration-100 ease-in opacity-50 cursor-default select-none'
-									>
-                                    초대하기
-									</a> : 
+									) : bot.state !== 'ok' ? (
+										<a className='w-full cursor-default select-none rounded-br-2xl py-3 text-center text-sm font-bold text-discord-blurple opacity-50 transition duration-100 ease-in hover:shadow-lg'>
+											초대하기
+										</a>
+									) : (
 										<a
-											href={
-												makeBotURL(bot) + '/invite'
-											}
+											href={makeBotURL(bot) + '/invite'}
 											rel='noopener noreferrer'
 											target='_blank'
-											className='py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple rounded-br-2xl hover:shadow-lg transition duration-100 ease-in'
+											className='w-full rounded-br-2xl py-3 text-center text-sm font-bold text-discord-blurple transition duration-100 ease-in hover:bg-discord-blurple hover:text-white hover:shadow-lg'
 										>
-                                        초대하기
+											초대하기
 										</a>
-									}
+									)}
 								</div>
 							</div>
 						</div>
@@ -117,7 +113,6 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 			</div>
 		</div>
 	)
-
 }
 
 interface BotCardProps {
@@ -125,4 +120,4 @@ interface BotCardProps {
 	bot: Bot
 }
 
-export default BotCard
\ No newline at end of file
+export default BotCard
diff --git a/components/Button.tsx b/components/Button.tsx
index 44cafe3..a151e28 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -6,33 +6,41 @@ const Button: React.FC<ButtonProps> = ({
 	className,
 	children,
 	href,
-	disabled=false,
+	disabled = false,
 	onClick,
 }) => {
-	return href ? <Link
-		href={!disabled && href}
-		className={`cursor-pointer rounded-md px-4 py-2 transition duration-300 ease select-none outline-none foucs:outline-none mr-1.5 ${className ??
-                'bg-discord-blurple hover:opacity-80 dark:bg-very-black dark:hover:bg-discord-dark-hover text-white'}`}>
-
-		{children}
-
-	</Link>
-		: onClick ? <button
+	return href ? (
+		<Link
+			href={!disabled && href}
+			className={`ease foucs:outline-none mr-1.5 cursor-pointer select-none rounded-md px-4 py-2 outline-none transition duration-300 ${
+				className ??
+				'bg-discord-blurple text-white hover:opacity-80 dark:bg-very-black dark:hover:bg-discord-dark-hover'
+			}`}
+		>
+			{children}
+		</Link>
+	) : onClick ? (
+		<button
 			type={disabled ? 'button' : type}
 			onClick={disabled ? null : onClick}
-			className={`cursor-pointer rounded-md px-4 py-2 transition duration-300 ease select-none outline-none foucs:outline-none mr-1.5 ${className ??
-				'bg-discord-blurple hover:opacity-80 dark:bg-very-black dark:hover:bg-discord-dark-hover text-white'}`}
+			className={`ease foucs:outline-none mr-1.5 cursor-pointer select-none rounded-md px-4 py-2 outline-none transition duration-300 ${
+				className ??
+				'bg-discord-blurple text-white hover:opacity-80 dark:bg-very-black dark:hover:bg-discord-dark-hover'
+			}`}
 		>
 			{children}
 		</button>
-			: 
-			<button
-				type={disabled ? 'button' : type}
-				className={`cursor-pointer rounded-md px-4 py-2 transition duration-300 ease select-none outline-none foucs:outline-none mr-1.5 ${className ??
-				'bg-discord-blurple hover:opacity-80 dark:bg-very-black dark:hover:bg-discord-dark-hover text-white'}`}
-			>
-				{children}
-			</button>
+	) : (
+		<button
+			type={disabled ? 'button' : type}
+			className={`ease foucs:outline-none mr-1.5 cursor-pointer select-none rounded-md px-4 py-2 outline-none transition duration-300 ${
+				className ??
+				'bg-discord-blurple text-white hover:opacity-80 dark:bg-very-black dark:hover:bg-discord-dark-hover'
+			}`}
+		>
+			{children}
+		</button>
+	)
 }
 
 interface ButtonProps {
diff --git a/components/Captcha.tsx b/components/Captcha.tsx
index 25585cf..7418cd0 100644
--- a/components/Captcha.tsx
+++ b/components/Captcha.tsx
@@ -1,15 +1,20 @@
 import { Ref } from 'react'
 import HCaptcha from '@hcaptcha/react-hcaptcha'
 
-
 const Captcha: React.FC<CaptchaProps> = ({ dark, onVerify }) => {
-	return <HCaptcha sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITEKEY} theme={dark ? 'dark' : 'light'} onVerify={onVerify}/>
+	return (
+		<HCaptcha
+			sitekey={process.env.NEXT_PUBLIC_HCAPTCHA_SITEKEY}
+			theme={dark ? 'dark' : 'light'}
+			onVerify={onVerify}
+		/>
+	)
 }
 
 interface CaptchaProps {
-  dark: boolean
-  onVerify(token: string, eKey?: string): void
-  ref?: Ref<HCaptcha>
+	dark: boolean
+	onVerify(token: string, eKey?: string): void
+	ref?: Ref<HCaptcha>
 }
 
-export default Captcha
\ No newline at end of file
+export default Captcha
diff --git a/components/ColorCard.tsx b/components/ColorCard.tsx
index 66f6c32..ef42301 100644
--- a/components/ColorCard.tsx
+++ b/components/ColorCard.tsx
@@ -3,7 +3,7 @@ const ColorCard: React.FC<ColorCardProps> = ({ header, first, second, className
 		<div className={`rounded-lg p-10 ${className} shadow-lg`}>
 			<h2 className='text-2xl font-bold'>{header}</h2>
 			<p className='opacity-80'>
-				{first} 
+				{first}
 				<br />
 				{second}
 			</p>
diff --git a/components/DeveloperLayout.tsx b/components/DeveloperLayout.tsx
index 3b4ba60..f3517bb 100644
--- a/components/DeveloperLayout.tsx
+++ b/components/DeveloperLayout.tsx
@@ -9,106 +9,169 @@ import { NextSeo } from 'next-seo'
 const Container = dynamic(() => import('@components/Container'))
 const Divider = dynamic(() => import('@components/Divider'))
 
-const DeveloperLayout: React.FC<DeveloperLayout> = ({ children, enabled, docs, currentDoc }:DeveloperLayout) => {
-	const [ navbarEnabled, setNavbarOpen ] = useState(false)
+const DeveloperLayout: React.FC<DeveloperLayout> = ({
+	children,
+	enabled,
+	docs,
+	currentDoc,
+}: DeveloperLayout) => {
+	const [navbarEnabled, setNavbarOpen] = useState(false)
 
 	return (
-		<div className='flex min-h-screen'>
-			<NextSeo title='한디리 개발자' description='한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.' openGraph={{
-				title:'한디리 개발자',
-				description:'한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.'
-			}} />
-			<div className='block lg:hidden h-screen relative'>
-				<div className='w-18 pt-20 px-2 h-full text-center bg-little-white dark:bg-discord-black fixed'>
+		<div className='min-h-screen flex'>
+			<NextSeo
+				title='한디리 개발자'
+				description='한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.'
+				openGraph={{
+					title: '한디리 개발자',
+					description: '한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.',
+				}}
+			/>
+			<div className='relative block h-screen lg:hidden'>
+				<div className='w-18 fixed h-full bg-little-white px-2 pt-20 text-center dark:bg-discord-black'>
 					<ul className='text-gray-600 dark:text-gray-300'>
-						<li className={`cursor-pointer py-2 px-4 mb-2 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-							<Link href='/developers/applications' legacyBehavior><i className='fas fa-robot'/></Link>
+						<li
+							className={`mb-2 cursor-pointer rounded-md px-4 py-2 ${
+								enabled === 'applications'
+									? 'bg-discord-blurple text-white'
+									: 'hover:text-gray-500 dark:hover:text-white'
+							}`}
+						>
+							<Link href='/developers/applications' legacyBehavior>
+								<i className='fas fa-robot' />
+							</Link>
 						</li>
-						<li className={`cursor-pointer py-2 px-4 my-2 rounded-md ${enabled === 'docs' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-							<Link href='/developers/docs' legacyBehavior><i className='fas fa-book'/></Link>
+						<li
+							className={`my-2 cursor-pointer rounded-md px-4 py-2 ${
+								enabled === 'docs'
+									? 'bg-discord-blurple text-white'
+									: 'hover:text-gray-500 dark:hover:text-white'
+							}`}
+						>
+							<Link href='/developers/docs' legacyBehavior>
+								<i className='fas fa-book' />
+							</Link>
 						</li>
-						{
-							enabled === 'docs' && <>
+						{enabled === 'docs' && (
+							<>
 								<Divider />
-								<li className='cursor-pointer py-2 px-4 my-2 rounded-md hover:text-gray-500 dark:hover:text-white' onKeyDown={() => setNavbarOpen(true)} onClick={() => setNavbarOpen(true)}>
-									<i className='fas fa-bars'/>
-								</li></>
-						}
+								<li
+									className='my-2 cursor-pointer rounded-md px-4 py-2 hover:text-gray-500 dark:hover:text-white'
+									onKeyDown={() => setNavbarOpen(true)}
+									onClick={() => setNavbarOpen(true)}
+								>
+									<i className='fas fa-bars' />
+								</li>
+							</>
+						)}
 					</ul>
 				</div>
 			</div>
-			<div className={`${navbarEnabled ? 'block' : 'hidden'} lg:block relative`}>
-				<div className='bg-little-white dark:bg-discord-black pt-20 px-6 fixed h-screen w-screen lg:w-60 overflow-y-auto'>
-					<ul className='text-base text-gray-600 dark:text-gray-300 mb-6 hidden lg:block'>
-						<li className='cursor-pointer py-2 px-4 rounded-md hover:text-gray-500 dark:hover:text-white lg:hidden' onKeyDown={() => setNavbarOpen(false)} onClick={() => setNavbarOpen(false)}>닫기</li>
+			<div className={`${navbarEnabled ? 'block' : 'hidden'} relative lg:block`}>
+				<div className='fixed h-screen w-screen overflow-y-auto bg-little-white px-6 pt-20 dark:bg-discord-black lg:w-60'>
+					<ul className='mb-6 hidden text-base text-gray-600 dark:text-gray-300 lg:block'>
+						<li
+							className='cursor-pointer rounded-md px-4 py-2 hover:text-gray-500 dark:hover:text-white lg:hidden'
+							onKeyDown={() => setNavbarOpen(false)}
+							onClick={() => setNavbarOpen(false)}
+						>
+							닫기
+						</li>
 						<Divider className='lg:hidden' />
 						<Link href='/developers/applications' legacyBehavior>
-							<li className={`cursor-pointer py-2 px-4 rounded-md ${enabled === 'applications' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-                            나의 리스트
+							<li
+								className={`cursor-pointer rounded-md px-4 py-2 ${
+									enabled === 'applications'
+										? 'bg-discord-blurple text-white'
+										: 'hover:text-gray-500 dark:hover:text-white'
+								}`}
+							>
+								나의 리스트
 							</li>
 						</Link>
 						<Link href='/developers/docs' legacyBehavior>
-							<li className={`cursor-pointer py-2 px-4 rounded-md ${enabled === 'docs' ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-                            문서
+							<li
+								className={`cursor-pointer rounded-md px-4 py-2 ${
+									enabled === 'docs'
+										? 'bg-discord-blurple text-white'
+										: 'hover:text-gray-500 dark:hover:text-white'
+								}`}
+							>
+								문서
 							</li>
 						</Link>
 					</ul>
-					{
-						enabled === 'docs' && <>
+					{enabled === 'docs' && (
+						<>
 							<Divider className='hidden lg:block' />
-							<ul className='text-sm text-gray-600 dark:text-gray-300 px-0.5 lg:mt-6'>
-								<li onClick={() => setNavbarOpen(false)} className='lg:hidden cursor-pointer py-1 px-4 rounded-md mb-2'>
+							<ul className='px-0.5 text-sm text-gray-600 dark:text-gray-300 lg:mt-6'>
+								<li
+									onClick={() => setNavbarOpen(false)}
+									className='mb-2 cursor-pointer rounded-md px-4 py-1 lg:hidden'
+								>
 									<i className='fas fa-times' /> 닫기
 								</li>
 								<Divider className='lg:hidden' />
-								{
-									docs?.map(el => {
-										if(el.list) return (
+								{docs?.map((el) => {
+									if (el.list)
+										return (
 											<div key={el.name} className='mt-2'>
-												<span className='text-gray-600 dark:text-gray-100 font-bold mb-1'>{el.name}</span>
-												<ul className='text-sm py-3'>
-													{
-														el.list.map(e => 
-															<Link
-																key={e.name}
-																href={`/developers/docs/${el.name}/${e.name}`}
-																legacyBehavior>
-																<li onClick={() => setNavbarOpen(false)} className={`cursor-pointer px-4 py-2 rounded-md ${currentDoc === e.name ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-																	{e.name}
-																</li>
-															</Link>
-														)
-													}
+												<span className='mb-1 font-bold text-gray-600 dark:text-gray-100'>
+													{el.name}
+												</span>
+												<ul className='py-3 text-sm'>
+													{el.list.map((e) => (
+														<Link
+															key={e.name}
+															href={`/developers/docs/${el.name}/${e.name}`}
+															legacyBehavior
+														>
+															<li
+																onClick={() => setNavbarOpen(false)}
+																className={`cursor-pointer rounded-md px-4 py-2 ${
+																	currentDoc === e.name
+																		? 'bg-discord-blurple text-white'
+																		: 'hover:text-gray-500 dark:hover:text-white'
+																}`}
+															>
+																{e.name}
+															</li>
+														</Link>
+													))}
 												</ul>
 											</div>
 										)
-                                    
-										return (
-											<Link key={el.name} href={`/developers/docs/${el.name}`} legacyBehavior>
-												<li onClick={() => setNavbarOpen(false)} className={`cursor-pointer py-2 px-4 rounded-md ${currentDoc === el.name ? 'bg-discord-blurple text-white' : 'hover:text-gray-500 dark:hover:text-white'}`}>
-													{el.name}
-												</li>
-											</Link>
-										)
-									})
-								}
+
+									return (
+										<Link key={el.name} href={`/developers/docs/${el.name}`} legacyBehavior>
+											<li
+												onClick={() => setNavbarOpen(false)}
+												className={`cursor-pointer rounded-md px-4 py-2 ${
+													currentDoc === el.name
+														? 'bg-discord-blurple text-white'
+														: 'hover:text-gray-500 dark:hover:text-white'
+												}`}
+											>
+												{el.name}
+											</li>
+										</Link>
+									)
+								})}
 							</ul>
 						</>
-					}
+					)}
 				</div>
 			</div>
-			<div className='w-full py-28 lg:pl-60 pl-16'>
-				<Container>
-					{children}
-				</Container>
+			<div className='w-full py-28 pl-16 lg:pl-60'>
+				<Container>{children}</Container>
 			</div>
 		</div>
 	)
 }
 
 interface DeveloperLayout {
-  children: ReactNode
-  enabled: 'applications' | 'docs'
+	children: ReactNode
+	enabled: 'applications' | 'docs'
 	docs?: DocsData[]
 	currentDoc?: string
 }
diff --git a/components/DiscordAvatar.tsx b/components/DiscordAvatar.tsx
index 1238914..a6cbb48 100644
--- a/components/DiscordAvatar.tsx
+++ b/components/DiscordAvatar.tsx
@@ -4,20 +4,27 @@ import { KoreanbotsEndPoints } from '@utils/Constants'
 
 const Image = dynamic(() => import('@components/Image'))
 
-const DiscordAvatar: React.FC<DiscordAvatarProps> = props => {
-	return <Image
-		{...props}
-		src={KoreanbotsEndPoints.CDN.avatar(props.userID, { format: 'webp', size: props.size ?? 256})}
-		fallbackSrc={KoreanbotsEndPoints.CDN.avatar(props.userID, { format: 'png', size: props.size ?? 256})}
-	/>
-	
+const DiscordAvatar: React.FC<DiscordAvatarProps> = (props) => {
+	return (
+		<Image
+			{...props}
+			src={KoreanbotsEndPoints.CDN.avatar(props.userID, {
+				format: 'webp',
+				size: props.size ?? 256,
+			})}
+			fallbackSrc={KoreanbotsEndPoints.CDN.avatar(props.userID, {
+				format: 'png',
+				size: props.size ?? 256,
+			})}
+		/>
+	)
 }
 
 interface DiscordAvatarProps {
 	alt?: string
 	userID: string
 	className?: string
-	size? : 128 | 256 | 512
+	size?: 128 | 256 | 512
 }
 
 interface ImageEvent extends Event {
diff --git a/components/Docs.tsx b/components/Docs.tsx
index f71d240..b9a6121 100644
--- a/components/Docs.tsx
+++ b/components/Docs.tsx
@@ -8,26 +8,28 @@ const Docs: React.FC<DocsProps> = ({ title, header, description, subheader, chil
 	const d = description || subheader
 	return (
 		<>
-			<NextSeo title={t} description={d}
+			<NextSeo
+				title={t}
+				description={d}
 				openGraph={{
 					title: t,
-					description: d
+					description: d,
 				}}
 			/>
-			<div className='dark:bg-discord-black bg-discord-blurple z-20'>
+			<div className='z-20 bg-discord-blurple dark:bg-discord-black'>
 				<Container className='py-20' ignoreColor>
-					<h1 className='mt-10 text-center text-gray-100 text-4xl font-bold sm:text-left'>
+					<h1 className='mt-10 text-center text-4xl font-bold text-gray-100 sm:text-left'>
 						{header}
 					</h1>
-					<h2 className='mt-5 text-center text-gray-200 text-xl font-medium sm:text-left'>
+					<h2 className='mt-5 text-center text-xl font-medium text-gray-200 sm:text-left'>
 						{description}
 					</h2>
-					<h2 className='mt-5 text-center text-gray-200 text-xl font-medium sm:text-left'>
+					<h2 className='mt-5 text-center text-xl font-medium text-gray-200 sm:text-left'>
 						{subheader}
 					</h2>
 				</Container>
 			</div>
-			<Container className='pt-10 pb-20'>
+			<Container className='pb-20 pt-10'>
 				<div>{children}</div>
 			</Container>
 		</>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 93b2e06..b8f661d 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -9,16 +9,16 @@ const Toggle = dynamic(() => import('@components/Toggle'))
 const Footer: React.FC<FooterProps> = ({ theme, setTheme }) => {
 	return (
 		<div className='releative z-30'>
-			<div className='bottom-0 text-white bg-discord-black py-24'>
-				<Container className='w-11/12 lg:flex lg:pt-0 lg:w-4/5' ignoreColor>
+			<div className='bottom-0 bg-discord-black py-24 text-white'>
+				<Container className='w-11/12 lg:flex lg:w-4/5 lg:pt-0' ignoreColor>
 					<div className='w-full lg:w-2/5'>
-						<h1 className='text-koreanbots-blue text-2xl font-bold'>국내 디스코드의 모든 것을 한 곳에서.</h1>
+						<h1 className='text-2xl font-bold text-koreanbots-blue'>
+							국내 디스코드의 모든 것을 한 곳에서.
+						</h1>
 						<span className='text-base'>2020-2023 한국 디스코드 리스트, All rights reserved.</span>
-						<div className='text-2xl flex space-x-1'>
+						<div className='flex space-x-1 text-2xl'>
 							<Link href='/discord'>
-
 								<i className='fab fa-discord inline-block w-full' />
-
 							</Link>
 							<a href='https://github.com/koreanbots'>
 								<i className='fab fa-github inline-block w-full' />
@@ -28,9 +28,9 @@ const Footer: React.FC<FooterProps> = ({ theme, setTheme }) => {
 							</a>
 						</div>
 					</div>
-					<div className='grid grow gap-2 grid-cols-2 md:grid-cols-7'>
+					<div className='grid grow grid-cols-2 gap-2 md:grid-cols-7'>
 						<div className='col-span-2 mb-2'>
-							<h2 className='text-koreanbots-blue text-base font-bold'>한국 디스코드 리스트</h2>
+							<h2 className='text-base font-bold text-koreanbots-blue'>한국 디스코드 리스트</h2>
 							<ul className='text-sm'>
 								<li>
 									<Link href='/about' className='hover:text-gray-300'>
@@ -50,7 +50,7 @@ const Footer: React.FC<FooterProps> = ({ theme, setTheme }) => {
 							</ul>
 						</div>
 						<div className='col-span-2 mb-2'>
-							<h2 className='text-koreanbots-blue text-base font-bold'>정책</h2>
+							<h2 className='text-base font-bold text-koreanbots-blue'>정책</h2>
 							<ul className='text-sm'>
 								<li>
 									<Link href='/tos' className='hover:text-gray-300'>
@@ -75,7 +75,7 @@ const Footer: React.FC<FooterProps> = ({ theme, setTheme }) => {
 							</ul>
 						</div>
 						<div className='col-span-1 mb-2'>
-							<h2 className='text-koreanbots-blue text-base font-bold'>커뮤니티</h2>
+							<h2 className='text-base font-bold text-koreanbots-blue'>커뮤니티</h2>
 							<ul className='text-sm'>
 								{/* <li>
 									<Link href='/partners'>
@@ -90,7 +90,7 @@ const Footer: React.FC<FooterProps> = ({ theme, setTheme }) => {
 							</ul>
 						</div>
 						<div className='col-span-2 mb-2'>
-							<h2 className='text-koreanbots-blue text-base font-bold'>기타</h2>
+							<h2 className='text-base font-bold text-koreanbots-blue'>기타</h2>
 							<div className='flex'>
 								<a className='mr-2 hover:text-gray-300'>다크모드</a>
 								<Toggle
diff --git a/components/Forbidden.tsx b/components/Forbidden.tsx
index 72232a8..a860c58 100644
--- a/components/Forbidden.tsx
+++ b/components/Forbidden.tsx
@@ -6,21 +6,23 @@ import { ErrorText } from '@utils/Constants'
 
 const Button = dynamic(() => import('@components/Button'))
 
-const Forbidden:React.FC = () => {
+const Forbidden: React.FC = () => {
 	const router = useRouter()
-	return <>
-		<NextSeo title='권한이 없습니다' />
-		<div className='flex items-center justify-center h-screen select-none'>
-			<div className='container mx-auto px-20 md:text-left text-center'>
-				<h1 className='text-8xl font-semibold'>403</h1>
-				<h2 className='text-2xl font-semibold py-2'>
-					{ErrorText[403]}
-				</h2>
-				<Button onClick={router.back}>뒤로 가기</Button>
-				<p className='text-gray-400 text-sm mt-2'>해당 작업을 수행할 수 있는 권한이 없습니다. 무언가 잘못된 것 같다면 문의해주세요.</p>
+	return (
+		<>
+			<NextSeo title='권한이 없습니다' />
+			<div className='flex h-screen select-none items-center justify-center'>
+				<div className='container mx-auto px-20 text-center md:text-left'>
+					<h1 className='text-8xl font-semibold'>403</h1>
+					<h2 className='py-2 text-2xl font-semibold'>{ErrorText[403]}</h2>
+					<Button onClick={router.back}>뒤로 가기</Button>
+					<p className='mt-2 text-sm text-gray-400'>
+						해당 작업을 수행할 수 있는 권한이 없습니다. 무언가 잘못된 것 같다면 문의해주세요.
+					</p>
+				</div>
 			</div>
-		</div>
-	</>
+		</>
+	)
 }
 
 export default Forbidden
diff --git a/components/Form/CheckBox.tsx b/components/Form/CheckBox.tsx
index f72350b..ef91590 100644
--- a/components/Form/CheckBox.tsx
+++ b/components/Form/CheckBox.tsx
@@ -1,7 +1,14 @@
 import { Field } from 'formik'
 
 const CheckBox: React.FC<CheckBoxProps> = ({ name, ...props }) => {
-	return <Field type='checkbox' name={name} className='form-checkbox text-koreanbots-blue bg-gray-300 h-4 w-4 rounded' {...props} />
+	return (
+		<Field
+			type='checkbox'
+			name={name}
+			className='form-checkbox h-4 w-4 rounded bg-gray-300 text-koreanbots-blue'
+			{...props}
+		/>
+	)
 }
 
 interface CheckBoxProps {
diff --git a/components/Form/Input.tsx b/components/Form/Input.tsx
index fc3980d..527d4ee 100644
--- a/components/Form/Input.tsx
+++ b/components/Form/Input.tsx
@@ -1,12 +1,16 @@
 import { Field } from 'formik'
 
 const Input: React.FC<InputProps> = ({ name, placeholder, ...props }) => {
-	return <Field
-		{...props}
-		name={name}
-		className={'border-grey-light relative px-3 w-full h-10 text-black dark:text-white dark:bg-very-black border dark:border-transparent rounded outline-none'}
-		placeholder={placeholder}
-	/>
+	return (
+		<Field
+			{...props}
+			name={name}
+			className={
+				'border-grey-light relative h-10 w-full rounded border px-3 text-black outline-none dark:border-transparent dark:bg-very-black dark:text-white'
+			}
+			placeholder={placeholder}
+		/>
+	)
 }
 
 interface InputProps {
diff --git a/components/Form/Label.tsx b/components/Form/Label.tsx
index 45187d5..3e230be 100644
--- a/components/Form/Label.tsx
+++ b/components/Form/Label.tsx
@@ -6,28 +6,30 @@ const Label: React.FC<LabelProps> = ({
 	error = null,
 	grid = true,
 	short = false,
-	required = false
+	required = false,
 }) => {
-	return <label
-		className={grid ? 'grid grid-cols-1 xl:grid-cols-4 gap-2 my-4' : 'inline-flex items-center'}
-		htmlFor={For}
-	>
-		{label && (
-			<div className='col-span-1 text-sm'>
-				<h3 className='text-koreanbots-blue text-lg font-bold'>
-					{label}
-					{required && (
-						<span className='align-text-top text-red-500 text-base font-semibold'> *</span>
-					)}
-				</h3>
-				{labelDesc}
+	return (
+		<label
+			className={grid ? 'my-4 grid grid-cols-1 gap-2 xl:grid-cols-4' : 'inline-flex items-center'}
+			htmlFor={For}
+		>
+			{label && (
+				<div className='col-span-1 text-sm'>
+					<h3 className='text-lg font-bold text-koreanbots-blue'>
+						{label}
+						{required && (
+							<span className='align-text-top text-base font-semibold text-red-500'> *</span>
+						)}
+					</h3>
+					{labelDesc}
+				</div>
+			)}
+			<div className={short ? 'col-span-1' : 'col-span-3'}>
+				{children}
+				<div className='mt-1 text-xs font-light text-red-500'>{error}</div>
 			</div>
-		)}
-		<div className={short ? 'col-span-1' : 'col-span-3'}>
-			{children}
-			<div className='mt-1 text-red-500 text-xs font-light'>{error}</div>
-		</div>
-	</label>
+		</label>
+	)
 }
 
 interface LabelProps {
diff --git a/components/Form/Select.tsx b/components/Form/Select.tsx
index a1f4bb0..ff709a4 100644
--- a/components/Form/Select.tsx
+++ b/components/Form/Select.tsx
@@ -1,42 +1,50 @@
 import ReactSelect from 'react-select'
 
-const Select: React.FC<SelectProps> = ({ placeholder, options, handleChange, handleTouch, value }) => {
-	return <ReactSelect
-		styles={{
-			control: provided => {
-				return { ...provided, border: 'none' }
-			},
-			option: provided => {
-				return {
-					...provided,
-					cursor: 'pointer',
-					':hover': {
-						opacity: '0.7',
-					},
-				}
-			},
-			placeholder: provided => {
-				return {
-					...provided,
-					position: 'absolute'
-				}
-			},
-			singleValue: provided => {
-				return {
-					...provided,
-					position: 'absolute'
-				}
-			}
-		}}
-		className='border-grey-light border dark:border-transparent rounded'
-		classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white '
-		placeholder={placeholder || '선택해주세요.'}
-		options={options}
-		onChange={handleChange}
-		onBlur={handleTouch}
-		noOptionsMessage={() => '검색 결과가 없습니다.'}
-		defaultValue={value}
-	/>
+const Select: React.FC<SelectProps> = ({
+	placeholder,
+	options,
+	handleChange,
+	handleTouch,
+	value,
+}) => {
+	return (
+		<ReactSelect
+			styles={{
+				control: (provided) => {
+					return { ...provided, border: 'none' }
+				},
+				option: (provided) => {
+					return {
+						...provided,
+						cursor: 'pointer',
+						':hover': {
+							opacity: '0.7',
+						},
+					}
+				},
+				placeholder: (provided) => {
+					return {
+						...provided,
+						position: 'absolute',
+					}
+				},
+				singleValue: (provided) => {
+					return {
+						...provided,
+						position: 'absolute',
+					}
+				},
+			}}
+			className='border-grey-light rounded border dark:border-transparent'
+			classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white '
+			placeholder={placeholder || '선택해주세요.'}
+			options={options}
+			onChange={handleChange}
+			onBlur={handleTouch}
+			noOptionsMessage={() => '검색 결과가 없습니다.'}
+			defaultValue={value}
+		/>
+	)
 }
 
 interface SelectProps {
diff --git a/components/Form/Selects.tsx b/components/Form/Selects.tsx
index 8ea889c..b75e15c 100644
--- a/components/Form/Selects.tsx
+++ b/components/Form/Selects.tsx
@@ -1,9 +1,5 @@
 import React, { MouseEventHandler } from 'react'
-import ReactSelect, {
-	components,
-	MultiValueProps,
-	MultiValueRemoveProps,
-} from 'react-select'
+import ReactSelect, { components, MultiValueProps, MultiValueRemoveProps } from 'react-select'
 import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core'
 import { restrictToParentElement } from '@dnd-kit/modifiers'
 import {
@@ -20,8 +16,9 @@ const MultiValue = (props: MultiValueProps<Option>) => {
 		e.stopPropagation()
 	}
 	const innerProps = { ...props.innerProps, onMouseDown }
-	const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({ id: props.data.value })
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+		id: props.data.value,
+	})
 	const style = {
 		transform: CSS.Transform.toString(transform),
 		transition,
@@ -46,61 +43,80 @@ const MultiValueRemove = (props: MultiValueRemoveProps<Option>) => {
 	)
 }
 
-const Select: React.FC<SelectProps> = ({ placeholder, options, values, setValues, handleChange, handleTouch }) => {
+const Select: React.FC<SelectProps> = ({
+	placeholder,
+	options,
+	values,
+	setValues,
+	handleChange,
+	handleTouch,
+}) => {
 	const onSortEnd = (event: DragEndEvent) => {
 		const { active, over } = event
-		const newValue = arrayMove(values, values.findIndex(i => i === active.id), values.findIndex(i => i === over.id))
+		const newValue = arrayMove(
+			values,
+			values.findIndex((i) => i === active.id),
+			values.findIndex((i) => i === over.id)
+		)
 		setValues(newValue)
 	}
-	return <DndContext modifiers={[restrictToParentElement]} onDragEnd={onSortEnd} collisionDetection={closestCenter}>
-		<SortableContext
-			items={values}
-			strategy={horizontalListSortingStrategy}>
-			<ReactSelect
-				styles={{
-					placeholder: (provided) => {
-						return { ...provided, position: 'absolute' }
-					},
-					control: (provided) => {
-						return { ...provided, border: 'none' }
-					},
-					option: (provided) => {
-						return { ...provided, cursor: 'pointer', ':hover': {
-							opacity: '0.7'
-						} }
-					}
-				}} 
-				isMulti
-				className='border border-grey-light dark:border-transparent rounded' 
-				classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white cursor-pointer ' 
-				placeholder={placeholder || '선택해주세요.'} 
-				options={options} 
-				onChange={handleChange} 
-				onBlur={handleTouch}
-				noOptionsMessage={() => '검색 결과가 없습니다.'}
-				value={values.map(el => ({ label: el, value: el}))}
-				components={{
-					MultiValue,
-					MultiValueRemove,
-				}}
-				closeMenuOnSelect={false}
-			/>
-		</SortableContext>
-	</DndContext> 
+	return (
+		<DndContext
+			modifiers={[restrictToParentElement]}
+			onDragEnd={onSortEnd}
+			collisionDetection={closestCenter}
+		>
+			<SortableContext items={values} strategy={horizontalListSortingStrategy}>
+				<ReactSelect
+					styles={{
+						placeholder: (provided) => {
+							return { ...provided, position: 'absolute' }
+						},
+						control: (provided) => {
+							return { ...provided, border: 'none' }
+						},
+						option: (provided) => {
+							return {
+								...provided,
+								cursor: 'pointer',
+								':hover': {
+									opacity: '0.7',
+								},
+							}
+						},
+					}}
+					isMulti
+					className='border-grey-light rounded border dark:border-transparent'
+					classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white cursor-pointer '
+					placeholder={placeholder || '선택해주세요.'}
+					options={options}
+					onChange={handleChange}
+					onBlur={handleTouch}
+					noOptionsMessage={() => '검색 결과가 없습니다.'}
+					value={values.map((el) => ({ label: el, value: el }))}
+					components={{
+						MultiValue,
+						MultiValueRemove,
+					}}
+					closeMenuOnSelect={false}
+				/>
+			</SortableContext>
+		</DndContext>
+	)
 }
 
 interface SelectProps {
-  placeholder?: string
-  options: Option[]
+	placeholder?: string
+	options: Option[]
 	values: string[]
 	setValues: (value: string[]) => void
 	handleChange: (value: Option[]) => void
-  handleTouch: () => void
+	handleTouch: () => void
 }
 
 interface Option {
-  value: string
-  label: string
+	value: string
+	label: string
 }
 
-export default Select
\ No newline at end of file
+export default Select
diff --git a/components/Form/TextArea.tsx b/components/Form/TextArea.tsx
index 0667a0b..cdc2899 100644
--- a/components/Form/TextArea.tsx
+++ b/components/Form/TextArea.tsx
@@ -8,64 +8,93 @@ import useOutsideClick from '@utils/useOutsideClick'
 
 import 'emoji-mart/css/emoji-mart.css'
 
-
-
-const TextArea: React.FC<TextAreaProps> = ({ name, placeholder, theme='auto', max, setValue, value }) => {
+const TextArea: React.FC<TextAreaProps> = ({
+	name,
+	placeholder,
+	theme = 'auto',
+	max,
+	setValue,
+	value,
+}) => {
 	const ref = useRef()
-	const [ emojiPickerHidden, setEmojiPickerHidden ] = useState(true)
+	const [emojiPickerHidden, setEmojiPickerHidden] = useState(true)
 	useOutsideClick(ref, () => {
 		setEmojiPickerHidden(true)
 	})
-	
-	return <div className='border border-grey-light dark:border-transparent h-96 text-black dark:bg-very-black dark:text-white rounded px-4 py-3 inline-block relative w-full'>
-		<Field as='textarea' name={name} className='dark:border-transparent text-black dark:bg-very-black dark:text-white w-full relative h-full resize-none outline-none' placeholder={placeholder} />
-		<div ref={ref}>
-			<div className='absolute bottom-12 left-10 z-30'>
-				{
-					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-					// @ts-ignore
-					!emojiPickerHidden && <Picker title='선택해주세요' emoji='sunglasses' set='twitter' enableFrequentEmojiSort	theme={theme} showSkinTones={false} onSelect={(e) => {
-						setEmojiPickerHidden(true)
-						setValue(value + ' ' + ((e as { native: string }).native || e.colons))
-					}} i18n={{
-						search: '검색',
-						notfound: '검색 결과가 없습니다.',
-						categories: {
-							search: '검색 결과',
-							recent: '최근 사용',
-							people: '사람',
-							nature: '자연',
-							foods: '음식',
-							activity: '활동',
-							places: '장소',
-							objects: '사물',
-							symbols: '기호',
-							flags: '국기',
-							custom: '커스텀'
-						}
-					}} custom={KoreanbotsEmoji}/>
-				}
+
+	return (
+		<div className='border-grey-light relative inline-block h-96 w-full rounded border px-4 py-3 text-black dark:border-transparent dark:bg-very-black dark:text-white'>
+			<Field
+				as='textarea'
+				name={name}
+				className='relative h-full w-full resize-none text-black outline-none dark:border-transparent dark:bg-very-black dark:text-white'
+				placeholder={placeholder}
+			/>
+			<div ref={ref}>
+				<div className='absolute bottom-12 left-10 z-30'>
+					{!emojiPickerHidden && (
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
+						<Picker
+							title='선택해주세요'
+							emoji='sunglasses'
+							set='twitter'
+							enableFrequentEmojiSort
+							theme={theme}
+							showSkinTones={false}
+							onSelect={(e) => {
+								setEmojiPickerHidden(true)
+								setValue(value + ' ' + ((e as { native: string }).native || e.colons))
+							}}
+							i18n={{
+								search: '검색',
+								notfound: '검색 결과가 없습니다.',
+								categories: {
+									search: '검색 결과',
+									recent: '최근 사용',
+									people: '사람',
+									nature: '자연',
+									foods: '음식',
+									activity: '활동',
+									places: '장소',
+									objects: '사물',
+									symbols: '기호',
+									flags: '국기',
+									custom: '커스텀',
+								},
+							}}
+							custom={KoreanbotsEmoji}
+						/>
+					)}
+				</div>
+				<div className='absolute bottom-2 left-4 hidden sm:block'>
+					<div
+						className='emoji-selector-button outline-none'
+						onClick={() => setEmojiPickerHidden(false)}
+						onKeyPress={() => setEmojiPickerHidden(false)}
+						role='button'
+						tabIndex={0}
+					/>
+				</div>
+				{max && (
+					<span
+						className={`absolute bottom-2 right-4 ${max < value.length ? ' text-red-400' : ''}`}
+					>
+						{max - value.length}
+					</span>
+				)}
 			</div>
-			<div className='absolute bottom-2 left-4 hidden sm:block'>
-				<div className='emoji-selector-button outline-none' onClick={() => setEmojiPickerHidden(false)} onKeyPress={() => setEmojiPickerHidden(false)} role='button' tabIndex={0} />
-			</div>
-			{
-				max && <span className={`absolute bottom-2 right-4 ${max < value.length ? ' text-red-400' : ''}`}>
-					{max-value.length}
-				</span>
-			}
 		</div>
-	</div>
+	)
 }
 
 interface TextAreaProps {
-  name: string
-  placeholder?: string
-  theme?: 'auto' | 'dark' | 'light'
+	name: string
+	placeholder?: string
+	theme?: 'auto' | 'dark' | 'light'
 	max?: number
-  value: string
-  setValue(value: string): void
+	value: string
+	setValue(value: string): void
 }
 
 export default TextArea
-
diff --git a/components/Hero.tsx b/components/Hero.tsx
index fe778f4..1678600 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,71 +1,154 @@
 import dynamic from 'next/dynamic'
 import { NextSeo } from 'next-seo'
 
-import { botCategories, botCategoryIcon, serverCategories, serverCategoryIcon } from '@utils/Constants'
+import {
+	botCategories,
+	botCategoryIcon,
+	serverCategories,
+	serverCategoryIcon,
+} from '@utils/Constants'
 
-const Container = dynamic(()=> import('@components/Container'))
-const Tag = dynamic(()=> import('@components/Tag'))
-const Search = dynamic(()=> import('@components/Search'))
+const Container = dynamic(() => import('@components/Container'))
+const Tag = dynamic(() => import('@components/Tag'))
+const Search = dynamic(() => import('@components/Search'))
 
-const Hero:React.FC<HeroProps> = ({ type='all', header, description }) => {
+const Hero: React.FC<HeroProps> = ({ type = 'all', header, description }) => {
 	const link = `/${type}/categories`
-	return <>
-		<NextSeo title={header} description={description} openGraph={{
-			title: header,
-			description
-		}} />
-		<div className='dark:bg-discord-black bg-discord-blurple text-gray-100 md:p-0 mb-8'>
-			<Container className='pt-24 pb-16 md:pb-20' ignoreColor>
-				<h1 className='hidden md:block text-left text-3xl font-bold'>
-					{ header && `${header} - `}한국 디스코드 리스트
-				</h1>
-				<h1 className='md:hidden text-center text-3xl font-semibold'>
-					{ header && <span className='text-4xl'>{header}<br/></span>}한국 디스코드 리스트
-				</h1>
-				<p className='text-center sm:text-left text-xl font-base mt-2'>{description || `${type !== 'all' ? '다양한 ' : ''}국내 디스코드${{ all: '의 모든 것을', bots: ' 봇들을', servers: ' 서버들을' }[type]} 한 곳에서 확인하세요!`}</p>
-				<Search />
-				<div className='flex flex-wrap mt-5'>
-					{
-						type === 'all' ? <>
-							<Tag text={
-								<>
-									<i className='fas fa-robot text-koreanbots-blue'/> 봇 리스트
-								</>
-							} dark bigger href='/bots' />
-							<Tag text={
-								<>
-									<i className='fas fa-users text-koreanbots-blue'/> 서버 리스트
-								</>
-							} dark bigger href='/servers' />
-							{
-								botCategories.slice(0, 2).map(t => <Tag key={t} text={<><i className={botCategoryIcon[t]} /> {t} 봇</>} dark bigger href={`/bots/categories/${t}`} />)
-							}
-							
-							{
-								serverCategories.slice(0, 2).map(t => <Tag key={t} text={<><i className={serverCategoryIcon[t]} /> {t} 서버</>} dark bigger href={`/servers/categories/${t}`} />)
-							}
-						</>: <>
-							<Tag key='list' text={<>
-								<i className='fas fa-heart text-red-600'/> 하트 랭킹
-							</>} dark bigger href={type === 'bots' ? '/bots/list/votes' : '/servers/list/votes'} />
-							{ (type === 'bots' ? botCategories : serverCategories).slice(0, 4).map(t=> <Tag key={t} text={<>
-								<i className={(type === 'bots' ? botCategoryIcon : serverCategoryIcon)[t]} /> {t}
-							</>} dark bigger href={`${link}/${t}`} />) }
-							<Tag key='tag' text={<>
-								<i className='fas fa-tag'/> 카테고리 더보기
-							</>} dark bigger href={link} />
-						</>
-					}
-				</div>
-			</Container>
-		</div>
-	</>
+	return (
+		<>
+			<NextSeo
+				title={header}
+				description={description}
+				openGraph={{
+					title: header,
+					description,
+				}}
+			/>
+			<div className='mb-8 bg-discord-blurple text-gray-100 dark:bg-discord-black md:p-0'>
+				<Container className='pb-16 pt-24 md:pb-20' ignoreColor>
+					<h1 className='hidden text-left text-3xl font-bold md:block'>
+						{header && `${header} - `}한국 디스코드 리스트
+					</h1>
+					<h1 className='text-center text-3xl font-semibold md:hidden'>
+						{header && (
+							<span className='text-4xl'>
+								{header}
+								<br />
+							</span>
+						)}
+						한국 디스코드 리스트
+					</h1>
+					<p className='font-base mt-2 text-center text-xl sm:text-left'>
+						{description ||
+							`${type !== 'all' ? '다양한 ' : ''}국내 디스코드${
+								{ all: '의 모든 것을', bots: ' 봇들을', servers: ' 서버들을' }[type]
+							} 한 곳에서 확인하세요!`}
+					</p>
+					<Search />
+					<div className='mt-5 flex flex-wrap'>
+						{type === 'all' ? (
+							<>
+								<Tag
+									text={
+										<>
+											<i className='fas fa-robot text-koreanbots-blue' /> 봇 리스트
+										</>
+									}
+									dark
+									bigger
+									href='/bots'
+								/>
+								<Tag
+									text={
+										<>
+											<i className='fas fa-users text-koreanbots-blue' /> 서버 리스트
+										</>
+									}
+									dark
+									bigger
+									href='/servers'
+								/>
+								{botCategories.slice(0, 2).map((t) => (
+									<Tag
+										key={t}
+										text={
+											<>
+												<i className={botCategoryIcon[t]} /> {t} 봇
+											</>
+										}
+										dark
+										bigger
+										href={`/bots/categories/${t}`}
+									/>
+								))}
+
+								{serverCategories.slice(0, 2).map((t) => (
+									<Tag
+										key={t}
+										text={
+											<>
+												<i className={serverCategoryIcon[t]} /> {t} 서버
+											</>
+										}
+										dark
+										bigger
+										href={`/servers/categories/${t}`}
+									/>
+								))}
+							</>
+						) : (
+							<>
+								<Tag
+									key='list'
+									text={
+										<>
+											<i className='fas fa-heart text-red-600' /> 하트 랭킹
+										</>
+									}
+									dark
+									bigger
+									href={type === 'bots' ? '/bots/list/votes' : '/servers/list/votes'}
+								/>
+								{(type === 'bots' ? botCategories : serverCategories).slice(0, 4).map((t) => (
+									<Tag
+										key={t}
+										text={
+											<>
+												<i
+													className={(type === 'bots' ? botCategoryIcon : serverCategoryIcon)[t]}
+												/>{' '}
+												{t}
+											</>
+										}
+										dark
+										bigger
+										href={`${link}/${t}`}
+									/>
+								))}
+								<Tag
+									key='tag'
+									text={
+										<>
+											<i className='fas fa-tag' /> 카테고리 더보기
+										</>
+									}
+									dark
+									bigger
+									href={link}
+								/>
+							</>
+						)}
+					</div>
+				</Container>
+			</div>
+		</>
+	)
 }
 
 interface HeroProps {
 	type?: 'all' | 'bots' | 'servers'
-  header?: string
-  description?: string
+	header?: string
+	description?: string
 }
 
-export default Hero
\ No newline at end of file
+export default Hero
diff --git a/components/Image.tsx b/components/Image.tsx
index e7988b8..cb58223 100644
--- a/components/Image.tsx
+++ b/components/Image.tsx
@@ -2,45 +2,46 @@ import { SyntheticEvent, useEffect, useState } from 'react'
 import { supportsWebP } from '@utils/Tools'
 import Logger from '@utils/Logger'
 
-const BaseImage: React.FC<ImageProps> = props => {
+const BaseImage: React.FC<ImageProps> = (props) => {
 	const fallback = '/img/default.png'
-	const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>()
-	
-	useEffect(()=> {
+	const [webpUnavailable, setWebpUnavailable] = useState<boolean>()
+
+	useEffect(() => {
 		setWebpUnavailable(localStorage.webp === 'false')
 	}, [])
-	
-	return <img
-		alt={props.alt ?? 'Image'}
-		loading='lazy'
-		className={props.className}
-		src={
-			webpUnavailable && props.fallbackSrc || props.src
-		}
-		onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> {
-			if(webpUnavailable) {
-				(e.target as ImageTarget).onerror = (event) => {
-					// All Fails
-					(event.target as ImageTarget).onerror = () => { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
-					(event.target as ImageTarget).src = fallback
-					
+
+	return (
+		<img
+			alt={props.alt ?? 'Image'}
+			loading='lazy'
+			className={props.className}
+			src={(webpUnavailable && props.fallbackSrc) || props.src}
+			onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>) => {
+				if (webpUnavailable) {
+					;(e.target as ImageTarget).onerror = (event) => {
+						// All Fails
+						;(event.target as ImageTarget).onerror = () => {
+							Logger.warn('FALLBACK IMAGE LOAD FAIL')
+						}
+						;(event.target as ImageTarget).src = fallback
+					}
+				} else if (props.fallbackSrc) {
+					;(e.target as ImageTarget).onerror = (event) => {
+						// All Fails
+						;(event.target as ImageTarget).onerror = () => {
+							Logger.warn('FALLBACK IMAGE LOAD FAIL')
+						}
+						;(event.target as ImageTarget).src = fallback
+					}
+					// Webp Load Fail
+					;(e.target as ImageTarget).src = props.fallbackSrc
+					if (!supportsWebP()) localStorage.setItem('webp', 'false')
+				} else {
+					;(e.target as ImageTarget).src = fallback
 				}
-			}
-			else if (props.fallbackSrc) {
-				(e.target as ImageTarget).onerror = (event) => {
-					// All Fails
-					(event.target as ImageTarget).onerror = () => { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
-					(event.target as ImageTarget).src = fallback
-				}
-				// Webp Load Fail
-				(e.target as ImageTarget).src = props.fallbackSrc
-				if(!supportsWebP()) localStorage.setItem('webp', 'false')
-			}
-			else {
-				(e.target as ImageTarget).src = fallback
-			}
-		}}
-	/>
+			}}
+		/>
+	)
 }
 
 interface ImageProps {
diff --git a/components/Loader.tsx b/components/Loader.tsx
index 55209a9..fee97f2 100644
--- a/components/Loader.tsx
+++ b/components/Loader.tsx
@@ -3,9 +3,9 @@ const Loader: React.FC<LoaderProps> = ({ text, visible = true }) => {
 		<div
 			className={`${
 				visible ? '' : 'hidden '
-			} w-full h-full fixed block top-0 left-0 bg-gray-500 bg-opacity-75 z-50 dark:text-black`}
+			} fixed left-0 top-0 z-50 block h-full w-full bg-gray-500 bg-opacity-75 dark:text-black`}
 		>
-			<h1 className='relative top-1/2 block mx-auto my-0 text-center text-2xl font-semibold opacity-100'>
+			<h1 className='relative top-1/2 mx-auto my-0 block text-center text-2xl font-semibold opacity-100'>
 				{text}
 			</h1>
 		</div>
diff --git a/components/Login.tsx b/components/Login.tsx
index 4a91f7a..7c5793e 100644
--- a/components/Login.tsx
+++ b/components/Login.tsx
@@ -9,9 +9,7 @@ const Login: React.FC<React.PropsWithChildren> = ({ children }) => {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
 	})
-	return <>
-		{children}
-	</>
+	return <>{children}</>
 }
 
-export default Login
\ No newline at end of file
+export default Login
diff --git a/components/LongButton.tsx b/components/LongButton.tsx
index dc61860..f15caaa 100644
--- a/components/LongButton.tsx
+++ b/components/LongButton.tsx
@@ -1,42 +1,68 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import Link from 'next/link'
 
-const LongButton: React.FC<LongButtonProps> = ({ children, newTab=false, href, onClick, center=false }) => {
-	if(href) {
-		if(newTab)  return <a href={href} rel='noopener noreferrer'
-			target='_blank'>
-			<div className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
+const LongButton: React.FC<LongButtonProps> = ({
+	children,
+	newTab = false,
+	href,
+	onClick,
+	center = false,
+}) => {
+	if (href) {
+		if (newTab)
+			return (
+				<a href={href} rel='noopener noreferrer' target='_blank'>
+					<div
+						className={`${
+							center ? 'justify-center ' : ''
+						}text-base mb-1 flex cursor-pointer rounded bg-little-white px-4 py-4 text-black hover:bg-little-white-hover dark:bg-discord-black dark:text-gray-400 dark:hover:bg-discord-dark-hover`}
+					>
+						{children}
+					</div>
+				</a>
+			)
+		else
+			return (
+				<Link
+					href={href}
+					className={`${
+						center ? 'justify-center ' : ''
+					}text-base mb-1 flex cursor-pointer rounded bg-little-white px-4 py-4 text-black hover:bg-little-white-hover dark:bg-discord-black dark:text-gray-400 dark:hover:bg-discord-dark-hover`}
+				>
+					{children}
+				</Link>
+			)
+	}
+	if (onClick)
+		return (
+			<div
+				onKeyPress={onClick}
+				onClick={onClick}
+				className={`${
+					center ? 'justify-center ' : ''
+				}text-base mb-1 flex cursor-pointer rounded bg-little-white px-4 py-4 text-black hover:bg-little-white-hover dark:bg-discord-black dark:text-gray-400 dark:hover:bg-discord-dark-hover`}
+			>
 				{children}
 			</div>
-		</a>
-		else  return (
-			<Link
-				href={href}
-				className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
-
-				{children}
-
-			</Link>
 		)
-	}
-	if(onClick) return <div onKeyPress={onClick} onClick={onClick} className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
-		{children}
-	</div>
-
-	return <a  className={`${center ? 'justify-center ': '' }text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1`}>
-		{children}
-	</a>
-
-  
 
+	return (
+		<a
+			className={`${
+				center ? 'justify-center ' : ''
+			}text-base mb-1 flex cursor-pointer rounded bg-little-white px-4 py-4 text-black hover:bg-little-white-hover dark:bg-discord-black dark:text-gray-400 dark:hover:bg-discord-dark-hover`}
+		>
+			{children}
+		</a>
+	)
 }
 
 export default LongButton
 
 interface LongButtonProps {
-		newTab?: boolean
-    onClick?: (event: React.KeyboardEvent<HTMLDivElement>|React.MouseEvent<HTMLDivElement>) => void
-    children: string | JSX.Element | JSX.Element[]
-		href?: string
-		center?: boolean
-}
\ No newline at end of file
+	newTab?: boolean
+	onClick?: (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>) => void
+	children: string | JSX.Element | JSX.Element[]
+	href?: string
+	center?: boolean
+}
diff --git a/components/Markdown.tsx b/components/Markdown.tsx
index 6a0f310..8c29799 100644
--- a/components/Markdown.tsx
+++ b/components/Markdown.tsx
@@ -5,7 +5,12 @@ import * as Emoji from 'node-emoji'
 
 import { anchorHeader, customEmoji, twemoji } from '@utils/Tools'
 
-const Markdown: React.FC<MarkdownProps> = ({ text, options={}, allowedTag=[], components={} }) => {
+const Markdown: React.FC<MarkdownProps> = ({
+	text,
+	options = {},
+	allowedTag = [],
+	components = {},
+}) => {
 	return (
 		<div className='markdown-body w-full'>
 			<MarkdownView
@@ -23,10 +28,10 @@ const Markdown: React.FC<MarkdownProps> = ({ text, options={}, allowedTag=[], co
 					tasklists: true,
 					ghCompatibleHeaderId: true,
 					encodeEmails: true,
-					...options
+					...options,
 				}}
 				components={components}
-				sanitizeHtml={html =>
+				sanitizeHtml={(html) =>
 					sanitizeHtml(html, {
 						allowedTags: [
 							'addr',
@@ -98,16 +103,16 @@ const Markdown: React.FC<MarkdownProps> = ({ text, options={}, allowedTag=[], co
 							'svg',
 							'path',
 							'input',
-							...allowedTag
+							...allowedTag,
 						],
 						allowedAttributes: false,
 						allowedClasses: {
 							'*': ['align-middle'],
 							a: ['anchor', 'mr-1'],
 							svg: ['octicon-link'],
-							img: ['emoji', 'special']
+							img: ['emoji', 'special'],
 						},
-						allowedStyles: {}
+						allowedStyles: {},
 					})
 				}
 			/>
diff --git a/components/Message.tsx b/components/Message.tsx
index 86658cf..b89c875 100644
--- a/components/Message.tsx
+++ b/components/Message.tsx
@@ -4,9 +4,9 @@ import Markdown from './Markdown'
 const Message: React.FC<MessageProps> = ({ type, children }) => {
 	return (
 		<div
-			className={`${MessageColor[type]} px-6 py-4 rounded-md text-base mx-auto w-full text-left`}
+			className={`${MessageColor[type]} mx-auto w-full rounded-md px-6 py-4 text-left text-base`}
 		>
-			{ typeof children === 'string' ? <Markdown text={children} /> : children }
+			{typeof children === 'string' ? <Markdown text={children} /> : children}
 		</div>
 	)
 }
diff --git a/components/Modal.tsx b/components/Modal.tsx
index 9bb6691..d418ce6 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -2,7 +2,15 @@ import { ReactNode } from 'react'
 import { Modal as ReactModal } from 'react-responsive-modal'
 import 'react-responsive-modal/styles.css'
 
-const Modal: React.FC<ModalProps> = ({ children, isOpen, onClose, closeIcon=false, dark, header, full=false }) => {
+const Modal: React.FC<ModalProps> = ({
+	children,
+	isOpen,
+	onClose,
+	closeIcon = false,
+	dark,
+	header,
+	full = false,
+}) => {
 	return (
 		<ReactModal
 			open={isOpen}
@@ -12,13 +20,13 @@ const Modal: React.FC<ModalProps> = ({ children, isOpen, onClose, closeIcon=fals
 			showCloseIcon={closeIcon}
 			styles={{
 				closeButton: {
-					color: dark ? 'white' : 'black'
+					color: dark ? 'white' : 'black',
 				},
 				modal: {
 					borderRadius: '10px',
 					background: dark ? '#2C2F33' : '#fbfbfb',
 					color: dark ? 'white' : 'black',
-					width: full ? '90%' : 'inherit'
+					width: full ? '90%' : 'inherit',
 				},
 			}}
 		>
diff --git a/components/NSFW.tsx b/components/NSFW.tsx
index b231852..2ff4dd8 100644
--- a/components/NSFW.tsx
+++ b/components/NSFW.tsx
@@ -4,30 +4,43 @@ const Button = dynamic(() => import('@components/Button'))
 const Container = dynamic(() => import('@components/Container'))
 
 const NSFW: React.FC<NSFWProps> = ({ onClick, onDisableClick }) => {
-	return <Container>
-		<div className='flex items-center h-screen select-none'>
-			<div className='px-10'>
-				<h1 className='text-2xl font-bold flex'>
-					<img draggable='false' alt='⚠' src='https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/26a0.svg' className='emoji mr-2 w-8' />
-          해당 컨텐츠는 만19세 이상의 성인만 열람할 수 있습니다.</h1>
-				<p className='text-lg mb-3'>계속하시겠습니까?</p>
-				<Button onClick={onClick}>
-					<i className='fas fa-arrow-right' />  계속하기
-				</Button>
-				<div className='mt-1'>
-					<button className='text-blue-500 hover:text-blue-600' onClick={() => {
-						onClick()
-						onDisableClick()
-					}}>다시 표시하지 않기.</button>
+	return (
+		<Container>
+			<div className='flex h-screen select-none items-center'>
+				<div className='px-10'>
+					<h1 className='flex text-2xl font-bold'>
+						<img
+							draggable='false'
+							alt='⚠'
+							src='https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/26a0.svg'
+							className='emoji mr-2 w-8'
+						/>
+						해당 컨텐츠는 만19세 이상의 성인만 열람할 수 있습니다.
+					</h1>
+					<p className='mb-3 text-lg'>계속하시겠습니까?</p>
+					<Button onClick={onClick}>
+						<i className='fas fa-arrow-right' /> 계속하기
+					</Button>
+					<div className='mt-1'>
+						<button
+							className='text-blue-500 hover:text-blue-600'
+							onClick={() => {
+								onClick()
+								onDisableClick()
+							}}
+						>
+							다시 표시하지 않기.
+						</button>
+					</div>
 				</div>
 			</div>
-		</div>
-	</Container>
+		</Container>
+	)
 }
 
 interface NSFWProps {
-  onClick(): void
-  onDisableClick(): void
+	onClick(): void
+	onDisableClick(): void
 }
 
-export default NSFW
\ No newline at end of file
+export default NSFW
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index b6ef332..d1d74f2 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -20,309 +20,355 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 	const [mobileAddDropdownOpen, setMobileAddDropdownOpen] = useState<boolean>(false)
 	const router = useRouter()
 	const logged = userCache?.id && userCache.version === 2
-	const type: Nullable<'bot'|'server'> = router.pathname.startsWith('/bots') ? 'bot' : router.pathname.startsWith('/servers') ? 'server' : null
+	const type: Nullable<'bot' | 'server'> = router.pathname.startsWith('/bots')
+		? 'bot'
+		: router.pathname.startsWith('/servers')
+		  ? 'server'
+		  : null
 	const dev = router.pathname.startsWith('/developers')
 
 	useEffect(() => {
 		try {
-			if(localStorage.userCache) {
+			if (localStorage.userCache) {
 				setUserCache(token ? JSON.parse(localStorage.userCache) : null)
 			}
-			Fetch<User>('/users/@me').then(data => {
-				if(data.code !== 200) return
-				setUserCache(JSON.parse(localStorage.userCache = JSON.stringify({
-					id: data.data.id,
-					username: data.data.globalName,
-					tag: data.data.tag,
-					version: 2
-				})))
+			Fetch<User>('/users/@me').then((data) => {
+				if (data.code !== 200) return
+				setUserCache(
+					JSON.parse(
+						(localStorage.userCache = JSON.stringify({
+							id: data.data.id,
+							username: data.data.globalName,
+							tag: data.data.tag,
+							version: 2,
+						}))
+					)
+				)
 			})
 		} catch {
 			setUserCache(null)
 		}
-	}, [ token ])
-	return <>
-		<nav className='fixed z-40 top-0 flex flex-wrap items-center justify-between px-2 py-3 w-full text-gray-100 dark:bg-discord-black bg-discord-blurple lg:absolute'>
-			<div className='container flex flex-wrap items-center justify-between mx-auto px-4'>
-				<div className='relative flex justify-between w-full lg:justify-start lg:w-auto'>
-					<Link
-						href={dev ? '/developers' : '/'}
-						className={`${dev ? 'dark:text-koreanbots-blue ' : ''}logofont text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-300 font-semibold leading-relaxed uppercase sm:text-2xl`}>
-
-						{ dev ? <><i className='fas fa-tools mr-1'/> DEVELOPERS</> : 'KOREANLIST'}
-
-					</Link>
-					<button
-						className='block px-3 py-1 dark:text-gray-200 text-xl leading-none bg-transparent border border-solid border-transparent rounded outline-none focus:outline-none cursor-pointer lg:hidden'
-						type='button'
-						onClick={() => setNavbarOpen(!navbarOpen)}
-					>
-						<i className={`fas ${!navbarOpen ? 'fa-bars' : 'fa-times'}`}></i>
-					</button>
-					<ul className='hidden lg:flex flex-col list-none lg:flex-row lg:ml-auto'>
-						<li className='flex items-center'>
-							<Link
-								href={dev ? '/' : '/developers'}
-								className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100'>
-
-								{dev ? '홈' : '개발자'}
-
-							</Link>
-						</li>
-						{
-							type !== 'bot' && <li className='flex items-center'>
+	}, [token])
+	return (
+		<>
+			<nav className='fixed top-0 z-40 flex w-full flex-wrap items-center justify-between bg-discord-blurple px-2 py-3 text-gray-100 dark:bg-discord-black lg:absolute'>
+				<div className='container mx-auto flex flex-wrap items-center justify-between px-4'>
+					<div className='relative flex w-full justify-between lg:w-auto lg:justify-start'>
+						<Link
+							href={dev ? '/developers' : '/'}
+							className={`${
+								dev ? 'dark:text-koreanbots-blue ' : ''
+							}logofont text-large whitespace-no-wrap mr-4 inline-block py-2 font-semibold uppercase leading-relaxed hover:text-gray-300 sm:text-2xl`}
+						>
+							{dev ? (
+								<>
+									<i className='fas fa-tools mr-1' /> DEVELOPERS
+								</>
+							) : (
+								'KOREANLIST'
+							)}
+						</Link>
+						<button
+							className='block cursor-pointer rounded border border-solid border-transparent bg-transparent px-3 py-1 text-xl leading-none outline-none focus:outline-none dark:text-gray-200 lg:hidden'
+							type='button'
+							onClick={() => setNavbarOpen(!navbarOpen)}
+						>
+							<i className={`fas ${!navbarOpen ? 'fa-bars' : 'fa-times'}`}></i>
+						</button>
+						<ul className='hidden list-none flex-col lg:ml-auto lg:flex lg:flex-row'>
+							<li className='flex items-center'>
 								<Link
-									href='/bots'
-									className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100'>
-                                    
-                                        봇 리스트
-                                    
+									href={dev ? '/' : '/developers'}
+									className='flex w-full items-center px-3 py-4 text-sm font-semibold text-gray-700 hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'
+								>
+									{dev ? '홈' : '개발자'}
 								</Link>
 							</li>
-						}
-						{
-							type !== 'server' && <li className='flex items-center'>
+							{type !== 'bot' && (
+								<li className='flex items-center'>
+									<Link
+										href='/bots'
+										className='flex w-full items-center px-3 py-4 text-sm font-semibold text-gray-700 hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'
+									>
+										봇 리스트
+									</Link>
+								</li>
+							)}
+							{type !== 'server' && (
+								<li className='flex items-center'>
+									<Link
+										href='/servers'
+										className='flex w-full items-center px-3 py-4 text-sm font-semibold text-gray-700 hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'
+									>
+										서버 리스트
+									</Link>
+								</li>
+							)}
+							<li className='flex items-center'>
 								<Link
-									href='/servers'
-									className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100'>
-                                    
-                                        서버 리스트
-                                    
+									href='/discord'
+									target='_blank'
+									rel='noreferrer'
+									className='flex w-full items-center px-3 py-4 text-sm font-semibold text-gray-700 hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'
+								>
+									디스코드
 								</Link>
 							</li>
-						}
-						<li className='flex items-center'>
-							<Link
-								href='/discord'
-								target='_blank'
-								rel='noreferrer'
-								className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100'>
-                                
-                                디스코드
-                                
-							</Link>
-						</li>
-						<li className='flex items-center'>
-							<Link
-								href='/about'
-								className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100'>
-                                
-                                    소개
-                                
-							</Link>
-						</li>
-						<li className='flex items-center' onFocus={() => setAddDropdownOpen(true)} onMouseOver={() => setAddDropdownOpen(true)} onMouseOut={() => setAddDropdownOpen(false)} onBlur={() => setAddDropdownOpen(false)}>
-							<span className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer'>
-                                추가하기
-							</span>
-							<div className={`rounded shadow-md absolute mt-11 top-0 w-40 bg-white text-black dark:bg-very-black dark:text-gray-300 text-sm ${addDropdownOpen ? 'block' : 'hidden'}`}>
-								<ul className='relative'>
-									<li>
-										<Link
-											href='/addbot'
-											className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-t'>
-											<i className='fas fa-robot' />봇 추가하기
-										</Link>
-									</li>
-									<li>
-										<Link
-											href='/addserver'
-											className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-b'>
-											<i className='fas fa-users' />서버 추가하기
-										</Link>
-									</li>
-								</ul>
-							</div>
-						</li>
-					</ul>
-				</div>
-				<div className='hidden grow items-center bg-white lg:flex lg:bg-transparent lg:shadow-none'>
-					<ul className='flex flex-col list-none lg:flex-row lg:ml-auto'>
-						<li className='flex items-center outline-none' onFocus={() => setDropdownOpen(true)} onMouseOver={() => setDropdownOpen(true)} onMouseOut={() => setDropdownOpen(false)} onBlur={() => setDropdownOpen(false)}>
-							{
-								logged ? 
+							<li className='flex items-center'>
+								<Link
+									href='/about'
+									className='flex w-full items-center px-3 py-4 text-sm font-semibold text-gray-700 hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'
+								>
+									소개
+								</Link>
+							</li>
+							<li
+								className='flex items-center'
+								onFocus={() => setAddDropdownOpen(true)}
+								onMouseOver={() => setAddDropdownOpen(true)}
+								onMouseOut={() => setAddDropdownOpen(false)}
+								onBlur={() => setAddDropdownOpen(false)}
+							>
+								<span className='flex w-full cursor-pointer items-center px-3 py-4 text-sm font-semibold text-gray-700 hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'>
+									추가하기
+								</span>
+								<div
+									className={`absolute top-0 mt-11 w-40 rounded bg-white text-sm text-black shadow-md dark:bg-very-black dark:text-gray-300 ${
+										addDropdownOpen ? 'block' : 'hidden'
+									}`}
+								>
+									<ul className='relative'>
+										<li>
+											<Link
+												href='/addbot'
+												className='block rounded-t px-4 py-2 hover:bg-gray-100 dark:hover:bg-discord-dark-hover'
+											>
+												<i className='fas fa-robot' />봇 추가하기
+											</Link>
+										</li>
+										<li>
+											<Link
+												href='/addserver'
+												className='block rounded-b px-4 py-2 hover:bg-gray-100 dark:hover:bg-discord-dark-hover'
+											>
+												<i className='fas fa-users' />
+												서버 추가하기
+											</Link>
+										</li>
+									</ul>
+								</div>
+							</li>
+						</ul>
+					</div>
+					<div className='hidden grow items-center bg-white lg:flex lg:bg-transparent lg:shadow-none'>
+						<ul className='flex list-none flex-col lg:ml-auto lg:flex-row'>
+							<li
+								className='flex items-center outline-none'
+								onFocus={() => setDropdownOpen(true)}
+								onMouseOver={() => setDropdownOpen(true)}
+								onMouseOut={() => setDropdownOpen(false)}
+								onBlur={() => setDropdownOpen(false)}
+							>
+								{logged ? (
 									<>
-										<a 
-											className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer'>
-											<DiscordAvatar userID={userCache.id} className='w-8 h-8 rounded-full mr-1.5' size={128}/>
-											{userCache.username} <i className='ml-2 fas fa-sort-down' /> 
+										<a className='flex w-full cursor-pointer items-center px-3 py-4 text-sm font-semibold text-gray-700 hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'>
+											<DiscordAvatar
+												userID={userCache.id}
+												className='mr-1.5 h-8 w-8 rounded-full'
+												size={128}
+											/>
+											{userCache.username} <i className='fas fa-sort-down ml-2' />
 										</a>
-										<div className={`rounded shadow-md absolute mt-14 top-0 w-48 bg-white text-black dark:bg-very-black dark:text-gray-300 text-sm ${dropdownOpen ? 'block' : 'hidden'}`}>
+										<div
+											className={`absolute top-0 mt-14 w-48 rounded bg-white text-sm text-black shadow-md dark:bg-very-black dark:text-gray-300 ${
+												dropdownOpen ? 'block' : 'hidden'
+											}`}
+										>
 											<ul className='relative'>
 												<li>
 													<Link
 														href={`/users/${userCache.id}`}
-														className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-t'>
-														<i className='fas fa-user' />프로필
+														className='block rounded-t px-4 py-2 hover:bg-gray-100 dark:hover:bg-discord-dark-hover'
+													>
+														<i className='fas fa-user' />
+														프로필
 													</Link>
 												</li>
 												<li>
 													<Link
 														href='/panel'
-														className='px-4 py-2 block hover:bg-gray-100 dark:hover:bg-discord-dark-hover'>
-														<i className='fas fa-cogs' />관리패널
+														className='block px-4 py-2 hover:bg-gray-100 dark:hover:bg-discord-dark-hover'
+													>
+														<i className='fas fa-cogs' />
+														관리패널
 													</Link>
 												</li>
 												{/* <li><hr className='border-t mx-2'/></li> */}
 												<li>
-													<a onKeyPress={() => { 
-														localStorage.removeItem('userCache')
-														redirectTo(router, 'logout')
-													}
-													} onClick={() => { 
-														localStorage.removeItem('userCache')
-														redirectTo(router, 'logout')
-													}} className='px-4 py-2 block text-red-500 hover:bg-gray-100 dark:hover:bg-discord-dark-hover rounded-b cursor-pointer'><i className='fas fa-sign-out-alt' /> 로그아웃</a>
+													<a
+														onKeyPress={() => {
+															localStorage.removeItem('userCache')
+															redirectTo(router, 'logout')
+														}}
+														onClick={() => {
+															localStorage.removeItem('userCache')
+															redirectTo(router, 'logout')
+														}}
+														className='block cursor-pointer rounded-b px-4 py-2 text-red-500 hover:bg-gray-100 dark:hover:bg-discord-dark-hover'
+													>
+														<i className='fas fa-sign-out-alt' /> 로그아웃
+													</a>
 												</li>
 											</ul>
 										</div>
-									</> :
-									<a tabIndex={0} onClick={()=> {
-										localStorage.redirectTo = window.location.href
-										setNavbarOpen(false)
-										redirectTo(router, 'login')
-									}} className='lg:hover:text-gray-300 flex items-center px-3 py-4 w-full hover:text-gray-500 text-gray-700 text-sm font-semibold sm:w-auto lg:py-2 lg:text-gray-100 cursor-pointer outline-none'>
-                                        로그인
+									</>
+								) : (
+									<a
+										tabIndex={0}
+										onClick={() => {
+											localStorage.redirectTo = window.location.href
+											setNavbarOpen(false)
+											redirectTo(router, 'login')
+										}}
+										className='flex w-full cursor-pointer items-center px-3 py-4 text-sm font-semibold text-gray-700 outline-none hover:text-gray-500 sm:w-auto lg:py-2 lg:text-gray-100 lg:hover:text-gray-300'
+									>
+										로그인
 									</a>
-							}
-						</li>
-					</ul>
-				</div>
-			</div>
-		</nav>
-		<div
-			className={`z-30 w-full h-full fixed bg-discord-blurple dark:bg-discord-black mt-8 sm:mt-0 lg:hidden overflow-y-scroll lg:scroll-none ${
-				navbarOpen ? 'block' : 'hidden'
-			}`}
-		>
-			<nav className='mt-20'>
-				<Link
-					href={dev ? '/' : '/developers'}
-					onClick={()=> setNavbarOpen(false)}
-					className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-
-					{
-						dev ? <i className='fas fa-home' /> : <i className='fas fa-tools' />
-					}
-					<span className='px-2 font-medium'>	
-						{dev ? '홈' : '개발자'}
-					</span>
-
-				</Link>
-				{
-					type !== 'bot' && <Link
-						href='/bots'
-						onClick={()=> setNavbarOpen(false)}
-						className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-
-						<i className='fas fa-robot' />
-						<span className='px-2 font-medium'>봇 리스트</span>
-
-					</Link>
-				}
-				{
-					type !== 'server' && <Link
-						href='/servers'
-						onClick={()=> setNavbarOpen(false)}
-						className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-
-						<i className='fas fa-users' />
-						<span className='px-2 font-medium'>서버 리스트</span>
-
-					</Link>
-				}
-				<Link
-					href='/discord'
-					target='_blank'
-					rel='noreferrer'
-					onClick={()=> setNavbarOpen(false)}
-					className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-
-					<i className='fab fa-discord' />
-					<span className='px-2 font-medium'>디스코드 서버</span>
-
-				</Link>
-				<Link
-					href='/about'
-					onClick={()=> setNavbarOpen(false)}
-					className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-
-					<i className='fas fa-layer-group' />
-					<span className='px-2 font-medium'>소개</span>
-
-				</Link>
-				<a
-					onClick={()=> {
-						setMobileAddDropdownOpen(!mobileAddDropdownOpen)
-					}}
-					className='flex items-center px-8 py-2 text-gray-100'
-				>
-					<i className='fas fa-plus' />
-					<span className='px-2 font-medium'>추가하기</span>
-				</a>
-				<div className={mobileAddDropdownOpen ? 'px-4 flex flex-col' : 'px-4 hidden'}>
-					<Link
-						href='/addbot'
-						onClick={()=> setNavbarOpen(false)}
-						className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-
-						<i className='fas fa-robot' />
-						<span className='px-2 font-medium'>봇 추가하기</span>
-
-					</Link>
-					<Link
-						href='/addserver'
-						onClick={()=> setNavbarOpen(false)}
-						className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-
-						<i className='fas fa-users' />
-						<span className='px-2 font-medium'>서버 추가하기</span>
-
-					</Link>
+								)}
+							</li>
+						</ul>
+					</div>
 				</div>
 			</nav>
-
-			<div className='my-10'>
-				{
-					logged ? <>
+			<div
+				className={`lg:scroll-none fixed z-30 mt-8 h-full w-full overflow-y-scroll bg-discord-blurple dark:bg-discord-black sm:mt-0 lg:hidden ${
+					navbarOpen ? 'block' : 'hidden'
+				}`}
+			>
+				<nav className='mt-20'>
+					<Link
+						href={dev ? '/' : '/developers'}
+						onClick={() => setNavbarOpen(false)}
+						className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+					>
+						{dev ? <i className='fas fa-home' /> : <i className='fas fa-tools' />}
+						<span className='px-2 font-medium'>{dev ? '홈' : '개발자'}</span>
+					</Link>
+					{type !== 'bot' && (
 						<Link
-							href={`/users/${userCache.id}`}
+							href='/bots'
+							onClick={() => setNavbarOpen(false)}
 							className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
-							onClick={() => setNavbarOpen(!navbarOpen)}>
-
-							<i className='far fa-user' />
-							<span className='px-2 font-medium'>{userCache.username}</span>
-
+						>
+							<i className='fas fa-robot' />
+							<span className='px-2 font-medium'>봇 리스트</span>
 						</Link>
+					)}
+					{type !== 'server' && (
 						<Link
-							href='/panel'
+							href='/servers'
+							onClick={() => setNavbarOpen(false)}
 							className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
-							onClick={() => setNavbarOpen(!navbarOpen)}>
-
-							<i className='fas fa-cogs' />
-							<span className='px-2 font-medium'>관리패널</span>
-
+						>
+							<i className='fas fa-users' />
+							<span className='px-2 font-medium'>서버 리스트</span>
 						</Link>
-						<a onClick={()=> {
-							setNavbarOpen(!navbarOpen)
-							localStorage.removeItem('userCache')
-							redirectTo(router, 'logout')
-						}} className='flex items-center px-8 py-2 text-red-500 hover:text-red-400'>
-							<i className='fas fa-sign-out-alt' />
-							<span className='px-2 font-medium'>로그아웃</span>
-						</a>
-					</> : <a onClick={() => {
-						localStorage.redirectTo = window.location.href
-						setNavbarOpen(false)
-						redirectTo(router, 'login')
-					}} className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
-						<i className='far fa-user' />
-						<span className='px-2 font-medium'>로그인</span>
+					)}
+					<Link
+						href='/discord'
+						target='_blank'
+						rel='noreferrer'
+						onClick={() => setNavbarOpen(false)}
+						className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+					>
+						<i className='fab fa-discord' />
+						<span className='px-2 font-medium'>디스코드 서버</span>
+					</Link>
+					<Link
+						href='/about'
+						onClick={() => setNavbarOpen(false)}
+						className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+					>
+						<i className='fas fa-layer-group' />
+						<span className='px-2 font-medium'>소개</span>
+					</Link>
+					<a
+						onClick={() => {
+							setMobileAddDropdownOpen(!mobileAddDropdownOpen)
+						}}
+						className='flex items-center px-8 py-2 text-gray-100'
+					>
+						<i className='fas fa-plus' />
+						<span className='px-2 font-medium'>추가하기</span>
 					</a>
-				}
+					<div className={mobileAddDropdownOpen ? 'flex flex-col px-4' : 'hidden px-4'}>
+						<Link
+							href='/addbot'
+							onClick={() => setNavbarOpen(false)}
+							className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+						>
+							<i className='fas fa-robot' />
+							<span className='px-2 font-medium'>봇 추가하기</span>
+						</Link>
+						<Link
+							href='/addserver'
+							onClick={() => setNavbarOpen(false)}
+							className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+						>
+							<i className='fas fa-users' />
+							<span className='px-2 font-medium'>서버 추가하기</span>
+						</Link>
+					</div>
+				</nav>
+
+				<div className='my-10'>
+					{logged ? (
+						<>
+							<Link
+								href={`/users/${userCache.id}`}
+								className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+								onClick={() => setNavbarOpen(!navbarOpen)}
+							>
+								<i className='far fa-user' />
+								<span className='px-2 font-medium'>{userCache.username}</span>
+							</Link>
+							<Link
+								href='/panel'
+								className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+								onClick={() => setNavbarOpen(!navbarOpen)}
+							>
+								<i className='fas fa-cogs' />
+								<span className='px-2 font-medium'>관리패널</span>
+							</Link>
+							<a
+								onClick={() => {
+									setNavbarOpen(!navbarOpen)
+									localStorage.removeItem('userCache')
+									redirectTo(router, 'logout')
+								}}
+								className='flex items-center px-8 py-2 text-red-500 hover:text-red-400'
+							>
+								<i className='fas fa-sign-out-alt' />
+								<span className='px-2 font-medium'>로그아웃</span>
+							</a>
+						</>
+					) : (
+						<a
+							onClick={() => {
+								localStorage.redirectTo = window.location.href
+								setNavbarOpen(false)
+								redirectTo(router, 'login')
+							}}
+							className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'
+						>
+							<i className='far fa-user' />
+							<span className='px-2 font-medium'>로그인</span>
+						</a>
+					)}
+				</div>
 			</div>
-		</div>
-	</>
+		</>
+	)
 }
 
 interface NavbarProps {
diff --git a/components/Notice.tsx b/components/Notice.tsx
index ebab665..037f8ef 100644
--- a/components/Notice.tsx
+++ b/components/Notice.tsx
@@ -1,6 +1,6 @@
 const Notice: React.FC<NoticeProps> = ({ header, desc }) => {
 	return (
-		<div className='mx-auto my-auto px-10 py-48 h-screen text-center'>
+		<div className='mx-auto my-auto h-screen px-10 py-48 text-center'>
 			<h1 className='text-4xl font-bold'>KOREANBOTS</h1>
 			<br />
 			<div>
diff --git a/components/Owner.tsx b/components/Owner.tsx
index 3d2efb8..4f81475 100644
--- a/components/Owner.tsx
+++ b/components/Owner.tsx
@@ -1,21 +1,23 @@
 import Link from 'next/link'
 import DiscordAvatar from '@components/DiscordAvatar'
 
-const Owner: React.FC<OwnerProps> = ({ id, globalName, username, tag, crown=false }) => {
+const Owner: React.FC<OwnerProps> = ({ id, globalName, username, tag, crown = false }) => {
 	return (
-		(<Link
+		<Link
 			href={`/users/${id}`}
-			className='dark:hover:bg-discord-dark-hover flex mb-1 px-4 py-4 text-black dark:text-gray-400 text-base dark:bg-discord-black bg-little-white hover:bg-little-white-hover rounded cursor-pointer'>
-
-			<div className='relative shrink-0 mr-3 mt-1 w-8 h-8 rounded-full shadow-inner overflow-hidden'>
-				<DiscordAvatar userID={id} className='z-negative absolute inset-0 w-full h-full' />
+			className='mb-1 flex cursor-pointer rounded bg-little-white px-4 py-4 text-base text-black hover:bg-little-white-hover dark:bg-discord-black dark:text-gray-400 dark:hover:bg-discord-dark-hover'
+		>
+			<div className='relative mr-3 mt-1 h-8 w-8 shrink-0 overflow-hidden rounded-full shadow-inner'>
+				<DiscordAvatar userID={id} className='z-negative absolute inset-0 h-full w-full' />
 			</div>
-			<div className='flex-1 w-0 leading-snug'>
-				<h4 className='whitespace-nowrap truncate'>{ crown && <i className='fas fa-crown text-amber-300 text-xs' /> }{tag === '0' ? globalName : username}</h4>
-				<span className='text-gray-600 text-sm'>{tag === '0' ? '@' + username : '#' + tag}</span>
+			<div className='w-0 flex-1 leading-snug'>
+				<h4 className='truncate whitespace-nowrap'>
+					{crown && <i className='fas fa-crown text-xs text-amber-300' />}
+					{tag === '0' ? globalName : username}
+				</h4>
+				<span className='text-sm text-gray-600'>{tag === '0' ? '@' + username : '#' + tag}</span>
 			</div>
-
-		</Link>)
+		</Link>
 	)
 }
 
diff --git a/components/Paginator.tsx b/components/Paginator.tsx
index 9beceb3..8730c1f 100644
--- a/components/Paginator.tsx
+++ b/components/Paginator.tsx
@@ -1,5 +1,10 @@
 import Link from 'next/link'
-const Paginator: React.FC<PaginatorProps> = ({ currentPage, totalPage, pathname, searchParams }) => {
+const Paginator: React.FC<PaginatorProps> = ({
+	currentPage,
+	totalPage,
+	pathname,
+	searchParams,
+}) => {
 	let pages = []
 	if (currentPage < 4)
 		pages = [
@@ -25,7 +30,7 @@ const Paginator: React.FC<PaginatorProps> = ({ currentPage, totalPage, pathname,
 			currentPage + 1 > totalPage ? null : currentPage + 1,
 			currentPage + 2 > totalPage ? null : currentPage + 2,
 		]
-	pages = pages.filter(el => el)
+	pages = pages.filter((el) => el)
 	return (
 		<div className='flex flex-col items-center justify-center py-4 text-center'>
 			<div className='flex'>
@@ -33,41 +38,38 @@ const Paginator: React.FC<PaginatorProps> = ({ currentPage, totalPage, pathname,
 					href={{ pathname, hash: 'list', query: { ...searchParams, page: currentPage - 1 } }}
 					className={`${
 						currentPage === 1 ? 'invisible' : ''
-					} h-12 w-12 mr-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
-
+					} mr-1 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-center transition duration-150 ease-in hover:bg-gray-300 dark:bg-discord-black dark:hover:bg-discord-dark-hover`}
+				>
 					<i className='fas fa-chevron-left'></i>
-
 				</Link>
 				{pages.map((el, i) => (
-					(<Link
+					<Link
 						key={i}
 						href={{ pathname, hash: 'list', query: { ...searchParams, page: el } }}
-						className={`w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${
+						className={`flex w-12 cursor-pointer items-center justify-center leading-5 transition duration-150 ease-in ${
 							i === 0 && i === pages.length - 1
 								? 'rounded-full'
 								: i === 0
-									? 'rounded-l-full'
-									: i === pages.length - 1
-										? 'rounded-r-full'
-										: ''
+								  ? 'rounded-l-full'
+								  : i === pages.length - 1
+								    ? 'rounded-r-full'
+								    : ''
 						} ${
 							currentPage === el
 								? 'bg-gray-300 dark:bg-discord-dark-hover'
-								: 'bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover'
-						}`}>
-
+								: 'bg-gray-200 hover:bg-gray-300 dark:bg-discord-black dark:hover:bg-discord-dark-hover'
+						}`}
+					>
 						{el}
-
-					</Link>)
+					</Link>
 				))}
 				<Link
 					href={{ pathname, hash: 'list', query: { ...searchParams, page: currentPage + 1 } }}
 					className={`${
 						currentPage === totalPage ? 'invisible' : ''
-					} h-12 w-12 ml-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-300 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
-
+					} ml-1 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-center transition duration-150 ease-in hover:bg-gray-300 dark:bg-discord-black dark:hover:bg-discord-dark-hover`}
+				>
 					<i className='fas fa-chevron-right'></i>
-
 				</Link>
 			</div>
 		</div>
@@ -78,7 +80,7 @@ interface PaginatorProps {
 	pathname: string
 	currentPage: number
 	totalPage: number
-	searchParams?: Record<string, string|string[]>
+	searchParams?: Record<string, string | string[]>
 }
 
 export default Paginator
diff --git a/components/PlatformDisplay.tsx b/components/PlatformDisplay.tsx
index 6dc9cf1..0734b35 100644
--- a/components/PlatformDisplay.tsx
+++ b/components/PlatformDisplay.tsx
@@ -1,13 +1,16 @@
 import { ReactNode } from 'react'
 
-const PlatformDisplay: React.FC<PlatformDisplayProps> = ({ osx, children }:PlatformDisplayProps) => {
+const PlatformDisplay: React.FC<PlatformDisplayProps> = ({
+	osx,
+	children,
+}: PlatformDisplayProps) => {
 	const isOSX = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
 	return <>{isOSX ? osx ?? children : children}</>
 }
 
 interface PlatformDisplayProps {
-  osx?: ReactNode
-  children: ReactNode
+	osx?: ReactNode
+	children: ReactNode
 }
 
-export default PlatformDisplay
\ No newline at end of file
+export default PlatformDisplay
diff --git a/components/Redirect.tsx b/components/Redirect.tsx
index f114511..9003b08 100644
--- a/components/Redirect.tsx
+++ b/components/Redirect.tsx
@@ -6,26 +6,28 @@ import { redirectTo } from '@utils/Tools'
 
 const Container = dynamic(() => import('@components/Container'))
 
-const Redirect: React.FC<RedirectProps> = ({ to, text=true, children }) => {
+const Redirect: React.FC<RedirectProps> = ({ to, text = true, children }) => {
 	const router = useRouter()
-	if(!to) throw new Error('No Link')
+	if (!to) throw new Error('No Link')
 	useEffect(() => {
 		redirectTo(router, to)
 	})
-	if(children) return <>
-		{children}
-	</>
-	return <Container paddingTop>
-		<div>
-			<a href={to} className='text-blue-400'>{text && '자동으로 리다이렉트되지 않는다면 클릭하세요.'}</a>
-		</div>
-	</Container>
+	if (children) return <>{children}</>
+	return (
+		<Container paddingTop>
+			<div>
+				<a href={to} className='text-blue-400'>
+					{text && '자동으로 리다이렉트되지 않는다면 클릭하세요.'}
+				</a>
+			</div>
+		</Container>
+	)
 }
 
 interface RedirectProps {
-  to: string
+	to: string
 	text?: boolean
 	children?: ReactNode
 }
 
-export default Redirect
\ No newline at end of file
+export default Redirect
diff --git a/components/ReportTemplate.tsx b/components/ReportTemplate.tsx
index f4f9853..73cf26f 100644
--- a/components/ReportTemplate.tsx
+++ b/components/ReportTemplate.tsx
@@ -5,74 +5,123 @@ import { FormikErrors, FormikTouched } from 'formik'
 const Button = dynamic(() => import('@components/Button'))
 const TextArea = dynamic(() => import('@components/Form/TextArea'))
 
-export const Check: FC<{ checked: boolean, text: string }> = ({ checked, text }) => <>
-	{checked && <i className='text-emerald-400 fas fa-check-circle mr-1' />}
-	{text}
-</>
+export const Check: FC<{ checked: boolean; text: string }> = ({ checked, text }) => (
+	<>
+		{checked && <i className='fas fa-check-circle mr-1 text-emerald-400' />}
+		{text}
+	</>
+)
 
-export const SubmitButton: FC = () => <div className='text-right'>
-	<Button type='submit'>제출</Button>
-</div>
+export const SubmitButton: FC = () => (
+	<div className='text-right'>
+		<Button type='submit'>제출</Button>
+	</div>
+)
 
-export const TextField: FC<ReportTemplateProps> = ({ values, errors, touched, setFieldValue }) => <>
-	<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' value={values.description} setValue={(value) => setFieldValue('description', value)} />
-	<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
-	<SubmitButton />
-</>
+export const TextField: FC<ReportTemplateProps> = ({ values, errors, touched, setFieldValue }) => (
+	<>
+		<TextArea
+			name='description'
+			placeholder='최대한 자세하게 설명해주세요!'
+			value={values.description}
+			setValue={(value) => setFieldValue('description', value)}
+		/>
+		<div className='mt-1 text-xs font-light text-red-500'>
+			{errors.description && touched.description ? errors.description : null}
+		</div>
+		<SubmitButton />
+	</>
+)
 
 export const DMCA: FC<ReportTemplateProps> = ({ values, errors, touched, setFieldValue }) => {
-	const [ isOwner, setOwner ] = useState(null)
-	const [ contacted, setContacted ] = useState(null)
-	return <div>
-		<h3 className='font-bold my-2'>권리자와는 어떤 관계인가요?</h3>
-		<Button onClick={() => setOwner(true)}>
-			<Check checked={isOwner} text='권리자 본인 혹은 대리인입니다.' />
-		</Button>
-		<Button onClick={() => setOwner(false)}>
-			<Check checked={isOwner === false} text='권리자가 아닙니다.' />
-		</Button>
-		{
-			isOwner === true ? <>
-				<h3 className='font-bold my-2'>권리 침해자에게 연락하여 라이선스 위반사항을 고지하셨나요?</h3>
-				<Button onClick={() => setContacted(true)}>
-					<Check checked={contacted} text='최대한 연락을 시도하였지만 개선되지 않았습니다.' />
-				</Button>
-				<Button onClick={() => setContacted(false)}>
-					<Check checked={contacted === false} text='아니요, 아직 연락하지 않았습니다.' />
-				</Button>
-				{
-					contacted ? <div>
-						<h3 className='font-bold mt-2'>설명</h3>
-						<p className='text-gray-400 text-sm mb-1'>반드시 아래 항목들을 포함해야합니다.</p>
-						<ul className='text-gray-400 text-sm mb-1 list-disc list-inside'>
-							<li>권리자 본인임을 증명 (단체 소속인 경우 어떤 자격으로 단체를 대표하여 신고하는지 설명)</li>
-							<li>본인의 권리를 입증 (원본 컨텐츠의 주소, 라이선스 등을 포함)</li>
-						</ul>
-						<p className='text-gray-400 text-sm mb-1'>컨텐츠를 추가로 첨부해야하는 경우 <a className='text-blue-400' target='_blank' rel='noreferrer' href={`mailto:dmca@koreanbots.dev?subject=${encodeURI('[DMCA] 추가 컨텐츠')}&body=${encodeURI('디스코드 태그:')}`}>dmca@koreanbots.dev</a>의 이메일로 첨부해주시고, 해당 이메일로 첨부했음을 아래 설명에 기재해주세요.</p>
-						<TextField values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />
-					</div>
-						: contacted === false ? <>
-							<h2 className='font-bold mt-4 text-xl'>먼저 권리 침해자에게 연락을 시도해주세요.</h2>
-							<p>본인의 권리를 침해하신 분께 먼저 연락을 시도하셔서 위반사항을 고지하시고, 연락이 불가하다면 신고 기능을 이용해주세요.</p>
-						</> : ''
-				}
-			</>
-				: isOwner === false ? <>
-					<h2 className='font-bold mt-4 text-xl'>아쉽지만, 권리자 본인 혹은 대리인만 신고하실 수 있습니다.</h2>
+	const [isOwner, setOwner] = useState(null)
+	const [contacted, setContacted] = useState(null)
+	return (
+		<div>
+			<h3 className='my-2 font-bold'>권리자와는 어떤 관계인가요?</h3>
+			<Button onClick={() => setOwner(true)}>
+				<Check checked={isOwner} text='권리자 본인 혹은 대리인입니다.' />
+			</Button>
+			<Button onClick={() => setOwner(false)}>
+				<Check checked={isOwner === false} text='권리자가 아닙니다.' />
+			</Button>
+			{isOwner === true ? (
+				<>
+					<h3 className='my-2 font-bold'>
+						권리 침해자에게 연락하여 라이선스 위반사항을 고지하셨나요?
+					</h3>
+					<Button onClick={() => setContacted(true)}>
+						<Check checked={contacted} text='최대한 연락을 시도하였지만 개선되지 않았습니다.' />
+					</Button>
+					<Button onClick={() => setContacted(false)}>
+						<Check checked={contacted === false} text='아니요, 아직 연락하지 않았습니다.' />
+					</Button>
+					{contacted ? (
+						<div>
+							<h3 className='mt-2 font-bold'>설명</h3>
+							<p className='mb-1 text-sm text-gray-400'>반드시 아래 항목들을 포함해야합니다.</p>
+							<ul className='mb-1 list-inside list-disc text-sm text-gray-400'>
+								<li>
+									권리자 본인임을 증명 (단체 소속인 경우 어떤 자격으로 단체를 대표하여 신고하는지
+									설명)
+								</li>
+								<li>본인의 권리를 입증 (원본 컨텐츠의 주소, 라이선스 등을 포함)</li>
+							</ul>
+							<p className='mb-1 text-sm text-gray-400'>
+								컨텐츠를 추가로 첨부해야하는 경우{' '}
+								<a
+									className='text-blue-400'
+									target='_blank'
+									rel='noreferrer'
+									href={`mailto:dmca@koreanbots.dev?subject=${encodeURI(
+										'[DMCA] 추가 컨텐츠'
+									)}&body=${encodeURI('디스코드 태그:')}`}
+								>
+									dmca@koreanbots.dev
+								</a>
+								의 이메일로 첨부해주시고, 해당 이메일로 첨부했음을 아래 설명에 기재해주세요.
+							</p>
+							<TextField
+								values={values}
+								errors={errors}
+								touched={touched}
+								setFieldValue={setFieldValue}
+							/>
+						</div>
+					) : contacted === false ? (
+						<>
+							<h2 className='mt-4 text-xl font-bold'>먼저 권리 침해자에게 연락을 시도해주세요.</h2>
+							<p>
+								본인의 권리를 침해하신 분께 먼저 연락을 시도하셔서 위반사항을 고지하시고, 연락이
+								불가하다면 신고 기능을 이용해주세요.
+							</p>
+						</>
+					) : (
+						''
+					)}
+				</>
+			) : isOwner === false ? (
+				<>
+					<h2 className='mt-4 text-xl font-bold'>
+						아쉽지만, 권리자 본인 혹은 대리인만 신고하실 수 있습니다.
+					</h2>
 					<p>권리자 분께 말씀드려, 권리자 본인이 직접 신고하시도록 해주세요!</p>
-				</> : ''
-		}
-	</div>
+				</>
+			) : (
+				''
+			)}
+		</div>
+	)
 }
 
 interface ReportValues {
-  category: string | null
-  description: string
-  _csrf: string
+	category: string | null
+	description: string
+	_csrf: string
 }
 interface ReportTemplateProps {
-  values?: ReportValues
-  errors?: FormikErrors<ReportValues>
-  touched?: FormikTouched<ReportValues>
-  setFieldValue?(field: string, value: unknown): void
-}
\ No newline at end of file
+	values?: ReportValues
+	errors?: FormikErrors<ReportValues>
+	touched?: FormikTouched<ReportValues>
+	setFieldValue?(field: string, value: unknown): void
+}
diff --git a/components/ResponsiveGrid.tsx b/components/ResponsiveGrid.tsx
index 7033534..00b1677 100644
--- a/components/ResponsiveGrid.tsx
+++ b/components/ResponsiveGrid.tsx
@@ -1,7 +1,9 @@
 const ResponsiveGrid: React.FC<React.PropsWithChildren> = ({ children }) => {
-	return <div className='grid gap-x-4 grid-rows-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-10 -mb-10'>
-		{children}
-	</div>
+	return (
+		<div className='-mb-10 mt-10 grid grid-rows-1 gap-x-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+			{children}
+		</div>
+	)
 }
 
-export default ResponsiveGrid
\ No newline at end of file
+export default ResponsiveGrid
diff --git a/components/Search.tsx b/components/Search.tsx
index 1949de8..9ffbb58 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -46,7 +46,7 @@ const Search: React.FC = () => {
 		const res = await Fetch<ListAll>(`/search/all?q=${encodeURIComponent(value)}`, {
 			signal: controller.signal,
 		}).catch((e) => {
-			if(e.name !== 'AbortError') throw e
+			if (e.name !== 'AbortError') throw e
 			else return
 		})
 		setData(res || {})
@@ -54,23 +54,29 @@ const Search: React.FC = () => {
 	}
 
 	const onSubmit = () => {
-		if(query.length < 2) return
-		if(!localStorage.recentSearch) localStorage.recentSearch = '[]'
+		if (query.length < 2) return
+		if (!localStorage.recentSearch) localStorage.recentSearch = '[]'
 		try {
 			const d = JSON.parse(localStorage.recentSearch).reverse()
-			if(d.findIndex(n => n.value === query) !== -1) d.splice(d.findIndex(n => n.value === query), 1)
+			if (d.findIndex((n) => n.value === query) !== -1)
+				d.splice(
+					d.findIndex((n) => n.value === query),
+					1
+				)
 			d.push({
 				value: query,
-				date: Date.now()
+				date: Date.now(),
 			})
 			d.reverse()
 			setRecentSearch(d.slice(0, 10))
 			localStorage.recentSearch = JSON.stringify(d.slice(0, 10))
 		} catch {
-			setRecentSearch([{
-				value: query,
-				date: Date.now()
-			}])
+			setRecentSearch([
+				{
+					value: query,
+					date: Date.now(),
+				},
+			])
 			localStorage.recentSearch = JSON.stringify(recentSearch)
 		} finally {
 			redirectTo(router, `/search/?q=${encodeURIComponent(query)}`)
@@ -79,19 +85,17 @@ const Search: React.FC = () => {
 
 	return (
 		<div onFocus={() => setHidden(false)} ref={ref}>
-			<div
-				className='relative z-10 flex mt-5 w-full text-black dark:text-gray-100 dark:bg-very-black bg-white rounded-lg'
-			>
+			<div className='relative z-10 mt-5 flex w-full rounded-lg bg-white text-black dark:bg-very-black dark:text-gray-100'>
 				<input
 					type='search'
 					maxLength={50}
-					className='grow pr-20 px-7 py-3 h-16 text-xl bg-transparent border-0 border-none outline-none shadow'
+					className='h-16 grow border-0 border-none bg-transparent px-7 py-3 pr-20 text-xl shadow outline-none'
 					placeholder='검색...'
 					value={query}
-					onChange={e => {
+					onChange={(e) => {
 						SearchResults(e.target.value)
 					}}
-					onKeyDown={e => {
+					onKeyDown={(e) => {
 						if (e.key === 'Enter') {
 							onSubmit()
 						}
@@ -101,103 +105,116 @@ const Search: React.FC = () => {
 					className='cusor-pointer absolute right-0 top-0 mr-5 mt-5 outline-none'
 					onClick={onSubmit}
 				>
-					<i className='fas fa-search text-gray-600 hover:text-gray-700 text-2xl' />
+					<i className='fas fa-search text-2xl text-gray-600 hover:text-gray-700' />
 				</button>
 			</div>
 			<div className={`relative ${hidden ? 'hidden' : 'block'} z-50`}>
-				<div className='pin-t pin-l absolute my-2 w-full h-60 text-black dark:text-gray-100 dark:bg-very-black bg-white rounded shadow-md overflow-y-scroll md:h-80'>
+				<div className='pin-t pin-l absolute my-2 h-60 w-full overflow-y-scroll rounded bg-white text-black shadow-md dark:bg-very-black dark:text-gray-100 md:h-80'>
 					<ul>
-						{(data && data.code === 200) ? (
+						{data && data.code === 200 ? (
 							<div className='grid lg:grid-cols-2'>
 								<ul>
 									<li className='px-3 py-3.5 font-bold'>봇</li>
-									{
-										data.data.bots.length === 0 ? 
-											<li className='px-3 py-3.5'>검색 결과가 없습니다.</li> :
-											data.data.bots.map(el => (
-												<Link key={el.id} href={makeBotURL(el)} legacyBehavior>
-													<li className='h-15 flex px-3 py-2 cursor-pointer'>
-														<DiscordAvatar className='mt-1 w-12 h-12' size={128} userID={el.id} />
-														<div className='ml-2'>
-															<h1 className='text-black dark:text-gray-100 text-lg'>{el.name}</h1>
-															<p className='text-gray-400 text-sm'>{el.intro}</p>
-														</div>
-													</li>
-												</Link>
-											))
-									}
-								</ul>
-								<ul>
-									<li className='px-3 py-3.5 font-bold'>서버</li>
-									{
-										data.data.servers.length === 0 ?
-											<li className='px-3 py-3.5'>검색 결과가 없습니다.</li> :
-											data.data.servers.map(el => (
-												<Link key={el.id} href={makeServerURL(el)} legacyBehavior>
-													<li className='h-15 flex px-3 py-2 cursor-pointer'>
-														<ServerIcon className='mt-1 w-12 h-12' size={128} id={el.id} />
-														<div className='ml-2'>
-															<h1 className='text-black dark:text-gray-100 text-lg'>{el.name}</h1>
-															<p className='text-gray-400 text-sm'>{el.intro}</p>
-														</div>
-													</li>
-												</Link>
-											))
-									}
-								</ul>
-							</div>
-						) : loading ? <ul>
-							<li className='px-3 py-3.5'>검색중입니다...</li>
-						</ul> : <ul>
-							{query && data ? (
-								data.message?.includes('문법') ? (
-									<li className='px-3 py-3.5'>
-											검색 문법이 잘못되었습니다.
-										<br />
-										<a
-											className='hover:text-blue-400 text-blue-500'
-											href='https://docs.koreanbots.dev/bots/usage/search'
-											target='_blank'
-											rel='noreferrer'
-										>
-												더 알아보기
-										</a>
-									</li>
-								) : <li className='px-3 py-3.5'>{(data.errors && data.errors[0]) || data.message || '검색중입니다...'}</li>
-							) : query.length === 0 ?	!recentSearch || !Array.isArray(recentSearch) || recentSearch.length === 0? <li className='px-3 py-3.5'>최근 검색 기록이 없습니다.</li>
-								: <>
-									<li className='h-15 px-3 py-2 cursor-pointer font-semibold'>
-											최근 검색어
-										<button className='absolute right-0 pr-10 text-sm text-red-500 hover:opacity-90' onClick={() => {
-											setRecentSearch([])
-											localStorage.recentSearch = '[]'
-										}}>
-												전체 삭제
-										</button>
-									</li>
-									{
-										recentSearch.slice(0, 10).map((el, n) => (
-											<Link
-												key={n}
-												href={`/search?q=${encodeURIComponent(el?.value)}`}
-												legacyBehavior>
-												<li className='h-15 px-3 py-2 cursor-pointer'>
-													<i className='fas fa-history' /> {el?.value}
-													<span className='absolute right-0 pr-10 text-gray-400 text-sm'>
-														{Day(el?.date).format('MM.DD.')}
-													</span>
+									{data.data.bots.length === 0 ? (
+										<li className='px-3 py-3.5'>검색 결과가 없습니다.</li>
+									) : (
+										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} />
+													<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>
+													</div>
 												</li>
 											</Link>
 										))
-									}
-								</> :
-								query.length < 3 ? (
+									)}
+								</ul>
+								<ul>
+									<li className='px-3 py-3.5 font-bold'>서버</li>
+									{data.data.servers.length === 0 ? (
+										<li className='px-3 py-3.5'>검색 결과가 없습니다.</li>
+									) : (
+										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} />
+													<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>
+													</div>
+												</li>
+											</Link>
+										))
+									)}
+								</ul>
+							</div>
+						) : loading ? (
+							<ul>
+								<li className='px-3 py-3.5'>검색중입니다...</li>
+							</ul>
+						) : (
+							<ul>
+								{query && data ? (
+									data.message?.includes('문법') ? (
+										<li className='px-3 py-3.5'>
+											검색 문법이 잘못되었습니다.
+											<br />
+											<a
+												className='text-blue-500 hover:text-blue-400'
+												href='https://docs.koreanbots.dev/bots/usage/search'
+												target='_blank'
+												rel='noreferrer'
+											>
+												더 알아보기
+											</a>
+										</li>
+									) : (
+										<li className='px-3 py-3.5'>
+											{(data.errors && data.errors[0]) || data.message || '검색중입니다...'}
+										</li>
+									)
+								) : query.length === 0 ? (
+									!recentSearch || !Array.isArray(recentSearch) || recentSearch.length === 0 ? (
+										<li className='px-3 py-3.5'>최근 검색 기록이 없습니다.</li>
+									) : (
+										<>
+											<li className='h-15 cursor-pointer px-3 py-2 font-semibold'>
+												최근 검색어
+												<button
+													className='absolute right-0 pr-10 text-sm text-red-500 hover:opacity-90'
+													onClick={() => {
+														setRecentSearch([])
+														localStorage.recentSearch = '[]'
+													}}
+												>
+													전체 삭제
+												</button>
+											</li>
+											{recentSearch.slice(0, 10).map((el, n) => (
+												<Link
+													key={n}
+													href={`/search?q=${encodeURIComponent(el?.value)}`}
+													legacyBehavior
+												>
+													<li className='h-15 cursor-pointer px-3 py-2'>
+														<i className='fas fa-history' /> {el?.value}
+														<span className='absolute right-0 pr-10 text-sm text-gray-400'>
+															{Day(el?.date).format('MM.DD.')}
+														</span>
+													</li>
+												</Link>
+											))}
+										</>
+									)
+								) : query.length < 3 ? (
 									'최소 2글자 이상 입력해주세요.'
 								) : (
 									'검색어를 입력해주세요.'
 								)}
-						</ul>
-						}
+							</ul>
+						)}
 					</ul>
 				</div>
 			</div>
@@ -208,6 +225,6 @@ const Search: React.FC = () => {
 export default Search
 
 interface ListAll {
-	bots: Bot[],
+	bots: Bot[]
 	servers: Server[]
-}
\ No newline at end of file
+}
diff --git a/components/Segment.tsx b/components/Segment.tsx
index c5cc6da..8b50716 100644
--- a/components/Segment.tsx
+++ b/components/Segment.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 const Segment: React.FC<SegmentProps> = ({ children, className = '' }) => {
 	return (
 		<div
-			className={`py-3 px-7 text-black dark:text-white dark:bg-discord-black bg-little-white rounded ${className}`}
+			className={`rounded bg-little-white px-7 py-3 text-black dark:bg-discord-black dark:text-white ${className}`}
 		>
 			{children}
 		</div>
diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index 5292b6d..7557e33 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -10,43 +10,50 @@ const Tag = dynamic(() => import('@components/Tag'))
 const ServerIcon = dynamic(() => import('@components/ServerIcon'))
 
 const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
-	const newServerLink = server.data ? `/addserver/${server.id}` : `${DiscordEnpoints.InviteApplication(DSKR_BOT_ID, {}, 'bot', null, server.id)}&disable_guild_select=true`
+	const newServerLink = server.data
+		? `/addserver/${server.id}`
+		: `${DiscordEnpoints.InviteApplication(
+				DSKR_BOT_ID,
+				{},
+				'bot',
+				null,
+				server.id
+		  )}&disable_guild_select=true`
 	return (
-		<div className='min-w-0 container mb-16 transform hover:-translate-y-1 transition duration-100 ease-in cursor-pointer'>
+		<div className='container mb-16 min-w-0 transform cursor-pointer transition duration-100 ease-in hover:-translate-y-1'>
 			<div className='relative'>
 				<div className='container mx-auto'>
 					<div className='h-full'>
 						<div
-							className='relative mx-auto h-full text-black dark:text-white dark:bg-discord-black bg-little-white rounded-2xl shadow-xl'
+							className='relative mx-auto h-full rounded-2xl bg-little-white text-black shadow-xl dark:bg-discord-black dark:text-white'
 							style={
 								checkServerFlag(server.flags, 'trusted') && server.banner
 									? {
-										background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${server.banner}") center top / cover no-repeat`,
-										color: 'white',
-									}
+											background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${server.banner}") center top / cover no-repeat`,
+											color: 'white',
+									  }
 									: {}
 							}
 						>
-							<Link
-								href={type !== 'add' ? makeServerURL(server) : newServerLink}
-								legacyBehavior>
+							<Link href={type !== 'add' ? makeServerURL(server) : newServerLink} legacyBehavior>
 								<div>
 									<div className='flex flex-col'>
 										<div className='flex'>
-											<div className='w-3/5 flex justify-start'>
+											<div className='flex w-3/5 justify-start'>
 												<ServerIcon
 													size={128}
 													id={server.id}
 													hash={type === 'add' && server.icon}
 													alt='Icon'
-													className='absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white rounded-full'
+													className='absolute -left-2 -top-8 mx-auto h-32 w-32 rounded-full bg-white'
 												/>
 											</div>
-											<div className='grid grid-cols-1 pr-5 pt-5 w-2/5'>
+											<div className='grid w-2/5 grid-cols-1 pr-5 pt-5'>
 												<Tag
 													text={
 														<>
-															<i className='fas fa-heart text-red-600' /> {formatNumber(server.votes)}
+															<i className='fas fa-heart text-red-600' />{' '}
+															{formatNumber(server.votes)}
 														</>
 													}
 													dark
@@ -58,26 +65,38 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 												/>
 											</div>
 										</div>
-										<div className='mt-3 px-4 h-16'>
-											<h2 className={`px-1 text-sm ${server.state !== 'unreachable' ? ' invisible' : ''}`}>
-												<i className='fas fa-ban text-red-600' />정보 갱신 불가
+										<div className='mt-3 h-16 px-4'>
+											<h2
+												className={`px-1 text-sm ${
+													server.state !== 'unreachable' ? ' invisible' : ''
+												}`}
+											>
+												<i className='fas fa-ban text-red-600' />
+												정보 갱신 불가
 											</h2>
-											<h1 className='mb-3 text-left text-xl sm:text-2xl font-bold truncate'>{server.name}</h1>
+											<h1 className='mb-3 truncate text-left text-xl font-bold sm:text-2xl'>
+												{server.name}
+											</h1>
 										</div>
 									</div>
-                                    
-									<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font'>
-										{type === 'add' ?
-											server.data ? '지금 바로 서버를 등록할 수 있습니다.' : '봇을 초대해야 서버를 등록할 수 있습니다.'
-											: server.intro
-										}
+
+									<p className='font mb-10 h-6 px-4 text-left text-sm text-gray-400'>
+										{type === 'add'
+											? server.data
+												? '지금 바로 서버를 등록할 수 있습니다.'
+												: '봇을 초대해야 서버를 등록할 수 있습니다.'
+											: server.intro}
 									</p>
 									<div>
 										<div className='category flex flex-wrap px-2'>
-											{server.category?.slice(0, 3).map(el => (
-												<Tag key={el} text={el} href={`/servers/categories/${el}`} dark />
-											))}{' '}
-											{server.category?.length > 3 && <Tag text={`+${server.category.length - 3}`} dark />}
+											{server.category
+												?.slice(0, 3)
+												.map((el) => (
+													<Tag key={el} text={el} href={`/servers/categories/${el}`} dark />
+												))}{' '}
+											{server.category?.length > 3 && (
+												<Tag text={`+${server.category.length - 3}`} dark />
+											)}
 										</div>
 									</div>
 								</div>
@@ -85,59 +104,55 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 							<Divider />
 							<div className='w-full'>
 								<div className='flex justify-evenly'>
-									{
-										type === 'add' ? 
-											server.data ? <Link
+									{type === 'add' ? (
+										server.data ? (
+											<Link
 												href={newServerLink}
-												className='py-3 w-full text-center text-emerald-500 hover:text-white text-sm font-bold hover:bg-emerald-500 rounded-b-2xl hover:shadow-lg transition duration-100 ease-in'>
-                                                
-                                                    등록하기
-                                                
-											</Link> : <Link
-												href={newServerLink}
-												className='py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple rounded-b-2xl hover:shadow-lg transition duration-100 ease-in'
-												rel='noopener noreferrer'
-												target='_blank'>
-                                                
-                                                봇 초대하기
-                                                
+												className='w-full rounded-b-2xl py-3 text-center text-sm font-bold text-emerald-500 transition duration-100 ease-in hover:bg-emerald-500 hover:text-white hover:shadow-lg'
+											>
+												등록하기
 											</Link>
-											:
-											<>
+										) : (
+											<Link
+												href={newServerLink}
+												className='w-full rounded-b-2xl py-3 text-center text-sm font-bold text-discord-blurple transition duration-100 ease-in hover:bg-discord-blurple hover:text-white hover:shadow-lg'
+												rel='noopener noreferrer'
+												target='_blank'
+											>
+												봇 초대하기
+											</Link>
+										)
+									) : (
+										<>
+											<Link
+												href={makeServerURL(server)}
+												className='w-full rounded-bl-2xl py-3 text-center text-sm font-bold text-koreanbots-blue transition duration-100 ease-in hover:bg-koreanbots-blue hover:text-white hover:shadow-lg'
+											>
+												보기
+											</Link>
+											{type === 'manage' ? (
 												<Link
-													href={makeServerURL(server)}
-													className='py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue rounded-bl-2xl hover:shadow-lg transition duration-100 ease-in'>
-                                                    
-                                            보기
-                                                    
-												</Link>
-												{type === 'manage' ? (
-													<Link
-														href={`/servers/${server.id}/edit`}
-														className='py-3 w-full text-center text-emerald-500 hover:text-white text-sm font-bold hover:bg-emerald-500 rounded-br-2xl hover:shadow-lg transition duration-100 ease-in'>
-                                                        
-                                                관리하기
-                                                        
-													</Link>
-												) : !['ok', 'unreachable'].includes(server.state) ? <a
-													className='py-3 w-full text-center text-discord-blurple text-sm font-bold rounded-br-2xl hover:shadow-lg transition duration-100 ease-in opacity-50 cursor-default select-none'
+													href={`/servers/${server.id}/edit`}
+													className='w-full rounded-br-2xl py-3 text-center text-sm font-bold text-emerald-500 transition duration-100 ease-in hover:bg-emerald-500 hover:text-white hover:shadow-lg'
 												>
-                                                    참가하기
-												</a> : 
-													<a
-														href={
-															makeServerURL(server) + '/join'
-														}
-														rel='noopener noreferrer'
-														target='_blank'
-														className='py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple rounded-br-2xl hover:shadow-lg transition duration-100 ease-in'
-													>
-                                                        참가하기
-													</a>
-												}
-											</>
-                                        
-									}
+													관리하기
+												</Link>
+											) : !['ok', 'unreachable'].includes(server.state) ? (
+												<a className='w-full cursor-default select-none rounded-br-2xl py-3 text-center text-sm font-bold text-discord-blurple opacity-50 transition duration-100 ease-in hover:shadow-lg'>
+													참가하기
+												</a>
+											) : (
+												<a
+													href={makeServerURL(server) + '/join'}
+													rel='noopener noreferrer'
+													target='_blank'
+													className='w-full rounded-br-2xl py-3 text-center text-sm font-bold text-discord-blurple transition duration-100 ease-in hover:bg-discord-blurple hover:text-white hover:shadow-lg'
+												>
+													참가하기
+												</a>
+											)}
+										</>
+									)}
 								</div>
 							</div>
 						</div>
@@ -146,28 +161,26 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 			</div>
 		</div>
 	)
-
 }
 
 interface BotCardProps {
 	type: 'list' | 'manage' | 'add'
 	server: {
-		id: string,
-		name: string,
+		id: string
+		name: string
 		intro?: string
-		desc?: string,
+		desc?: string
 		flags?: number
 		state?: ServerState
-		icon: string | null,
-		banner?: string | null,
-		bg?: string | null,
+		icon: string | null
+		banner?: string | null
+		bg?: string | null
 		vanity?: string | null
 		category?: string[]
 		votes?: number | null
-		members?: number | null,
+		members?: number | null
 		data?: ServerData
-
 	}
 }
 
-export default ServerCard
\ No newline at end of file
+export default ServerCard
diff --git a/components/ServerIcon.tsx b/components/ServerIcon.tsx
index ca23b20..33f3f69 100644
--- a/components/ServerIcon.tsx
+++ b/components/ServerIcon.tsx
@@ -5,13 +5,22 @@ import { DiscordEnpoints, KoreanbotsEndPoints } from '@utils/Constants'
 const Image = dynamic(() => import('@components/Image'))
 
 const ServerIcon: React.FC<ServerIconProps> = ({ id, size, className, alt, hash }) => {
-	return <Image
-		className={className}
-		alt={alt}
-		src={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})}
-	/>
-	
+	return (
+		<Image
+			className={className}
+			alt={alt}
+			src={
+				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 })
+			}
+		/>
+	)
 }
 
 interface ServerIconProps {
@@ -20,7 +29,7 @@ interface ServerIconProps {
 	hash?: string
 	fromDiscord?: boolean
 	className?: string
-	size? : 128 | 256 | 512
+	size?: 128 | 256 | 512
 }
 
 interface ImageEvent extends Event {
diff --git a/components/SubmittedBotCard.tsx b/components/SubmittedBotCard.tsx
index c514e30..eaeae0c 100644
--- a/components/SubmittedBotCard.tsx
+++ b/components/SubmittedBotCard.tsx
@@ -7,23 +7,23 @@ import Link from 'next/link'
 
 const SubmittedBotCard: React.FC<SubmittedBotProps> = ({ href, submit }) => {
 	return (
-		(<Link
+		<Link
 			href={href}
-			className='relative mx-auto px-4 py-5 w-full h-full text-black dark:text-white dark:bg-discord-black bg-little-white rounded-2xl shadow-xl transform hover:-translate-y-1 transition duration-100 ease-in'>
-
+			className='relative mx-auto h-full w-full transform rounded-2xl bg-little-white px-4 py-5 text-black shadow-xl transition duration-100 ease-in hover:-translate-y-1 dark:bg-discord-black dark:text-white'
+		>
 			<div className='h-18'>
 				<div className='flex'>
-					<div className='grow w-full'>
+					<div className='w-full grow'>
 						<h2 className='text-lg'>{submit.id}</h2>
 					</div>
-					<div className='absolute right-0 grid grid-cols-1 px-4 w-2/5 h-0'>
+					<div className='absolute right-0 grid h-0 w-2/5 grid-cols-1 px-4'>
 						<Tag
 							text={
 								<>
 									<i
-										className={`fas fa-circle text-${
-											[Status.offline, Status.online, Status.dnd][submit.state]?.color
-										}`}
+										className={`fas fa-circle text-${[Status.offline, Status.online, Status.dnd][
+											submit.state
+										]?.color}`}
 									/>{' '}
 									{['대기중', '승인됨', '거부됨'][submit.state]}
 								</>
@@ -32,13 +32,12 @@ const SubmittedBotCard: React.FC<SubmittedBotProps> = ({ href, submit }) => {
 						/>
 					</div>
 				</div>
-				<p className='mt-1.5 w-full h-6 text-left text-gray-400 text-sm font-medium truncate'>
+				<p className='mt-1.5 h-6 w-full truncate text-left text-sm font-medium text-gray-400'>
 					{submit.intro.slice(0, 25)}
 					{submit.intro.length > 25 && '...'}
 				</p>
 			</div>
-
-		</Link>)
+		</Link>
 	)
 }
 
diff --git a/components/Tag.tsx b/components/Tag.tsx
index 2673e11..bed849c 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -26,18 +26,18 @@ const Tag: React.FC<LabelProps> = ({
 							? 'bg-discord-blurple text-white'
 							: 'bg-little-white-hover hover:bg-little-white dark:bg-very-black'
 						: github
-							? 'bg-gray-900 text-white hover:bg-gray-700'
-							: 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover'
+						  ? 'bg-gray-900 text-white hover:bg-gray-700'
+						  : 'bg-little-white hover:bg-little-white-hover dark:bg-discord-black'
 				} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
 					circular
 						? `rounded-3xl ${bigger ? 'px-3.5 py-2.5' : 'px-2.5 py-1.5'}`
 						: `rounded ${bigger ? 'px-3 py-2' : 'px-2 py-1'}`
-				} mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`}
+				} mr-1 mb-${marginBottom} transition duration-100 ease-in dark:hover:bg-discord-dark-hover`}
 			>
 				{text}
 			</a>
 		) : (
-			(<Link
+			<Link
 				href={href}
 				className={`${className ?? ''} text-center text-base  ${
 					dark
@@ -45,19 +45,18 @@ const Tag: React.FC<LabelProps> = ({
 							? 'bg-discord-blurple text-white'
 							: 'bg-little-white-hover hover:bg-little-white dark:bg-very-black'
 						: github
-							? 'bg-gray-900 text-white hover:bg-gray-700'
-							: 'bg-little-white dark:bg-discord-black hover:bg-little-white-hover'
+						  ? 'bg-gray-900 text-white hover:bg-gray-700'
+						  : 'bg-little-white hover:bg-little-white-hover dark:bg-discord-black'
 				} ${
 					!blurple && !github ? 'text-black dark:text-gray-400' : 'hover:bg-little-white-hover'
 				} ${
 					circular
 						? `rounded-3xl ${bigger ? 'px-3.5 py-2.5' : 'px-2.5 py-1.5'}`
 						: `rounded ${bigger ? 'px-3 py-2' : 'px-2 py-1'}`
-				} mr-1 mb-${marginBottom} dark:hover:bg-discord-dark-hover transition duration-100 ease-in`}>
-
+				} mr-1 mb-${marginBottom} transition duration-100 ease-in dark:hover:bg-discord-dark-hover`}
+			>
 				{text}
-
-			</Link>)
+			</Link>
 		)
 	) : (
 		<a
@@ -67,17 +66,17 @@ const Tag: React.FC<LabelProps> = ({
 					? blurple
 						? 'font-bg bg-discord-blurple text-white'
 						: github
-							? 'bg-gray-900 text-white hover:bg-gray-700'
-							: `bg-little-white-hover dark:bg-very-black ${
-								props.onClick
-									? 'hover:bg-little-white dark:hover:bg-discord-dark-hover transition duration-100 ease-in'
-									: ''
-							}`
+						  ? 'bg-gray-900 text-white hover:bg-gray-700'
+						  : `bg-little-white-hover dark:bg-very-black ${
+									props.onClick
+										? 'transition duration-100 ease-in hover:bg-little-white dark:hover:bg-discord-dark-hover'
+										: ''
+						    }`
 					: `bg-little-white dark:bg-discord-black ${
-						props.onClick
-							? 'hover:bg-little-white-hover dark:hover:bg-discord-dark-hover transition duration-100 ease-in'
-							: ''
-					}`
+							props.onClick
+								? 'transition duration-100 ease-in hover:bg-little-white-hover dark:hover:bg-discord-dark-hover'
+								: ''
+					  }`
 			} ${!blurple && !github ? 'text-black dark:text-gray-400' : ''} ${
 				circular
 					? `rounded-3xl ${bigger ? 'px-3.5 py-2.5' : 'px-2.5 py-1.5'}`
diff --git a/components/Toggle.tsx b/components/Toggle.tsx
index 13506c4..8a59bdb 100644
--- a/components/Toggle.tsx
+++ b/components/Toggle.tsx
@@ -1,18 +1,18 @@
 const Toggle: React.FC<ToggleProps> = ({ checked, onChange }: ToggleProps) => {
 	return (
 		<button
-			className='relative inline-block align-middle mr-2 w-10 outline-none select-none'
+			className='relative mr-2 inline-block w-10 select-none align-middle outline-none'
 			onClick={onChange}
 			onKeyPress={onChange}
 		>
 			<input
 				type='checkbox'
 				checked={checked}
-				className='absolute checked:right-0 block w-6 h-6 bg-white border-4 border-transparent rounded-full outline-none appearance-none cursor-pointer'
+				className='absolute block h-6 w-6 cursor-pointer appearance-none rounded-full border-4 border-transparent bg-white outline-none checked:right-0'
 				readOnly
 			/>
 			<span
-				className={`block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer ${
+				className={`block h-6 cursor-pointer overflow-hidden rounded-full bg-gray-300 ${
 					checked ? 'bg-koreanbots-blue' : ''
 				}`}
 			></span>
diff --git a/components/Tooltip.tsx b/components/Tooltip.tsx
index 35b76d1..a3ebbfb 100644
--- a/components/Tooltip.tsx
+++ b/components/Tooltip.tsx
@@ -8,15 +8,14 @@ const Tooltip: React.FC<TooltipProps> = ({
 	text,
 }) => {
 	return href ? (
-		(<Link href={href} className='inline'>
-
+		<Link href={href} className='inline'>
 			<div className='relative inline py-3'>
-				<div className='group relative inline-block text-center cursor-pointer'>
+				<div className='group relative inline-block cursor-pointer text-center'>
 					{children}
 					<div
 						className={`opacity-0 ${
 							size === 'small' ? 'w-44' : 'w-60'
-						} bg-black text-white text-center text-xs rounded-lg py-2 px-3 absolute z-10 group-hover:opacity-100 bottom-full -left-4 pointer-events-none`}
+						} pointer-events-none absolute -left-4 bottom-full z-10 rounded-lg bg-black px-3 py-2 text-center text-xs text-white group-hover:opacity-100`}
 					>
 						{text}
 						{direction === 'left' ? (
@@ -31,7 +30,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 							</svg>
 						) : direction === 'center' ? (
 							<svg
-								className='absolute left-0 top-full w-full h-2 text-black'
+								className='absolute left-0 top-full h-2 w-full text-black'
 								x='0px'
 								y='0px'
 								viewBox='0 0 255 255'
@@ -53,17 +52,16 @@ const Tooltip: React.FC<TooltipProps> = ({
 					</div>
 				</div>
 			</div>
-
-		</Link>)
+		</Link>
 	) : (
 		<a className='inline'>
 			<div className='relative inline py-3'>
-				<div className='group relative inline-block text-center cursor-pointer'>
+				<div className='group relative inline-block cursor-pointer text-center'>
 					{children}
 					<div
 						className={`opacity-0 ${
 							size === 'small' ? 'w-44' : 'w-60'
-						} bg-black text-white text-center text-xs rounded-lg py-2 px-3 absolute z-10 group-hover:opacity-100 bottom-full -left-4 pointer-events-none`}
+						} pointer-events-none absolute -left-4 bottom-full z-10 rounded-lg bg-black px-3 py-2 text-center text-xs text-white group-hover:opacity-100`}
 					>
 						{text}
 						{direction === 'left' ? (
@@ -78,7 +76,7 @@ const Tooltip: React.FC<TooltipProps> = ({
 							</svg>
 						) : direction === 'center' ? (
 							<svg
-								className='absolute left-0 top-full w-full h-2 text-black'
+								className='absolute left-0 top-full h-2 w-full text-black'
 								x='0px'
 								y='0px'
 								viewBox='0 0 255 255'
diff --git a/pages/404.tsx b/pages/404.tsx
index c07c415..24495fc 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -3,20 +3,19 @@ import { ErrorText } from '@utils/Constants'
 
 const NotFound: NextPage<{ message?: string }> = ({ message }) => {
 	return (
-		<div
-			className='flex items-center justify-center h-screen select-none text-center'
-		>
+		<div className='flex h-screen select-none items-center justify-center text-center'>
 			<div>
 				<div className='flex flex-row justify-center text-9xl'>
 					4
-					<img alt='robot' src='https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f916.svg' className='w-24 mx-6 md:mx-12 rounded-full' />
+					<img
+						alt='robot'
+						src='https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f916.svg'
+						className='mx-6 w-24 rounded-full md:mx-12'
+					/>
 					4
 				</div>
-				<h2 className='text-2xl font-semibold'>
-					{message || ErrorText[404]}
-				</h2>
+				<h2 className='text-2xl font-semibold'>{message || ErrorText[404]}</h2>
 			</div>
-			
 		</div>
 	)
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 539cc52..1787db2 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -34,9 +34,9 @@ Router.events.on('routeChangeError', NProgress.done)
 ReactGA.initialize('UA-165454387-1')
 
 const KoreanbotsApp = ({ Component, pageProps, err, cookie }: KoreanbotsProps): JSX.Element => {
-	const [ shortcutModal, setShortcutModal ] = useState(false)
-	const [ theme, setTheme ] = useState<Theme>('system')
-	const [ standalone, setStandalone ] = useState(false)
+	const [shortcutModal, setShortcutModal] = useState(false)
+	const [theme, setTheme] = useState<Theme>('system')
+	const [standalone, setStandalone] = useState(false)
 	const router = useRouter()
 
 	useEffect(() => {
@@ -44,7 +44,11 @@ const KoreanbotsApp = ({ Component, pageProps, err, cookie }: KoreanbotsProps):
 			'%c' + 'KOREANBOTS',
 			'color: #3366FF; -webkit-text-stroke: 2px black; font-size: 72px; font-weight: bold;'
 		)
-		Logger.debug(`[BUILD INFO] Tag: ${parseDockerhubTag(process.env.NEXT_PUBLIC_TAG)}, Version: v${Package.version}, Hash: ${process.env.NEXT_PUBLIC_SOURCE_COMMIT}`)
+		Logger.debug(
+			`[BUILD INFO] Tag: ${parseDockerhubTag(process.env.NEXT_PUBLIC_TAG)}, Version: v${
+				Package.version
+			}, Hash: ${process.env.NEXT_PUBLIC_SOURCE_COMMIT}`
+		)
 		console.log(
 			'%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!',
 			'color: #ff0000; font-size: 20px; font-weight: bold;'
@@ -52,127 +56,147 @@ const KoreanbotsApp = ({ Component, pageProps, err, cookie }: KoreanbotsProps):
 		if (!localStorage.theme) {
 			Logger.debug(`[THEME] ${systemTheme().toUpperCase()} THEME DETECTED`)
 			setTheme(systemTheme())
-		}
-		else setTheme(localStorage.theme)
+		} else setTheme(localStorage.theme)
 		setStandalone(handlePWA())
 
 		const script = document.querySelector('script[src*=googlesyndication]')
 
-		if (script) script.addEventListener('error', () => {ReactGA.ga('send', 'event', 'adblock', 'adblock_' + (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i) ? 'mobile' : 'pc'))})
+		if (script)
+			script.addEventListener('error', () => {
+				ReactGA.ga(
+					'send',
+					'event',
+					'adblock',
+					'adblock_' +
+						(navigator.userAgent.match(
+							/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
+						)
+							? 'mobile'
+							: 'pc')
+				)
+			})
 	}, [])
 
-	return <div className={theme}>
-		<DefaultSeo
-			titleTemplate='%s - 한국 디스코드 리스트'
-			defaultTitle={TITLE}
-			description={DESCRIPTION}
-			openGraph={{
-				type: 'website',
-				title: TITLE,
-				url: 'https://koreanbots.dev',
-				site_name: TITLE,
-				description: DESCRIPTION,
-				images: [
-					{
-						url: '/logo.png',
-						width: 300,
-						height: 300,
-						alt: 'Logo'
-					}
-				]
-			}}
-			twitter={{
-				site: '@koreanbots',
-				handle: '@koreanbots',
-				cardType: 'summary'
-			}}
-		/>
-		<Head>
-			{/* META */}
-			<meta charSet='utf-8' />
-			<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
-			<meta name='keywords' content='Korea, Korean, Discord, Bot, 디스코드봇, 한디리' /> 
-			<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
+	return (
+		<div className={theme}>
+			<DefaultSeo
+				titleTemplate='%s - 한국 디스코드 리스트'
+				defaultTitle={TITLE}
+				description={DESCRIPTION}
+				openGraph={{
+					type: 'website',
+					title: TITLE,
+					url: 'https://koreanbots.dev',
+					site_name: TITLE,
+					description: DESCRIPTION,
+					images: [
+						{
+							url: '/logo.png',
+							width: 300,
+							height: 300,
+							alt: 'Logo',
+						},
+					],
+				}}
+				twitter={{
+					site: '@koreanbots',
+					handle: '@koreanbots',
+					cardType: 'summary',
+				}}
+			/>
+			<Head>
+				{/* META */}
+				<meta charSet='utf-8' />
+				<meta httpEquiv='X-UA-Compatible' content='IE=edge' />
+				<meta name='keywords' content='Korea, Korean, Discord, Bot, 디스코드봇, 한디리' />
+				<meta
+					name='viewport'
+					content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'
+				/>
 
-			{/* Android */}
-			<meta name='theme-color' content={THEME_COLOR} />
-			<meta name='mobile-web-app-capable' content='yes' />
-					
-			{/* iOS */}
-			<meta name='apple-mobile-web-app-title' content='Application Title' />
-			<meta name='apple-mobile-web-app-capable' content='yes' />
-			<meta name='apple-mobile-web-app-status-bar-style' content='default' />
-					
-			{/* Windows */}
-			<meta name='msapplication-navbutton-color' content={THEME_COLOR} />
-			<meta name='msapplication-TileColor' content={THEME_COLOR} />
-			<meta name='msapplication-TileImage' content='/static/ms-icon-144x144.png' />
-			<meta name='msapplication-config' content='browserconfig.xml' />
+				{/* Android */}
+				<meta name='theme-color' content={THEME_COLOR} />
+				<meta name='mobile-web-app-capable' content='yes' />
 
-			{/* Pinned Sites */}
-			<meta name='application-name' content={TITLE} />
-			<meta name='msapplication-tooltip' content={DESCRIPTION} />
-			<meta name='msapplication-starturl' content='/' />
+				{/* iOS */}
+				<meta name='apple-mobile-web-app-title' content='Application Title' />
+				<meta name='apple-mobile-web-app-capable' content='yes' />
+				<meta name='apple-mobile-web-app-status-bar-style' content='default' />
 
-			{/* Tap highlighting */}
-			<meta name='msapplication-tap-highlight' content='no' />
+				{/* Windows */}
+				<meta name='msapplication-navbutton-color' content={THEME_COLOR} />
+				<meta name='msapplication-TileColor' content={THEME_COLOR} />
+				<meta name='msapplication-TileImage' content='/static/ms-icon-144x144.png' />
+				<meta name='msapplication-config' content='browserconfig.xml' />
 
-			{/* UC Mobile Browser */}
-			<meta name='full-screen' content='yes' />
-			<meta name='browsermode' content='application' />
+				{/* Pinned Sites */}
+				<meta name='application-name' content={TITLE} />
+				<meta name='msapplication-tooltip' content={DESCRIPTION} />
+				<meta name='msapplication-starturl' content='/' />
 
-			<meta name='nightmode' content='disable' />
-			<meta name='layoutmode' content='fitscreen' />
-			<meta name='imagemode' content='force' />
-			<meta name='screen-orientation' content='portrait' />
-					
-		</Head>
-		<Navbar token={cookie.token} />
-		<div className='iu-is-the-best min-h-screen text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
-			<Component {...pageProps} err={err} theme={theme} setTheme={setTheme} pwa={standalone} />
-		</div>
-		{
-			!(router.pathname.startsWith('/developers')) && <Footer theme={theme} setTheme={setTheme} />
-		}
-		<Modal full isOpen={shortcutModal} onClose={() => setShortcutModal(false)} dark={theme === 'dark'} header='단축키 안내'>
-			<div className='px-3 h-80'>
-				<h3 className='text-md font-semibold'>일반</h3>
-				<ul>
-					<li className='pt-2'>
-						<h4 className='text-gray-500 dark:text-gray-400 text-xs'>단축키 도움말 표시</h4>
-						<kbd>
-							<PlatformDisplay osx='CMD'>
-								Ctrl
-							</PlatformDisplay> 
-						</kbd> <kbd>/</kbd>
-					</li>
-					<li className='pt-2'>
-						<h4 className='text-gray-500 dark:text-gray-400 text-xs'>다크모드 전환</h4>
-						<kbd>
-							<PlatformDisplay osx='CMD'>
-								Ctrl
-							</PlatformDisplay> 
-						</kbd>
-						<kbd>Shift</kbd> <kbd>D</kbd>
-					</li>
-				</ul>
+				{/* Tap highlighting */}
+				<meta name='msapplication-tap-highlight' content='no' />
+
+				{/* UC Mobile Browser */}
+				<meta name='full-screen' content='yes' />
+				<meta name='browsermode' content='application' />
+
+				<meta name='nightmode' content='disable' />
+				<meta name='layoutmode' content='fitscreen' />
+				<meta name='imagemode' content='force' />
+				<meta name='screen-orientation' content='portrait' />
+			</Head>
+			<Navbar token={cookie.token} />
+			<div className='iu-is-the-best min-h-screen bg-white text-black dark:bg-discord-dark dark:text-gray-100'>
+				<Component {...pageProps} err={err} theme={theme} setTheme={setTheme} pwa={standalone} />
 			</div>
-		</Modal>
-		<GlobalHotKeys keyMap={shortcutKeyMap} handlers={{
-			SHORTCUT_HELP: (event) => {
-				event.preventDefault()
-				setShortcutModal(value => !value)
-				return
-			},
-			CHANGE_THEME: (event) => {
-				event.preventDefault()
-				const overwrite = (localStorage.theme || systemTheme()) === 'dark' ? 'light' : 'dark'
-				setTheme(overwrite)
-				localStorage.setItem('theme', overwrite)
-				return false
-			}
-		}} />
-	</div>
+			{!router.pathname.startsWith('/developers') && <Footer theme={theme} setTheme={setTheme} />}
+			<Modal
+				full
+				isOpen={shortcutModal}
+				onClose={() => setShortcutModal(false)}
+				dark={theme === 'dark'}
+				header='단축키 안내'
+			>
+				<div className='h-80 px-3'>
+					<h3 className='text-md font-semibold'>일반</h3>
+					<ul>
+						<li className='pt-2'>
+							<h4 className='text-xs text-gray-500 dark:text-gray-400'>단축키 도움말 표시</h4>
+							<kbd>
+								<PlatformDisplay osx='CMD'>Ctrl</PlatformDisplay>
+							</kbd>{' '}
+							<kbd>/</kbd>
+						</li>
+						<li className='pt-2'>
+							<h4 className='text-xs text-gray-500 dark:text-gray-400'>다크모드 전환</h4>
+							<kbd>
+								<PlatformDisplay osx='CMD'>Ctrl</PlatformDisplay>
+							</kbd>
+							<kbd>Shift</kbd> <kbd>D</kbd>
+						</li>
+					</ul>
+				</div>
+			</Modal>
+			<GlobalHotKeys
+				keyMap={shortcutKeyMap}
+				handlers={{
+					SHORTCUT_HELP: (event) => {
+						event.preventDefault()
+						setShortcutModal((value) => !value)
+						return
+					},
+					CHANGE_THEME: (event) => {
+						event.preventDefault()
+						const overwrite = (localStorage.theme || systemTheme()) === 'dark' ? 'light' : 'dark'
+						setTheme(overwrite)
+						localStorage.setItem('theme', overwrite)
+						return false
+					},
+				}}
+			/>
+		</div>
+	)
 }
 
 KoreanbotsApp.getInitialProps = async (appCtx: AppContext) => {
@@ -180,7 +204,7 @@ KoreanbotsApp.getInitialProps = async (appCtx: AppContext) => {
 	const parsed = parseCookie(appCtx.ctx.req)
 	return {
 		...appProps,
-		cookie: parsed
+		cookie: parsed,
 	}
 }
 
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 0afd026..e07759a 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -13,7 +13,12 @@ class MyDocument extends Document {
 				<Head>
 					{/* LINK */}
 					<link rel='manifest' href='/manifest.json' />
-					<link rel='search' type='application/opensearchdescription+xml' title={TITLE} href='/opensearch.xml' />
+					<link
+						rel='search'
+						type='application/opensearchdescription+xml'
+						title={TITLE}
+						href='/opensearch.xml'
+					/>
 					<link
 						rel='stylesheet'
 						href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.6.0/styles/solarized-dark.min.css'
@@ -21,8 +26,13 @@ class MyDocument extends Document {
 					<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' />
 					<link rel='icon' type='image/png' sizes='96x96' href='/favicon-96x96.png' />
 					<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png' />
-					<link rel='stylesheet' as='style' crossOrigin='anonymous' href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css' />
-					
+					<link
+						rel='stylesheet'
+						as='style'
+						crossOrigin='anonymous'
+						href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css'
+					/>
+
 					{/* iOS */}
 					<link rel='apple-touch-icon' sizes='57x57' href='/static/apple-icon-57x57.png' />
 					<link rel='apple-touch-icon' sizes='60x60' href='/static/apple-icon-60x60.png' />
@@ -35,43 +45,160 @@ class MyDocument extends Document {
 					<link rel='apple-touch-icon' sizes='180x180' href='/static/apple-icon-180x180.png' />
 					<link rel='apple-touch-icon' sizes='256x256' href='/static/apple-icon-256x256.png' />
 					<link rel='apple-touch-icon' sizes='512x512' href='/static/apple-icon-512x512.png' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2048-2732.jpg' media='(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2732-2048.jpg' media='(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1668-2388.jpg' media='(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2388-1668.jpg' media='(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1536-2048.jpg' media='(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2048-1536.jpg' media='(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1668-2224.jpg' media='(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2224-1668.jpg' media='(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1620-2160.jpg' media='(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2160-1620.jpg' media='(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1284-2778.jpg' media='(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2778-1284.jpg' media='(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1170-2532.jpg' media='(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2532-1170.jpg' media='(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1125-2436.jpg' media='(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2436-1125.jpg' media='(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1242-2688.jpg' media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2688-1242.jpg' media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-828-1792.jpg' media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1792-828.jpg' media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1242-2208.jpg' media='(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-2208-1242.jpg' media='(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-750-1334.jpg' media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1334-750.jpg' media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-640-1136.jpg' media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)' />
-					<link rel='apple-touch-startup-image' href='/static/apple-splash-1136-640.jpg' media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)' />
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2048-2732.jpg'
+						media='(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2732-2048.jpg'
+						media='(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1668-2388.jpg'
+						media='(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2388-1668.jpg'
+						media='(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1536-2048.jpg'
+						media='(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2048-1536.jpg'
+						media='(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1668-2224.jpg'
+						media='(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2224-1668.jpg'
+						media='(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1620-2160.jpg'
+						media='(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2160-1620.jpg'
+						media='(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1284-2778.jpg'
+						media='(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2778-1284.jpg'
+						media='(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1170-2532.jpg'
+						media='(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2532-1170.jpg'
+						media='(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1125-2436.jpg'
+						media='(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2436-1125.jpg'
+						media='(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1242-2688.jpg'
+						media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2688-1242.jpg'
+						media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-828-1792.jpg'
+						media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1792-828.jpg'
+						media='(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1242-2208.jpg'
+						media='(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-2208-1242.jpg'
+						media='(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-750-1334.jpg'
+						media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1334-750.jpg'
+						media='(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-640-1136.jpg'
+						media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)'
+					/>
+					<link
+						rel='apple-touch-startup-image'
+						href='/static/apple-splash-1136-640.jpg'
+						media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)'
+					/>
 
 					{/* Android */}
-					<link rel='icon' type='image/png' sizes='192x192'  href='/static/android-icon-192x192.png' />
+					<link
+						rel='icon'
+						type='image/png'
+						sizes='192x192'
+						href='/static/android-icon-192x192.png'
+					/>
 
 					{/* Others */}
 					<link rel='shortcut icon' href='/favicon.ico' />
 
 					{/* SCRIPT */}
 					<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js'></script>
-					<script data-ad-client='ca-pub-4856582423981759' async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
-					<script data-cfasync='false' async src='//www.googletagmanager.com/gtag/js?id=UA-165454387-1'></script>
+					<script
+						data-ad-client='ca-pub-4856582423981759'
+						async
+						src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
+					></script>
+					<script
+						data-cfasync='false'
+						async
+						src='//www.googletagmanager.com/gtag/js?id=UA-165454387-1'
+					></script>
 					<script
 						dangerouslySetInnerHTML={{
 							__html: `
@@ -91,7 +218,7 @@ class MyDocument extends Document {
 						}}
 					/>
 				</Head>
-				<body className='h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white overflow-x-hidden'>
+				<body className='h-full overflow-x-hidden bg-white text-black dark:bg-discord-dark dark:text-gray-100'>
 					<Main />
 					<NextScript />
 				</body>
diff --git a/pages/_error.tsx b/pages/_error.tsx
index 544713a..ca358a2 100644
--- a/pages/_error.tsx
+++ b/pages/_error.tsx
@@ -8,24 +8,35 @@ const Container = dynamic(() => import('@components/Container'))
 
 const MyError: NextPage = () => {
 	return (
-		<div
-			className='flex items-center h-screen select-none px-20'
-		>
+		<div className='flex h-screen select-none items-center px-20'>
 			<Container>
 				<h2 className='text-4xl font-semibold'>{getRandom(ErrorMessage)}</h2>
-				<p className='text-md mt-1'>예상치 못한 오류가 발생하였습니다. 문제가 지속적으로 발생한다면 문의해주세요!</p>
-				<a className='text-sm text-blue-500 hover:text-blue-400' href='https://status.koreanbots.dev' target='_blank' rel='noreferrer'>상태 페이지</a>
+				<p className='text-md mt-1'>
+					예상치 못한 오류가 발생하였습니다. 문제가 지속적으로 발생한다면 문의해주세요!
+				</p>
+				<a
+					className='text-sm text-blue-500 hover:text-blue-400'
+					href='https://status.koreanbots.dev'
+					target='_blank'
+					rel='noreferrer'
+				>
+					상태 페이지
+				</a>
 				<div>
 					<Link
 						href='/discord'
 						target='_blank'
 						rel='noreferrer'
-						className='text-lg hover:opacity-80 cursor-pointer'>
-
+						className='cursor-pointer text-lg hover:opacity-80'
+					>
 						<i className='fab fa-discord' />
-
 					</Link>
-					<a href='https://twitter.com/koreanbots' target='_blank' rel='noreferrer' className='text-lg ml-2 hover:opacity-80 cursor-pointer'>
+					<a
+						href='https://twitter.com/koreanbots'
+						target='_blank'
+						rel='noreferrer'
+						className='ml-2 cursor-pointer text-lg hover:opacity-80'
+					>
 						<i className='fab fa-twitter' />
 					</a>
 				</div>
@@ -34,4 +45,4 @@ const MyError: NextPage = () => {
 	)
 }
 
-export default MyError
\ No newline at end of file
+export default MyError
diff --git a/pages/_offline.tsx b/pages/_offline.tsx
index b459275..d7b77f8 100644
--- a/pages/_offline.tsx
+++ b/pages/_offline.tsx
@@ -6,24 +6,33 @@ const Container = dynamic(() => import('@components/Container'))
 
 const MyError: NextPage = () => {
 	return (
-		<div
-			className='flex items-center h-screen select-none px-20'
-		>
+		<div className='flex h-screen select-none items-center px-20'>
 			<Container>
 				<h2 className='text-4xl font-semibold'>인터넷이 끊어졌나봐요...</h2>
 				<p className='text-md mt-1'>인터넷 연결을 확인하시고 다시 시도 해주세요!</p>
-				<a className='text-sm text-blue-500 hover:text-blue-400' href='https://status.koreanbots.dev' target='_blank' rel='noreferrer'>상태 페이지</a>
+				<a
+					className='text-sm text-blue-500 hover:text-blue-400'
+					href='https://status.koreanbots.dev'
+					target='_blank'
+					rel='noreferrer'
+				>
+					상태 페이지
+				</a>
 				<div>
 					<Link
 						href='/discord'
 						target='_blank'
 						rel='noreferrer'
-						className='text-lg hover:opacity-80 cursor-pointer'>
-
+						className='cursor-pointer text-lg hover:opacity-80'
+					>
 						<i className='fab fa-discord' />
-
 					</Link>
-					<a href='https://twitter.com/koreanbots' target='_blank' rel='noreferrer' className='text-lg ml-2 hover:opacity-80 cursor-pointer'>
+					<a
+						href='https://twitter.com/koreanbots'
+						target='_blank'
+						rel='noreferrer'
+						className='ml-2 cursor-pointer text-lg hover:opacity-80'
+					>
 						<i className='fab fa-twitter' />
 					</a>
 				</div>
@@ -32,4 +41,4 @@ const MyError: NextPage = () => {
 	)
 }
 
-export default MyError
\ No newline at end of file
+export default MyError
diff --git a/pages/about.tsx b/pages/about.tsx
index 17f27e0..1671add 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -9,70 +9,102 @@ import { ThemeColors } from '@utils/Constants'
 
 const Container = dynamic(() => import('@components/Container'))
 
-const About:NextPage = () => {
-	return <div className='pb-10'>
-		<Docs title='소개' header={<h1 className='font-black text-4xl dark:text-koreanbots-blue'>“국내 디스코드의 모든 것을 한 곳에서.”</h1>} subheader='한국 디스코드 리스트에서 자신에게 필요한 디스코드의 모든 것을 찾아보세요!'>
-			<Container>
-				<div className='py-1'>
-					<h1 className='font-bold text-5xl my-5'>소개</h1>
-					<p className='text-lg'><span className='text-koreanbots-blue font-bold'>한국 디스코드 리스트</span>는 본인의 봇과 서버를 직접 등록하고, 유저 분은 봇 또는 서버를 카테고리별로 확인할 수 있는 플랫폼입니다.</p>
-					<p className='text-lg'>자신에게 필요한 디스코드의 모든 것을 찾아보세요!</p>
-					<Divider />
-					<h1 className='font-bold text-5xl my-5'>특징</h1>
-					<div className='grid md:grid-cols-3 gap-12 px-4 pb-5'>
-						<div className='mx-auto font-normal'>
-							<h2 className='text-3xl mb-1 font-bold text-koreanbots-blue'>하트 시스템</h2>
-							<p className='text-base'>마음에 드는 봇이나 서버에 투표하는 하트 시스템으로 유용한 봇 또는 서버가 상단에 노출될 수 있는 기회를 제공합니다.</p>
+const About: NextPage = () => {
+	return (
+		<div className='pb-10'>
+			<Docs
+				title='소개'
+				header={
+					<h1 className='text-4xl font-black dark:text-koreanbots-blue'>
+						“국내 디스코드의 모든 것을 한 곳에서.”
+					</h1>
+				}
+				subheader='한국 디스코드 리스트에서 자신에게 필요한 디스코드의 모든 것을 찾아보세요!'
+			>
+				<Container>
+					<div className='py-1'>
+						<h1 className='my-5 text-5xl font-bold'>소개</h1>
+						<p className='text-lg'>
+							<span className='font-bold text-koreanbots-blue'>한국 디스코드 리스트</span>는 본인의
+							봇과 서버를 직접 등록하고, 유저 분은 봇 또는 서버를 카테고리별로 확인할 수 있는
+							플랫폼입니다.
+						</p>
+						<p className='text-lg'>자신에게 필요한 디스코드의 모든 것을 찾아보세요!</p>
+						<Divider />
+						<h1 className='my-5 text-5xl font-bold'>특징</h1>
+						<div className='grid gap-12 px-4 pb-5 md:grid-cols-3'>
+							<div className='mx-auto font-normal'>
+								<h2 className='mb-1 text-3xl font-bold text-koreanbots-blue'>하트 시스템</h2>
+								<p className='text-base'>
+									마음에 드는 봇이나 서버에 투표하는 하트 시스템으로 유용한 봇 또는 서버가 상단에
+									노출될 수 있는 기회를 제공합니다.
+								</p>
+							</div>
+							<div className='mx-auto font-normal'>
+								<h2 className='mb-1 text-3xl font-bold text-koreanbots-blue'>인증 시스템</h2>
+								<p className='text-base'>
+									봇은 디스코드 봇 인증보다 한 단계 까다로운 기준을 적용하며 서버는 신뢰할 수 있는
+									서버를 정해, 이용자분들에게 신뢰감을 줍니다.
+								</p>
+							</div>
+							<div className='mx-auto font-normal'>
+								<h2 className='mb-1 text-3xl font-bold text-koreanbots-blue'>API 제공</h2>
+								<p className='text-base'>
+									정보부터, 유저 투표 여부 확인, 위젯까지.
+									<br />
+									다양한 API를 제공하여 커스텀할 수 있습니다!
+								</p>
+							</div>
 						</div>
-						<div className='mx-auto font-normal'>
-							<h2 className='text-3xl mb-1 font-bold text-koreanbots-blue'>인증 시스템</h2>
-							<p className='text-base'>봇은 디스코드 봇 인증보다 한 단계 까다로운 기준을 적용하며 서버는 신뢰할 수 있는 서버를 정해, 이용자분들에게 신뢰감을 줍니다.</p>
-						</div>
-						<div className='mx-auto font-normal'>
-							<h2 className='text-3xl mb-1 font-bold text-koreanbots-blue'>API 제공</h2>
-							<p className='text-base'>정보부터, 유저 투표 여부 확인, 위젯까지.<br />다양한 API를 제공하여 커스텀할 수 있습니다!</p>
-						</div>
-					</div>
-					<Divider />
-					<h1 className='font-bold text-5xl my-5'>브랜드</h1>
-					<h2 className='font-semibold text-3xl mb-7'>슬로건</h2>
-					<Segment>
-						<h2 className='font-semibold text-xl py-10 text-center'>
-							<i className='fas fa-quote-left text-xs align-top' />
-                국내 디스코드의 모든 것을 한 곳에서.
-							<i className='fas fa-quote-right text-xs align-bottom' />
-						</h2>
-					</Segment>
-					<Divider className='mt-7' />
-					<h2 className='font-semibold text-3xl my-7'>로고</h2>
-					<Segment>
-						<>
-            로고를 수정하거나, 변경, 왜곡 등 기타 다른 방법으로 로고를 수정하지 말아주세요.
-							<div className='grid md:grid-cols-2 lg:grid-cols-4'>
-								<div>
-									<img src='/logo.png' alt='Logo' />
-									<div className='text-right text-blue-400'>
-										<a href='/logo.png' download='koreanbots.png'>.png</a>
+						<Divider />
+						<h1 className='my-5 text-5xl font-bold'>브랜드</h1>
+						<h2 className='mb-7 text-3xl font-semibold'>슬로건</h2>
+						<Segment>
+							<h2 className='py-10 text-center text-xl font-semibold'>
+								<i className='fas fa-quote-left align-top text-xs' />
+								국내 디스코드의 모든 것을 한 곳에서.
+								<i className='fas fa-quote-right align-bottom text-xs' />
+							</h2>
+						</Segment>
+						<Divider className='mt-7' />
+						<h2 className='my-7 text-3xl font-semibold'>로고</h2>
+						<Segment>
+							<>
+								로고를 수정하거나, 변경, 왜곡 등 기타 다른 방법으로 로고를 수정하지 말아주세요.
+								<div className='grid md:grid-cols-2 lg:grid-cols-4'>
+									<div>
+										<img src='/logo.png' alt='Logo' />
+										<div className='text-right text-blue-400'>
+											<a href='/logo.png' download='koreanbots.png'>
+												.png
+											</a>
+										</div>
 									</div>
 								</div>
-							</div>
-							<h3 className='font-bold text-xl my-1'>폰트</h3>
-							<p className='font-bold text-md my-1'>영문: Uni Sans Heavy | 한글: Gugi</p>
-						</>
-					</Segment>
-					<Divider className='mt-7' />
-					<h2 className='font-semibold text-3xl my-5'>색상</h2>
-					<div className='grid md:grid-cols-2 lg:grid-cols-4 gap-4'>
-						{
-							ThemeColors.map(el => (
-								<ColorCard key={el.color} header={el.name} first={el.rgb} second={el.hex} className={`bg-${el.color} ${el.color.includes('white') ? 'text-black' : 'text-white'}`} />
-							))
-						}
+								<h3 className='my-1 text-xl font-bold'>폰트</h3>
+								<p className='text-md my-1 font-bold'>영문: Uni Sans Heavy | 한글: Gugi</p>
+							</>
+						</Segment>
+						<Divider className='mt-7' />
+						<h2 className='my-5 text-3xl font-semibold'>색상</h2>
+						<div className='grid gap-4 md:grid-cols-2 lg:grid-cols-4'>
+							{ThemeColors.map((el) => (
+								<ColorCard
+									key={el.color}
+									header={el.name}
+									first={el.rgb}
+									second={el.hex}
+									className={`bg-${el.color} ${
+										el.color.includes('white') ? 'text-black' : 'text-white'
+									}`}
+								/>
+							))}
+						</div>
 					</div>
-				</div>
-			</Container>
-		</Docs>
-	</div>
+				</Container>
+			</Docs>
+		</div>
+	)
 }
 
-export default About
\ No newline at end of file
+export default About
diff --git a/pages/addbot.tsx b/pages/addbot.tsx
index 46f0e7a..c13de24 100644
--- a/pages/addbot.tsx
+++ b/pages/addbot.tsx
@@ -31,10 +31,10 @@ const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))
 const Captcha = dynamic(() => import('@components/Captcha'))
 
-const AddBot:NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
-	const [ data, setData ] = useState<ResponseProps<SubmittedBot>>(null)
-	const [ captcha, setCaptcha ] = useState(false)
-	const [ touchedSumbit, setTouched ] = useState(false)
+const AddBot: NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
+	const [data, setData] = useState<ResponseProps<SubmittedBot>>(null)
+	const [captcha, setCaptcha] = useState(false)
+	const [touchedSumbit, setTouched] = useState(false)
 	const captchaRef = useRef<HCaptcha>()
 	const router = useRouter()
 	const initialValues: AddBotSubmit = {
@@ -58,159 +58,334 @@ const AddBot:NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 - 기능
 - 있나요?`,
 		_csrf: csrfToken,
-		_captcha: 'captcha'
+		_captcha: 'captcha',
 	}
 
 	function toLogin() {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
 	}
-	
+
 	async function submitBot(value: AddBotSubmit, token: string) {
-		const res = await Fetch<SubmittedBot>(`/bots/${value.id}`, { method: 'POST', body: JSON.stringify(cleanObject<AddBotSubmit>({ ...value, _captcha: token})) })
+		const res = await Fetch<SubmittedBot>(`/bots/${value.id}`, {
+			method: 'POST',
+			body: JSON.stringify(cleanObject<AddBotSubmit>({ ...value, _captcha: token })),
+		})
 		setData(res)
 	}
 
-	if(!logged) return <Login>
-		<NextSeo title='새로운 봇 추가하기' description='자신의 봇을 한국 디스코드 리스트에 등록하세요.' openGraph={{
-			title:'새로운 봇 추가하기', description: '자신의 봇을 한국 디스코드 리스트에 등록하세요.'
-		}} />
-	</Login>
-	if(data?.data && data.code === 200) {
-		setTimeout(
-			() => redirectTo(router, `/pendingBots/${data.data.id}/${data.data.date}`),
-			1_000
+	if (!logged)
+		return (
+			<Login>
+				<NextSeo
+					title='새로운 봇 추가하기'
+					description='자신의 봇을 한국 디스코드 리스트에 등록하세요.'
+					openGraph={{
+						title: '새로운 봇 추가하기',
+						description: '자신의 봇을 한국 디스코드 리스트에 등록하세요.',
+					}}
+				/>
+			</Login>
 		)
+	if (data?.data && data.code === 200) {
+		setTimeout(() => redirectTo(router, `/pendingBots/${data.data.id}/${data.data.date}`), 1_000)
 	}
 	return (
 		<Container paddingTop className='py-5'>
-			<NextSeo title='새로운 봇 추가하기' description='자신의 봇을 한국 디스코드 리스트에 등록하세요.' openGraph={{
-				title:'새로운 봇 추가하기', description: '자신의 봇을 한국 디스코드 리스트에 등록하세요.'
-			}} />
+			<NextSeo
+				title='새로운 봇 추가하기'
+				description='자신의 봇을 한국 디스코드 리스트에 등록하세요.'
+				openGraph={{
+					title: '새로운 봇 추가하기',
+					description: '자신의 봇을 한국 디스코드 리스트에 등록하세요.',
+				}}
+			/>
 			<h1 className='text-3xl font-bold'>새로운 봇 추가하기</h1>
-			<div className='mt-1 mb-5'>
-                안녕하세요, <span className='font-semibold'>{user.tag === '0' ? `@${user.username}` : `${user.username}#${user.tag}`}</span>님! <a role='button' tabIndex={0} onKeyDown={toLogin} onClick={toLogin} className='text-discord-blurple cursor-pointer outline-none'>본인이 아니신가요?</a>
+			<div className='mb-5 mt-1'>
+				안녕하세요,{' '}
+				<span className='font-semibold'>
+					{user.tag === '0' ? `@${user.username}` : `${user.username}#${user.tag}`}
+				</span>
+				님!{' '}
+				<a
+					role='button'
+					tabIndex={0}
+					onKeyDown={toLogin}
+					onClick={toLogin}
+					className='cursor-pointer text-discord-blurple outline-none'
+				>
+					본인이 아니신가요?
+				</a>
 			</div>
-			{
-				data ? data.code == 200 && data.data ? <Message type='success'>
-					<h2 className='text-lg font-extrabold'>봇 신청 성공!</h2>
-					<p>봇을 성공적으로 신청했습니다! 심사 페이지로 리다이렉트됩니다.</p>
-				</Message> : <Message type='error'>
-					<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
-					<ul className='list-disc list-inside'>
-						{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
-					</ul>
-                    
-				</Message> : <></>
-			}
-			<Formik initialValues={initialValues}
+			{data ? (
+				data.code == 200 && data.data ? (
+					<Message type='success'>
+						<h2 className='text-lg font-extrabold'>봇 신청 성공!</h2>
+						<p>봇을 성공적으로 신청했습니다! 심사 페이지로 리다이렉트됩니다.</p>
+					</Message>
+				) : (
+					<Message type='error'>
+						<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
+						<ul className='list-inside list-disc'>
+							{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
+						</ul>
+					</Message>
+				)
+			) : (
+				<></>
+			)}
+			<Formik
+				initialValues={initialValues}
 				validationSchema={AddBotSubmitSchema}
-				onSubmit={() => setCaptcha(true)}>
+				onSubmit={() => setCaptcha(true)}
+			>
 				{({ errors, touched, values, isValid, setFieldTouched, setFieldValue }) => (
 					<Form>
 						<div className='py-3'>
 							<Message type='warning'>
-								<h2 className='text-lg font-extrabold'>신청하시기 전에 다음 사항을 확인해 주세요!</h2>
-								<ul className='list-disc list-inside'>
-									<li><Link
-										href='/discord'
-										rel='noreferrer'
-										target='_blank'
-										className='text-blue-500 hover:text-blue-600'>디스코드 서버</Link>에 참가하셨나요?</li>
-									<li>봇이 <Link
-										href='/guidelines'
-										rel='noreferrer'
-										target='_blank'
-										className='text-blue-500 hover:text-blue-600'>가이드라인</Link>을 지키고 있나요?</li>
-									<li>봇 소유자가 두 명 이상인가요? 봇 소유자는 봇이 승인된 뒤, 더 추가하실 수 있습니다.</li>
+								<h2 className='text-lg font-extrabold'>
+									신청하시기 전에 다음 사항을 확인해 주세요!
+								</h2>
+								<ul className='list-inside list-disc'>
+									<li>
+										<Link
+											href='/discord'
+											rel='noreferrer'
+											target='_blank'
+											className='text-blue-500 hover:text-blue-600'
+										>
+											디스코드 서버
+										</Link>
+										에 참가하셨나요?
+									</li>
+									<li>
+										봇이{' '}
+										<Link
+											href='/guidelines'
+											rel='noreferrer'
+											target='_blank'
+											className='text-blue-500 hover:text-blue-600'
+										>
+											가이드라인
+										</Link>
+										을 지키고 있나요?
+									</li>
+									<li>
+										봇 소유자가 두 명 이상인가요? 봇 소유자는 봇이 승인된 뒤, 더 추가하실 수
+										있습니다.
+									</li>
 									<li>또한, 봇을 등록하게 되면 작성하신 모든 정보는 웹과 API에 공개됩니다.</li>
 								</ul>
 							</Message>
 						</div>
-						<Label For='agree' error={errors.agree && touched.agree ? errors.agree : null} grid={false}>
+						<Label
+							For='agree'
+							error={errors.agree && touched.agree ? errors.agree : null}
+							grid={false}
+						>
 							<div className='flex items-center'>
 								<CheckBox name='agree' />
-								<strong className='text-sm ml-2'>해당 내용을 숙지하였으며, 모두 이행하였고 위 내용에 해당하는 거부 사유는 답변받지 않는다는 점을 이해합니다.</strong>
+								<strong className='ml-2 text-sm'>
+									해당 내용을 숙지하였으며, 모두 이행하였고 위 내용에 해당하는 거부 사유는 답변받지
+									않는다는 점을 이해합니다.
+								</strong>
 							</div>
 						</Label>
 						<Divider />
 						<Advertisement />
-						<Label For='id' label='봇 ID' labelDesc='봇의 클라이언트 ID를 의미합니다.' error={errors.id && touched.id ? errors.id : null} short required>
+						<Label
+							For='id'
+							label='봇 ID'
+							labelDesc='봇의 클라이언트 ID를 의미합니다.'
+							error={errors.id && touched.id ? errors.id : null}
+							short
+							required
+						>
 							<Input name='id' placeholder='653534001742741552' />
 						</Label>
-						<Label For='prefix' label='접두사' labelDesc='봇의 사용시 앞 쪽에 붙은 기호를 의미합니다. (Prefix)' error={errors.prefix && touched.prefix ? errors.prefix : null} short required>
+						<Label
+							For='prefix'
+							label='접두사'
+							labelDesc='봇의 사용시 앞 쪽에 붙은 기호를 의미합니다. (Prefix)'
+							error={errors.prefix && touched.prefix ? errors.prefix : null}
+							short
+							required
+						>
 							<Input name='prefix' placeholder='!' />
 						</Label>
-						<Label For='library' label='라이브러리' labelDesc='봇에 사용된 라이브러리를 선택해주세요. 해당되는 라이브러리가 없다면 기타를 선택해주세요.' short required error={errors.library && touched.library ? errors.library : null}>
-							<Select options={library.map(el=> ({ label: el, value: el }))} handleChange={(value) => setFieldValue('library', value.value)} handleTouch={() => setFieldTouched('library', true)} />
+						<Label
+							For='library'
+							label='라이브러리'
+							labelDesc='봇에 사용된 라이브러리를 선택해주세요. 해당되는 라이브러리가 없다면 기타를 선택해주세요.'
+							short
+							required
+							error={errors.library && touched.library ? errors.library : null}
+						>
+							<Select
+								options={library.map((el) => ({ label: el, value: el }))}
+								handleChange={(value) => setFieldValue('library', value.value)}
+								handleTouch={() => setFieldTouched('library', true)}
+							/>
 						</Label>
-						<Label For='category' label='카테고리' labelDesc='봇에 해당되는 카테고리를 선택해주세요' required error={errors.category && touched.category ? errors.category as string : null}>
-							<Selects options={botCategories.map(el=> ({ label: el, value: el }))} handleChange={(value) => {
-								setFieldValue('category', value.map(v=> v.value))
-							}} handleTouch={() => setFieldTouched('category', true)} values={values.category as string[]} setValues={(value) => setFieldValue('category', value)} />
-							<p className='text-gray-400 mt-1 text-sm'>봇 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요. <strong>반드시 해당되는 카테고리만 선택해주세요.</strong><br/>
-								<a className='text-blue-500 hover:text-blue-400' href='https://contents.koreanbots.dev/categories'>이곳</a>에서 카테고리에 관한 자세한 설명을 확인하실 수 있습니다!</p>					
+						<Label
+							For='category'
+							label='카테고리'
+							labelDesc='봇에 해당되는 카테고리를 선택해주세요'
+							required
+							error={errors.category && touched.category ? (errors.category as string) : null}
+						>
+							<Selects
+								options={botCategories.map((el) => ({ label: el, value: el }))}
+								handleChange={(value) => {
+									setFieldValue(
+										'category',
+										value.map((v) => v.value)
+									)
+								}}
+								handleTouch={() => setFieldTouched('category', true)}
+								values={values.category as string[]}
+								setValues={(value) => setFieldValue('category', value)}
+							/>
+							<p className='mt-1 text-sm text-gray-400'>
+								봇 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요.{' '}
+								<strong>반드시 해당되는 카테고리만 선택해주세요.</strong>
+								<br />
+								<a
+									className='text-blue-500 hover:text-blue-400'
+									href='https://contents.koreanbots.dev/categories'
+								>
+									이곳
+								</a>
+								에서 카테고리에 관한 자세한 설명을 확인하실 수 있습니다!
+							</p>
 						</Label>
 						<Divider />
-						<Label For='website' label='웹사이트' labelDesc='봇의 웹사이트를 작성해주세요.' error={errors.website && touched.website ? errors.website : null}>
+						<Label
+							For='website'
+							label='웹사이트'
+							labelDesc='봇의 웹사이트를 작성해주세요.'
+							error={errors.website && touched.website ? errors.website : null}
+						>
 							<Input name='website' placeholder='https://koreanbots.dev' />
 						</Label>
-						<Label For='git' label='Git URL' labelDesc='봇 소스코드의 Git 주소를 입력해주세요. (오픈소스인 경우)' error={errors.git && touched.git ? errors.git : null}>
-							<Input name='git' placeholder='https://github.com/koreanbots/koreanbots'/>
+						<Label
+							For='git'
+							label='Git URL'
+							labelDesc='봇 소스코드의 Git 주소를 입력해주세요. (오픈소스인 경우)'
+							error={errors.git && touched.git ? errors.git : null}
+						>
+							<Input name='git' placeholder='https://github.com/koreanbots/koreanbots' />
 						</Label>
-						<Label For='inviteLink' label='초대링크' labelDesc='봇의 초대링크입니다. 비워두시면 자동으로 생성합니다.' error={errors.url && touched.url ? errors.url : null}>
-							<Input name='url' placeholder='https://discord.com/oauth2/authorize?client_id=653534001742741552&scope=bot&permissions=0' />
-							<span className='text-gray-400 mt-1 text-sm'>
+						<Label
+							For='inviteLink'
+							label='초대링크'
+							labelDesc='봇의 초대링크입니다. 비워두시면 자동으로 생성합니다.'
+							error={errors.url && touched.url ? errors.url : null}
+						>
+							<Input
+								name='url'
+								placeholder='https://discord.com/oauth2/authorize?client_id=653534001742741552&scope=bot&permissions=0'
+							/>
+							<span className='mt-1 text-sm text-gray-400'>
 								<Link
 									href='/calculator'
 									rel='noreferrer'
 									target='_blank'
-									className='text-blue-500 hover:text-blue-400'>
-                                    이곳
-								</Link>에서 초대링크를 생성하실 수 있습니다!
+									className='text-blue-500 hover:text-blue-400'
+								>
+									이곳
+								</Link>
+								에서 초대링크를 생성하실 수 있습니다!
 							</span>
 						</Label>
-						<Label For='discord' label='지원 디스코드 서버' labelDesc='봇의 지원 디스코드 서버를 입력해주세요. (봇에 대해 도움을 받을 수 있는 공간입니다.)' error={errors.discord && touched.discord ? errors.discord : null} short>
+						<Label
+							For='discord'
+							label='지원 디스코드 서버'
+							labelDesc='봇의 지원 디스코드 서버를 입력해주세요. (봇에 대해 도움을 받을 수 있는 공간입니다.)'
+							error={errors.discord && touched.discord ? errors.discord : null}
+							short
+						>
 							<div className='flex items-center'>
-                            discord.gg/<Input name='discord' placeholder='JEh53MQ' />
+								discord.gg/
+								<Input name='discord' placeholder='JEh53MQ' />
 							</div>
 						</Label>
 						<Divider />
-						<Label For='intro' label='봇 소개' labelDesc='봇을 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)' error={errors.intro && touched.intro ? errors.intro : null} required>
+						<Label
+							For='intro'
+							label='봇 소개'
+							labelDesc='봇을 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)'
+							error={errors.intro && touched.intro ? errors.intro : null}
+							required
+						>
 							<Input name='intro' placeholder='국내 봇을 한 곳에서.' />
 						</Label>
-						<Label For='intro' label='봇 설명' labelDesc={<>봇을 자세하게 설명해주세요! (최대 1500자)<br/>마크다운을 지원합니다!</>} error={errors.desc && touched.desc ? errors.desc : null} required>
-							<TextArea max={1500} name='desc' placeholder='봇에 대해 최대한 자세히 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.desc} setValue={(value) => setFieldValue('desc', value)} />
+						<Label
+							For='intro'
+							label='봇 설명'
+							labelDesc={
+								<>
+									봇을 자세하게 설명해주세요! (최대 1500자)
+									<br />
+									마크다운을 지원합니다!
+								</>
+							}
+							error={errors.desc && touched.desc ? errors.desc : null}
+							required
+						>
+							<TextArea
+								max={1500}
+								name='desc'
+								placeholder='봇에 대해 최대한 자세히 설명해주세요!'
+								theme={theme === 'dark' ? 'dark' : 'light'}
+								value={values.desc}
+								setValue={(value) => setFieldValue('desc', value)}
+							/>
 						</Label>
-						<Label For='preview' label='설명 미리보기' labelDesc='다음 결과는 실제와 다를 수 있습니다.'>
+						<Label
+							For='preview'
+							label='설명 미리보기'
+							labelDesc='다음 결과는 실제와 다를 수 있습니다.'
+						>
 							<Segment>
 								<Markdown text={values.desc} />
 							</Segment>
 						</Label>
 						<Divider />
-						<p className='text-base mt-2 mb-5'>
-							<span className='text-red-500 font-semibold'> *</span> = 필수 항목
+						<p className='mb-5 mt-2 text-base'>
+							<span className='font-semibold text-red-500'> *</span> = 필수 항목
 						</p>
-						{
-							captcha ? <Captcha ref={captchaRef} dark={theme === 'dark'} onVerify={(token) => {
-								submitBot(values, token)
-								window.scrollTo({ top: 0 })
-								setCaptcha(false)
-								captchaRef?.current?.resetCaptcha()
-							}} /> : <>
-								{
-									touchedSumbit && !isValid && <div className='my-1 text-red-500 text-xs font-light'>누락되거나 잘못된 항목이 있습니다. 다시 확인해주세요.</div>
-								}
-								<Button type='submit' onClick={() => {
-									setTouched(true)
-									if(!isValid) window.scrollTo({ top: 0 })
-								} }>
+						{captcha ? (
+							<Captcha
+								ref={captchaRef}
+								dark={theme === 'dark'}
+								onVerify={(token) => {
+									submitBot(values, token)
+									window.scrollTo({ top: 0 })
+									setCaptcha(false)
+									captchaRef?.current?.resetCaptcha()
+								}}
+							/>
+						) : (
+							<>
+								{touchedSumbit && !isValid && (
+									<div className='my-1 text-xs font-light text-red-500'>
+										누락되거나 잘못된 항목이 있습니다. 다시 확인해주세요.
+									</div>
+								)}
+								<Button
+									type='submit'
+									onClick={() => {
+										setTouched(true)
+										if (!isValid) window.scrollTo({ top: 0 })
+									}}
+								>
 									<>
-										<i className='far fa-paper-plane'/> 제출
+										<i className='far fa-paper-plane' /> 제출
 									</>
 								</Button>
 							</>
-						}
+						)}
 					</Form>
 				)}
 			</Formik>
@@ -222,7 +397,13 @@ const AddBot:NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 export const getServerSideProps = async (ctx: NextPageContext) => {
 	const parsed = parseCookie(ctx.req)
 	const user = await get.Authorization(parsed?.token)
-	return { props: { logged: !!user, user: await get.user.load(user || ''), csrfToken: getToken(ctx.req, ctx.res) } }
+	return {
+		props: {
+			logged: !!user,
+			user: await get.user.load(user || ''),
+			csrfToken: getToken(ctx.req, ctx.res),
+		},
+	}
 }
 
 interface AddBotProps {
diff --git a/pages/addserver/[id].tsx b/pages/addserver/[id].tsx
index 10dc673..10f444e 100644
--- a/pages/addserver/[id].tsx
+++ b/pages/addserver/[id].tsx
@@ -30,10 +30,17 @@ const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))
 const Captcha = dynamic(() => import('@components/Captcha'))
 
-const AddServer:NextPage<AddServerProps> = ({ logged, user, csrfToken, server, serverData, theme }) => {
-	const [ data, setData ] = useState<ResponseProps<AddServerSubmit>>(null)
-	const [ captcha, setCaptcha ] = useState(false)
-	const [ touchedSumbit, setTouched ] = useState(false)
+const AddServer: NextPage<AddServerProps> = ({
+	logged,
+	user,
+	csrfToken,
+	server,
+	serverData,
+	theme,
+}) => {
+	const [data, setData] = useState<ResponseProps<AddServerSubmit>>(null)
+	const [captcha, setCaptcha] = useState(false)
+	const [touchedSumbit, setTouched] = useState(false)
 	const captchaRef = useRef<HCaptcha>()
 	const router = useRouter()
 	const initialValues: AddServerSubmit = {
@@ -58,151 +65,284 @@ const AddServer:NextPage<AddServerProps> = ({ logged, user, csrfToken, server, s
 - 있나요?`,
 		category: [],
 		_csrf: csrfToken,
-		_captcha: 'captcha'
+		_captcha: 'captcha',
 	}
 
 	function toLogin() {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
 	}
-	
+
 	async function submitServer(id: string, value: AddServerSubmit, token: string) {
-		const res = await Fetch<AddServerSubmit>(`/servers/${id}`, { method: 'POST', body: JSON.stringify(cleanObject<AddServerSubmit>({ ...value, _captcha: token })) })
+		const res = await Fetch<AddServerSubmit>(`/servers/${id}`, {
+			method: 'POST',
+			body: JSON.stringify(cleanObject<AddServerSubmit>({ ...value, _captcha: token })),
+		})
 		setData(res)
 	}
 
-	if(!logged) return <Login>
-		<NextSeo title='새로운 서버 추가하기' description='자신의 서버를 한국 디스코드 리스트에 등록하세요.' openGraph={{
-			title:'새로운 서버 추가하기', description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.'
-		}} />
-	</Login>
-	if(data?.data && data.code == 200) {
-		setTimeout(
-			() => redirectTo(router, `/servers/${router.query.id}`),
-			1_000
+	if (!logged)
+		return (
+			<Login>
+				<NextSeo
+					title='새로운 서버 추가하기'
+					description='자신의 서버를 한국 디스코드 리스트에 등록하세요.'
+					openGraph={{
+						title: '새로운 서버 추가하기',
+						description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.',
+					}}
+				/>
+			</Login>
 		)
+	if (data?.data && data.code == 200) {
+		setTimeout(() => redirectTo(router, `/servers/${router.query.id}`), 1_000)
 	}
 	return (
 		<Container paddingTop className='py-5'>
-			<NextSeo title='새로운 서버 추가하기' description='자신의 서버를 한국 디스코드 리스트에 등록하세요.' openGraph={{
-				title:'새로운 서버 추가하기', description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.'
-			}} />
+			<NextSeo
+				title='새로운 서버 추가하기'
+				description='자신의 서버를 한국 디스코드 리스트에 등록하세요.'
+				openGraph={{
+					title: '새로운 서버 추가하기',
+					description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.',
+				}}
+			/>
 			<h1 className='text-3xl font-bold'>새로운 서버 추가하기</h1>
-			<div className='mt-1 mb-5'>
-                안녕하세요, <span className='font-semibold'>{user.username}#{user.tag}</span>님! <a role='button' tabIndex={0} onKeyDown={toLogin} onClick={toLogin} className='text-discord-blurple cursor-pointer outline-none'>본인이 아니신가요?</a>
+			<div className='mb-5 mt-1'>
+				안녕하세요,{' '}
+				<span className='font-semibold'>
+					{user.username}#{user.tag}
+				</span>
+				님!{' '}
+				<a
+					role='button'
+					tabIndex={0}
+					onKeyDown={toLogin}
+					onClick={toLogin}
+					className='cursor-pointer text-discord-blurple outline-none'
+				>
+					본인이 아니신가요?
+				</a>
 			</div>
-			{
-				data ? data.code == 200 && data.data ? <Message type='success'>
-					<h2 className='text-lg font-extrabold'>서버 등록 성공!</h2>
-					<p>서버를 성공적으로 등록했습니다! 서버 페이지로 리다이렉트 됩니다!</p>
-				</Message> : <Message type='error'>
-					<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
-					<ul className='list-disc list-inside'>
-						{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
-					</ul>
-                    
-				</Message> : <></>
-			}
-			{
-				server ? <Message type='warning'>
-					<h2 className='text-lg font-extrabold'>이미 등록된 서버입니다.</h2>
-				</Message> :
-					!serverData ? <Message type='info'>
-						<h2 className='text-lg font-extrabold'>서버에 봇이 초대되지 않았습니다.</h2>
-						<p>서버를 등록하시려면 먼저 봇을 초대해야합니다.</p>
-						<p>서버에 이미 봇이 초대되었다면 반영까지 최대 1분이 소요될 수 있습니다.</p>
+			{data ? (
+				data.code == 200 && data.data ? (
+					<Message type='success'>
+						<h2 className='text-lg font-extrabold'>서버 등록 성공!</h2>
+						<p>서버를 성공적으로 등록했습니다! 서버 페이지로 리다이렉트 됩니다!</p>
 					</Message>
-						: serverData.admins.includes(user.id) || serverData.owner.includes(user.id) ? <Formik initialValues={initialValues}
-							validationSchema={AddServerSubmitSchema}
-							onSubmit={() => setCaptcha(true)}>
-							{({ errors, touched, values, isValid, setFieldTouched, setFieldValue }) => (
-								<Form>
-									<div className='py-3'>
-										<Message type='warning'>
-											<h2 className='text-lg font-extrabold'>등록하시기 전에 다음 사항을 확인해 주세요!</h2>
-											<ul className='list-disc list-inside'>
-												<li><Link
-													href='/discord'
-													rel='noreferrer'
-													target='_blank'
-													className='text-blue-500 hover:text-blue-600'>디스코드 서버</Link>에 참여를 권장드립니다.</li>
-												<li>서버가 <Link
-													href='/guidelines'
-													rel='noreferrer'
-													target='_blank'
-													className='text-blue-500 hover:text-blue-600'>가이드라인</Link>을 지키고 있나요?</li>
-												<li>서버에서 <strong>관리자</strong> 권한을 갖고 있는 모든 분은 삭제를 제외한 모든 행동을 할 수 있습니다.</li>
-												<li>서버를 등록한 이후 봇을 추방하시게 되면 서버 정보가 웹에 업데이트 되지 않습니다.</li>
-												<li>또한, 서버를 등록하게 되면 작성하신 모든 정보와 서버에서 수집된 정보는 웹과 API에 공개됩니다.</li>
-											</ul>
-										</Message>
-									</div>
-									<Label For='agree' error={errors.agree && touched.agree ? errors.agree : null} grid={false}>
-										<div className='flex items-center'>
-											<CheckBox name='agree' />
-											<strong className='text-sm ml-2'>해당 내용을 숙지하였으며, 등록 이후에 가이드라인을 위반할시 서버가 웹에서 삭제될 수 있다는 점을 확인했습니다.</strong>
+				) : (
+					<Message type='error'>
+						<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
+						<ul className='list-inside list-disc'>
+							{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
+						</ul>
+					</Message>
+				)
+			) : (
+				<></>
+			)}
+			{server ? (
+				<Message type='warning'>
+					<h2 className='text-lg font-extrabold'>이미 등록된 서버입니다.</h2>
+				</Message>
+			) : !serverData ? (
+				<Message type='info'>
+					<h2 className='text-lg font-extrabold'>서버에 봇이 초대되지 않았습니다.</h2>
+					<p>서버를 등록하시려면 먼저 봇을 초대해야합니다.</p>
+					<p>서버에 이미 봇이 초대되었다면 반영까지 최대 1분이 소요될 수 있습니다.</p>
+				</Message>
+			) : serverData.admins.includes(user.id) || serverData.owner.includes(user.id) ? (
+				<Formik
+					initialValues={initialValues}
+					validationSchema={AddServerSubmitSchema}
+					onSubmit={() => setCaptcha(true)}
+				>
+					{({ errors, touched, values, isValid, setFieldTouched, setFieldValue }) => (
+						<Form>
+							<div className='py-3'>
+								<Message type='warning'>
+									<h2 className='text-lg font-extrabold'>
+										등록하시기 전에 다음 사항을 확인해 주세요!
+									</h2>
+									<ul className='list-inside list-disc'>
+										<li>
+											<Link
+												href='/discord'
+												rel='noreferrer'
+												target='_blank'
+												className='text-blue-500 hover:text-blue-600'
+											>
+												디스코드 서버
+											</Link>
+											에 참여를 권장드립니다.
+										</li>
+										<li>
+											서버가{' '}
+											<Link
+												href='/guidelines'
+												rel='noreferrer'
+												target='_blank'
+												className='text-blue-500 hover:text-blue-600'
+											>
+												가이드라인
+											</Link>
+											을 지키고 있나요?
+										</li>
+										<li>
+											서버에서 <strong>관리자</strong> 권한을 갖고 있는 모든 분은 삭제를 제외한 모든
+											행동을 할 수 있습니다.
+										</li>
+										<li>
+											서버를 등록한 이후 봇을 추방하시게 되면 서버 정보가 웹에 업데이트 되지
+											않습니다.
+										</li>
+										<li>
+											또한, 서버를 등록하게 되면 작성하신 모든 정보와 서버에서 수집된 정보는 웹과
+											API에 공개됩니다.
+										</li>
+									</ul>
+								</Message>
+							</div>
+							<Label
+								For='agree'
+								error={errors.agree && touched.agree ? errors.agree : null}
+								grid={false}
+							>
+								<div className='flex items-center'>
+									<CheckBox name='agree' />
+									<strong className='ml-2 text-sm'>
+										해당 내용을 숙지하였으며, 등록 이후에 가이드라인을 위반할시 서버가 웹에서 삭제될
+										수 있다는 점을 확인했습니다.
+									</strong>
+								</div>
+							</Label>
+							<Divider />
+							<Label For='id' label='서버' labelDesc='등록하시는 대상 서버 입니다.'>
+								<p>
+									<strong>{serverData.name}</strong>
+									<br /> ID: {router.query.id}
+								</p>
+							</Label>
+							<Divider />
+							<Label
+								For='category'
+								label='카테고리'
+								labelDesc='서버에 해당되는 카테고리를 선택해주세요'
+								required
+								error={errors.category && touched.category ? (errors.category as string) : null}
+							>
+								<Selects
+									options={serverCategories.map((el) => ({ label: el, value: el }))}
+									handleChange={(value) => {
+										setFieldValue(
+											'category',
+											value.map((v) => v.value)
+										)
+									}}
+									handleTouch={() => setFieldTouched('category', true)}
+									values={values.category as string[]}
+									setValues={(value) => setFieldValue('category', value)}
+								/>
+								<span className='mt-1 text-sm text-gray-400'>
+									서버 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요.{' '}
+									<strong>반드시 해당되는 카테고리만 선택해주세요.</strong>
+								</span>
+							</Label>
+							<Label
+								For='invite'
+								label='서버 초대코드'
+								labelDesc='서버의 초대코드를 입력해주세요. (만료되지 않는 코드로 입력해주세요!)'
+								error={errors.invite && touched.invite ? errors.invite : null}
+								short
+								required
+							>
+								<div className='flex items-center'>
+									discord.gg/
+									<Input name='invite' placeholder='JEh53MQ' />
+								</div>
+							</Label>
+							<Divider />
+							<Label
+								For='intro'
+								label='서버 소개'
+								labelDesc='서버를 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)'
+								error={errors.intro && touched.intro ? errors.intro : null}
+								required
+							>
+								<Input name='intro' placeholder={getRandom(ServerIntroList)} />
+							</Label>
+							<Label
+								For='desc'
+								label='서버 설명'
+								labelDesc={
+									<>
+										서버를 자세하게 설명해주세요! (최대 1500자)
+										<br />
+										마크다운을 지원합니다!
+									</>
+								}
+								error={errors.desc && touched.desc ? errors.desc : null}
+								required
+							>
+								<TextArea
+									max={1500}
+									name='desc'
+									placeholder='서버에 대해 최대한 자세히 설명해주세요!'
+									theme={theme === 'dark' ? 'dark' : 'light'}
+									value={values.desc}
+									setValue={(value) => setFieldValue('desc', value)}
+								/>
+							</Label>
+							<Label
+								For='preview'
+								label='설명 미리보기'
+								labelDesc='다음 결과는 실제와 다를 수 있습니다.'
+							>
+								<Segment>
+									<Markdown text={values.desc} />
+								</Segment>
+							</Label>
+							<Divider />
+							<p className='mb-5 mt-2 text-base'>
+								<span className='font-semibold text-red-500'> *</span> = 필수 항목
+							</p>
+							{captcha ? (
+								<Captcha
+									ref={captchaRef}
+									dark={theme === 'dark'}
+									onVerify={(token) => {
+										submitServer(router.query.id as string, values, token)
+										window.scrollTo({ top: 0 })
+										setCaptcha(false)
+										captchaRef?.current?.resetCaptcha()
+									}}
+								/>
+							) : (
+								<>
+									{touchedSumbit && !isValid && (
+										<div className='my-1 text-xs font-light text-red-500'>
+											누락되거나 잘못된 항목이 있습니다. 다시 확인해주세요.
 										</div>
-									</Label>
-									<Divider />
-									<Label For='id' label='서버' labelDesc='등록하시는 대상 서버 입니다.'>
-										<p>
-											<strong>{serverData.name}</strong>
-											<br/> ID: {router.query.id}
-										</p>
-									</Label>
-									<Divider />
-									<Label For='category' label='카테고리' labelDesc='서버에 해당되는 카테고리를 선택해주세요' required error={errors.category && touched.category ? errors.category as string : null}>
-										<Selects options={serverCategories.map(el=> ({ label: el, value: el }))} handleChange={(value) => {
-											setFieldValue('category', value.map(v=> v.value))
-										}} handleTouch={() => setFieldTouched('category', true)} values={values.category as string[]} setValues={(value) => setFieldValue('category', value)} />
-										<span className='text-gray-400 mt-1 text-sm'>서버 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요. <strong>반드시 해당되는 카테고리만 선택해주세요.</strong></span>
-									</Label>
-									<Label For='invite' label='서버 초대코드' labelDesc='서버의 초대코드를 입력해주세요. (만료되지 않는 코드로 입력해주세요!)' error={errors.invite && touched.invite ? errors.invite : null} short required>
-										<div className='flex items-center'>
-                                            discord.gg/<Input name='invite' placeholder='JEh53MQ' />
-										</div>
-									</Label>
-									<Divider />
-									<Label For='intro' label='서버 소개' labelDesc='서버를 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)' error={errors.intro && touched.intro ? errors.intro : null} required>
-										<Input name='intro' placeholder={getRandom(ServerIntroList)} />
-									</Label>
-									<Label For='desc' label='서버 설명' labelDesc={<>서버를 자세하게 설명해주세요! (최대 1500자)<br/>마크다운을 지원합니다!</>} error={errors.desc && touched.desc ? errors.desc : null} required>
-										<TextArea max={1500} name='desc' placeholder='서버에 대해 최대한 자세히 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.desc} setValue={(value) => setFieldValue('desc', value)} />
-									</Label>
-									<Label For='preview' label='설명 미리보기' labelDesc='다음 결과는 실제와 다를 수 있습니다.'>
-										<Segment>
-											<Markdown text={values.desc} />
-										</Segment>
-									</Label>
-									<Divider />
-									<p className='text-base mt-2 mb-5'>
-										<span className='text-red-500 font-semibold'> *</span> = 필수 항목
-									</p>
-									{
-										captcha ? <Captcha ref={captchaRef} dark={theme === 'dark'} onVerify={(token) => {
-											submitServer(router.query.id as string, values, token)
-											window.scrollTo({ top: 0 })
-											setCaptcha(false)
-											captchaRef?.current?.resetCaptcha()
-										}} /> : <>
-											{
-												touchedSumbit && !isValid && <div className='my-1 text-red-500 text-xs font-light'>누락되거나 잘못된 항목이 있습니다. 다시 확인해주세요.</div>
-											}
-											<Button type='submit' onClick={() => {
-												setTouched(true)
-												if(!isValid) window.scrollTo({ top: 0 })
-											} }>
-												<>
-													<i className='far fa-paper-plane'/> 등록
-												</>
-											</Button>
+									)}
+									<Button
+										type='submit'
+										onClick={() => {
+											setTouched(true)
+											if (!isValid) window.scrollTo({ top: 0 })
+										}}
+									>
+										<>
+											<i className='far fa-paper-plane' /> 등록
 										</>
-									}
-								</Form>
+									</Button>
+								</>
 							)}
-						</Formik>
-							: <Forbidden />
-			}
+						</Form>
+					)}
+				</Formik>
+			) : (
+				<Forbidden />
+			)}
 		</Container>
 	)
 }
@@ -212,12 +352,16 @@ export const getServerSideProps = async (ctx: NextPageContext) => {
 	const user = await get.Authorization(parsed?.token)
 	const server = (await get.server.load(ctx.query.id as string)) || null
 	const serverData = (await get.serverData(ctx.query.id as string)) || null
-	return { props: {
-		logged: !!user, user: await get.user.load(user || ''),
-		csrfToken: getToken(ctx.req, ctx.res),
-		server,
-		serverData: (+new Date() - +new Date(serverData?.updatedAt)) < 2 * 60 * 1000 ? serverData : null
-	} }
+	return {
+		props: {
+			logged: !!user,
+			user: await get.user.load(user || ''),
+			csrfToken: getToken(ctx.req, ctx.res),
+			server,
+			serverData:
+				+new Date() - +new Date(serverData?.updatedAt) < 2 * 60 * 1000 ? serverData : null,
+		},
+	}
 }
 
 interface AddServerProps {
@@ -229,4 +373,4 @@ interface AddServerProps {
 	theme: Theme
 }
 
-export default AddServer
\ No newline at end of file
+export default AddServer
diff --git a/pages/addserver/index.tsx b/pages/addserver/index.tsx
index bd6e785..e582327 100644
--- a/pages/addserver/index.tsx
+++ b/pages/addserver/index.tsx
@@ -3,7 +3,7 @@ import dynamic from 'next/dynamic'
 import { NextSeo } from 'next-seo'
 
 import { get } from '@utils/Query'
-import { parseCookie} from '@utils/Tools'
+import { parseCookie } from '@utils/Tools'
 import { RawGuild, ServerData, Theme, User } from '@types'
 
 const Advertisement = dynamic(() => import('@components/Advertisement'))
@@ -12,40 +12,71 @@ const ServerCard = dynamic(() => import('@components/ServerCard'))
 const Login = dynamic(() => import('@components/Login'))
 const Container = dynamic(() => import('@components/Container'))
 
-const AddBot:NextPage<AddBotProps> = ({ logged, guilds }) => {
-	if(!logged) return <Login>
-		<NextSeo title='새로운 서버 추가하기' description='자신의 서버를 한국 디스코드 리스트에 등록하세요.' openGraph={{
-			title:'새로운 서버 추가하기', description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.'
-		}} />
-	</Login>
-	return <Container paddingTop className='py-5'>
-		<NextSeo title='새로운 서버 추가하기' description='자신의 서버를 한국 디스코드 리스트에 등록하세요.' openGraph={{
-			title:'새로운 서버 추가하기', description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.'
-		}} />
-		<h1 className='text-3xl font-bold'>새로운 서버 추가하기</h1>
-		<p className='text-gray-400'>관리자이신 서버 목록입니다.</p>
-		<p className='text-gray-400 pb-5'>봇을 초대한 뒤 새로고침 해주세요. 또한, 반영까지 최대 1분이 소요될 수 있습니다.</p>
-		<Advertisement />
-		<ResponsiveGrid>
-			{
-				guilds.sort((a ,b) => (+!!b.data || 0) - (+!!a.data || 0)).map(g => (
-					<ServerCard type={g.exists ? 'manage' : 'add'} server={g} key={g.id} />
-				))
-			}
-		</ResponsiveGrid>
-		<Advertisement />
-	</Container>
+const AddBot: NextPage<AddBotProps> = ({ logged, guilds }) => {
+	if (!logged)
+		return (
+			<Login>
+				<NextSeo
+					title='새로운 서버 추가하기'
+					description='자신의 서버를 한국 디스코드 리스트에 등록하세요.'
+					openGraph={{
+						title: '새로운 서버 추가하기',
+						description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.',
+					}}
+				/>
+			</Login>
+		)
+	return (
+		<Container paddingTop className='py-5'>
+			<NextSeo
+				title='새로운 서버 추가하기'
+				description='자신의 서버를 한국 디스코드 리스트에 등록하세요.'
+				openGraph={{
+					title: '새로운 서버 추가하기',
+					description: '자신의 서버를 한국 디스코드 리스트에 등록하세요.',
+				}}
+			/>
+			<h1 className='text-3xl font-bold'>새로운 서버 추가하기</h1>
+			<p className='text-gray-400'>관리자이신 서버 목록입니다.</p>
+			<p className='pb-5 text-gray-400'>
+				봇을 초대한 뒤 새로고침 해주세요. 또한, 반영까지 최대 1분이 소요될 수 있습니다.
+			</p>
+			<Advertisement />
+			<ResponsiveGrid>
+				{guilds
+					.sort((a, b) => (+!!b.data || 0) - (+!!a.data || 0))
+					.map((g) => (
+						<ServerCard type={g.exists ? 'manage' : 'add'} server={g} key={g.id} />
+					))}
+			</ResponsiveGrid>
+			<Advertisement />
+		</Container>
+	)
 }
 
 export const getServerSideProps = async (ctx: NextPageContext) => {
 	const parsed = parseCookie(ctx.req)
 	const user = await get.Authorization(parsed?.token)
-	const guilds = (await get.userGuilds.load(user || ''))?.filter(g=> (g.permissions & 8) || g.owner).map(async g => {
-		const server = (await get.server.load(g.id))
-		const data = await get.serverData(g.id)
-		return { ...g, ...(server || {}), ...((+new Date() - +new Date(data?.updatedAt)) < 2 * 60 * 1000  ? { data } : {}), members: data?.memberCount || null, exists: !!server }
-	})
-	return { props: { logged: !!user || !!guilds, user: await get.user.load(user || ''), guilds: guilds ? (await Promise.all(guilds)).filter(g => !g?.exists) : null } }
+	const guilds = (await get.userGuilds.load(user || ''))
+		?.filter((g) => g.permissions & 8 || g.owner)
+		.map(async (g) => {
+			const server = await get.server.load(g.id)
+			const data = await get.serverData(g.id)
+			return {
+				...g,
+				...(server || {}),
+				...(+new Date() - +new Date(data?.updatedAt) < 2 * 60 * 1000 ? { data } : {}),
+				members: data?.memberCount || null,
+				exists: !!server,
+			}
+		})
+	return {
+		props: {
+			logged: !!user || !!guilds,
+			user: await get.user.load(user || ''),
+			guilds: guilds ? (await Promise.all(guilds)).filter((g) => !g?.exists) : null,
+		},
+	}
 }
 
 interface AddBotProps {
@@ -53,7 +84,7 @@ interface AddBotProps {
 	user: User
 	csrfToken: string
 	theme: Theme
-	guilds: (RawGuild & { data: ServerData, exists?: boolean })[]
+	guilds: (RawGuild & { data: ServerData; exists?: boolean })[]
 }
 
-export default AddBot
\ No newline at end of file
+export default AddBot
diff --git a/pages/api/auth/discord/callback.ts b/pages/api/auth/discord/callback.ts
index 352cfca..42b3c0f 100644
--- a/pages/api/auth/discord/callback.ts
+++ b/pages/api/auth/discord/callback.ts
@@ -13,8 +13,8 @@ import RequestHandler from '@utils/RequestHandler'
 
 const Callback = RequestHandler().get(async (req: ApiRequest, res) => {
 	const validate = await OauthCallbackSchema.validate(req.query)
-		.then(r => r)
-		.catch(e => {
+		.then((r) => r)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -35,7 +35,7 @@ const Callback = RequestHandler().get(async (req: ApiRequest, res) => {
 		headers: {
 			'Content-Type': 'application/x-www-form-urlencoded',
 		},
-	}).then(r => r.json())
+	}).then((r) => r.json())
 	if (token.error) return ResponseWrapper(res, { code: 400, errors: ['올바르지 않은 코드입니다.'] })
 
 	const user: DiscordUserInfo = await fetch(DiscordEnpoints.Me, {
@@ -43,7 +43,7 @@ const Callback = RequestHandler().get(async (req: ApiRequest, res) => {
 		headers: {
 			Authorization: `${token.token_type} ${token.access_token}`,
 		},
-	}).then(r => r.json())
+	}).then((r) => r.json())
 
 	const userToken = await update.assignToken({
 		id: user.id,
@@ -53,11 +53,13 @@ const Callback = RequestHandler().get(async (req: ApiRequest, res) => {
 		email: user.email,
 		username: user.username,
 		discriminator: user.discriminator,
-		verified: user.verified
+		verified: user.verified,
 	})
 
-	if(userToken === 1) return res.redirect(301, 'https://docs.koreanbots.dev/bots/account/unverified')
-	else if(userToken === 2) return res.redirect(301, 'https://docs.koreanbots.dev/bots/account/blocked')
+	if (userToken === 1)
+		return res.redirect(301, 'https://docs.koreanbots.dev/bots/account/unverified')
+	else if (userToken === 2)
+		return res.redirect(301, 'https://docs.koreanbots.dev/bots/account/blocked')
 	const info = verify(userToken)
 	res.setHeader(
 		'set-cookie',
diff --git a/pages/api/auth/github/callback.ts b/pages/api/auth/github/callback.ts
index 44717b8..21c3cc8 100644
--- a/pages/api/auth/github/callback.ts
+++ b/pages/api/auth/github/callback.ts
@@ -10,8 +10,8 @@ import RequestHandler from '@utils/RequestHandler'
 
 const Callback = RequestHandler().get(async (req: ApiRequest, res) => {
 	const validate = await OauthCallbackSchema.validate(req.query)
-		.then(r => r)
-		.catch(e => {
+		.then((r) => r)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -20,21 +20,29 @@ const Callback = RequestHandler().get(async (req: ApiRequest, res) => {
 
 	const user = await get.Authorization(req.cookies.token)
 	if (!user) return ResponseWrapper(res, { code: 401 })
-	const token: GithubTokenInfo = await fetch(SpecialEndPoints.Github.Token(process.env.GITHUB_CLIENT_ID, process.env.GITHUB_CLIENT_SECRET,req.query.code), {
-		method: 'POST',
-		headers: {
-			Accept: 'application/json'
-		},
-	}).then(r => r.json())
+	const token: GithubTokenInfo = await fetch(
+		SpecialEndPoints.Github.Token(
+			process.env.GITHUB_CLIENT_ID,
+			process.env.GITHUB_CLIENT_SECRET,
+			req.query.code
+		),
+		{
+			method: 'POST',
+			headers: {
+				Accept: 'application/json',
+			},
+		}
+	).then((r) => r.json())
 	if (token.error) return ResponseWrapper(res, { code: 400, errors: ['올바르지 않은 코드입니다.'] })
-	
+
 	const github: { login: string } = await fetch(SpecialEndPoints.Github.Me, {
 		headers: {
-			Authorization: `token ${token.access_token}`
-		}
-	}).then(r => r.json())
+			Authorization: `token ${token.access_token}`,
+		},
+	}).then((r) => r.json())
 	const result = await update.Github(user, github.login)
-	if(result === 0) return ResponseWrapper(res, { code: 400, message: '이미 등록되어있는 깃허브 계정입니다.' })
+	if (result === 0)
+		return ResponseWrapper(res, { code: 400, message: '이미 등록되어있는 깃허브 계정입니다.' })
 	get.user.clear(user)
 	res.redirect(301, '/panel')
 })
diff --git a/pages/api/auth/github/index.ts b/pages/api/auth/github/index.ts
index 96cda63..e052a20 100644
--- a/pages/api/auth/github/index.ts
+++ b/pages/api/auth/github/index.ts
@@ -5,17 +5,15 @@ import ResponseWrapper from '@utils/ResponseWrapper'
 import { get, update } from '@utils/Query'
 import { checkToken } from '@utils/Csrf'
 
-const Github = RequestHandler().get(async (_req: NextApiRequest, res: NextApiResponse) => {
-	res.redirect(
-		301,
-		generateOauthURL('github', process.env.GITHUB_CLIENT_ID)
-	)
-})
+const Github = RequestHandler()
+	.get(async (_req: NextApiRequest, res: NextApiResponse) => {
+		res.redirect(301, generateOauthURL('github', process.env.GITHUB_CLIENT_ID))
+	})
 	.delete(async (req: DeleteApiRequest, res) => {
 		const user = await get.Authorization(req.cookies.token)
 		if (!user) return ResponseWrapper(res, { code: 401 })
 		const csrfValidated = checkToken(req, res, req.body._csrf)
-		if(!csrfValidated) return
+		if (!csrfValidated) return
 		await update.Github(user, null)
 		get.user.clear(user)
 		return ResponseWrapper(res, { code: 200 })
diff --git a/pages/api/image/discord/avatars/[id].ts b/pages/api/image/discord/avatars/[id].ts
index d1b5629..3b67e77 100644
--- a/pages/api/image/discord/avatars/[id].ts
+++ b/pages/api/image/discord/avatars/[id].ts
@@ -11,7 +11,9 @@ const rateLimiter = rateLimit({
 	windowMs: 60 * 1000,
 	max: 150,
 	handler: async (_req, res) => {
-		const img = await get.images.user.load(DiscordEnpoints.CDN.default(Math.floor(Math.random() * 6), { format: 'png' }))
+		const img = await get.images.user.load(
+			DiscordEnpoints.CDN.default(Math.floor(Math.random() * 6), { format: 'png' })
+		)
 		res.setHeader('Content-Type', 'image/png')
 		res.setHeader('Cache-Control', 'no-cache')
 		res.send(img)
@@ -20,45 +22,57 @@ const rateLimiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 
 const Avatar = RequestHandler()
 	.get(rateLimiter)
-	.get(async(req: ApiRequest, res) => {
+	.get(async (req: ApiRequest, res) => {
 		res.setHeader('Access-Control-Allow-Origin', process.env.KOREANBOTS_URL)
-		const { id: param, size='256' } = req.query
+		const { id: param, size = '256' } = req.query
 		const splitted = param.split('.')
 		let ext = splitted[1]
 		const id = splitted[0]
-		const validated = await ImageOptionsSchema.validate({ id, ext, size }, { abortEarly: false }).then(el=> el).catch(e=> {
-			ResponseWrapper(res, { code: 400, errors: e.errors })
-			return null
-		})
-		if(!validated) return
+		const validated = await ImageOptionsSchema.validate({ id, ext, size }, { abortEarly: false })
+			.then((el) => el)
+			.catch((e) => {
+				ResponseWrapper(res, { code: 400, errors: e.errors })
+				return null
+			})
+		if (!validated) return
 
 		const user = await get.discord.user.load(id)
 		let img: Buffer
-		if(!user?.avatar) img = await get.images.user.load(DiscordEnpoints.CDN.default(user?.discriminator ? Number(user.discriminator) % 5 : Math.floor(Math.random() * 6), { format: 'png', size: validated.size }))
-		else img = await get.images.user.load(DiscordEnpoints.CDN.user(id, user.avatar, { format: validated.ext === 'gif' && !user.avatar.startsWith('a_') ? 'png' : validated.ext }))
-		if(!img) {
-			img = await get.images.user.load(DiscordEnpoints.CDN.default(user.discriminator, { format: 'png', size: validated.size }))
+		if (!user?.avatar)
+			img = await get.images.user.load(
+				DiscordEnpoints.CDN.default(
+					user?.discriminator ? Number(user.discriminator) % 5 : Math.floor(Math.random() * 6),
+					{ format: 'png', size: validated.size }
+				)
+			)
+		else
+			img = await get.images.user.load(
+				DiscordEnpoints.CDN.user(id, user.avatar, {
+					format: validated.ext === 'gif' && !user.avatar.startsWith('a_') ? 'png' : validated.ext,
+				})
+			)
+		if (!img) {
+			img = await get.images.user.load(
+				DiscordEnpoints.CDN.default(user.discriminator, { format: 'png', size: validated.size })
+			)
 			ext = 'png'
 		}
 
-
 		res.setHeader('Content-Type', `image/${ext}`)
 		res.setHeader('Cache-Control', 'public, max-age=86400')
 		res.send(img)
 	})
 
-	
-
 interface ApiRequest extends NextApiRequest {
 	query: {
 		id: string
-		size?: '128' | '256'  | '512'
+		size?: '128' | '256' | '512'
 	}
 }
 
-export default Avatar
\ No newline at end of file
+export default Avatar
diff --git a/pages/api/image/discord/icons/[id].ts b/pages/api/image/discord/icons/[id].ts
index 124e4c6..d3c361c 100644
--- a/pages/api/image/discord/icons/[id].ts
+++ b/pages/api/image/discord/icons/[id].ts
@@ -11,7 +11,9 @@ const rateLimiter = rateLimit({
 	windowMs: 60 * 1000,
 	max: 150,
 	handler: async (_req, res) => {
-		const img = await get.images.server.load(DiscordEnpoints.CDN.default(Math.floor(Math.random() * 6), { format: 'png' }))
+		const img = await get.images.server.load(
+			DiscordEnpoints.CDN.default(Math.floor(Math.random() * 6), { format: 'png' })
+		)
 		res.setHeader('Content-Type', 'image/png')
 		res.setHeader('Cache-Control', 'no-cache')
 		res.send(img)
@@ -20,45 +22,51 @@ const rateLimiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 
 const Icon = RequestHandler()
 	.get(rateLimiter)
-	.get(async(req: ApiRequest, res) => {
+	.get(async (req: ApiRequest, res) => {
 		res.setHeader('Access-Control-Allow-Origin', process.env.KOREANBOTS_URL)
-		const { id: param, size='256' } = req.query
+		const { id: param, size = '256' } = req.query
 		const splitted = param.split('.')
 		let ext = splitted[1]
 		const id = splitted[0]
-		const validated = await ImageOptionsSchema.validate({ id, ext, size }, { abortEarly: false }).then(el=> el).catch(e=> {
-			ResponseWrapper(res, { code: 400, errors: e.errors })
-			return null
-		})
-		if(!validated) return
+		const validated = await ImageOptionsSchema.validate({ id, ext, size }, { abortEarly: false })
+			.then((el) => el)
+			.catch((e) => {
+				ResponseWrapper(res, { code: 400, errors: e.errors })
+				return null
+			})
+		if (!validated) return
 
 		const guild = await get.server.load(id)
 		let img: Buffer
-		if(!guild?.icon) img = await get.images.server.load(DiscordEnpoints.CDN.default(+id % 4))
-		else img = await get.images.server.load(DiscordEnpoints.CDN.guild(id, guild.icon, { format: validated.ext === 'gif' && !guild.icon.startsWith('a_') ? 'png' : validated.ext }))
-		if(!img) {
-			img = await get.images.server.load(DiscordEnpoints.CDN.default(+id % 4, { format: 'png', size: validated.size }))
+		if (!guild?.icon) img = await get.images.server.load(DiscordEnpoints.CDN.default(+id % 4))
+		else
+			img = await get.images.server.load(
+				DiscordEnpoints.CDN.guild(id, guild.icon, {
+					format: validated.ext === 'gif' && !guild.icon.startsWith('a_') ? 'png' : validated.ext,
+				})
+			)
+		if (!img) {
+			img = await get.images.server.load(
+				DiscordEnpoints.CDN.default(+id % 4, { format: 'png', size: validated.size })
+			)
 			ext = 'png'
 		}
 
-
 		res.setHeader('Content-Type', `image/${ext}`)
 		res.setHeader('Cache-Control', 'public, max-age=86400')
 		res.send(img)
 	})
 
-	
-
 interface ApiRequest extends NextApiRequest {
 	query: {
 		id: string
-		size?: '128' | '256'  | '512'
+		size?: '128' | '256' | '512'
 	}
 }
 
-export default Icon
\ No newline at end of file
+export default Icon
diff --git a/pages/api/index.ts b/pages/api/index.ts
index ab4f75c..ab0262d 100644
--- a/pages/api/index.ts
+++ b/pages/api/index.ts
@@ -1 +1 @@
-export { default } from './[...404]'
\ No newline at end of file
+export { default } from './[...404]'
diff --git a/pages/api/v1/bots/servers.ts b/pages/api/v1/bots/servers.ts
index 2d98f35..06817e0 100644
--- a/pages/api/v1/bots/servers.ts
+++ b/pages/api/v1/bots/servers.ts
@@ -1,4 +1,4 @@
-import { NextApiRequest} from 'next'
+import { NextApiRequest } from 'next'
 import rateLimit from 'express-rate-limit'
 import { EmbedBuilder } from 'discord.js'
 
@@ -18,43 +18,65 @@ const limiter = rateLimit({
 	keyGenerator: (req) => req.headers.authorization,
 	skip: (req, res) => {
 		res.removeHeader('X-RateLimit-Global')
-		if(!req.headers.authorization) return true
+		if (!req.headers.authorization) return true
 		else return false
-	}
+	},
 })
 
 const BotStats = RequestHandler()
 	.post(limiter)
 	.post(async (req: PostApiRequest, res) => {
 		const bot = await get.BotAuthorization(req.headers.token)
-		if(!bot) return ResponseWrapper(res, { code: 401, version: 1 })
-		const validated: BotStatUpdate = await BotStatUpdateSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+		if (!bot) return ResponseWrapper(res, { code: 401, version: 1 })
+		const validated: BotStatUpdate = await BotStatUpdateSchema.validate(req.body, {
+			abortEarly: false,
+		})
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
-      
-		if(!validated) return
+
+		if (!validated) return
 		const botInfo = await get.bot.load(bot)
-		if(!botInfo) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.', version: 1 })
-		if(botInfo.id !== bot) return ResponseWrapper(res, { code: 403, version: 1 })
+		if (!botInfo)
+			return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.', version: 1 })
+		if (botInfo.id !== bot) return ResponseWrapper(res, { code: 403, version: 1 })
 		const d = await update.updateServer(botInfo.id, validated.servers, undefined)
-		if(d===1 || d===2) return ResponseWrapper(res, { code: 403, message: `서버 수를 ${[null, '1만', '100만'][d]} 이상으로 설정하실 수 없습니다. 문의해주세요.`, version: 1 })
+		if (d === 1 || d === 2)
+			return ResponseWrapper(res, {
+				code: 403,
+				message: `서버 수를 ${
+					[null, '1만', '100만'][d]
+				} 이상으로 설정하실 수 없습니다. 문의해주세요.`,
+				version: 1,
+			})
 		get.bot.clear(bot)
 		await webhookClients.internal.statsLog.send({
-			content: `[BOT/STATS] <@${botInfo.id}> (${botInfo.id})\n${makeDiscordCodeblock(`${botInfo.servers > validated.servers ? '-' : '+'} ${botInfo.servers} -> ${validated.servers} (${botInfo.servers > validated.servers ? '▼' : '▲'}${Math.abs(validated.servers - botInfo.servers)})`, 'diff')}`,
-			embeds: [new EmbedBuilder().setDescription(`${botInfo.name} - <@${botInfo.id}> ([${botInfo.id}](${KoreanbotsEndPoints.URL.bot(botInfo.id)}`)]
+			content: `[BOT/STATS] <@${botInfo.id}> (${botInfo.id})\n${makeDiscordCodeblock(
+				`${botInfo.servers > validated.servers ? '-' : '+'} ${botInfo.servers} -> ${
+					validated.servers
+				} (${botInfo.servers > validated.servers ? '▼' : '▲'}${Math.abs(
+					validated.servers - botInfo.servers
+				)})`,
+				'diff'
+			)}`,
+			embeds: [
+				new EmbedBuilder().setDescription(
+					`${botInfo.name} - <@${botInfo.id}> ([${botInfo.id}](${KoreanbotsEndPoints.URL.bot(
+						botInfo.id
+					)}`
+				),
+			],
 		})
 		return ResponseWrapper(res, { code: 200, message: '성공적으로 업데이트 했습니다.', version: 1 })
 	})
 
-
 interface PostApiRequest extends NextApiRequest {
-  headers: {
-    token: string
-  }
-  body: BotStatUpdate
+	headers: {
+		token: string
+	}
+	body: BotStatUpdate
 }
 
-export default BotStats
\ No newline at end of file
+export default BotStats
diff --git a/pages/api/v1/bots/voted/[id].ts b/pages/api/v1/bots/voted/[id].ts
index 28afbfb..4394a86 100644
--- a/pages/api/v1/bots/voted/[id].ts
+++ b/pages/api/v1/bots/voted/[id].ts
@@ -5,23 +5,26 @@ import ResponseWrapper from '@utils/ResponseWrapper'
 import Yup from '@utils/Yup'
 import { VOTE_COOLDOWN } from '@utils/Constants'
 
-const BotVoted = RequestHandler()
-	.get(async (req: ApiRequest, res) => {
-		const bot = await get.BotAuthorization(req.headers.token)
-		if(!bot) return ResponseWrapper(res, { code: 401, version: 1 })
-		const userID = await Yup.string().required().validate(req.query.id).then(el => el).catch(() => null)
-		if(!userID) return ResponseWrapper(res, { code: 400, version: 1 })
-		const result = await get.botVote(userID, bot)
-		return res.json({ code: 200, voted: +new Date() < result + VOTE_COOLDOWN })
-	})
+const BotVoted = RequestHandler().get(async (req: ApiRequest, res) => {
+	const bot = await get.BotAuthorization(req.headers.token)
+	if (!bot) return ResponseWrapper(res, { code: 401, version: 1 })
+	const userID = await Yup.string()
+		.required()
+		.validate(req.query.id)
+		.then((el) => el)
+		.catch(() => null)
+	if (!userID) return ResponseWrapper(res, { code: 400, version: 1 })
+	const result = await get.botVote(userID, bot)
+	return res.json({ code: 200, voted: +new Date() < result + VOTE_COOLDOWN })
+})
 
 interface ApiRequest extends NextApiRequest {
-  headers: {
-    token: string
-  }
-  query: {
-    id: string
-  }
+	headers: {
+		token: string
+	}
+	query: {
+		id: string
+	}
 }
 
-export default BotVoted
\ No newline at end of file
+export default BotVoted
diff --git a/pages/api/v2/applications/bots/[id]/index.ts b/pages/api/v2/applications/bots/[id]/index.ts
index 86a9af2..81dc34f 100644
--- a/pages/api/v2/applications/bots/[id]/index.ts
+++ b/pages/api/v2/applications/bots/[id]/index.ts
@@ -17,8 +17,8 @@ const BotApplications = RequestHandler().patch(async (req: ApiRequest, res) => {
 	const csrfValidated = checkToken(req, res, req.body._csrf)
 	if (!csrfValidated) return
 	const validated = await DeveloperBotSchema.validate(req.body, { abortEarly: false })
-		.then(el => el)
-		.catch(e => {
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -26,17 +26,24 @@ const BotApplications = RequestHandler().patch(async (req: ApiRequest, res) => {
 	if (!validated) return
 	const bot = await get.bot.load(req.query.id)
 	if (!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
-	if (!(bot.owners as User[]).find(el => el.id === user)) return ResponseWrapper(res, { code: 403 })
-	if(validated.webhookURL) {
+	if (!(bot.owners as User[]).find((el) => el.id === user))
+		return ResponseWrapper(res, { code: 403 })
+	if (validated.webhookURL) {
 		const key = await verifyWebhook(validated.webhookURL)
-		if(key === false) {
-			return ResponseWrapper(res, { code: 400, message: '웹후크 주소를 검증할 수 없습니다.', errors: ['웹후크 주소가 올바른지 확인해주세요.\n웹후크 주소 검증에 대한 자세한 내용은 API 문서를 참고해주세요.'] })
+		if (key === false) {
+			return ResponseWrapper(res, {
+				code: 400,
+				message: '웹후크 주소를 검증할 수 없습니다.',
+				errors: [
+					'웹후크 주소가 올바른지 확인해주세요.\n웹후크 주소 검증에 대한 자세한 내용은 API 문서를 참고해주세요.',
+				],
+			})
 		}
 		const client = webhookClients.bot.get(req.query.id)
-		if(client && validated.webhookURL !== client.url) {
+		if (client && validated.webhookURL !== client.url) {
 			destroyWebhookClient(req.query.id, 'bot')
 		}
-		await update.webhook(req.query.id, 'bots', { 
+		await update.webhook(req.query.id, 'bots', {
 			url: validated.webhookURL,
 			status: parseWebhookURL(validated.webhookURL) ? WebhookStatus.Discord : WebhookStatus.HTTP,
 			failedSince: null,
@@ -44,7 +51,7 @@ const BotApplications = RequestHandler().patch(async (req: ApiRequest, res) => {
 		})
 	} else {
 		destroyWebhookClient(req.query.id, 'bot')
-		await update.webhook(req.query.id, 'bots', { 
+		await update.webhook(req.query.id, 'bots', {
 			url: null,
 			status: WebhookStatus.None,
 			failedSince: null,
diff --git a/pages/api/v2/applications/bots/[id]/reset.ts b/pages/api/v2/applications/bots/[id]/reset.ts
index f8016c8..e4cf67e 100644
--- a/pages/api/v2/applications/bots/[id]/reset.ts
+++ b/pages/api/v2/applications/bots/[id]/reset.ts
@@ -14,8 +14,8 @@ const ResetApplication = RequestHandler().post(async (req: ApiRequest, res) => {
 	const csrfValidated = checkToken(req, res, req.body._csrf)
 	if (!csrfValidated) return
 	const validated = await ResetTokenSchema.validate(req.body, { abortEarly: false })
-		.then(el => el)
-		.catch(e => {
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -23,7 +23,8 @@ const ResetApplication = RequestHandler().post(async (req: ApiRequest, res) => {
 	if (!validated) return
 	const bot = await get.bot.load(req.query.id)
 	if (!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
-	if (!(bot.owners as User[]).find(el => el.id === user)) return ResponseWrapper(res, { code: 403 })
+	if (!(bot.owners as User[]).find((el) => el.id === user))
+		return ResponseWrapper(res, { code: 403 })
 	const d = await update.resetBotToken(req.query.id, validated.token)
 	if (!d) return ResponseWrapper(res, { code: 500, message: '무언가 잘못되었습니다.' })
 	return ResponseWrapper(res, { code: 200, data: { token: d } })
diff --git a/pages/api/v2/applications/servers/[id]/index.ts b/pages/api/v2/applications/servers/[id]/index.ts
index 746d045..93fc0af 100644
--- a/pages/api/v2/applications/servers/[id]/index.ts
+++ b/pages/api/v2/applications/servers/[id]/index.ts
@@ -17,8 +17,8 @@ const ServerApplications = RequestHandler().patch(async (req: ApiRequest, res) =
 	const csrfValidated = checkToken(req, res, req.body._csrf)
 	if (!csrfValidated) return
 	const validated = await DeveloperServerSchema.validate(req.body, { abortEarly: false })
-		.then(el => el)
-		.catch(e => {
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -27,16 +27,22 @@ const ServerApplications = RequestHandler().patch(async (req: ApiRequest, res) =
 	const server = await get.serverData(req.query.id)
 	if (!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버입니다.' })
 	if (![server.owner, ...server.admins].includes(user)) return ResponseWrapper(res, { code: 403 })
-	if(validated.webhookURL) {
+	if (validated.webhookURL) {
 		const key = await verifyWebhook(validated.webhookURL)
-		if(key === false) {
-			return ResponseWrapper(res, { code: 400, message: '웹후크 주소를 검증할 수 없습니다.', errors: ['웹후크 주소가 올바른지 확인해주세요.\n웹후크 주소 검증에 대한 자세한 내용은 API 문서를 참고해주세요.'] })
+		if (key === false) {
+			return ResponseWrapper(res, {
+				code: 400,
+				message: '웹후크 주소를 검증할 수 없습니다.',
+				errors: [
+					'웹후크 주소가 올바른지 확인해주세요.\n웹후크 주소 검증에 대한 자세한 내용은 API 문서를 참고해주세요.',
+				],
+			})
 		}
 		const client = webhookClients.server.get(req.query.id)
-		if(client && validated.webhookURL !== client.url) {
+		if (client && validated.webhookURL !== client.url) {
 			destroyWebhookClient(req.query.id, 'server')
 		}
-		await update.webhook(req.query.id, 'servers', { 
+		await update.webhook(req.query.id, 'servers', {
 			url: validated.webhookURL,
 			status: parseWebhookURL(validated.webhookURL) ? WebhookStatus.Discord : WebhookStatus.HTTP,
 			failedSince: null,
@@ -44,7 +50,7 @@ const ServerApplications = RequestHandler().patch(async (req: ApiRequest, res) =
 		})
 	} else {
 		destroyWebhookClient(req.query.id, 'server')
-		await update.webhook(req.query.id, 'servers', { 
+		await update.webhook(req.query.id, 'servers', {
 			url: null,
 			status: WebhookStatus.None,
 			failedSince: null,
diff --git a/pages/api/v2/applications/servers/[id]/reset.ts b/pages/api/v2/applications/servers/[id]/reset.ts
index 8df8d0f..feff081 100644
--- a/pages/api/v2/applications/servers/[id]/reset.ts
+++ b/pages/api/v2/applications/servers/[id]/reset.ts
@@ -12,8 +12,8 @@ const ResetApplication = RequestHandler().post(async (req: ApiRequest, res) => {
 	const csrfValidated = checkToken(req, res, req.body._csrf)
 	if (!csrfValidated) return
 	const validated = await ResetTokenSchema.validate(req.body, { abortEarly: false })
-		.then(el => el)
-		.catch(e => {
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -21,8 +21,14 @@ const ResetApplication = RequestHandler().post(async (req: ApiRequest, res) => {
 	if (!validated) return
 	const server = await get.server.load(req.query.id)
 	if (!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버입니다.' })
-	if(server.state === 'unreachable') return ResponseWrapper(res, { code: 400, message: '서버 정보를 불러올 수 없습니다.', errors: ['서버에서 봇이 추방되었거나, 봇이 오프라인이여서 서버 정보를 갱신할 수 없습니다.'] })
-	if (!(await get.serverOwners(server.id)).find(el => el.id === user)) return ResponseWrapper(res, { code: 403 })
+	if (server.state === 'unreachable')
+		return ResponseWrapper(res, {
+			code: 400,
+			message: '서버 정보를 불러올 수 없습니다.',
+			errors: ['서버에서 봇이 추방되었거나, 봇이 오프라인이여서 서버 정보를 갱신할 수 없습니다.'],
+		})
+	if (!(await get.serverOwners(server.id)).find((el) => el.id === user))
+		return ResponseWrapper(res, { code: 403 })
 	const d = await update.resetServerToken(req.query.id, validated.token)
 	if (!d) return ResponseWrapper(res, { code: 500, message: '무언가 잘못되었습니다.' })
 	return ResponseWrapper(res, { code: 200, data: { token: d } })
diff --git a/pages/api/v2/bots/[id]/index.ts b/pages/api/v2/bots/[id]/index.ts
index 03075e2..0c7c09c 100644
--- a/pages/api/v2/bots/[id]/index.ts
+++ b/pages/api/v2/bots/[id]/index.ts
@@ -6,10 +6,23 @@ import tracer from 'dd-trace'
 import { CaptchaVerify, get, put, remove, update } from '@utils/Query'
 import ResponseWrapper from '@utils/ResponseWrapper'
 import { checkToken } from '@utils/Csrf'
-import { AddBotSubmit, AddBotSubmitSchema, CsrfCaptcha, ManageBot, ManageBotSchema } from '@utils/Yup'
+import {
+	AddBotSubmit,
+	AddBotSubmitSchema,
+	CsrfCaptcha,
+	ManageBot,
+	ManageBotSchema,
+} from '@utils/Yup'
 import RequestHandler from '@utils/RequestHandler'
 import { User } from '@types'
-import { checkUserFlag, diff, inspect, makeDiscordCodeblock, objectDiff, serialize } from '@utils/Tools'
+import {
+	checkUserFlag,
+	diff,
+	inspect,
+	makeDiscordCodeblock,
+	objectDiff,
+	serialize,
+} from '@utils/Tools'
 import { discordLog, getMainGuild, webhookClients } from '@utils/DiscordBot'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 
@@ -21,7 +34,7 @@ const patchLimiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 const Bots = RequestHandler()
 	.get(async (req: GetApiRequest, res) => {
@@ -38,8 +51,8 @@ const Bots = RequestHandler()
 		if (!csrfValidated) return
 
 		const validated = await AddBotSubmitSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
@@ -48,7 +61,7 @@ const Bots = RequestHandler()
 		if (validated.id !== req.query.id)
 			return ResponseWrapper(res, { code: 400, errors: ['요청 주소와 Body의 정보가 다릅니다.'] })
 		const captcha = await CaptchaVerify(validated._captcha)
-		if(!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
+		if (!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
 		const result = await put.submitBot(user, validated)
 		if (result === 1)
 			return ResponseWrapper(res, {
@@ -82,30 +95,53 @@ const Bots = RequestHandler()
 			return ResponseWrapper(res, {
 				code: 403,
 				message: '더 이상 해당 봇에 대한 심사 요청을 하실 수 없습니다.',
-				errors: ['해당 봇은 심사에서 3회 이상 거부되었습니다. 더 이상의 심사를 요청하실 수 없습니다.', '이의 제기를 원하시는 경우 디스코드 서버를 통해 문의해주세요.'],
+				errors: [
+					'해당 봇은 심사에서 3회 이상 거부되었습니다. 더 이상의 심사를 요청하실 수 없습니다.',
+					'이의 제기를 원하시는 경우 디스코드 서버를 통해 문의해주세요.',
+				],
 			})
 		get.botSubmits.clear(user)
 
-		await discordLog('BOT/SUBMIT', user, new EmbedBuilder().setDescription(`[${result.id}/${result.date}](${KoreanbotsEndPoints.URL.submittedBot(result.id, result.date)})`), {
-			content: inspect(serialize(result)),
-			format: 'js'
-		})
+		await discordLog(
+			'BOT/SUBMIT',
+			user,
+			new EmbedBuilder().setDescription(
+				`[${result.id}/${result.date}](${KoreanbotsEndPoints.URL.submittedBot(
+					result.id,
+					result.date
+				)})`
+			),
+			{
+				content: inspect(serialize(result)),
+				format: 'js',
+			}
+		)
 		const userinfo = await get.user.load(user)
 		await webhookClients.internal.reviewLog.send({
 			embeds: [
 				new EmbedBuilder()
 					.setAuthor({
-						name: userinfo.tag === '0' ? `${userinfo.globalName} (@${userinfo.username})` : `${userinfo.username}#${userinfo.tag}`, 
-						iconURL: KoreanbotsEndPoints.URL.root + KoreanbotsEndPoints.CDN.avatar(userinfo.id, { format: 'png', size: 256 }), 
-						url: KoreanbotsEndPoints.URL.user(userinfo.id)
+						name:
+							userinfo.tag === '0'
+								? `${userinfo.globalName} (@${userinfo.username})`
+								: `${userinfo.username}#${userinfo.tag}`,
+						iconURL:
+							KoreanbotsEndPoints.URL.root +
+							KoreanbotsEndPoints.CDN.avatar(userinfo.id, { format: 'png', size: 256 }),
+						url: KoreanbotsEndPoints.URL.user(userinfo.id),
 					})
 					.setTitle('대기 중')
 					.setColor(Colors.Grey)
-					.setDescription(`[${result.id}/${result.date}](${KoreanbotsEndPoints.URL.submittedBot(result.id, result.date)})`)
-					.setTimestamp()
-			]
+					.setDescription(
+						`[${result.id}/${result.date}](${KoreanbotsEndPoints.URL.submittedBot(
+							result.id,
+							result.date
+						)})`
+					)
+					.setTimestamp(),
+			],
 		})
-		tracer.trace('botSubmits.submitted', span => {
+		tracer.trace('botSubmits.submitted', (span) => {
 			span.setTag('id', result.id)
 			span.setTag('date', result.date)
 			span.setTag('user', userinfo.id)
@@ -116,68 +152,114 @@ const Bots = RequestHandler()
 		const user = await get.Authorization(req.cookies.token)
 		if (!user) return ResponseWrapper(res, { code: 401 })
 		const bot = await get.bot.load(req.query.id)
-		if(!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
-		if((bot.owners as User[])[0].id !== user) return ResponseWrapper(res, { code: 403 })
+		if (!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
+		if ((bot.owners as User[])[0].id !== user) return ResponseWrapper(res, { code: 403 })
 		const userInfo = await get.user.load(user)
-		if(['reported', 'blocked', 'archived'].includes(bot.state) && !checkUserFlag(userInfo?.flags, 'staff')) return ResponseWrapper(res, { code: 403, message: '해당 봇은 수정할 수 없습니다.', errors: ['오류라고 생각되면 문의해주세요.'] })
+		if (
+			['reported', 'blocked', 'archived'].includes(bot.state) &&
+			!checkUserFlag(userInfo?.flags, 'staff')
+		)
+			return ResponseWrapper(res, {
+				code: 403,
+				message: '해당 봇은 수정할 수 없습니다.',
+				errors: ['오류라고 생각되면 문의해주세요.'],
+			})
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
 		const captcha = await CaptchaVerify(req.body._captcha)
-		if(!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
-		if(req.body.name !== bot.name) return ResponseWrapper(res, { code: 400, message: '봇 이름을 입력해주세요.' })
+		if (!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
+		if (req.body.name !== bot.name)
+			return ResponseWrapper(res, { code: 400, message: '봇 이름을 입력해주세요.' })
 		await remove.bot(bot.id)
 		await getMainGuild().members.cache.get(bot.id)?.kick('봇 삭제됨.')
 		get.user.clear(user)
-		await discordLog('BOT/DELETE', user, (new EmbedBuilder().setDescription(`${bot.name} - <@${bot.id}> ([${bot.id}](${KoreanbotsEndPoints.URL.bot(bot.id)}))`)),
+		await discordLog(
+			'BOT/DELETE',
+			user,
+			new EmbedBuilder().setDescription(
+				`${bot.name} - <@${bot.id}> ([${bot.id}](${KoreanbotsEndPoints.URL.bot(bot.id)}))`
+			),
 			{
 				content: inspect(bot),
-				format: 'js'
+				format: 'js',
 			}
 		)
 		return ResponseWrapper(res, { code: 200, message: '성공적으로 삭제했습니다.' })
 	})
-	.patch(patchLimiter).patch(async (req: PatchApiRequest, res) => {
+	.patch(patchLimiter)
+	.patch(async (req: PatchApiRequest, res) => {
 		const bot = await get.bot.load(req.query.id)
-		if(!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
+		if (!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
 		const user = await get.Authorization(req.cookies.token)
 		if (!user) return ResponseWrapper(res, { code: 401 })
 		const userInfo = await get.user.load(user)
-		if(['reported', 'blocked', 'archived'].includes(bot.state) && !checkUserFlag(userInfo?.flags, 'staff')) return ResponseWrapper(res, { code: 403, message: '해당 봇은 수정할 수 없습니다.', errors: ['오류라고 생각되면 문의해주세요.'] })
-		if(!(bot.owners as User[]).find(el => el.id === user) && !checkUserFlag(userInfo?.flags, 'staff')) return ResponseWrapper(res, { code: 403 })
+		if (
+			['reported', 'blocked', 'archived'].includes(bot.state) &&
+			!checkUserFlag(userInfo?.flags, 'staff')
+		)
+			return ResponseWrapper(res, {
+				code: 403,
+				message: '해당 봇은 수정할 수 없습니다.',
+				errors: ['오류라고 생각되면 문의해주세요.'],
+			})
+		if (
+			!(bot.owners as User[]).find((el) => el.id === user) &&
+			!checkUserFlag(userInfo?.flags, 'staff')
+		)
+			return ResponseWrapper(res, { code: 403 })
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
 
 		const validated = await ManageBotSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
 
 		if (!validated) return
-		
+
 		const result = await update.bot(req.query.id, validated)
-		if(result === 0) return ResponseWrapper(res, { code: 400 })
+		if (result === 0) return ResponseWrapper(res, { code: 400 })
 		else {
 			get.bot.clear(req.query.id)
-			const embed = new EmbedBuilder().setDescription(`${bot.name} - <@${bot.id}> ([${bot.id}](${KoreanbotsEndPoints.URL.bot(bot.id)}))`)
-			const diffData = objectDiff(
-				{ prefix: bot.prefix, library: bot.lib, web: bot.web, git: bot.git, url: bot.url, discord: bot.discord, intro: bot.intro, category: JSON.stringify(bot.category) },
-				{ prefix: validated.prefix, library: validated.library, web: validated.website, git: validated.git, url: validated.url, discord: validated.discord, intro: validated.intro, category: JSON.stringify(validated.category)  }
+			const embed = new EmbedBuilder().setDescription(
+				`${bot.name} - <@${bot.id}> ([${bot.id}](${KoreanbotsEndPoints.URL.bot(bot.id)}))`
 			)
-			diffData.forEach(d => {
-				embed.addFields({name: d[0], value: makeDiscordCodeblock(diff(d[1][0] || '', d[1][1] || ''), 'diff')
-				})
-			})
-			await discordLog('BOT/EDIT', user, embed,
+			const diffData = objectDiff(
 				{
-					content: `--- 설명\n${diff(bot.desc, validated.desc, true)}`,
-					format: 'diff'
+					prefix: bot.prefix,
+					library: bot.lib,
+					web: bot.web,
+					git: bot.git,
+					url: bot.url,
+					discord: bot.discord,
+					intro: bot.intro,
+					category: JSON.stringify(bot.category),
+				},
+				{
+					prefix: validated.prefix,
+					library: validated.library,
+					web: validated.website,
+					git: validated.git,
+					url: validated.url,
+					discord: validated.discord,
+					intro: validated.intro,
+					category: JSON.stringify(validated.category),
 				}
 			)
+			diffData.forEach((d) => {
+				embed.addFields({
+					name: d[0],
+					value: makeDiscordCodeblock(diff(d[1][0] || '', d[1][1] || ''), 'diff'),
+				})
+			})
+			await discordLog('BOT/EDIT', user, embed, {
+				content: `--- 설명\n${diff(bot.desc, validated.desc, true)}`,
+				format: 'diff',
+			})
 			return ResponseWrapper(res, { code: 200 })
 		}
-
 	})
 
 interface GetApiRequest extends NextApiRequest {
@@ -195,7 +277,7 @@ interface PatchApiRequest extends GetApiRequest {
 }
 
 interface DeleteApiRequest extends GetApiRequest {
-		body: CsrfCaptcha & { name: string } | null
+	body: (CsrfCaptcha & { name: string }) | null
 }
 
 export default Bots
diff --git a/pages/api/v2/bots/[id]/owners.ts b/pages/api/v2/bots/[id]/owners.ts
index ec55335..c8dfb82 100644
--- a/pages/api/v2/bots/[id]/owners.ts
+++ b/pages/api/v2/bots/[id]/owners.ts
@@ -11,40 +11,69 @@ import { discordLog } from '@utils/DiscordBot'
 import { EmbedBuilder } from 'discord.js'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 
-const BotOwners = RequestHandler()
-	.patch(async (req: PostApiRequest, res) => {
-		const user = await get.Authorization(req.cookies.token)
-		if (!user) return ResponseWrapper(res, { code: 401 })
-		const userinfo = await get.user.load(user)
-		const bot = await get.bot.load(req.query.id)
-		if(!bot) return ResponseWrapper(res, { code: 404 })
-		if((bot.owners as User[])[0].id !== user && !checkUserFlag(userinfo.flags, 'staff')) return ResponseWrapper(res, { code: 403 })
-		if(['reported', 'blocked', 'archived'].includes(bot.state) && !checkUserFlag(userinfo.flags, 'staff')) return ResponseWrapper(res, { code: 403, message: '해당 봇은 수정할 수 없습니다.', errors: ['오류라고 생각되면 문의해주세요.'] })
-		const validated = await EditBotOwnerSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
-				ResponseWrapper(res, { code: 400, errors: e.errors })
-				return null
-			})
-		if(!validated) return
-		const csrfValidated = checkToken(req, res, validated._csrf)
-		if (!csrfValidated) return
-		const captcha = await CaptchaVerify(validated._captcha)
-		if(!captcha) return
-		const userFetched: User[] = await Promise.all(validated.owners.map((u: string) => get.user.load(u)))
-		if(userFetched.indexOf(null) !== -1) return ResponseWrapper(res, { code: 400, message: '올바르지 않은 유저 ID를 포함하고 있습니다.' })
-		if(userFetched.length > 1 && userFetched[0].id !== (bot.owners as User[])[0].id) return ResponseWrapper(res, { code: 400, errors: ['소유자를 이전할 때는 다른 관리자를 포함할 수 없습니다.'] })
-		await update.botOwners(bot.id, validated.owners)
-		get.user.clear(user)
-		await discordLog('BOT/OWNERS', userinfo.id, (new EmbedBuilder().setDescription(`${bot.name} - <@${bot.id}> ([${bot.id}](${KoreanbotsEndPoints.URL.bot(bot.id)}))`)), null, makeDiscordCodeblock(diff(JSON.stringify(bot.owners.map(el => el.id)), JSON.stringify(validated.owners)), 'diff'))
-		return ResponseWrapper(res, { code: 200 })
-	})
+const BotOwners = RequestHandler().patch(async (req: PostApiRequest, res) => {
+	const user = await get.Authorization(req.cookies.token)
+	if (!user) return ResponseWrapper(res, { code: 401 })
+	const userinfo = await get.user.load(user)
+	const bot = await get.bot.load(req.query.id)
+	if (!bot) return ResponseWrapper(res, { code: 404 })
+	if ((bot.owners as User[])[0].id !== user && !checkUserFlag(userinfo.flags, 'staff'))
+		return ResponseWrapper(res, { code: 403 })
+	if (
+		['reported', 'blocked', 'archived'].includes(bot.state) &&
+		!checkUserFlag(userinfo.flags, 'staff')
+	)
+		return ResponseWrapper(res, {
+			code: 403,
+			message: '해당 봇은 수정할 수 없습니다.',
+			errors: ['오류라고 생각되면 문의해주세요.'],
+		})
+	const validated = await EditBotOwnerSchema.validate(req.body, { abortEarly: false })
+		.then((el) => el)
+		.catch((e) => {
+			ResponseWrapper(res, { code: 400, errors: e.errors })
+			return null
+		})
+	if (!validated) return
+	const csrfValidated = checkToken(req, res, validated._csrf)
+	if (!csrfValidated) return
+	const captcha = await CaptchaVerify(validated._captcha)
+	if (!captcha) return
+	const userFetched: User[] = await Promise.all(
+		validated.owners.map((u: string) => get.user.load(u))
+	)
+	if (userFetched.indexOf(null) !== -1)
+		return ResponseWrapper(res, {
+			code: 400,
+			message: '올바르지 않은 유저 ID를 포함하고 있습니다.',
+		})
+	if (userFetched.length > 1 && userFetched[0].id !== (bot.owners as User[])[0].id)
+		return ResponseWrapper(res, {
+			code: 400,
+			errors: ['소유자를 이전할 때는 다른 관리자를 포함할 수 없습니다.'],
+		})
+	await update.botOwners(bot.id, validated.owners)
+	get.user.clear(user)
+	await discordLog(
+		'BOT/OWNERS',
+		userinfo.id,
+		new EmbedBuilder().setDescription(
+			`${bot.name} - <@${bot.id}> ([${bot.id}](${KoreanbotsEndPoints.URL.bot(bot.id)}))`
+		),
+		null,
+		makeDiscordCodeblock(
+			diff(JSON.stringify(bot.owners.map((el) => el.id)), JSON.stringify(validated.owners)),
+			'diff'
+		)
+	)
+	return ResponseWrapper(res, { code: 200 })
+})
 
 interface PostApiRequest extends NextApiRequest {
-  query: {
-    id: string
-  },
-  body: EditBotOwner
+	query: {
+		id: string
+	}
+	body: EditBotOwner
 }
 
-export default BotOwners
\ No newline at end of file
+export default BotOwners
diff --git a/pages/api/v2/bots/[id]/report.ts b/pages/api/v2/bots/[id]/report.ts
index 08d17dd..7010b7a 100644
--- a/pages/api/v2/bots/[id]/report.ts
+++ b/pages/api/v2/bots/[id]/report.ts
@@ -4,7 +4,7 @@ import rateLimit from 'express-rate-limit'
 import { get } from '@utils/Query'
 import RequestHandler from '@utils/RequestHandler'
 import ResponseWrapper from '@utils/ResponseWrapper'
-import { ReportSchema, Report} from '@utils/Yup'
+import { ReportSchema, Report } from '@utils/Yup'
 import { webhookClients } from '@utils/DiscordBot'
 import { checkToken } from '@utils/Csrf'
 
@@ -18,36 +18,40 @@ const limiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 
-const BotReport = RequestHandler().post(limiter)
+const BotReport = RequestHandler()
+	.post(limiter)
 	.post(async (req: PostApiRequest, res) => {
 		const user = await get.Authorization(req.cookies.token)
-		if(!user) return ResponseWrapper(res, { code: 401 })
+		if (!user) return ResponseWrapper(res, { code: 401 })
 		const bot = await get.bot.load(req.query.id)
-		if(!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
+		if (!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
-		if(!req.body) return ResponseWrapper(res, { code: 400 })
+		if (!req.body) return ResponseWrapper(res, { code: 400 })
 		const validated: Report = await ReportSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
-      
-		if(!validated) return
-		await webhookClients.internal.reportChannel.send({ threadName: `봇-${bot.id}`, content: `Reported by <@${user}> (${user})\nReported **${bot.name}** <@${bot.id}> (${bot.id})\nCategory ${req.body.category}\nDesc\n\`\`\`${req.body.description}\`\`\``, allowedMentions: { parse: ['users'] }})
+
+		if (!validated) return
+		await webhookClients.internal.reportChannel.send({
+			threadName: `봇-${bot.id}`,
+			content: `Reported by <@${user}> (${user})\nReported **${bot.name}** <@${bot.id}> (${bot.id})\nCategory ${req.body.category}\nDesc\n\`\`\`${req.body.description}\`\`\``,
+			allowedMentions: { parse: ['users'] },
+		})
 		return ResponseWrapper(res, { code: 200, message: '성공적으로 처리되었습니다.' })
 	})
 
-
 interface PostApiRequest extends NextApiRequest {
-  body: Report | null
-  query: {
-    id: string
-  }
+	body: Report | null
+	query: {
+		id: string
+	}
 }
 
-export default BotReport
\ No newline at end of file
+export default BotReport
diff --git a/pages/api/v2/bots/[id]/stats.ts b/pages/api/v2/bots/[id]/stats.ts
index 886ed98..641a3b3 100644
--- a/pages/api/v2/bots/[id]/stats.ts
+++ b/pages/api/v2/bots/[id]/stats.ts
@@ -21,9 +21,9 @@ const limiter = rateLimit({
 	keyGenerator: (req) => req.headers.authorization,
 	skip: (req, res) => {
 		res.removeHeader('X-RateLimit-Global')
-		if(!req.headers.authorization) return true
+		if (!req.headers.authorization) return true
 		else return false
-	}
+	},
 })
 
 const patchLimiter = rateLimit({
@@ -36,27 +36,36 @@ const patchLimiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 
-const BotStats = RequestHandler().post(limiter)
+const BotStats = RequestHandler()
+	.post(limiter)
 	.post(async (req: PostApiRequest, res) => {
 		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(!bot) return ResponseWrapper(res, { code: 401 })
-		if(!req.body) return ResponseWrapper(res, { code: 400 })
-		const validated: BotStatUpdate = await BotStatUpdateSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+		if (!bot) return ResponseWrapper(res, { code: 401 })
+		if (!req.body) return ResponseWrapper(res, { code: 400 })
+		const validated: BotStatUpdate = await BotStatUpdateSchema.validate(req.body, {
+			abortEarly: false,
+		})
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
 
-		if(!validated) return
+		if (!validated) return
 		const botInfo = await get.bot.load(req.query.id)
-		if(!botInfo) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
-		if(botInfo.id !== bot) return ResponseWrapper(res, { code: 403 })
+		if (!botInfo) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
+		if (botInfo.id !== bot) return ResponseWrapper(res, { code: 403 })
 		const d = await update.updateServer(botInfo.id, validated.servers, validated.shards)
-		if(d===1 || d===2) return ResponseWrapper(res, { code: 403, message: `서버 수를 ${[null, '1만', '100만'][d]} 이상으로 설정하실 수 없습니다. 문의해주세요.` })
+		if (d === 1 || d === 2)
+			return ResponseWrapper(res, {
+				code: 403,
+				message: `서버 수를 ${
+					[null, '1만', '100만'][d]
+				} 이상으로 설정하실 수 없습니다. 문의해주세요.`,
+			})
 		get.bot.clear(req.query.id)
 		if (validated.servers && botInfo.servers !== validated.servers) {
 			sendWebhook(botInfo, {
@@ -67,37 +76,54 @@ const BotStats = RequestHandler().post(limiter)
 					before: botInfo.servers,
 					after: validated.servers,
 				},
-				timestamp: Date.now()
+				timestamp: Date.now(),
 			})
 		}
 		await webhookClients.internal.statsLog.send({
-			content: `[BOT/STATS] <@${botInfo.id}> (${botInfo.id})\n${makeDiscordCodeblock(`${botInfo.servers > validated.servers ? '-' : '+'} ${botInfo.servers} -> ${validated.servers} (${botInfo.servers > validated.servers ? '▼' : '▲'}${Math.abs(validated.servers - botInfo.servers)})`, 'diff')}`, 
-			embeds: [new EmbedBuilder().setDescription(`${botInfo.name} - <@${botInfo.id}> ([${botInfo.id}](${KoreanbotsEndPoints.URL.bot(botInfo.id)}))`)]
+			content: `[BOT/STATS] <@${botInfo.id}> (${botInfo.id})\n${makeDiscordCodeblock(
+				`${botInfo.servers > validated.servers ? '-' : '+'} ${botInfo.servers} -> ${
+					validated.servers
+				} (${botInfo.servers > validated.servers ? '▼' : '▲'}${Math.abs(
+					validated.servers - botInfo.servers
+				)})`,
+				'diff'
+			)}`,
+			embeds: [
+				new EmbedBuilder().setDescription(
+					`${botInfo.name} - <@${botInfo.id}> ([${botInfo.id}](${KoreanbotsEndPoints.URL.bot(
+						botInfo.id
+					)}))`
+				),
+			],
 		})
-		return ResponseWrapper(res, { code: 200, message: '성공적으로 업데이트 했습니다.'})
+		return ResponseWrapper(res, { code: 200, message: '성공적으로 업데이트 했습니다.' })
 	})
-	.patch(patchLimiter).patch(async (req: ApiRequest, res) => {
+	.patch(patchLimiter)
+	.patch(async (req: ApiRequest, res) => {
 		const user = await get.Authorization(req.cookies.token)
 		if (!user) return ResponseWrapper(res, { code: 401 })
 		const userinfo = await get.user.load(user)
 		const bot = await get.bot.load(req.query.id)
-		if(!bot) return ResponseWrapper(res, { code: 404 })
-		if(!(bot.owners as User[]).find(el => el.id === user) && !checkUserFlag(userinfo.flags, 'staff')) return ResponseWrapper(res, { code: 403 })
+		if (!bot) return ResponseWrapper(res, { code: 404 })
+		if (
+			!(bot.owners as User[]).find((el) => el.id === user) &&
+			!checkUserFlag(userinfo.flags, 'staff')
+		)
+			return ResponseWrapper(res, { code: 403 })
 		get.bot.clear(req.query.id)
 		return ResponseWrapper(res, { code: 200 })
 	})
 
-
 interface ApiRequest extends NextApiRequest {
 	query: {
 		id: string
 	}
 }
 interface PostApiRequest extends ApiRequest {
-  query: {
-    id: string
-  }
-  body: BotStatUpdate
+	query: {
+		id: string
+	}
+	body: BotStatUpdate
 }
 
-export default BotStats
\ No newline at end of file
+export default BotStats
diff --git a/pages/api/v2/bots/[id]/vote.ts b/pages/api/v2/bots/[id]/vote.ts
index c194983..080cbc7 100644
--- a/pages/api/v2/bots/[id]/vote.ts
+++ b/pages/api/v2/bots/[id]/vote.ts
@@ -12,29 +12,37 @@ import { WebhookType } from '@types'
 const BotVote = RequestHandler()
 	.get(async (req: GetApiRequest, res) => {
 		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(!bot) return ResponseWrapper(res, { code: 401 })
-		if(req.query.id !== bot) return ResponseWrapper(res, { code: 403 })
-		const userID = await Yup.string().required().label('userID').validate(req.query.userID).then(el => el).catch(e => {
-			ResponseWrapper(res, { code: 400, errors: e.errors })
-			return null
-		})
-		if(!userID) return ResponseWrapper(res, { code: 400 })
+		if (!bot) return ResponseWrapper(res, { code: 401 })
+		if (req.query.id !== bot) return ResponseWrapper(res, { code: 403 })
+		const userID = await Yup.string()
+			.required()
+			.label('userID')
+			.validate(req.query.userID)
+			.then((el) => el)
+			.catch((e) => {
+				ResponseWrapper(res, { code: 400, errors: e.errors })
+				return null
+			})
+		if (!userID) return ResponseWrapper(res, { code: 400 })
 		const result = await get.botVote(userID, bot)
-		return ResponseWrapper(res, { code: 200, data: { voted: +new Date() < result + VOTE_COOLDOWN, lastVote: result } })
+		return ResponseWrapper(res, {
+			code: 200,
+			data: { voted: +new Date() < result + VOTE_COOLDOWN, lastVote: result },
+		})
 	})
 	.post(async (req: PostApiRequest, res) => {
 		const user = await get.Authorization(req.cookies.token)
-		if(!user) return ResponseWrapper(res, { code: 401 })
+		if (!user) return ResponseWrapper(res, { code: 401 })
 		const bot = await get.bot.load(req.query.id)
 		if (!bot) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 봇입니다.' })
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
 		const captcha = await CaptchaVerify(req.body._captcha)
-		if(!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
+		if (!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
 
 		const vote = await put.voteBot(user, bot.id)
-		if(vote === null) return ResponseWrapper(res, { code: 401 })
-		else if(vote === true) {
+		if (vote === null) return ResponseWrapper(res, { code: 401 })
+		else if (vote === true) {
 			sendWebhook(bot, {
 				type: 'bot',
 				data: {
@@ -42,19 +50,18 @@ const BotVote = RequestHandler()
 					type: WebhookType.HeartChange,
 					before: bot.votes,
 					after: bot.votes + 1,
-					userId: user
+					userId: user,
 				},
-				timestamp: Date.now()
+				timestamp: Date.now(),
 			})
 			return ResponseWrapper(res, { code: 200 })
-		}
-		else return ResponseWrapper(res, { code: 429, data: { retryAfter: vote } })
+		} else return ResponseWrapper(res, { code: 429, data: { retryAfter: vote } })
 	})
 
 interface ApiRequest extends NextApiRequest {
-  query: {
-    id: string
-  }
+	query: {
+		id: string
+	}
 }
 
 interface GetApiRequest extends ApiRequest {
@@ -65,8 +72,8 @@ interface GetApiRequest extends ApiRequest {
 }
 interface PostApiRequest extends ApiRequest {
 	body: {
-    _captcha: string
-    _csrf: string
-  }
+		_captcha: string
+		_csrf: string
+	}
 }
-export default BotVote
\ No newline at end of file
+export default BotVote
diff --git a/pages/api/v2/list/bots/new.ts b/pages/api/v2/list/bots/new.ts
index cb3d6ec..280c32f 100644
--- a/pages/api/v2/list/bots/new.ts
+++ b/pages/api/v2/list/bots/new.ts
@@ -9,4 +9,4 @@ const NewList = RequestHandler().get(async (_req, res) => {
 	return ResponseWrapper<List<Bot>>(res, { code: 200, data: result })
 })
 
-export default NewList
\ No newline at end of file
+export default NewList
diff --git a/pages/api/v2/list/bots/votes.ts b/pages/api/v2/list/bots/votes.ts
index 97bb0e4..22a91b1 100644
--- a/pages/api/v2/list/bots/votes.ts
+++ b/pages/api/v2/list/bots/votes.ts
@@ -6,14 +6,20 @@ import { Bot, List } from '@types'
 import Yup from '@utils/Yup'
 
 const VotesList = RequestHandler().get(async (req, res) => {
-	const page = await Yup.number().positive().integer().notRequired().default(1).label('페이지').validate(req.query.page)
-		.then(el => el)
-		.catch(e => {
+	const page = await Yup.number()
+		.positive()
+		.integer()
+		.notRequired()
+		.default(1)
+		.label('페이지')
+		.validate(req.query.page)
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 		})
-	if(!page) return
+	if (!page) return
 	const result = await get.list.votes.load(page)
 	return ResponseWrapper<List<Bot>>(res, { code: 200, data: result })
 })
 
-export default VotesList
\ No newline at end of file
+export default VotesList
diff --git a/pages/api/v2/management/bots/submits/[id]/[date]/approve.ts b/pages/api/v2/management/bots/submits/[id]/[date]/approve.ts
index f84d28b..3f6f5f4 100644
--- a/pages/api/v2/management/bots/submits/[id]/[date]/approve.ts
+++ b/pages/api/v2/management/bots/submits/[id]/[date]/approve.ts
@@ -8,36 +8,47 @@ import { get, update } from '@utils/Query'
 import { DiscordBot, webhookClients } from '@utils/DiscordBot'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 
-const ApproveBotSubmit = RequestHandler()
-	.post(async (req: ApiRequest, res) => {
-		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
-		const submit = await get.botSubmit.load(JSON.stringify({ id: req.query.id, date: req.query.date }))
-		if(!submit) return ResponseWrapper(res, { code: 404 })
-		if(submit.state !== 0) return ResponseWrapper(res, { code: 400, message: '대기 중이지 않은 아이디입니다.' })
-		const result = await update.approveBotSubmission(submit.id, submit.date)
-		if(!result) return ResponseWrapper(res, { code: 400 })
-		get.botSubmit.clear(JSON.stringify({ id: req.query.id, date: req.query.date }))
-		get.bot.clear(req.query.id)
-		const embed = new EmbedBuilder().setTitle('승인').setColor(Colors.Green).setDescription(`[${submit.id}/${submit.date}](${KoreanbotsEndPoints.URL.submittedBot(submit.id, submit.date)})`).setTimestamp()
-		if(req.body.reviewer) embed.addFields({name: '📃 정보', value: `심사자: ${req.body.reviewer}`})
-		await webhookClients.internal.reviewLog.send({embeds: [embed]})
-		tracer.trace('botSubmits.approve', span => {
-			span.setTag('id', submit.id)
-			span.setTag('date', submit.date)
-			span.setTag('reviewer', req.body.reviewer)
-		})
-		return ResponseWrapper(res, { code: 200 })
+const ApproveBotSubmit = RequestHandler().post(async (req: ApiRequest, res) => {
+	const bot = await get.BotAuthorization(req.headers.authorization)
+	if (bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
+	const submit = await get.botSubmit.load(
+		JSON.stringify({ id: req.query.id, date: req.query.date })
+	)
+	if (!submit) return ResponseWrapper(res, { code: 404 })
+	if (submit.state !== 0)
+		return ResponseWrapper(res, { code: 400, message: '대기 중이지 않은 아이디입니다.' })
+	const result = await update.approveBotSubmission(submit.id, submit.date)
+	if (!result) return ResponseWrapper(res, { code: 400 })
+	get.botSubmit.clear(JSON.stringify({ id: req.query.id, date: req.query.date }))
+	get.bot.clear(req.query.id)
+	const embed = new EmbedBuilder()
+		.setTitle('승인')
+		.setColor(Colors.Green)
+		.setDescription(
+			`[${submit.id}/${submit.date}](${KoreanbotsEndPoints.URL.submittedBot(
+				submit.id,
+				submit.date
+			)})`
+		)
+		.setTimestamp()
+	if (req.body.reviewer) embed.addFields({ name: '📃 정보', value: `심사자: ${req.body.reviewer}` })
+	await webhookClients.internal.reviewLog.send({ embeds: [embed] })
+	tracer.trace('botSubmits.approve', (span) => {
+		span.setTag('id', submit.id)
+		span.setTag('date', submit.date)
+		span.setTag('reviewer', req.body.reviewer)
 	})
+	return ResponseWrapper(res, { code: 200 })
+})
 
 interface ApiRequest extends NextApiRequest {
-  query: {
-    id: string
-    date: string
-  }
-  body: {
+	query: {
+		id: string
+		date: string
+	}
+	body: {
 		reviewer?: string
-  }
+	}
 }
 
-export default ApproveBotSubmit
\ No newline at end of file
+export default ApproveBotSubmit
diff --git a/pages/api/v2/management/bots/submits/[id]/[date]/deny.ts b/pages/api/v2/management/bots/submits/[id]/[date]/deny.ts
index c7d24de..b9fef1b 100644
--- a/pages/api/v2/management/bots/submits/[id]/[date]/deny.ts
+++ b/pages/api/v2/management/bots/submits/[id]/[date]/deny.ts
@@ -8,40 +8,71 @@ import { get, update } from '@utils/Query'
 import { DiscordBot, webhookClients } from '@utils/DiscordBot'
 import { BotSubmissionDenyReasonPresetsName, KoreanbotsEndPoints } from '@utils/Constants'
 
-const DenyBotSubmit = RequestHandler()
-	.post(async (req: ApiRequest, res) => {
-		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
-		const submit = await get.botSubmit.load(JSON.stringify({ id: req.query.id, date: req.query.date }))
-		if(!submit) return ResponseWrapper(res, { code: 404 })
-		if(submit.state !== 0) return ResponseWrapper(res, { code: 400, message: '대기 중이지 않은 아이디입니다.' })
-		await update.denyBotSubmission(submit.id, submit.date, req.body.reason)
-		get.botSubmit.clear(JSON.stringify({ id: req.query.id, date: req.query.date }))
-		const embed = new EmbedBuilder().setTitle('거부').setColor(Colors.Red).setDescription(`[${submit.id}/${submit.date}](${KoreanbotsEndPoints.URL.submittedBot(submit.id, submit.date)})`).setTimestamp()
-		if(req.body.reviewer || req.body.reason) embed.addFields({name: '📃 정보', value: `${req.body.reason ? `사유: ${BotSubmissionDenyReasonPresetsName[req.body.reason] || req.body.reason}\n`: ''}${req.body.reviewer ? `심사자: ${req.body.reviewer}` : ''}`})
-		await webhookClients.internal.reviewLog.send({embeds: [embed]})
-		const openEmbed = new EmbedBuilder().setTitle('거부').setColor(Colors.Red).setDescription(`<@${submit.id}> (${submit.id})`).setTimestamp()
-		if(req.body.reason) openEmbed.addFields({name: '📃 사유', value: `${req.body.reason ? `${BotSubmissionDenyReasonPresetsName[req.body.reason] || req.body.reason}\n`: '없음'}`})
-		await webhookClients.internal.openReviewLog.send({embeds: [openEmbed]})
-		tracer.trace('botSubmits.deny', span => {
-			span.setTag('id', submit.id)
-			span.setTag('date', submit.date)
-			span.setTag('reviewer', req.body.reviewer)
-			span.setTag('reason', BotSubmissionDenyReasonPresetsName[req.body.reason] || 'OTHER')
-			span.setTag('_raw_reason', req.body.reason)
+const DenyBotSubmit = RequestHandler().post(async (req: ApiRequest, res) => {
+	const bot = await get.BotAuthorization(req.headers.authorization)
+	if (bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
+	const submit = await get.botSubmit.load(
+		JSON.stringify({ id: req.query.id, date: req.query.date })
+	)
+	if (!submit) return ResponseWrapper(res, { code: 404 })
+	if (submit.state !== 0)
+		return ResponseWrapper(res, { code: 400, message: '대기 중이지 않은 아이디입니다.' })
+	await update.denyBotSubmission(submit.id, submit.date, req.body.reason)
+	get.botSubmit.clear(JSON.stringify({ id: req.query.id, date: req.query.date }))
+	const embed = new EmbedBuilder()
+		.setTitle('거부')
+		.setColor(Colors.Red)
+		.setDescription(
+			`[${submit.id}/${submit.date}](${KoreanbotsEndPoints.URL.submittedBot(
+				submit.id,
+				submit.date
+			)})`
+		)
+		.setTimestamp()
+	if (req.body.reviewer || req.body.reason)
+		embed.addFields({
+			name: '📃 정보',
+			value: `${
+				req.body.reason
+					? `사유: ${BotSubmissionDenyReasonPresetsName[req.body.reason] || req.body.reason}\n`
+					: ''
+			}${req.body.reviewer ? `심사자: ${req.body.reviewer}` : ''}`,
 		})
-		return ResponseWrapper(res, { code: 200 })
+	await webhookClients.internal.reviewLog.send({ embeds: [embed] })
+	const openEmbed = new EmbedBuilder()
+		.setTitle('거부')
+		.setColor(Colors.Red)
+		.setDescription(`<@${submit.id}> (${submit.id})`)
+		.setTimestamp()
+	if (req.body.reason)
+		openEmbed.addFields({
+			name: '📃 사유',
+			value: `${
+				req.body.reason
+					? `${BotSubmissionDenyReasonPresetsName[req.body.reason] || req.body.reason}\n`
+					: '없음'
+			}`,
+		})
+	await webhookClients.internal.openReviewLog.send({ embeds: [openEmbed] })
+	tracer.trace('botSubmits.deny', (span) => {
+		span.setTag('id', submit.id)
+		span.setTag('date', submit.date)
+		span.setTag('reviewer', req.body.reviewer)
+		span.setTag('reason', BotSubmissionDenyReasonPresetsName[req.body.reason] || 'OTHER')
+		span.setTag('_raw_reason', req.body.reason)
 	})
+	return ResponseWrapper(res, { code: 200 })
+})
 
 interface ApiRequest extends NextApiRequest {
-  query: {
-    id: string
-    date: string
-  }
-  body: {
-    reason?: string
+	query: {
+		id: string
+		date: string
+	}
+	body: {
+		reason?: string
 		reviewer: string
-  }
+	}
 }
 
 export default DenyBotSubmit
diff --git a/pages/api/v2/management/bots/submits/[id]/[date]/index.ts b/pages/api/v2/management/bots/submits/[id]/[date]/index.ts
index 5f3a4db..70bda77 100644
--- a/pages/api/v2/management/bots/submits/[id]/[date]/index.ts
+++ b/pages/api/v2/management/bots/submits/[id]/[date]/index.ts
@@ -5,20 +5,21 @@ import ResponseWrapper from '@utils/ResponseWrapper'
 import { get } from '@utils/Query'
 import { DiscordBot } from '@utils/DiscordBot'
 
-const BotSubmit = RequestHandler()
-	.get(async (req: ApiRequest, res) => {
-		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
-		const submit = await get.botSubmit.load(JSON.stringify({ id: req.query.id, date: req.query.date }))
-		if(!submit) return ResponseWrapper(res, { code: 404 })
-		return ResponseWrapper(res, { code: 200, data: submit })
-	})
+const BotSubmit = RequestHandler().get(async (req: ApiRequest, res) => {
+	const bot = await get.BotAuthorization(req.headers.authorization)
+	if (bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
+	const submit = await get.botSubmit.load(
+		JSON.stringify({ id: req.query.id, date: req.query.date })
+	)
+	if (!submit) return ResponseWrapper(res, { code: 404 })
+	return ResponseWrapper(res, { code: 200, data: submit })
+})
 
 interface ApiRequest extends NextApiRequest {
-  query: {
-    id: string
+	query: {
+		id: string
 		date: string
-  }
+	}
 }
 
-export default BotSubmit
\ No newline at end of file
+export default BotSubmit
diff --git a/pages/api/v2/management/bots/submits/[id]/history.ts b/pages/api/v2/management/bots/submits/[id]/history.ts
index f6580e1..a45878f 100644
--- a/pages/api/v2/management/bots/submits/[id]/history.ts
+++ b/pages/api/v2/management/bots/submits/[id]/history.ts
@@ -5,17 +5,16 @@ import ResponseWrapper from '@utils/ResponseWrapper'
 import { get } from '@utils/Query'
 import { DiscordBot } from '@utils/DiscordBot'
 
-const BotSubmit = RequestHandler()
-	.get(async (req: ApiRequest, res) => {
-		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
-		return ResponseWrapper(res, { code: 200, data: await get.botSubmitHistory(req.query.id) })
-	})
+const BotSubmit = RequestHandler().get(async (req: ApiRequest, res) => {
+	const bot = await get.BotAuthorization(req.headers.authorization)
+	if (bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
+	return ResponseWrapper(res, { code: 200, data: await get.botSubmitHistory(req.query.id) })
+})
 
 interface ApiRequest extends NextApiRequest {
-  query: {
-    id: string
-  }
+	query: {
+		id: string
+	}
 }
 
-export default BotSubmit
\ No newline at end of file
+export default BotSubmit
diff --git a/pages/api/v2/management/bots/submits/[id]/index.ts b/pages/api/v2/management/bots/submits/[id]/index.ts
index 9d6dd14..089550f 100644
--- a/pages/api/v2/management/bots/submits/[id]/index.ts
+++ b/pages/api/v2/management/bots/submits/[id]/index.ts
@@ -5,19 +5,18 @@ import ResponseWrapper from '@utils/ResponseWrapper'
 import { get } from '@utils/Query'
 import { DiscordBot } from '@utils/DiscordBot'
 
-const BotSubmit = RequestHandler()
-	.get(async (req: ApiRequest, res) => {
-		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
-		const submits = await get.botSubmitList()
-		const submit = submits.find((el, n) => el.id === req.query.id || n+1 === Number(req.query.id))
-		if(!submit) return ResponseWrapper(res, { code: 404 })
-		return ResponseWrapper(res, { code: 200, data: submit })
-	})
+const BotSubmit = RequestHandler().get(async (req: ApiRequest, res) => {
+	const bot = await get.BotAuthorization(req.headers.authorization)
+	if (bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
+	const submits = await get.botSubmitList()
+	const submit = submits.find((el, n) => el.id === req.query.id || n + 1 === Number(req.query.id))
+	if (!submit) return ResponseWrapper(res, { code: 404 })
+	return ResponseWrapper(res, { code: 200, data: submit })
+})
 
 interface ApiRequest extends NextApiRequest {
-  query: {
-    id: string
-  }
+	query: {
+		id: string
+	}
 }
-export default BotSubmit
\ No newline at end of file
+export default BotSubmit
diff --git a/pages/api/v2/management/bots/submits/index.ts b/pages/api/v2/management/bots/submits/index.ts
index 8f6381c..2167b36 100644
--- a/pages/api/v2/management/bots/submits/index.ts
+++ b/pages/api/v2/management/bots/submits/index.ts
@@ -3,12 +3,11 @@ import ResponseWrapper from '@utils/ResponseWrapper'
 import { get } from '@utils/Query'
 import { DiscordBot } from '@utils/DiscordBot'
 
-const BotSubmits = RequestHandler()
-	.get(async (req, res) => {
-		const bot = await get.BotAuthorization(req.headers.authorization)
-		if(bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
-		const submits = await get.botSubmitList()
-		return ResponseWrapper(res, { code: 200, data: submits })
-	})
+const BotSubmits = RequestHandler().get(async (req, res) => {
+	const bot = await get.BotAuthorization(req.headers.authorization)
+	if (bot !== DiscordBot.user.id) return ResponseWrapper(res, { code: 403 })
+	const submits = await get.botSubmitList()
+	return ResponseWrapper(res, { code: 200, data: submits })
+})
 
-export default BotSubmits
\ No newline at end of file
+export default BotSubmits
diff --git a/pages/api/v2/management/index.ts b/pages/api/v2/management/index.ts
index cbb7592..69b81bc 100644
--- a/pages/api/v2/management/index.ts
+++ b/pages/api/v2/management/index.ts
@@ -1,9 +1,8 @@
 import RequestHandler from '@utils/RequestHandler'
 import ResponseWrapper from '@utils/ResponseWrapper'
 
-const BotSubmits = RequestHandler()
-	.get(async (_req, res) => {
-		return ResponseWrapper(res, { code: 403, message: 'Private API' })
-	})
+const BotSubmits = RequestHandler().get(async (_req, res) => {
+	return ResponseWrapper(res, { code: 403, message: 'Private API' })
+})
 
-export default BotSubmits
\ No newline at end of file
+export default BotSubmits
diff --git a/pages/api/v2/management/load.ts b/pages/api/v2/management/load.ts
index 815acce..9229392 100644
--- a/pages/api/v2/management/load.ts
+++ b/pages/api/v2/management/load.ts
@@ -1,4 +1,3 @@
-
 import { NextApiHandler } from 'next'
 import { getMainGuild } from '@utils/DiscordBot'
 import RequestHandler from '@utils/RequestHandler'
diff --git a/pages/api/v2/search/all.ts b/pages/api/v2/search/all.ts
index de6c8a4..43d2bab 100644
--- a/pages/api/v2/search/all.ts
+++ b/pages/api/v2/search/all.ts
@@ -9,8 +9,8 @@ import { Bot, Server, List } from '@types'
 
 const Search = RequestHandler().get(async (req: ApiRequest, res) => {
 	const validated = await SearchQuerySchema.validate({ q: req.query.q || req.query.query, page: 1 })
-		.then(el => el)
-		.catch(e => {
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 		})
 	if (!validated) return
@@ -27,7 +27,10 @@ const Search = RequestHandler().get(async (req: ApiRequest, res) => {
 	} catch {
 		return ResponseWrapper(res, { code: 400, message: '검색 문법이 잘못되었습니다.' })
 	}
-	return ResponseWrapper<{ bots: Bot[], servers: Server[] }>(res, { code: 200, data: { bots: botResult?.data || [], servers: serverResult?.data || [] } })
+	return ResponseWrapper<{ bots: Bot[]; servers: Server[] }>(res, {
+		code: 200,
+		data: { bots: botResult?.data || [], servers: serverResult?.data || [] },
+	})
 })
 
 interface ApiRequest extends NextApiRequest {
diff --git a/pages/api/v2/search/bots.ts b/pages/api/v2/search/bots.ts
index 8aac1ed..eeb711b 100644
--- a/pages/api/v2/search/bots.ts
+++ b/pages/api/v2/search/bots.ts
@@ -8,9 +8,12 @@ import { SearchQuerySchema } from '@utils/Yup'
 import { Bot, List } from '@types'
 
 const SearchBots = RequestHandler().get(async (req: ApiRequest, res: NextApiResponse) => {
-	const validated = await SearchQuerySchema.validate({ q: req.query.q || req.query.query, page: req.query.page })
-		.then(el => el)
-		.catch(e => {
+	const validated = await SearchQuerySchema.validate({
+		q: req.query.q || req.query.query,
+		page: req.query.page,
+	})
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 		})
 	if (!validated) return
diff --git a/pages/api/v2/search/servers.ts b/pages/api/v2/search/servers.ts
index a974171..e255cd9 100644
--- a/pages/api/v2/search/servers.ts
+++ b/pages/api/v2/search/servers.ts
@@ -8,9 +8,12 @@ import { SearchQuerySchema } from '@utils/Yup'
 import { Server, List } from '@types'
 
 const SearchServers = RequestHandler().get(async (req: ApiRequest, res: NextApiResponse) => {
-	const validated = await SearchQuerySchema.validate({ q: req.query.q || req.query.query, page: req.query.page })
-		.then(el => el)
-		.catch(e => {
+	const validated = await SearchQuerySchema.validate({
+		q: req.query.q || req.query.query,
+		page: req.query.page,
+	})
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 		})
 	if (!validated) return
diff --git a/pages/api/v2/servers/[id]/index.ts b/pages/api/v2/servers/[id]/index.ts
index aae6b03..986cfdd 100644
--- a/pages/api/v2/servers/[id]/index.ts
+++ b/pages/api/v2/servers/[id]/index.ts
@@ -5,9 +5,22 @@ import { EmbedBuilder, RESTJSONErrorCodes } from 'discord.js'
 import { CaptchaVerify, get, put, remove, update } from '@utils/Query'
 import ResponseWrapper from '@utils/ResponseWrapper'
 import { checkToken } from '@utils/Csrf'
-import { AddServerSubmitSchema, AddServerSubmit, CsrfCaptcha, ManageServerSchema, ManageServer } from '@utils/Yup'
+import {
+	AddServerSubmitSchema,
+	AddServerSubmit,
+	CsrfCaptcha,
+	ManageServerSchema,
+	ManageServer,
+} from '@utils/Yup'
 import RequestHandler from '@utils/RequestHandler'
-import { checkUserFlag, diff, inspect, makeDiscordCodeblock, objectDiff, serialize } from '@utils/Tools'
+import {
+	checkUserFlag,
+	diff,
+	inspect,
+	makeDiscordCodeblock,
+	objectDiff,
+	serialize,
+} from '@utils/Tools'
 import { DiscordBot, discordLog } from '@utils/DiscordBot'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 
@@ -19,14 +32,14 @@ const patchLimiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 const Servers = RequestHandler()
 	.get(async (req: GetApiRequest, res) => {
 		const server = await get.server.load(req.query.id)
 		if (!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버 입니다.' })
 		else {
-			return ResponseWrapper(res, { code: 200, data: server })	
+			return ResponseWrapper(res, { code: 200, data: server })
 		}
 	})
 	.post(async (req: PostApiRequest, res) => {
@@ -36,20 +49,20 @@ const Servers = RequestHandler()
 		if (!csrfValidated) return
 
 		const validated = await AddServerSubmitSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
 
 		if (!validated) return
 		const captcha = await CaptchaVerify(validated._captcha)
-		if(!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
+		if (!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
 		const result = await put.submitServer(user, req.query.id, validated)
 		if (result === 1)
 			return ResponseWrapper(res, {
 				code: 400,
-				message: '이미 등록된 서버 입니다.'
+				message: '이미 등록된 서버 입니다.',
 			})
 		else if (result === 2)
 			return ResponseWrapper(res, {
@@ -57,7 +70,7 @@ const Servers = RequestHandler()
 				message: '봇이 초대되지 않았습니다.',
 				errors: [
 					'서버에 봇이 초대되지 않았습니다.',
-					'이미 봇을 초대하셨다면, 잠시 후 다시 시도해주세요.'
+					'이미 봇을 초대하셨다면, 잠시 후 다시 시도해주세요.',
 				],
 			})
 		else if (result === 3)
@@ -66,7 +79,7 @@ const Servers = RequestHandler()
 				message: '서버의 관리자가 아닙니다.',
 				errors: [
 					'해당 서버를 등록할 권한이 없습니다.',
-					'서버에서 관리자 권한이 있으신지 확인해주세요.'
+					'서버에서 관리자 권한이 있으신지 확인해주세요.',
 				],
 			})
 		else if (result === 4)
@@ -75,14 +88,21 @@ const Servers = RequestHandler()
 				message: '올바르지 않은 초대 코드 입니다.',
 				errors: [
 					'올바른 초대코드를 입력하셨는지 확인해주세요.',
-					'만료되지 않는 초대코드인지 확인해주세요.'
+					'만료되지 않는 초대코드인지 확인해주세요.',
 				],
 			})
 		get.user.clear(user)
-		await discordLog('SERVER/SUBMIT', user, new EmbedBuilder().setDescription(`[${req.query.id}](${KoreanbotsEndPoints.URL.server(req.query.id)})`), {
-			content: inspect(serialize(validated)),
-			format: 'js'
-		})
+		await discordLog(
+			'SERVER/SUBMIT',
+			user,
+			new EmbedBuilder().setDescription(
+				`[${req.query.id}](${KoreanbotsEndPoints.URL.server(req.query.id)})`
+			),
+			{
+				content: inspect(serialize(validated)),
+				format: 'js',
+			}
+		)
 
 		return ResponseWrapper(res, { code: 200, data: result })
 	})
@@ -90,74 +110,120 @@ const Servers = RequestHandler()
 		const user = await get.Authorization(req.cookies.token)
 		if (!user) return ResponseWrapper(res, { code: 401 })
 		const server = await get.server.load(req.query.id)
-		if(!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버 입니다.' })
+		if (!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버 입니다.' })
 		const data = await get.serverData(req.query.id)
-		if((!data || server.state === 'unreachable') && (await DiscordBot.fetchInvite(server.invite).catch((e) => e.code !== RESTJSONErrorCodes.UnknownInvite))) return ResponseWrapper(res, { code: 400, message: '해당 서버의 정보를 불러올 수 없습니다.', errors: ['봇이 추방되었거나, 오프라인이 아닌지 확인하시고 다시 시도해주세요.'] })
-		if(![data.owner, ...data.admins].includes(user)) return ResponseWrapper(res, { code: 403 })
+		if (
+			(!data || server.state === 'unreachable') &&
+			(await DiscordBot.fetchInvite(server.invite).catch(
+				(e) => e.code !== RESTJSONErrorCodes.UnknownInvite
+			))
+		)
+			return ResponseWrapper(res, {
+				code: 400,
+				message: '해당 서버의 정보를 불러올 수 없습니다.',
+				errors: ['봇이 추방되었거나, 오프라인이 아닌지 확인하시고 다시 시도해주세요.'],
+			})
+		if (![data.owner, ...data.admins].includes(user)) return ResponseWrapper(res, { code: 403 })
 		const userInfo = await get.user.load(user)
-		if(['reported', 'blocked'].includes(server.state) && !checkUserFlag(userInfo?.flags, 'staff')) return ResponseWrapper(res, { code: 403, message: '해당 서버는 수정할 수 없습니다.', errors: ['오류라고 생각되면 문의해주세요.'] })
+		if (['reported', 'blocked'].includes(server.state) && !checkUserFlag(userInfo?.flags, 'staff'))
+			return ResponseWrapper(res, {
+				code: 403,
+				message: '해당 서버는 수정할 수 없습니다.',
+				errors: ['오류라고 생각되면 문의해주세요.'],
+			})
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
 		const captcha = await CaptchaVerify(req.body._captcha)
-		if(!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
-		if(req.body.name !== server.name) return ResponseWrapper(res, { code: 400, message: '봇 이름을 입력해주세요.' })
+		if (!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
+		if (req.body.name !== server.name)
+			return ResponseWrapper(res, { code: 400, message: '봇 이름을 입력해주세요.' })
 		await remove.server(server.id)
 		get.user.clear(user)
-		await discordLog('SERVER/DELETE', user, (new EmbedBuilder().setDescription(`${server.name} - [${server.id}](${KoreanbotsEndPoints.URL.bot(server.id)}))`)),
+		await discordLog(
+			'SERVER/DELETE',
+			user,
+			new EmbedBuilder().setDescription(
+				`${server.name} - [${server.id}](${KoreanbotsEndPoints.URL.bot(server.id)}))`
+			),
 			{
 				content: inspect(server),
-				format: 'js'
+				format: 'js',
 			}
 		)
 		return ResponseWrapper(res, { code: 200, message: '성공적으로 삭제했습니다.' })
 	})
-	.patch(patchLimiter).patch(async (req: PatchApiRequest, res) => {
+	.patch(patchLimiter)
+	.patch(async (req: PatchApiRequest, res) => {
 		const server = await get.server.load(req.query.id)
-		if(!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버입니다.' })
+		if (!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버입니다.' })
 		const user = await get.Authorization(req.cookies.token)
 		if (!user) return ResponseWrapper(res, { code: 401 })
 		const userInfo = await get.user.load(user)
 		const data = await get.serverData(req.query.id)
-		if(!data || server.state === 'unreachable') return ResponseWrapper(res, { code: 400, message: '해당 서버의 정보를 불러올 수 없습니다.', errors: ['봇이 추방되었거나, 오프라인이 아닌지 확인하시고 다시 시도해주세요.'] })
-		if(![data.owner, ...data.admins].includes(user) && !checkUserFlag(userInfo?.flags, 'staff')) return ResponseWrapper(res, { code: 403 })
-		if(['reported', 'blocked'].includes(server.state) && !checkUserFlag(userInfo?.flags, 'staff')) return ResponseWrapper(res, { code: 403, message: '해당 서버는 수정할 수 없습니다.', errors: ['오류라고 생각되면 문의해주세요.'] })
+		if (!data || server.state === 'unreachable')
+			return ResponseWrapper(res, {
+				code: 400,
+				message: '해당 서버의 정보를 불러올 수 없습니다.',
+				errors: ['봇이 추방되었거나, 오프라인이 아닌지 확인하시고 다시 시도해주세요.'],
+			})
+		if (![data.owner, ...data.admins].includes(user) && !checkUserFlag(userInfo?.flags, 'staff'))
+			return ResponseWrapper(res, { code: 403 })
+		if (['reported', 'blocked'].includes(server.state) && !checkUserFlag(userInfo?.flags, 'staff'))
+			return ResponseWrapper(res, {
+				code: 403,
+				message: '해당 서버는 수정할 수 없습니다.',
+				errors: ['오류라고 생각되면 문의해주세요.'],
+			})
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
 
 		const validated = await ManageServerSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
 
 		if (!validated) return
 		const invite = await DiscordBot.fetchInvite(validated.invite).catch(() => null)
-		if(invite?.guild.id !== server.id || invite.expiresAt) return ResponseWrapper(res, { code: 400, message: '올바르지 않은 초대코드입니다.', errors: ['입력하신 초대코드가 올바르지 않습니다. 올바른 초대코드를 입력했는지 다시 한 번 확인해주세요.', '만료되지 않는 초대코드인지 확인해주세요.'] })
-		
+		if (invite?.guild.id !== server.id || invite.expiresAt)
+			return ResponseWrapper(res, {
+				code: 400,
+				message: '올바르지 않은 초대코드입니다.',
+				errors: [
+					'입력하신 초대코드가 올바르지 않습니다. 올바른 초대코드를 입력했는지 다시 한 번 확인해주세요.',
+					'만료되지 않는 초대코드인지 확인해주세요.',
+				],
+			})
+
 		const result = await update.server(req.query.id, validated)
-		
-		if(result === 0) return ResponseWrapper(res, { code: 400 })
+
+		if (result === 0) return ResponseWrapper(res, { code: 400 })
 		else {
 			get.server.clear(req.query.id)
-			const embed = new EmbedBuilder().setDescription(`${server.name} - ([${server.id}](${KoreanbotsEndPoints.URL.server(server.id)}))`)
+			const embed = new EmbedBuilder().setDescription(
+				`${server.name} - ([${server.id}](${KoreanbotsEndPoints.URL.server(server.id)}))`
+			)
 			const diffData = objectDiff(
 				{ intro: server.intro, invite: server.invite, category: JSON.stringify(server.category) },
-				{ intro: validated.intro, invite: validated.invite, category: JSON.stringify(validated.category) },
-			)
-			diffData.forEach(d => {
-				embed.addFields({name: d[0], value: makeDiscordCodeblock(diff(d[1][0] || '', d[1][1] || ''), 'diff')
-				})
-			})
-			await discordLog('SERVER/EDIT', user, embed,
 				{
-					content: `--- 설명\n${diff(server.desc, validated.desc, true)}`,
-					format: 'diff'
+					intro: validated.intro,
+					invite: validated.invite,
+					category: JSON.stringify(validated.category),
 				}
 			)
+			diffData.forEach((d) => {
+				embed.addFields({
+					name: d[0],
+					value: makeDiscordCodeblock(diff(d[1][0] || '', d[1][1] || ''), 'diff'),
+				})
+			})
+			await discordLog('SERVER/EDIT', user, embed, {
+				content: `--- 설명\n${diff(server.desc, validated.desc, true)}`,
+				format: 'diff',
+			})
 			return ResponseWrapper(res, { code: 200 })
 		}
-		
 	})
 
 interface GetApiRequest extends NextApiRequest {
@@ -175,7 +241,7 @@ interface PatchApiRequest extends GetApiRequest {
 }
 
 interface DeleteApiRequest extends GetApiRequest {
-		body: CsrfCaptcha & { name: string } | null
+	body: (CsrfCaptcha & { name: string }) | null
 }
 
 export default Servers
diff --git a/pages/api/v2/servers/[id]/owners.ts b/pages/api/v2/servers/[id]/owners.ts
index 1b1560e..808999d 100644
--- a/pages/api/v2/servers/[id]/owners.ts
+++ b/pages/api/v2/servers/[id]/owners.ts
@@ -4,17 +4,16 @@ import RequestHandler from '@utils/RequestHandler'
 import ResponseWrapper from '@utils/ResponseWrapper'
 import { get } from '@utils/Query'
 
-const ServerOwners = RequestHandler()
-	.get(async (req: GetApiRequest, res) => {
-		const owners = await get.serverOwners(req.query.id)
-		if(!owners) return ResponseWrapper(res, { code: 404 })
-		return ResponseWrapper(res, { code: 200, data: owners })
-	})
+const ServerOwners = RequestHandler().get(async (req: GetApiRequest, res) => {
+	const owners = await get.serverOwners(req.query.id)
+	if (!owners) return ResponseWrapper(res, { code: 404 })
+	return ResponseWrapper(res, { code: 200, data: owners })
+})
 
 interface GetApiRequest extends NextApiRequest {
-  query: {
-    id: string
-  }
+	query: {
+		id: string
+	}
 }
 
-export default ServerOwners
\ No newline at end of file
+export default ServerOwners
diff --git a/pages/api/v2/servers/[id]/report.ts b/pages/api/v2/servers/[id]/report.ts
index 27aff1d..59bd76b 100644
--- a/pages/api/v2/servers/[id]/report.ts
+++ b/pages/api/v2/servers/[id]/report.ts
@@ -4,7 +4,7 @@ import rateLimit from 'express-rate-limit'
 import { get } from '@utils/Query'
 import RequestHandler from '@utils/RequestHandler'
 import ResponseWrapper from '@utils/ResponseWrapper'
-import { ReportSchema, Report} from '@utils/Yup'
+import { ReportSchema, Report } from '@utils/Yup'
 import { webhookClients } from '@utils/DiscordBot'
 import { checkToken } from '@utils/Csrf'
 
@@ -18,36 +18,40 @@ const limiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 
-const ServerReport = RequestHandler().post(limiter)
+const ServerReport = RequestHandler()
+	.post(limiter)
 	.post(async (req: PostApiRequest, res) => {
 		const user = await get.Authorization(req.cookies.token)
-		if(!user) return ResponseWrapper(res, { code: 401 })
+		if (!user) return ResponseWrapper(res, { code: 401 })
 		const server = await get.server.load(req.query.id)
-		if(!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버입니다.' })
+		if (!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버입니다.' })
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
-		if(!req.body) return ResponseWrapper(res, { code: 400 })
+		if (!req.body) return ResponseWrapper(res, { code: 400 })
 		const validated: Report = await ReportSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
-      
-		if(!validated) return
-		await webhookClients.internal.reportChannel.send({ threadName: `서버-${server.id}`, content: `Reported by <@${user}> (${user})\nReported **${server.name}** (${server.id})\nCategory ${req.body.category}\nDesc\n\`\`\`${req.body.description}\`\`\``, allowedMentions: { parse: ['users'] }})
+
+		if (!validated) return
+		await webhookClients.internal.reportChannel.send({
+			threadName: `서버-${server.id}`,
+			content: `Reported by <@${user}> (${user})\nReported **${server.name}** (${server.id})\nCategory ${req.body.category}\nDesc\n\`\`\`${req.body.description}\`\`\``,
+			allowedMentions: { parse: ['users'] },
+		})
 		return ResponseWrapper(res, { code: 200, message: '성공적으로 처리되었습니다.' })
 	})
 
-
 interface PostApiRequest extends NextApiRequest {
-  body: Report | null
-  query: {
-    id: string
-  }
+	body: Report | null
+	query: {
+		id: string
+	}
 }
 
-export default ServerReport
\ No newline at end of file
+export default ServerReport
diff --git a/pages/api/v2/servers/[id]/vote.ts b/pages/api/v2/servers/[id]/vote.ts
index b0f2d46..108b2dd 100644
--- a/pages/api/v2/servers/[id]/vote.ts
+++ b/pages/api/v2/servers/[id]/vote.ts
@@ -12,49 +12,56 @@ import { WebhookType } from '@types'
 const ServerVote = RequestHandler()
 	.get(async (req: GetApiRequest, res) => {
 		const server = await get.ServerAuthorization(req.headers.authorization)
-		if(!server) return ResponseWrapper(res, { code: 401 })
-		if(req.query.id !== server) return ResponseWrapper(res, { code: 403 })
-		const userID = await Yup.string().required().label('userID').validate(req.query.userID).then(el => el).catch(e => {
-			ResponseWrapper(res, { code: 400, errors: e.errors })
-			return null
-		})
-		if(!userID) return ResponseWrapper(res, { code: 400 })
+		if (!server) return ResponseWrapper(res, { code: 401 })
+		if (req.query.id !== server) return ResponseWrapper(res, { code: 403 })
+		const userID = await Yup.string()
+			.required()
+			.label('userID')
+			.validate(req.query.userID)
+			.then((el) => el)
+			.catch((e) => {
+				ResponseWrapper(res, { code: 400, errors: e.errors })
+				return null
+			})
+		if (!userID) return ResponseWrapper(res, { code: 400 })
 		const result = await get.vote(userID, server, 'server')
-		return ResponseWrapper(res, { code: 200, data: { voted: +new Date() < result + VOTE_COOLDOWN, lastVote: result } })
+		return ResponseWrapper(res, {
+			code: 200,
+			data: { voted: +new Date() < result + VOTE_COOLDOWN, lastVote: result },
+		})
 	})
 	.post(async (req: PostApiRequest, res) => {
 		const user = await get.Authorization(req.cookies.token)
-		if(!user) return ResponseWrapper(res, { code: 401 })
+		if (!user) return ResponseWrapper(res, { code: 401 })
 		const server = await get.server.load(req.query.id)
 		if (!server) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 서버입니다.' })
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
 		const captcha = await CaptchaVerify(req.body._captcha)
-		if(!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
+		if (!captcha) return ResponseWrapper(res, { code: 400, message: '캡챠 검증에 실패하였습니다.' })
 
 		const vote = await put.voteServer(user, server.id)
-		if(vote === null) return ResponseWrapper(res, { code: 401 })
-		else if(vote === true) {
+		if (vote === null) return ResponseWrapper(res, { code: 401 })
+		else if (vote === true) {
 			sendWebhook(server, {
-				type: 'server',				
+				type: 'server',
 				data: {
 					guildId: server.id,
 					type: WebhookType.HeartChange,
 					before: server.votes,
 					after: server.votes + 1,
-					userId: user
+					userId: user,
 				},
-				timestamp: Date.now()
+				timestamp: Date.now(),
 			})
 			return ResponseWrapper(res, { code: 200 })
-		}
-		else return ResponseWrapper(res, { code: 429, data: { retryAfter: vote } })
+		} else return ResponseWrapper(res, { code: 429, data: { retryAfter: vote } })
 	})
 
 interface ApiRequest extends NextApiRequest {
-  query: {
-    id: string
-  }
+	query: {
+		id: string
+	}
 }
 
 interface GetApiRequest extends ApiRequest {
@@ -65,8 +72,8 @@ interface GetApiRequest extends ApiRequest {
 }
 interface PostApiRequest extends ApiRequest {
 	body: {
-    _captcha: string
-    _csrf: string
-  }
+		_captcha: string
+		_csrf: string
+	}
 }
-export default ServerVote
\ No newline at end of file
+export default ServerVote
diff --git a/pages/api/v2/users/[id]/report.ts b/pages/api/v2/users/[id]/report.ts
index 12bd2e3..8043e29 100644
--- a/pages/api/v2/users/[id]/report.ts
+++ b/pages/api/v2/users/[id]/report.ts
@@ -1,10 +1,10 @@
-import { NextApiRequest} from 'next'
+import { NextApiRequest } from 'next'
 import rateLimit from 'express-rate-limit'
 
 import { get } from '@utils/Query'
 import RequestHandler from '@utils/RequestHandler'
 import ResponseWrapper from '@utils/ResponseWrapper'
-import { ReportSchema, Report} from '@utils/Yup'
+import { ReportSchema, Report } from '@utils/Yup'
 import { webhookClients } from '@utils/DiscordBot'
 import { checkToken } from '@utils/Csrf'
 
@@ -17,36 +17,46 @@ const limiter = rateLimit({
 	skip: (_req, res) => {
 		res.removeHeader('X-RateLimit-Global')
 		return false
-	}
+	},
 })
 
-const UserReport = RequestHandler().post(limiter)
+const UserReport = RequestHandler()
+	.post(limiter)
 	.post(async (req: PostApiRequest, res) => {
 		const user = await get.Authorization(req.cookies.token)
-		if(!user) return ResponseWrapper(res, { code: 401 })
+		if (!user) return ResponseWrapper(res, { code: 401 })
 		const userInfo = await get.user.load(req.query.id)
-		if(!userInfo) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 유저입니다.' })
+		if (!userInfo) return ResponseWrapper(res, { code: 404, message: '존재하지 않는 유저입니다.' })
 		const csrfValidated = checkToken(req, res, req.body._csrf)
 		if (!csrfValidated) return
-		if(!req.body) return ResponseWrapper(res, { code: 400 })
+		if (!req.body) return ResponseWrapper(res, { code: 400 })
 		const validated: Report = await ReportSchema.validate(req.body, { abortEarly: false })
-			.then(el => el)
-			.catch(e => {
+			.then((el) => el)
+			.catch((e) => {
 				ResponseWrapper(res, { code: 400, errors: e.errors })
 				return null
 			})
-      
-		if(!validated) return
-		await webhookClients.internal.reportChannel.send({ threadName: `유저-${userInfo.id}`, content: `Reported by <@${user}> (${user})\nReported **${userInfo.tag === '0' ? userInfo.globalName + ' @' + userInfo.username : userInfo.username + '#' + userInfo.tag}** <@${userInfo.id}> (${userInfo.id})\nCategory ${req.body.category}\nDesc\n\`\`\`${req.body.description}\`\`\``, allowedMentions: { parse: ['users'] }})
+
+		if (!validated) return
+		await webhookClients.internal.reportChannel.send({
+			threadName: `유저-${userInfo.id}`,
+			content: `Reported by <@${user}> (${user})\nReported **${
+				userInfo.tag === '0'
+					? userInfo.globalName + ' @' + userInfo.username
+					: userInfo.username + '#' + userInfo.tag
+			}** <@${userInfo.id}> (${userInfo.id})\nCategory ${req.body.category}\nDesc\n\`\`\`${
+				req.body.description
+			}\`\`\``,
+			allowedMentions: { parse: ['users'] },
+		})
 		return ResponseWrapper(res, { code: 200, message: '성공적으로 처리되었습니다.' })
 	})
 
-
 interface PostApiRequest extends NextApiRequest {
-  body: Report | null
-  query: {
-    id: string
-  }
+	body: Report | null
+	query: {
+		id: string
+	}
 }
 
-export default UserReport 
\ No newline at end of file
+export default UserReport
diff --git a/pages/api/widget/bots/[type]/[id].ts b/pages/api/widget/bots/[type]/[id].ts
index ab22bae..64e3e3e 100644
--- a/pages/api/widget/bots/[type]/[id].ts
+++ b/pages/api/widget/bots/[type]/[id].ts
@@ -20,8 +20,8 @@ const Widget = RequestHandler().get(async (req: ApiRequest, res: NextApiResponse
 		scale,
 		icon,
 	})
-		.then(el => el)
-		.catch(e => {
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -34,8 +34,8 @@ const Widget = RequestHandler().get(async (req: ApiRequest, res: NextApiResponse
 	const userImage = !data.avatar
 		? null
 		: await get.images.user.load(
-			DiscordEnpoints.CDN.user(data.id, data.avatar, { format: 'png', size: 128 })
-		)
+				DiscordEnpoints.CDN.user(data.id, data.avatar, { format: 'png', size: 128 })
+		  )
 	const img =
 		userImage ||
 		(await get.images.user.load(
diff --git a/pages/api/widget/servers/[type]/[id].ts b/pages/api/widget/servers/[type]/[id].ts
index b663c35..45df7c7 100644
--- a/pages/api/widget/servers/[type]/[id].ts
+++ b/pages/api/widget/servers/[type]/[id].ts
@@ -20,8 +20,8 @@ const Widget = RequestHandler().get(async (req: ApiRequest, res: NextApiResponse
 		scale,
 		icon,
 	})
-		.then(el => el)
-		.catch(e => {
+		.then((el) => el)
+		.catch((e) => {
 			ResponseWrapper(res, { code: 400, errors: e.errors })
 			return null
 		})
@@ -34,8 +34,8 @@ const Widget = RequestHandler().get(async (req: ApiRequest, res: NextApiResponse
 	const userImage = !data.icon
 		? null
 		: await get.images.user.load(
-			DiscordEnpoints.CDN.guild(data.id, data.icon, { format: 'png', size: 128 })
-		)
+				DiscordEnpoints.CDN.guild(data.id, data.icon, { format: 'png', size: 128 })
+		  )
 	const img =
 		userImage ||
 		(await get.images.user.load(
diff --git a/pages/bots/[id]/edit.tsx b/pages/bots/[id]/edit.tsx
index 2d1ab3c..7478979 100644
--- a/pages/bots/[id]/edit.tsx
+++ b/pages/bots/[id]/edit.tsx
@@ -37,290 +37,535 @@ const Modal = dynamic(() => import('@components/Modal'))
 const Captcha = dynamic(() => import('@components/Captcha'))
 const Login = dynamic(() => import('@components/Login'))
 
-const ManageBotPage:NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }) => {
-	const [ data, setData ] = useState(null)
-	const [ adminModal, setAdminModal ] = useState(false)
-	const [ transferModal, setTransferModal ] = useState(false)
-	const [ deleteModal, setDeleteModal ] = useState(false)
+const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }) => {
+	const [data, setData] = useState(null)
+	const [adminModal, setAdminModal] = useState(false)
+	const [transferModal, setTransferModal] = useState(false)
+	const [deleteModal, setDeleteModal] = useState(false)
 	const router = useRouter()
 
 	async function submitBot(value: ManageBot) {
-		const res = await Fetch(`/bots/${bot.id}`, { method: 'PATCH', body: JSON.stringify(cleanObject<ManageBot>(value)) })
+		const res = await Fetch(`/bots/${bot.id}`, {
+			method: 'PATCH',
+			body: JSON.stringify(cleanObject<ManageBot>(value)),
+		})
 		setData(res)
 	}
 
 	async function getUser(id: string) {
 		const u = await Fetch<User>(`/users/${encodeURIComponent(id)}`)
-		if(u.code === 200 && u.data) return u.data
+		if (u.code === 200 && u.data) return u.data
 		else return null
 	}
 
-	if(!bot) return <NotFound />
-	if(!user) return <Login>
-		<NextSeo title='봇 정보 수정하기' description='봇의 정보를 수정합니다.'/>
-	</Login>
-	if(!(bot.owners as User[]).find(el => el.id === user.id) && !checkUserFlag(user.flags, 'staff')) return <Forbidden />
+	if (!bot) return <NotFound />
+	if (!user)
+		return (
+			<Login>
+				<NextSeo title='봇 정보 수정하기' description='봇의 정보를 수정합니다.' />
+			</Login>
+		)
+	if (
+		!(bot.owners as User[]).find((el) => el.id === user.id) &&
+		!checkUserFlag(user.flags, 'staff')
+	)
+		return <Forbidden />
 	return (
-		<Container paddingTop className='pt-5 pb-10'>
-			<NextSeo title={`${bot.name} 수정하기`} description='봇의 정보를 수정합니다.'/>
-			<h1 className='text-3xl font-bold mb-8'>봇 관리하기</h1>
-			<Formik initialValues={cleanObject({
-				agree: false,
-				id: bot.id,
-				prefix: bot.prefix,
-				library: bot.lib,
-				category: bot.category,
-				intro: bot.intro,
-				desc: bot.desc,
-				website: bot.web,
-				url: bot.url,
-				git: bot.git,
-				discord: bot.discord,
-				_csrf: csrfToken
-			})}
-			validationSchema={ManageBotSchema}
-			onSubmit={submitBot}>
+		<Container paddingTop className='pb-10 pt-5'>
+			<NextSeo title={`${bot.name} 수정하기`} description='봇의 정보를 수정합니다.' />
+			<h1 className='mb-8 text-3xl font-bold'>봇 관리하기</h1>
+			<Formik
+				initialValues={cleanObject({
+					agree: false,
+					id: bot.id,
+					prefix: bot.prefix,
+					library: bot.lib,
+					category: bot.category,
+					intro: bot.intro,
+					desc: bot.desc,
+					website: bot.web,
+					url: bot.url,
+					git: bot.git,
+					discord: bot.discord,
+					_csrf: csrfToken,
+				})}
+				validationSchema={ManageBotSchema}
+				onSubmit={submitBot}
+			>
 				{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
 					<Form>
-						<div className='md:flex text-center md:text-left'>
-							<DiscordAvatar userID={bot.id} className='md:mx-1 mx-auto rounded-full'/>
-							<div className='md:w-2/3 px-8 py-6'>
-								<h1 className='text-3xl font-bold'>{bot.name}#{bot.tag}</h1>
+						<div className='text-center md:flex md:text-left'>
+							<DiscordAvatar userID={bot.id} className='mx-auto rounded-full md:mx-1' />
+							<div className='px-8 py-6 md:w-2/3'>
+								<h1 className='text-3xl font-bold'>
+									{bot.name}#{bot.tag}
+								</h1>
 								<h2>ID: {bot.id}</h2>
 							</div>
 						</div>
-						{
-							data ? data.code === 200 ? <div className='mt-4'>
-								<Redirect to={makeBotURL(bot)}>
-									<Message type='success'>
-										<h2 className='text-lg font-extrabold'>정보를 저장했습니다.</h2>
-										<p>반영까지는 시간이 조금 걸릴 수 있습니다!</p>
+						{data ? (
+							data.code === 200 ? (
+								<div className='mt-4'>
+									<Redirect to={makeBotURL(bot)}>
+										<Message type='success'>
+											<h2 className='text-lg font-extrabold'>정보를 저장했습니다.</h2>
+											<p>반영까지는 시간이 조금 걸릴 수 있습니다!</p>
+										</Message>
+									</Redirect>
+								</div>
+							) : (
+								<div className='mt-4'>
+									<Message type='error'>
+										<h2 className='text-lg font-extrabold'>
+											{data.message || '오류가 발생했습니다.'}
+										</h2>
+										<ul className='list-inside list-disc'>
+											{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
+										</ul>
 									</Message>
-								</Redirect>
-                                
-							</div> : <div className='mt-4'>
-								<Message type='error'>
-									<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
-									<ul className='list-disc list-inside'>
-										{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
-									</ul>
-								</Message>
-							</div> : ''
-						}
-						<Label For='prefix' label='접두사' labelDesc='봇의 사용시 앞 쪽에 붙은 기호를 의미합니다. (Prefix)' error={errors.prefix && touched.prefix ? errors.prefix : null} short required>
+								</div>
+							)
+						) : (
+							''
+						)}
+						<Label
+							For='prefix'
+							label='접두사'
+							labelDesc='봇의 사용시 앞 쪽에 붙은 기호를 의미합니다. (Prefix)'
+							error={errors.prefix && touched.prefix ? errors.prefix : null}
+							short
+							required
+						>
 							<Input name='prefix' placeholder='!' />
 						</Label>
-						<Label For='library' label='라이브러리' labelDesc='봇에 사용된 라이브러리를 선택해주세요. 해당되는 라이브러리가 없다면 기타를 선택해주세요.' short required error={errors.library && touched.library ? errors.library : null}>
-							<Select value={{ label: bot.lib, value: bot.lib }} options={library.map(el=> ({ label: el, value: el }))} handleChange={(value) => setFieldValue('library', value.value)} handleTouch={() => setFieldTouched('library', true)} />
+						<Label
+							For='library'
+							label='라이브러리'
+							labelDesc='봇에 사용된 라이브러리를 선택해주세요. 해당되는 라이브러리가 없다면 기타를 선택해주세요.'
+							short
+							required
+							error={errors.library && touched.library ? errors.library : null}
+						>
+							<Select
+								value={{ label: bot.lib, value: bot.lib }}
+								options={library.map((el) => ({ label: el, value: el }))}
+								handleChange={(value) => setFieldValue('library', value.value)}
+								handleTouch={() => setFieldTouched('library', true)}
+							/>
 						</Label>
-						<Label For='category' label='카테고리' labelDesc='봇에 해당되는 카테고리를 선택해주세요' required error={errors.category && touched.category ? errors.category as string : null}>
-							<Selects options={botCategories.map(el=> ({ label: el, value: el }))} handleChange={(value) => {
-								setFieldValue('category', value.map(v=> v.value))
-							}} handleTouch={() => setFieldTouched('category', true)} values={values.category as string[]} setValues={(value) => setFieldValue('category', value)} />
-							<span className='text-gray-400 mt-1 text-sm'>봇 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요. <strong>반드시 해당되는 카테고리만 선택해주세요.</strong></span>
+						<Label
+							For='category'
+							label='카테고리'
+							labelDesc='봇에 해당되는 카테고리를 선택해주세요'
+							required
+							error={errors.category && touched.category ? (errors.category as string) : null}
+						>
+							<Selects
+								options={botCategories.map((el) => ({ label: el, value: el }))}
+								handleChange={(value) => {
+									setFieldValue(
+										'category',
+										value.map((v) => v.value)
+									)
+								}}
+								handleTouch={() => setFieldTouched('category', true)}
+								values={values.category as string[]}
+								setValues={(value) => setFieldValue('category', value)}
+							/>
+							<span className='mt-1 text-sm text-gray-400'>
+								봇 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요.{' '}
+								<strong>반드시 해당되는 카테고리만 선택해주세요.</strong>
+							</span>
 						</Label>
 						<Divider />
-						<Label For='website' label='웹사이트' labelDesc='봇의 웹사이트를 작성해주세요.' error={errors.website && touched.website ? errors.website : null}>
+						<Label
+							For='website'
+							label='웹사이트'
+							labelDesc='봇의 웹사이트를 작성해주세요.'
+							error={errors.website && touched.website ? errors.website : null}
+						>
 							<Input name='website' placeholder='https://koreanbots.dev' />
 						</Label>
-						<Label For='git' label='Git URL' labelDesc='봇 소스코드의 Git 주소를 입력해주세요 (오픈소스인 경우)' error={errors.git && touched.git ? errors.git : null}>
-							<Input name='git' placeholder='https://github.com/koreanbots/koreanbots'/>
+						<Label
+							For='git'
+							label='Git URL'
+							labelDesc='봇 소스코드의 Git 주소를 입력해주세요 (오픈소스인 경우)'
+							error={errors.git && touched.git ? errors.git : null}
+						>
+							<Input name='git' placeholder='https://github.com/koreanbots/koreanbots' />
 						</Label>
-						<Label For='inviteLink' label='초대링크' labelDesc='봇의 초대링크입니다. 비워두시면 자동으로 생성합니다.' error={errors.url && touched.url ? errors.url : null}>
-							<Input name='url' placeholder='https://discord.com/oauth2/authorize?client_id=653534001742741552&scope=bot&permissions=0' />
-							<span className='text-gray-400 mt-1 text-sm'>
+						<Label
+							For='inviteLink'
+							label='초대링크'
+							labelDesc='봇의 초대링크입니다. 비워두시면 자동으로 생성합니다.'
+							error={errors.url && touched.url ? errors.url : null}
+						>
+							<Input
+								name='url'
+								placeholder='https://discord.com/oauth2/authorize?client_id=653534001742741552&scope=bot&permissions=0'
+							/>
+							<span className='mt-1 text-sm text-gray-400'>
 								<Link
 									href='/calculator'
 									rel='noreferrer'
 									target='_blank'
-									className='text-blue-500 hover:text-blue-400'>
-                                    이곳
-								</Link>에서 초대링크를 생성하실 수 있습니다!
+									className='text-blue-500 hover:text-blue-400'
+								>
+									이곳
+								</Link>
+								에서 초대링크를 생성하실 수 있습니다!
 							</span>
 						</Label>
-						<Label For='discord' label='지원 디스코드 서버' labelDesc='봇의 지원 디스코드 서버를 입력해주세요. (봇에 대해 도움을 받을 수 있는 공간입니다.)' error={errors.discord && touched.discord ? errors.discord : null} short>
+						<Label
+							For='discord'
+							label='지원 디스코드 서버'
+							labelDesc='봇의 지원 디스코드 서버를 입력해주세요. (봇에 대해 도움을 받을 수 있는 공간입니다.)'
+							error={errors.discord && touched.discord ? errors.discord : null}
+							short
+						>
 							<div className='flex items-center'>
-                            discord.gg/<Input name='discord' placeholder='JEh53MQ' />
+								discord.gg/
+								<Input name='discord' placeholder='JEh53MQ' />
 							</div>
 						</Label>
 						<Divider />
-						<Label For='intro' label='봇 소개' labelDesc='봇을 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)' error={errors.intro && touched.intro ? errors.intro : null} required>
+						<Label
+							For='intro'
+							label='봇 소개'
+							labelDesc='봇을 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)'
+							error={errors.intro && touched.intro ? errors.intro : null}
+							required
+						>
 							<Input name='intro' placeholder='국내 봇을 한 곳에서.' />
 						</Label>
-						<Label For='intro' label='봇 설명' labelDesc={<>봇을 자세하게 설명해주세요! (최대 1500자)<br/>마크다운을 지원합니다!</>} error={errors.desc && touched.desc ? errors.desc : null} required>
-							<TextArea name='desc' placeholder='봇에 대해 최대한 자세히 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.desc} setValue={(value) => setFieldValue('desc', value)} max={1500} />
+						<Label
+							For='intro'
+							label='봇 설명'
+							labelDesc={
+								<>
+									봇을 자세하게 설명해주세요! (최대 1500자)
+									<br />
+									마크다운을 지원합니다!
+								</>
+							}
+							error={errors.desc && touched.desc ? errors.desc : null}
+							required
+						>
+							<TextArea
+								name='desc'
+								placeholder='봇에 대해 최대한 자세히 설명해주세요!'
+								theme={theme === 'dark' ? 'dark' : 'light'}
+								value={values.desc}
+								setValue={(value) => setFieldValue('desc', value)}
+								max={1500}
+							/>
 						</Label>
-						<Label For='preview' label='설명 미리보기' labelDesc='다음 결과는 실제와 다를 수 있습니다'>
+						<Label
+							For='preview'
+							label='설명 미리보기'
+							labelDesc='다음 결과는 실제와 다를 수 있습니다'
+						>
 							<Segment>
 								<Markdown text={values.desc} />
 							</Segment>
 						</Label>
 						<Divider />
-						<p className='text-base mt-2 mb-5'>
-							<span className='text-red-500 font-semibold'> *</span> = 필수 항목
+						<p className='mb-5 mt-2 text-base'>
+							<span className='font-semibold text-red-500'> *</span> = 필수 항목
 						</p>
 						<Button type='submit' onClick={() => window.scrollTo({ top: 0 })}>
 							<>
-								<i className='far fa-save'/> 저장
+								<i className='far fa-save' /> 저장
 							</>
 						</Button>
 					</Form>
 				)}
 			</Formik>
-			{
-				(checkUserFlag(user.flags, 'staff') || (bot.owners as User[])[0].id === user.id) && <div className='py-4'>
+			{(checkUserFlag(user.flags, 'staff') || (bot.owners as User[])[0].id === user.id) && (
+				<div className='py-4'>
 					<Divider />
-					<h2 className='text-2xl font-semibold pb-2'>위험구역</h2>
+					<h2 className='pb-2 text-2xl font-semibold'>위험구역</h2>
 					<Segment>
-						<div className='lg:flex items-center'>
+						<div className='items-center lg:flex'>
 							<div className='grow py-1'>
 								<h3 className='text-lg font-semibold'>관리자 수정</h3>
 								<p className='text-gray-400'>봇의 관리자를 추가하거나 삭제합니다.</p>
 							</div>
-							<Button onClick={() => setAdminModal(true)} className='h-10 bg-red-500 hover:opacity-80 text-white lg:w-1/8'><i className='fas fa-user-cog' /> 관리자 수정</Button>
-							<Modal full header='관리자 수정' isOpen={adminModal} dark={theme === 'dark'} onClose={() => setAdminModal(false)} closeIcon>
-								<Formik initialValues={{ owners: (bot.owners as User[]), id: '', _captcha: '' }} onSubmit={async (v) => {
-									const res = await Fetch(`/bots/${bot.id}/owners`, { method: 'PATCH', body: JSON.stringify({
-										_captcha: v._captcha,
-										_csrf: csrfToken,
-										owners: v.owners.map(el => el.id)
-									}) })
-									if(res.code === 200) {
-										alert('성공적으로 수정했습니다.')
-										router.push(makeBotURL(bot))
-									} else {
-										alert(res.message)
-										setAdminModal(false)
-									}
-								}}>
-									{
-										({ values, setFieldValue }) => <Form>
+							<Button
+								onClick={() => setAdminModal(true)}
+								className='lg:w-1/8 h-10 bg-red-500 text-white hover:opacity-80'
+							>
+								<i className='fas fa-user-cog' /> 관리자 수정
+							</Button>
+							<Modal
+								full
+								header='관리자 수정'
+								isOpen={adminModal}
+								dark={theme === 'dark'}
+								onClose={() => setAdminModal(false)}
+								closeIcon
+							>
+								<Formik
+									initialValues={{ owners: bot.owners as User[], id: '', _captcha: '' }}
+									onSubmit={async (v) => {
+										const res = await Fetch(`/bots/${bot.id}/owners`, {
+											method: 'PATCH',
+											body: JSON.stringify({
+												_captcha: v._captcha,
+												_csrf: csrfToken,
+												owners: v.owners.map((el) => el.id),
+											}),
+										})
+										if (res.code === 200) {
+											alert('성공적으로 수정했습니다.')
+											router.push(makeBotURL(bot))
+										} else {
+											alert(res.message)
+											setAdminModal(false)
+										}
+									}}
+								>
+									{({ values, setFieldValue }) => (
+										<Form>
 											<Message type='warning'>
-												<p>소유자는 삭제할 수 없습니다. 소유권을 이전하고 싶으시다면 소유권 이전을 사용해주세요.</p>
+												<p>
+													소유자는 삭제할 수 없습니다. 소유권을 이전하고 싶으시다면 소유권 이전을
+													사용해주세요.
+												</p>
 											</Message>
 											<div className='py-4'>
 												<h2 className='text-md my-1'>이전하실 유저 ID를 입력해주세요.</h2>
 												<div className='flex flex-wrap'>
-													{
-														(values.owners as User[]).map((el, n) => <Tag className='flex items-center' text={<>
-															<DiscordAvatar userID={el.id} size={128} className='w-6 h-6 mr-1 rounded-full' /> {el.tag === '0' ? `${el.globalName} (@${el.username})` : `${el.username}#${el.tag}`}
-															{
-																n !== 0 && <button className='ml-0.5 hover:text-red-500' onClick={() => {
-																	setFieldValue('owners', (() => {
-																		const arr = [...values.owners]
-																		arr.splice(n, 1)
-																		return arr
-																	})())
-																}}>
-																	<i className='fas fa-times' />
-																</button>
+													{(values.owners as User[]).map((el, n) => (
+														<Tag
+															className='flex items-center'
+															text={
+																<>
+																	<DiscordAvatar
+																		userID={el.id}
+																		size={128}
+																		className='mr-1 h-6 w-6 rounded-full'
+																	/>{' '}
+																	{el.tag === '0'
+																		? `${el.globalName} (@${el.username})`
+																		: `${el.username}#${el.tag}`}
+																	{n !== 0 && (
+																		<button
+																			className='ml-0.5 hover:text-red-500'
+																			onClick={() => {
+																				setFieldValue(
+																					'owners',
+																					(() => {
+																						const arr = [...values.owners]
+																						arr.splice(n, 1)
+																						return arr
+																					})()
+																				)
+																			}}
+																		>
+																			<i className='fas fa-times' />
+																		</button>
+																	)}
+																</>
 															}
-														</>} key={el.id} />)
-													}
+															key={el.id}
+														/>
+													))}
 												</div>
 												<div className='flex'>
 													<div className='grow pr-2'>
 														<Input name='id' placeholder='추가할 유저 ID' />
 													</div>
-													<Button className='w-16 bg-discord-blurple' onClick={async () => {
-														if(values.owners.find(el => el.id === values.id)) return alert('이미 존재하는 유저입니다.')
-														const user = await getUser(values.id)
-														const arr = [...values.owners]
-														if(!user) return alert('올바르지 않은 유저입니다.')
-														else {
-															arr.push(user)
-															setFieldValue('owners', arr)
-															setFieldValue('id', '')
-														}
-													}}>
+													<Button
+														className='w-16 bg-discord-blurple'
+														onClick={async () => {
+															if (values.owners.find((el) => el.id === values.id))
+																return alert('이미 존재하는 유저입니다.')
+															const user = await getUser(values.id)
+															const arr = [...values.owners]
+															if (!user) return alert('올바르지 않은 유저입니다.')
+															else {
+																arr.push(user)
+																setFieldValue('owners', arr)
+																setFieldValue('id', '')
+															}
+														}}
+													>
 														<i className='fas fa-user-plus text-white' />
 													</Button>
 												</div>
 											</div>
-											<Captcha dark={theme === 'dark'} onVerify={(k) => setFieldValue('_captcha', k)} />
-											<Button disabled={!values._captcha} className={`mt-2 bg-red-500 text-white ${!values._captcha ? 'opacity-80' : 'hover:opacity-80'}`} type='submit'><i className='fas fa-save text-sm' /> 저장</Button>
+											<Captcha
+												dark={theme === 'dark'}
+												onVerify={(k) => setFieldValue('_captcha', k)}
+											/>
+											<Button
+												disabled={!values._captcha}
+												className={`mt-2 bg-red-500 text-white ${
+													!values._captcha ? 'opacity-80' : 'hover:opacity-80'
+												}`}
+												type='submit'
+											>
+												<i className='fas fa-save text-sm' /> 저장
+											</Button>
 										</Form>
-									}
+									)}
 								</Formik>
 							</Modal>
 						</div>
 						<Divider />
-						<div className='lg:flex items-center'>
+						<div className='items-center lg:flex'>
 							<div className='grow py-1'>
 								<h3 className='text-lg font-semibold'>소유권 이전</h3>
-								<p className='text-gray-400'>봇의 소유권을 이전합니다. 소유권을 이전하게 되면 소유권을 잃게 됩니다.</p>
+								<p className='text-gray-400'>
+									봇의 소유권을 이전합니다. 소유권을 이전하게 되면 소유권을 잃게 됩니다.
+								</p>
 							</div>
-							<Button onClick={() => setTransferModal(true)} className='h-10 bg-red-500 hover:opacity-80 text-white lg:w-1/8'><i className='fas fa-exchange-alt' /> 소유권 이전</Button>
-							<Modal full header={`${bot.name} 소유권 이전하기`} isOpen={transferModal} dark={theme === 'dark'} onClose={() => setTransferModal(false)} closeIcon>
-								<Formik initialValues={{ ownerID: '', name: '', _captcha: '' }} onSubmit={async (v) => {
-									const res = await Fetch(`/bots/${bot.id}/owners`, { method: 'PATCH', body: JSON.stringify({
-										_captcha: v._captcha,
-										_csrf: csrfToken,
-										owners: [ v.ownerID ]
-									}) })
-									if(res.code === 200) {
-										alert('성공적으로 소유권을 이전했습니다.')
-										router.push('/')
-									} else {
-										alert(res.message)
-										setTransferModal(false)
-									}
-								}}>
-									{
-										({ values, setFieldValue }) => <Form>
+							<Button
+								onClick={() => setTransferModal(true)}
+								className='lg:w-1/8 h-10 bg-red-500 text-white hover:opacity-80'
+							>
+								<i className='fas fa-exchange-alt' /> 소유권 이전
+							</Button>
+							<Modal
+								full
+								header={`${bot.name} 소유권 이전하기`}
+								isOpen={transferModal}
+								dark={theme === 'dark'}
+								onClose={() => setTransferModal(false)}
+								closeIcon
+							>
+								<Formik
+									initialValues={{ ownerID: '', name: '', _captcha: '' }}
+									onSubmit={async (v) => {
+										const res = await Fetch(`/bots/${bot.id}/owners`, {
+											method: 'PATCH',
+											body: JSON.stringify({
+												_captcha: v._captcha,
+												_csrf: csrfToken,
+												owners: [v.ownerID],
+											}),
+										})
+										if (res.code === 200) {
+											alert('성공적으로 소유권을 이전했습니다.')
+											router.push('/')
+										} else {
+											alert(res.message)
+											setTransferModal(false)
+										}
+									}}
+								>
+									{({ values, setFieldValue }) => (
+										<Form>
 											<Message type='warning'>
 												<h2 className='text-2xl font-bold'>주의해주세요!</h2>
-												<p>봇의 소유권을 이전하게 되면 봇의 소유자 권한을 이전하게 되며, 본인을 포함한 모든 관리자가 해당 봇에 대한 권한을 잃게됩니다.</p>
+												<p>
+													봇의 소유권을 이전하게 되면 봇의 소유자 권한을 이전하게 되며, 본인을
+													포함한 모든 관리자가 해당 봇에 대한 권한을 잃게됩니다.
+												</p>
 											</Message>
 											<div className='py-4'>
 												<h2 className='text-md my-1'>이전하실 유저 ID를 입력해주세요.</h2>
 												<Input name='ownerID' placeholder='이전할 유저 ID' />
 												<Divider />
-												<h2 className='text-md my-1'>계속 하시려면 <strong>{bot.name}</strong>{getJosaPicker('을')(bot.name)} 입력해주세요.</h2>
+												<h2 className='text-md my-1'>
+													계속 하시려면 <strong>{bot.name}</strong>
+													{getJosaPicker('을')(bot.name)} 입력해주세요.
+												</h2>
 												<Input name='name' placeholder={bot.name} />
 											</div>
-											<Captcha dark={theme === 'dark'} onVerify={(k) => setFieldValue('_captcha', k)} />
-											<Button disabled={!values.ownerID || values.name !== bot.name || !values._captcha} className={`mt-4 bg-red-500 text-white ${!values.ownerID ||values.name !== bot.name || !values._captcha ? 'opacity-80' : 'hover:opacity-80'}`} type='submit'><i className='fas fa-exchange-alt' /> 소유권 이전</Button>
+											<Captcha
+												dark={theme === 'dark'}
+												onVerify={(k) => setFieldValue('_captcha', k)}
+											/>
+											<Button
+												disabled={!values.ownerID || values.name !== bot.name || !values._captcha}
+												className={`mt-4 bg-red-500 text-white ${
+													!values.ownerID || values.name !== bot.name || !values._captcha
+														? 'opacity-80'
+														: 'hover:opacity-80'
+												}`}
+												type='submit'
+											>
+												<i className='fas fa-exchange-alt' /> 소유권 이전
+											</Button>
 										</Form>
-									}
+									)}
 								</Formik>
 							</Modal>
 						</div>
 						<Divider />
-						<div className='lg:flex items-center'>
+						<div className='items-center lg:flex'>
 							<div className='grow py-1'>
 								<h3 className='text-lg font-semibold'>봇 삭제하기</h3>
 								<p className='text-gray-400'>봇을 삭제하게 되면 되돌릴 수 없습니다.</p>
 							</div>
-							<Button onClick={() => setDeleteModal(true)} className='h-10 bg-red-500 hover:opacity-80 text-white lg:w-1/8'><i className='fas fa-trash' /> 봇 삭제하기</Button>
-							<Modal full header={`${bot.name} 삭제하기`} isOpen={deleteModal} dark={theme === 'dark'} onClose={() => setDeleteModal(false)} closeIcon>
-								<Formik initialValues={{ name: '', _captcha: '', _csrf: csrfToken }} onSubmit={async (v) => {
-									const res = await Fetch(`/bots/${bot.id}`, { method: 'DELETE', body: JSON.stringify(v) })
-									if(res.code === 200) {
-										alert('성공적으로 삭제하였습니다.')
-										redirectTo(router, '/')
-									}
-									else alert(res.message)
-								}}>
-									{
-										({ values, setFieldValue }) => <Form>
+							<Button
+								onClick={() => setDeleteModal(true)}
+								className='lg:w-1/8 h-10 bg-red-500 text-white hover:opacity-80'
+							>
+								<i className='fas fa-trash' /> 봇 삭제하기
+							</Button>
+							<Modal
+								full
+								header={`${bot.name} 삭제하기`}
+								isOpen={deleteModal}
+								dark={theme === 'dark'}
+								onClose={() => setDeleteModal(false)}
+								closeIcon
+							>
+								<Formik
+									initialValues={{ name: '', _captcha: '', _csrf: csrfToken }}
+									onSubmit={async (v) => {
+										const res = await Fetch(`/bots/${bot.id}`, {
+											method: 'DELETE',
+											body: JSON.stringify(v),
+										})
+										if (res.code === 200) {
+											alert('성공적으로 삭제하였습니다.')
+											redirectTo(router, '/')
+										} else alert(res.message)
+									}}
+								>
+									{({ values, setFieldValue }) => (
+										<Form>
 											<Message type='warning'>
-												<p>봇을 삭제하게 되면 되돌릴 수 없습니다.<br/>하트 수를 포함한 모든 봇 정보가 영구적으로 삭제됩니다.</p>
-												<p>계속 하시려면 봇의 이름 <strong>{bot.name}</strong>{getJosaPicker('을')(bot.name)} 입력해주세요.</p>
+												<p>
+													봇을 삭제하게 되면 되돌릴 수 없습니다.
+													<br />
+													하트 수를 포함한 모든 봇 정보가 영구적으로 삭제됩니다.
+												</p>
+												<p>
+													계속 하시려면 봇의 이름 <strong>{bot.name}</strong>
+													{getJosaPicker('을')(bot.name)} 입력해주세요.
+												</p>
 											</Message>
 											<div className='py-4'>
 												<Input name='name' placeholder={bot.name} />
 											</div>
-											<Captcha dark={theme === 'dark'} onVerify={(k) => setFieldValue('_captcha', k)} />
-											<Button disabled={values.name !== bot.name || !values._captcha} className={`mt-4 bg-red-500 text-white ${values.name !== bot.name || !values._captcha ? 'opacity-80' : 'hover:opacity-80'}`} type='submit'><i className='fas fa-trash' /> 삭제</Button>
+											<Captcha
+												dark={theme === 'dark'}
+												onVerify={(k) => setFieldValue('_captcha', k)}
+											/>
+											<Button
+												disabled={values.name !== bot.name || !values._captcha}
+												className={`mt-4 bg-red-500 text-white ${
+													values.name !== bot.name || !values._captcha
+														? 'opacity-80'
+														: 'hover:opacity-80'
+												}`}
+												type='submit'
+											>
+												<i className='fas fa-trash' /> 삭제
+											</Button>
 										</Form>
-									}
+									)}
 								</Formik>
 							</Modal>
 						</div>
 					</Segment>
 				</div>
-			}
+			)}
 		</Container>
 	)
 }
@@ -328,7 +573,13 @@ const ManageBotPage:NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme })
 export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const user = await get.Authorization(parsed?.token)
-	return { props: { bot: await get.bot.load(ctx.query.id), user: await get.user.load(user || ''), csrfToken: getToken(ctx.req, ctx.res) } }
+	return {
+		props: {
+			bot: await get.bot.load(ctx.query.id),
+			user: await get.user.load(user || ''),
+			csrfToken: getToken(ctx.req, ctx.res),
+		},
+	}
 }
 
 interface ManageBotProps {
@@ -346,4 +597,4 @@ interface Query extends ParsedUrlQuery {
 	id: string
 }
 
-export default ManageBotPage
\ No newline at end of file
+export default ManageBotPage
diff --git a/pages/bots/[id]/index.tsx b/pages/bots/[id]/index.tsx
index 723537a..19c0e84 100644
--- a/pages/bots/[id]/index.tsx
+++ b/pages/bots/[id]/index.tsx
@@ -29,7 +29,7 @@ const Owner = dynamic(() => import('@components/Owner'))
 const Segment = dynamic(() => import('@components/Segment'))
 const LongButton = dynamic(() => import('@components/LongButton'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
-const Markdown = dynamic(() => import ('@components/Markdown'))
+const Markdown = dynamic(() => import('@components/Markdown'))
 const Message = dynamic(() => import('@components/Message'))
 const Button = dynamic(() => import('@components/Button'))
 const TextArea = dynamic(() => import('@components/Form/TextArea'))
@@ -39,302 +39,411 @@ const NSFW = dynamic(() => import('@components/NSFW'))
 const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken }) => {
 	const bg = checkBotFlag(data?.flags, 'trusted') && data?.banner
 	const router = useRouter()
-	const [ nsfw, setNSFW ] = useState<boolean>()
-	const [ reportModal, setReportModal ] = useState(false)
-	const [ reportRes, setReportRes ] = useState<ResponseProps<unknown>>(null)
+	const [nsfw, setNSFW] = useState<boolean>()
+	const [reportModal, setReportModal] = useState(false)
+	const [reportRes, setReportRes] = useState<ResponseProps<unknown>>(null)
 	useEffect(() => {
 		setNSFW(localStorage.nsfw)
 	}, [])
 	if (!data?.id) return <NotFound />
 	return (
-		<div style={bg ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed` } : {}}>
+		<div
+			style={
+				bg
+					? {
+							background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed`,
+					  }
+					: {}
+			}
+		>
 			<Container paddingTop className='py-10'>
 				<NextSeo
 					title={data.name}
 					description={data.intro}
 					twitter={{
-						cardType: 'summary_large_image'
+						cardType: 'summary_large_image',
 					}}
 					openGraph={{
 						images: [
 							{
-								url: KoreanbotsEndPoints.OG.bot(data.id, data.name, data.intro, data.category, [formatNumber(data.votes), formatNumber(data.servers)]),
+								url: KoreanbotsEndPoints.OG.bot(data.id, data.name, data.intro, data.category, [
+									formatNumber(data.votes),
+									formatNumber(data.servers),
+								]),
 								width: 2048,
 								height: 1170,
-								alt: 'Bot Preview Image'
-							}
-						]
+								alt: 'Bot Preview Image',
+							},
+						],
 					}}
 				/>
-				{
-					data.state === 'blocked' ? <div className='pb-40'>
+				{data.state === 'blocked' ? (
+					<div className='pb-40'>
 						<Message type='error'>
 							<h2 className='text-lg font-extrabold'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
 						</Message>
 					</div>
-						: data.category.includes('NSFW') && !nsfw ? <NSFW onClick={() => setNSFW(true)} onDisableClick={() => localStorage.nsfw = true} /> 
-							: <>
-								<div className='w-full pb-2'>
-									{
-										data.state === 'private' ? <Message type='info'>
-											<h2 className='text-lg font-extrabold'>해당 봇은 특수목적 봇이므로 초대하실 수 없습니다.</h2>
-											<p>해당 봇은 공개 사용이 목적이 아닌 특수목적봇입니다. 따라서 따로 초대하실 수 없습니다.</p>
-										</Message> :
-											data.state === 'reported' ?
-												<Message type='error'>
-													<h2 className='text-lg font-extrabold'>해당 봇은 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
-													<p>해당 봇 사용에 주의해주세요.</p>
-													<p>봇 소유자분은 <Link href='/guidelines' className='text-blue-500 hover:text-blue-400'>가이드라인</Link>에 대한 위반사항을 확인해주시고 <Link href='/discord' className='text-blue-500 hover:text-blue-400'>디스코드 서버</Link>로 문의해주세요.</p>
-												</Message> : ''
-									}
-								</div>
-								<div className='lg:flex w-full'>
-									<div className='w-full text-center lg:w-2/12'>
-										<DiscordAvatar
-											userID={data.id}
-											size={256}
-											className='w-full rounded-full'
-										/>
-									</div>
-									<div className='grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
-										<Tag
-											circular
-											text={
-												<>
-													<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '}
-													{Status[data.status]?.text}
-												</>
-											}
-										/>
-										<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>
-											{data.name}{' '}
-											{checkBotFlag(data.flags, 'trusted') ? (
-												<Tooltip placement='bottom' overlay='해당 봇은 한국 디스코드 리스트에서 엄격한 기준을 통과한 봇입니다!'>
-													<span className='text-koreanbots-blue text-3xl'>
-														<i className='fas fa-award' />
-													</span>
-												</Tooltip>
-											) : ''}
-										</h1>
-										<p className={`${bg ? 'text-gray-300' : 'dark:text-gray-300 text-gray-800'} text-base`}>{data.intro}</p>
-									</div>
-									<div className='w-full lg:w-1/4'>
-										{
-											data.state === 'ok' && <LongButton
-												newTab
-												href={`/bots/${router.query.id}/invite`}
-											>
-												<h4 className='whitespace-nowrap'>
-													<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
-												</h4>
-											</LongButton>
-										}
-										<Link href={`/bots/${router.query.id}/vote`} legacyBehavior>
-											<LongButton>
-												<h4>
-													<i className='fas fa-heart text-red-600' /> 하트 추가
-												</h4>
-												<span className='ml-1 px-2 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'>
-													{formatNumber(data.votes)}
-												</span>
-											</LongButton>
+				) : data.category.includes('NSFW') && !nsfw ? (
+					<NSFW onClick={() => setNSFW(true)} onDisableClick={() => (localStorage.nsfw = true)} />
+				) : (
+					<>
+						<div className='w-full pb-2'>
+							{data.state === 'private' ? (
+								<Message type='info'>
+									<h2 className='text-lg font-extrabold'>
+										해당 봇은 특수목적 봇이므로 초대하실 수 없습니다.
+									</h2>
+									<p>
+										해당 봇은 공개 사용이 목적이 아닌 특수목적봇입니다. 따라서 따로 초대하실 수
+										없습니다.
+									</p>
+								</Message>
+							) : data.state === 'reported' ? (
+								<Message type='error'>
+									<h2 className='text-lg font-extrabold'>
+										해당 봇은 신고가 접수되어, 관리자에 의해 잠금 상태입니다.
+									</h2>
+									<p>해당 봇 사용에 주의해주세요.</p>
+									<p>
+										봇 소유자분은{' '}
+										<Link href='/guidelines' className='text-blue-500 hover:text-blue-400'>
+											가이드라인
 										</Link>
-										{
-											((data.owners as User[]).find(el => el.id === user?.id) || checkUserFlag(user?.flags, 'staff')) && <LongButton href={`/bots/${data.id}/edit`}>
-												<h4>
-													<i className='fas fa-cogs' /> 관리하기
-												</h4>
-											</LongButton>
-										}
-										{
-											((data.owners as User[]).find(el => el.id === user?.id) || checkUserFlag(user?.flags, 'staff')) && <LongButton onClick={async() => {
-												const res = await Fetch(`/bots/${data.id}/stats`, { method: 'PATCH'} )
-												if(res.code !== 200) return alert(res.message)
-												else window.location.reload()
-											}}>
-												<h4>
-													<i className='fas fa-sync' /> 정보 갱신하기
-												</h4>
-											</LongButton>
-										}
+										에 대한 위반사항을 확인해주시고{' '}
+										<Link href='/discord' className='text-blue-500 hover:text-blue-400'>
+											디스코드 서버
+										</Link>
+										로 문의해주세요.
+									</p>
+								</Message>
+							) : (
+								''
+							)}
+						</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' />
+							</div>
+							<div className='w-full grow px-5 py-12 text-center lg:w-5/12 lg:text-left'>
+								<Tag
+									circular
+									text={
+										<>
+											<i className={`fas fa-circle text-${Status[data.status]?.color}`} />{' '}
+											{Status[data.status]?.text}
+										</>
+									}
+								/>
+								<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>
+									{data.name}{' '}
+									{checkBotFlag(data.flags, 'trusted') ? (
+										<Tooltip
+											placement='bottom'
+											overlay='해당 봇은 한국 디스코드 리스트에서 엄격한 기준을 통과한 봇입니다!'
+										>
+											<span className='text-3xl text-koreanbots-blue'>
+												<i className='fas fa-award' />
+											</span>
+										</Tooltip>
+									) : (
+										''
+									)}
+								</h1>
+								<p
+									className={`${
+										bg ? 'text-gray-300' : 'text-gray-800 dark:text-gray-300'
+									} text-base`}
+								>
+									{data.intro}
+								</p>
+							</div>
+							<div className='w-full lg:w-1/4'>
+								{data.state === 'ok' && (
+									<LongButton newTab href={`/bots/${router.query.id}/invite`}>
+										<h4 className='whitespace-nowrap'>
+											<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
+										</h4>
+									</LongButton>
+								)}
+								<Link href={`/bots/${router.query.id}/vote`} legacyBehavior>
+									<LongButton>
+										<h4>
+											<i className='fas fa-heart text-red-600' /> 하트 추가
+										</h4>
+										<span className='ml-1 rounded-lg bg-little-white-hover px-2 text-center text-sm text-black dark:bg-very-black dark:text-gray-400'>
+											{formatNumber(data.votes)}
+										</span>
+									</LongButton>
+								</Link>
+								{((data.owners as User[]).find((el) => el.id === user?.id) ||
+									checkUserFlag(user?.flags, 'staff')) && (
+									<LongButton href={`/bots/${data.id}/edit`}>
+										<h4>
+											<i className='fas fa-cogs' /> 관리하기
+										</h4>
+									</LongButton>
+								)}
+								{((data.owners as User[]).find((el) => el.id === user?.id) ||
+									checkUserFlag(user?.flags, 'staff')) && (
+									<LongButton
+										onClick={async () => {
+											const res = await Fetch(`/bots/${data.id}/stats`, { method: 'PATCH' })
+											if (res.code !== 200) return alert(res.message)
+											else window.location.reload()
+										}}
+									>
+										<h4>
+											<i className='fas fa-sync' /> 정보 갱신하기
+										</h4>
+									</LongButton>
+								)}
+							</div>
+						</div>
+						<Divider className='px-5' />
+						<div className='hidden lg:block'>
+							<Advertisement />
+						</div>
+						<div className='lg:flex lg:flex-row-reverse' style={bg ? { color: 'white' } : {}}>
+							<div className='mb-1 w-full lg:w-1/4'>
+								<h2 className='3xl mb-2 font-bold'>정보</h2>
+								<div className='grid grid-cols-2 gap-4 rounded-sm bg-little-white px-4 py-4 text-black dark:bg-discord-black dark:text-gray-400'>
+									<div>
+										<i className='far fa-flag' /> 접두사
 									</div>
+									<div className='markdown-body text-black dark:text-gray-400'>
+										<code>{data.prefix}</code>
+									</div>
+									<div>
+										<i className='fas fa-users' /> 서버수
+									</div>
+									<div>{data.servers || 'N/A'}</div>
+									{data.shards && data.servers > 1500 && (
+										<>
+											<div>
+												<i className='fas fa-sitemap' /> 샤드수
+											</div>
+											<div>{data.shards}</div>
+										</>
+									)}
+									<div>
+										<i className='fas fa-calendar-day' /> 봇 생성일
+									</div>
+									<div>{Day(date).fromNow(false)}</div>
+									{checkBotFlag(data.flags, 'verified') ? (
+										<Tooltip overlay='해당 봇은 디스코드측에서 인증된 봇입니다.'>
+											<div className='col-span-2'>
+												<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
+											</div>
+										</Tooltip>
+									) : (
+										''
+									)}
 								</div>
-								<Divider className='px-5' />
-								<div className='hidden lg:block'>
-									<Advertisement />
+								<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
+								<div className='flex flex-wrap'>
+									{data.category.map((el) => (
+										<Tag key={el} text={el} href={`/bots/categories/${el}`} />
+									))}
 								</div>
-								<div className='lg:flex lg:flex-row-reverse' style={bg ? { color: 'white' } : {}}>
-									<div className='mb-1 w-full lg:w-1/4'>
-										<h2 className='3xl mb-2 font-bold'>정보</h2>
-										<div className='grid gap-4 grid-cols-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white rounded-sm'>
-											<div>
-												<i className='far fa-flag' /> 접두사
-											</div>
-											<div className='markdown-body text-black dark:text-gray-400'>
-												<code>{data.prefix}</code>
-											</div>
-											<div>
-												<i className='fas fa-users' /> 서버수
-											</div>
-											<div>{data.servers || 'N/A'}</div>
-											{
-												data.shards && data.servers > 1500 && <>
-													<div>
-														<i className='fas fa-sitemap' /> 샤드수
-													</div>
-													<div>{data.shards}</div>
-												</>
-											}
-											<div>
-												<i className='fas fa-calendar-day' /> 봇 생성일
-											</div>
-											<div>{Day(date).fromNow(false)}</div>
-											{
-												checkBotFlag(data.flags, 'verified') ?
-													<Tooltip overlay='해당 봇은 디스코드측에서 인증된 봇입니다.'>
-														<div className='col-span-2'>
-															<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
+								<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
+								{(data.owners as User[]).map((el) => (
+									<Owner
+										key={el.id}
+										id={el.id}
+										tag={el.tag}
+										globalName={el.globalName}
+										username={el.username}
+									/>
+								))}
+								<div className='list grid'>
+									<Link
+										href={`/bots/${router.query.id}/report`}
+										className='cursor-pointer text-red-600 hover:underline'
+										aria-hidden='true'
+									>
+										<i className='far fa-flag' />
+										신고하기
+									</Link>
+									<Modal
+										header={`${data.name}#${data.tag} 신고하기`}
+										closeIcon
+										isOpen={reportModal}
+										onClose={() => {
+											setReportModal(false)
+											setReportRes(null)
+										}}
+										full
+										dark={theme === 'dark'}
+									>
+										{reportRes?.code === 200 ? (
+											<Message type='success'>
+												<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
+												<p>
+													더 자세한 설명이 필요할 수 있습니다!{' '}
+													<a className='text-blue-600 hover:text-blue-500' href='/discord'>
+														공식 디스코드
+													</a>
+													에 참여해주세요
+												</p>
+											</Message>
+										) : (
+											<Formik
+												onSubmit={async (body) => {
+													const res = await Fetch(`/bots/${data.id}/report`, {
+														method: 'POST',
+														body: JSON.stringify(body),
+													})
+													setReportRes(res)
+												}}
+												validationSchema={ReportSchema}
+												initialValues={{
+													category: null,
+													description: '',
+													_csrf: csrfToken,
+												}}
+											>
+												{({ errors, touched, values, setFieldValue }) => (
+													<Form>
+														<div className='mb-5'>
+															{reportRes && (
+																<div className='my-5'>
+																	<Message type='error'>
+																		<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
+																		<ul className='list-disc'>
+																			{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
+																		</ul>
+																	</Message>
+																</div>
+															)}
+															<h3 className='font-bold'>신고 구분</h3>
+															<p className='mb-1 text-sm text-gray-400'>
+																해당되는 항목을 선택해주세요.
+															</p>
+															{reportCats.map((el) => (
+																<div key={el}>
+																	<label>
+																		<Field
+																			type='radio'
+																			name='category'
+																			value={el}
+																			className='mr-1.5 py-2'
+																		/>
+																		{el}
+																	</label>
+																</div>
+															))}
+															<div className='mt-1 text-xs font-light text-red-500'>
+																{errors.category && touched.category
+																	? (errors.category as string)
+																	: null}
+															</div>
+															<h3 className='mt-2 font-bold'>설명</h3>
+															<p className='mb-1 text-sm text-gray-400'>
+																신고하시는 내용을 자세하게 설명해주세요.
+															</p>
+															<TextArea
+																name='description'
+																placeholder='최대한 자세하게 설명해주세요!'
+																theme={theme === 'dark' ? 'dark' : 'light'}
+																value={values.description}
+																setValue={(value) => setFieldValue('description', value)}
+															/>
+															<div className='mt-1 text-xs font-light text-red-500'>
+																{errors.description && touched.description
+																	? errors.description
+																	: null}
+															</div>
 														</div>
-													</Tooltip>
-													: ''
-											}
-										</div>
-										<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
-										<div className='flex flex-wrap'>
-											{data.category.map(el => (
-												<Tag key={el} text={el} href={`/bots/categories/${el}`} />
-											))}
-										</div>
-										<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
-										{(data.owners as User[]).map(el => (
-											<Owner
-												key={el.id}
-												id={el.id}
-												tag={el.tag}
-												globalName={el.globalName}
-												username={el.username}
+														<div className='text-right'>
+															<Button
+																className='bg-gray-500 text-white hover:opacity-90'
+																onClick={() => setReportModal(false)}
+															>
+																취소
+															</Button>
+															<Button
+																type='submit'
+																className='bg-red-500 text-white hover:opacity-90'
+															>
+																제출
+															</Button>
+														</div>
+													</Form>
+												)}
+											</Formik>
+										)}
+									</Modal>
+									{data.discord && (
+										<a
+											rel='noopener noreferrer'
+											target='_blank'
+											className='text-discord-blurple hover:underline'
+											href={`https://discord.gg/${data.discord}`}
+										>
+											<i className='fab fa-discord' />
+											디스코드 서버
+										</a>
+									)}
+									{data.web && (
+										<a
+											rel='noopener noreferrer'
+											target='_blank'
+											className='text-blue-500 hover:underline'
+											href={data.web}
+										>
+											<i className='fas fa-globe' />
+											웹사이트
+										</a>
+									)}
+									{data.git && (
+										<a
+											rel='noopener noreferrer'
+											target='_blank'
+											className='hover:underline'
+											href={data.git}
+										>
+											<i
+												className={`fab fa-${git[new URL(data.git).hostname]?.icon ?? 'git-alt'}`}
 											/>
-										))}
-										<div className='list grid'>
-											<Link
-												href={`/bots/${router.query.id}/report`}
-												className='text-red-600 hover:underline cursor-pointer'
-												aria-hidden='true'>
-
-												<i className='far fa-flag' />신고하기
-											</Link>
-											<Modal header={`${data.name}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
-												setReportModal(false)
-												setReportRes(null)
-											}} full dark={theme === 'dark'}>
-												{
-													reportRes?.code === 200 ? <Message type='success'>
-														<h2 className='text-lg font-semibold'>성공적으로 신고하였습니다!</h2>
-														<p>더 자세한 설명이 필요할 수 있습니다! <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요</p>
-													</Message> : <Formik onSubmit={async (body) => {
-														const res = await Fetch(`/bots/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
-														setReportRes(res)
-													}} validationSchema={ReportSchema} initialValues={{
-														category: null,
-														description: '',
-														_csrf: csrfToken
-													}}>
-														{
-															({ errors, touched, values, setFieldValue }) => (
-																<Form>
-																	<div className='mb-5'>
-																		{
-																			reportRes && <div className='my-5'>
-																				<Message type='error'>
-																					<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
-																					<ul className='list-disc'>
-																						{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
-																					</ul>
-																				</Message>
-																			</div>
-																		}
-																		<h3 className='font-bold'>신고 구분</h3>
-																		<p className='text-gray-400 text-sm mb-1'>해당되는 항목을 선택해주세요.</p>
-																		{
-																			reportCats.map(el => 
-																				<div key={el}>
-																					<label>
-																						<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
-																						{el}
-																					</label>
-																				</div>
-																			)
-																		}
-																		<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category as string: null}</div>
-																		<h3 className='font-bold mt-2'>설명</h3>
-																		<p className='text-gray-400 text-sm mb-1'>신고하시는 내용을 자세하게 설명해주세요.</p>
-																		<TextArea name='description' placeholder='최대한 자세하게 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.description} setValue={(value) => setFieldValue('description', value)} />
-																		<div className='mt-1 text-red-500 text-xs font-light'>{errors.description && touched.description ? errors.description : null}</div>
-																	</div>
-																	<div className='text-right'>
-																		<Button className='bg-gray-500 hover:opacity-90 text-white' onClick={()=> setReportModal(false)}>취소</Button>
-																		<Button type='submit' className='bg-red-500 hover:opacity-90 text-white'>제출</Button>
-																	</div>
-																</Form>
-															)
-														}
-													</Formik>
-												}
-											</Modal>
-											{data.discord && (
-												<a
-													rel='noopener noreferrer'
-													target='_blank'
-													className='text-discord-blurple hover:underline'
-													href={`https://discord.gg/${data.discord}`}
-												>
-													<i className='fab fa-discord' />
-                            디스코드 서버
-												</a>
-											)}
-											{data.web && (
-												<a
-													rel='noopener noreferrer'
-													target='_blank'
-													className='text-blue-500 hover:underline'
-													href={data.web}
-												>
-													<i className='fas fa-globe' />
-                            웹사이트
-												</a>
-											)}
-											{data.git && (
-												<a
-													rel='noopener noreferrer'
-													target='_blank'
-													className='hover:underline'
-													href={data.git}
-												>
-													<i className={`fab fa-${git[new URL(data.git).hostname]?.icon ?? 'git-alt'}`} />
-													{git[new URL(data.git).hostname]?.text ?? 'Git'}
-												</a>
-											)}
-										</div>
-										<Advertisement size='tall' />
-									</div>
-									<div className='w-full lg:pr-5 lg:w-3/4'>
-										{
-											checkBotFlag(data.flags, 'hackerthon') ? <Segment className='mt-10'>
-												<h1 className='text-3xl font-semibold'>
-													<i className='fas fa-trophy mr-4 my-2 text-amber-300' /> 해당 봇은 한국 디스코드 리스트 해커톤 수상작품입니다!
-												</h1>
-												<p>해당 봇은 한국 디스코드 리스트 주최로 진행되었던 "한국 디스코드 리스트 제1회 해커톤"에서 우수한 성적을 거둔 봇입니다.</p>
-												<p>자세한 내용은 <a className='text-blue-500 hover:text-blue-400' href='https://blog.koreanbots.dev/first-hackathon-results/'>해당 글</a>을 확인해주세요.</p>
-											</Segment> : ''
-										}
-										<Segment className='my-4'>
-											<Markdown text={desc}/>
-										</Segment>
-										<Advertisement />
-									</div>
+											{git[new URL(data.git).hostname]?.text ?? 'Git'}
+										</a>
+									)}
 								</div>
-							</>
-				}
+								<Advertisement size='tall' />
+							</div>
+							<div className='w-full lg:w-3/4 lg:pr-5'>
+								{checkBotFlag(data.flags, 'hackerthon') ? (
+									<Segment className='mt-10'>
+										<h1 className='text-3xl font-semibold'>
+											<i className='fas fa-trophy my-2 mr-4 text-amber-300' /> 해당 봇은 한국
+											디스코드 리스트 해커톤 수상작품입니다!
+										</h1>
+										<p>
+											해당 봇은 한국 디스코드 리스트 주최로 진행되었던 "한국 디스코드 리스트 제1회
+											해커톤"에서 우수한 성적을 거둔 봇입니다.
+										</p>
+										<p>
+											자세한 내용은{' '}
+											<a
+												className='text-blue-500 hover:text-blue-400'
+												href='https://blog.koreanbots.dev/first-hackathon-results/'
+											>
+												해당 글
+											</a>
+											을 확인해주세요.
+										</p>
+									</Segment>
+								) : (
+									''
+								)}
+								<Segment className='my-4'>
+									<Markdown text={desc} />
+								</Segment>
+								<Advertisement />
+							</div>
+						</div>
+					</>
+				)}
 			</Container>
 		</div>
 	)
@@ -343,20 +452,25 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const data = await get.bot.load(ctx.query.id)
-	if(!data) return {
-		props: {
-			data
+	if (!data)
+		return {
+			props: {
+				data,
+			},
 		}
-	}
 	const desc = await get.botDescSafe(data.id)
 	const user = await get.Authorization(parsed?.token)
-	if((checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== ctx.query.id) {
+	if (
+		(checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) &&
+		data.vanity &&
+		data.vanity !== ctx.query.id
+	) {
 		return {
 			redirect: {
 				destination: `/bots/${data.vanity}`,
-				permanent: true
+				permanent: true,
 			},
-			props: {}
+			props: {},
 		}
 	}
 	return {
@@ -365,7 +479,7 @@ export const getServerSideProps = async (ctx: Context) => {
 			desc,
 			date: Number(SnowflakeUtil.deconstruct(data.id ?? '0').timestamp),
 			user: await get.user.load(user || ''),
-			csrfToken: getToken(ctx.req, ctx.res)
+			csrfToken: getToken(ctx.req, ctx.res),
 		},
 	}
 }
diff --git a/pages/bots/[id]/invite.tsx b/pages/bots/[id]/invite.tsx
index 6952553..e5ed845 100644
--- a/pages/bots/[id]/invite.tsx
+++ b/pages/bots/[id]/invite.tsx
@@ -7,14 +7,26 @@ const Invite: NextPage = () => <NotFound />
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
 	const data = await get.bot.load(ctx.query.id as string)
-	if(!data) return { props: {} }
-	const record = await Bots.updateOne({ _id: data.id, 'inviteMetrix.day': getYYMMDD() }, { $inc: { 'inviteMetrix.$.count': 1 } })
-	if(record.matchedCount === 0) await Bots.findByIdAndUpdate(data.id, { $push: { inviteMetrix: { count: 1 } } }, { upsert: true })
+	if (!data) return { props: {} }
+	const record = await Bots.updateOne(
+		{ _id: data.id, 'inviteMetrix.day': getYYMMDD() },
+		{ $inc: { 'inviteMetrix.$.count': 1 } }
+	)
+	if (record.matchedCount === 0)
+		await Bots.findByIdAndUpdate(
+			data.id,
+			{ $push: { inviteMetrix: { count: 1 } } },
+			{ upsert: true }
+		)
 	ctx.res.statusCode = 307
-	ctx.res.setHeader('Location', data.url || `https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`)
+	ctx.res.setHeader(
+		'Location',
+		data.url ||
+			`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
+	)
 	return {
-		props: {}
+		props: {},
 	}
 }
 
-export default Invite
\ No newline at end of file
+export default Invite
diff --git a/pages/bots/[id]/report.tsx b/pages/bots/[id]/report.tsx
index 0f8336b..776b8b5 100644
--- a/pages/bots/[id]/report.tsx
+++ b/pages/bots/[id]/report.tsx
@@ -19,94 +19,144 @@ import { getJosaPicker } from 'josa'
 import { reportCats } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
 
-
 const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))
 const Login = dynamic(() => import('@components/Login'))
 
 const ReportBot: NextPage<ReportBotProps> = ({ data, user, csrfToken }) => {
-	const [ reportRes, setReportRes ] = useState<ResponseProps<unknown>>(null)
-	if(!data?.id) return <NotFound />
-	if(!user) return <Login>
-		<NextSeo title='신고하기' />
-	</Login>
+	const [reportRes, setReportRes] = useState<ResponseProps<unknown>>(null)
+	if (!data?.id) return <NotFound />
+	if (!user)
+		return (
+			<Login>
+				<NextSeo title='신고하기' />
+			</Login>
+		)
 	return (
 		<Container paddingTop className='py-10'>
 			<NextSeo title={`${data.name} 신고하기`} />
 			<Link href={makeBotURL(data)} className='text-blue-500 hover:opacity-80'>
-				<i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.name}</strong>{getJosaPicker('로')(data.name)}돌아가기
+				<i className='fas fa-arrow-left mb-3 mt-3' /> <strong>{data.name}</strong>
+				{getJosaPicker('로')(data.name)}돌아가기
 			</Link>
-			{
-				reportRes?.code === 200 ? <Message type='success'>
+			{reportRes?.code === 200 ? (
+				<Message type='success'>
 					<h2 className='text-lg font-semibold'>성공적으로 제출하였습니다!</h2>
-					<p>더 자세한 설명이 필요할 수 있습니다. <strong>반드시 <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요!!</strong></p>
-				</Message> : <Formik onSubmit={async (body) => {
-					const res = await Fetch(`/bots/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
-					setReportRes(res)
-				}} validationSchema={ReportSchema} initialValues={{
-					category: null,
-					description: '',
-					_csrf: csrfToken
-				}}>
-					{
-						({ errors, touched, values, setFieldValue }) => (
-							<Form>
-								<div className='mb-5'>
-									{
-										reportRes && <div className='my-5'>
-											<Message type='error'>
-												<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
-												<ul className='list-disc'>
-													{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
-												</ul>
-											</Message>
-										</div>
-									}
-									<h3 className='font-bold'>신고 구분</h3>
-									<p className='text-gray-400 text-sm mb-1'>해당되는 항목을 선택해주세요.</p>
-									{
-										reportCats.map(el => 
-											<div key={el}>
-												<label>
-													<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
-													{el}
-												</label>
-											</div>
-										)
-									}
-									<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category as string: null}</div>
-									{
-										values.category && <>
-											{
-												{
-													[reportCats[2]]: <Message type='info'>
-														<h3 className='font-bold text-xl'>본인 혹은 다른 사람이 위험에 처해 있나요?</h3>
-														<p>당신은 소중한 사람입니다.</p>
-														<p className='list-disc list-item list-inside'>자살예방상담전화 1393 | 청소년전화 1388</p>
-													</Message>,
-													[reportCats[5]]: <DMCA values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />,
-													[reportCats[6]]: <Message type='warning'>
-														<h3 className='font-bold text-xl'>디스코드 약관을 위반사항을 신고하시려고요?</h3>
-														<p><a className='text-blue-400' target='_blank' rel='noreferrer' href='http://dis.gd/report'>디스코드 문의</a>를 통해 직접 디스코드에 신고하실 수도 있습니다.</p>
-													</Message>
-                            
-												}[values.category]
-											}
-											{
-												!['오픈소스 라이선스, 저작권 위반 등 권리 침해'].includes(values.category) && <>
-													<h3 className='font-bold mt-2'>설명</h3>
-													<p className='text-gray-400 text-sm mb-1'>최대한 자세하게 기재해주세요.</p>
-													<TextField values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />
-												</>
-											}
-										</>
-									}
+					<p>
+						더 자세한 설명이 필요할 수 있습니다.{' '}
+						<strong>
+							반드시{' '}
+							<a className='text-blue-600 hover:text-blue-500' href='/discord'>
+								공식 디스코드
+							</a>
+							에 참여해주세요!!
+						</strong>
+					</p>
+				</Message>
+			) : (
+				<Formik
+					onSubmit={async (body) => {
+						const res = await Fetch(`/bots/${data.id}/report`, {
+							method: 'POST',
+							body: JSON.stringify(body),
+						})
+						setReportRes(res)
+					}}
+					validationSchema={ReportSchema}
+					initialValues={{
+						category: null,
+						description: '',
+						_csrf: csrfToken,
+					}}
+				>
+					{({ errors, touched, values, setFieldValue }) => (
+						<Form>
+							<div className='mb-5'>
+								{reportRes && (
+									<div className='my-5'>
+										<Message type='error'>
+											<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
+											<ul className='list-disc'>
+												{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
+											</ul>
+										</Message>
+									</div>
+								)}
+								<h3 className='font-bold'>신고 구분</h3>
+								<p className='mb-1 text-sm text-gray-400'>해당되는 항목을 선택해주세요.</p>
+								{reportCats.map((el) => (
+									<div key={el}>
+										<label>
+											<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
+											{el}
+										</label>
+									</div>
+								))}
+								<div className='mt-1 text-xs font-light text-red-500'>
+									{errors.category && touched.category ? (errors.category as string) : null}
 								</div>
-							</Form>
-						)
-					}
+								{values.category && (
+									<>
+										{
+											{
+												[reportCats[2]]: (
+													<Message type='info'>
+														<h3 className='text-xl font-bold'>
+															본인 혹은 다른 사람이 위험에 처해 있나요?
+														</h3>
+														<p>당신은 소중한 사람입니다.</p>
+														<p className='list-item list-inside list-disc'>
+															자살예방상담전화 1393 | 청소년전화 1388
+														</p>
+													</Message>
+												),
+												[reportCats[5]]: (
+													<DMCA
+														values={values}
+														errors={errors}
+														touched={touched}
+														setFieldValue={setFieldValue}
+													/>
+												),
+												[reportCats[6]]: (
+													<Message type='warning'>
+														<h3 className='text-xl font-bold'>
+															디스코드 약관을 위반사항을 신고하시려고요?
+														</h3>
+														<p>
+															<a
+																className='text-blue-400'
+																target='_blank'
+																rel='noreferrer'
+																href='http://dis.gd/report'
+															>
+																디스코드 문의
+															</a>
+															를 통해 직접 디스코드에 신고하실 수도 있습니다.
+														</p>
+													</Message>
+												),
+											}[values.category]
+										}
+										{!['오픈소스 라이선스, 저작권 위반 등 권리 침해'].includes(values.category) && (
+											<>
+												<h3 className='mt-2 font-bold'>설명</h3>
+												<p className='mb-1 text-sm text-gray-400'>최대한 자세하게 기재해주세요.</p>
+												<TextField
+													values={values}
+													errors={errors}
+													touched={touched}
+													setFieldValue={setFieldValue}
+												/>
+											</>
+										)}
+									</>
+								)}
+							</div>
+						</Form>
+					)}
 				</Formik>
-			}
+			)}
 		</Container>
 	)
 }
@@ -115,28 +165,28 @@ export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const data = await get.bot.load(ctx.query.id)
 	const user = await get.Authorization(parsed?.token)
-	
+
 	return {
 		props: {
 			csrfToken: getToken(ctx.req, ctx.res),
 			data,
-			user: await get.user.load(user || '')
+			user: await get.user.load(user || ''),
 		},
 	}
 }
 
 interface ReportBotProps {
 	csrfToken: string
-  data: Bot
-  user: User
+	data: Bot
+	user: User
 }
 
 interface Context extends CsrfContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
 	id: string
 }
 
-export default ReportBot
\ No newline at end of file
+export default ReportBot
diff --git a/pages/bots/[id]/vote.tsx b/pages/bots/[id]/vote.tsx
index c2a269b..2d0c255 100644
--- a/pages/bots/[id]/vote.tsx
+++ b/pages/bots/[id]/vote.tsx
@@ -19,7 +19,6 @@ import { getJosaPicker } from 'josa'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
 
-
 const Container = dynamic(() => import('@components/Container'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 const Button = dynamic(() => import('@components/Button'))
@@ -30,76 +29,122 @@ const Login = dynamic(() => import('@components/Login'))
 const Message = dynamic(() => import('@components/Message'))
 
 const VoteBot: NextPage<VoteBotProps> = ({ data, user, theme, csrfToken }) => {
-	const [ votingStatus, setVotingStatus ] = useState(0)
-	const [ result, setResult ] = useState<ResponseProps<{retryAfter?: number}>>(null)
+	const [votingStatus, setVotingStatus] = useState(0)
+	const [result, setResult] = useState<ResponseProps<{ retryAfter?: number }>>(null)
 	const router = useRouter()
-	if(!data?.id) return <NotFound />
-	if(!user) return <Login>
-		<NextSeo title={data.name} description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`} openGraph={{
-			images: [
-				{
-					url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
-					width: 256,
-					height: 256,
-					alt: 'Bot Avatar'
-				}
-			]
-		}} />
-	</Login>
-	
-	if((checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}/vote?csrfToken=${csrfToken}`)
+	if (!data?.id) return <NotFound />
+	if (!user)
+		return (
+			<Login>
+				<NextSeo
+					title={data.name}
+					description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`}
+					openGraph={{
+						images: [
+							{
+								url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
+								width: 256,
+								height: 256,
+								alt: 'Bot Avatar',
+							},
+						],
+					}}
+				/>
+			</Login>
+		)
+
+	if (
+		(checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) &&
+		data.vanity &&
+		data.vanity !== router.query.id
+	)
+		router.push(`/bots/${data.vanity}/vote?csrfToken=${csrfToken}`)
 	return (
 		<Container paddingTop className='py-10'>
-			<NextSeo title={data.name} description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`} openGraph={{
-				images: [
-					{
-						url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
-						width: 256,
-						height: 256,
-						alt: 'Bot Avatar'
-					}
-				]
-			}} />
-			{
-				data.state === 'blocked' ? <div className='pb-40'>
+			<NextSeo
+				title={data.name}
+				description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`}
+				openGraph={{
+					images: [
+						{
+							url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
+							width: 256,
+							height: 256,
+							alt: 'Bot Avatar',
+						},
+					],
+				}}
+			/>
+			{data.state === 'blocked' ? (
+				<div className='pb-40'>
 					<Message type='error'>
 						<h2 className='text-lg font-extrabold'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
 					</Message>
-				</div> : <>
+				</div>
+			) : (
+				<>
 					<Advertisement />
 					<Link href={makeBotURL(data)} className='text-blue-500 hover:opacity-80'>
-						<i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.name}</strong>{getJosaPicker('로')(data.name)}돌아가기
+						<i className='fas fa-arrow-left mb-3 mt-3' /> <strong>{data.name}</strong>
+						{getJosaPicker('로')(data.name)}돌아가기
 					</Link>
 					<Segment className='mb-16 py-8'>
 						<div className='text-center'>
-							<DiscordAvatar userID={data.id} className='mx-auto w-52 h-52 bg-white mb-4 rounded-full' />
-							<Tag text={<span><i className='fas fa-heart text-red-600' /> {data.votes}</span>} dark />
-							<h1 className='text-3xl font-bold mt-3'>{data.name}</h1>
+							<DiscordAvatar
+								userID={data.id}
+								className='mx-auto mb-4 h-52 w-52 rounded-full bg-white'
+							/>
+							<Tag
+								text={
+									<span>
+										<i className='fas fa-heart text-red-600' /> {data.votes}
+									</span>
+								}
+								dark
+							/>
+							<h1 className='mt-3 text-3xl font-bold'>{data.name}</h1>
 							<h4 className='text-md mt-1'>12시간마다 다시 투표하실 수 있습니다.</h4>
-							<div className='inline-block mt-2'>
-								{
-									votingStatus === 0 ? <Button onClick={()=> setVotingStatus(1)}>
-										<><i className='far fa-heart text-red-600'/> 하트 추가</>
-									</Button> 
-										: votingStatus === 1 ? <Captcha dark={theme === 'dark'} onVerify={async (key) => {
-											const res = await Fetch<{ retryAfter: number }|unknown>(`/bots/${data.id}/vote`, { method: 'POST', body: JSON.stringify({ _csrf: csrfToken, _captcha: key }) })
+							<div className='mt-2 inline-block'>
+								{votingStatus === 0 ? (
+									<Button onClick={() => setVotingStatus(1)}>
+										<>
+											<i className='far fa-heart text-red-600' /> 하트 추가
+										</>
+									</Button>
+								) : votingStatus === 1 ? (
+									<Captcha
+										dark={theme === 'dark'}
+										onVerify={async (key) => {
+											const res = await Fetch<{ retryAfter: number } | unknown>(
+												`/bots/${data.id}/vote`,
+												{
+													method: 'POST',
+													body: JSON.stringify({ _csrf: csrfToken, _captcha: key }),
+												}
+											)
 											setResult(res)
 											setVotingStatus(2)
 										}}
-										/>
-											: result.code === 200 ? <h2 className='text-2xl font-bold'>해당 봇에 투표했습니다!</h2>
-												: result.code === 429 ? <>
-													<h2 className='text-2xl font-bold'>이미 해당 봇에 투표하였습니다.</h2>
-													<h4 className='text-md mt-1'>{Day(+new Date() + result.data?.retryAfter).fromNow()} 다시 투표하실 수 있습니다.</h4>
-												</>
-													: <p>{result.message}</p>
-								}
+									/>
+								) : result.code === 200 ? (
+									<h2 className='text-2xl font-bold'>해당 봇에 투표했습니다!</h2>
+								) : result.code === 429 ? (
+									<>
+										<h2 className='text-2xl font-bold'>이미 해당 봇에 투표하였습니다.</h2>
+										<h4 className='text-md mt-1'>
+											{Day(+new Date() + result.data?.retryAfter).fromNow()} 다시 투표하실 수
+											있습니다.
+										</h4>
+									</>
+								) : (
+									<p>{result.message}</p>
+								)}
 							</div>
-                    
 						</div>
 					</Segment>
-					<Advertisement /></>
-			}
+					<Advertisement />
+				</>
+			)}
 		</Container>
 	)
 }
@@ -108,30 +153,30 @@ export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const data = await get.bot.load(ctx.query.id)
 	const user = await get.Authorization(parsed?.token)
-	
+
 	return {
 		props: {
 			csrfToken: getToken(ctx.req, ctx.res),
 			data,
-			user: await get.user.load(user || '')
+			user: await get.user.load(user || ''),
 		},
 	}
 }
 
 interface VoteBotProps {
 	csrfToken: string
-  vote: boolean
-  data: Bot
-  user: User
+	vote: boolean
+	data: Bot
+	user: User
 	theme: Theme
 }
 
 interface Context extends CsrfContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
 	id: string
 }
 
-export default VoteBot
\ No newline at end of file
+export default VoteBot
diff --git a/pages/bots/categories/[category].tsx b/pages/bots/categories/[category].tsx
index cc8e27d..2452c81 100644
--- a/pages/bots/categories/[category].tsx
+++ b/pages/bots/categories/[category].tsx
@@ -20,62 +20,88 @@ const Markdown = dynamic(() => import('@components/Markdown'))
 const NSFW = dynamic(() => import('@components/NSFW'))
 
 const Category: NextPage<CategoryProps> = ({ data, query }) => {
-	const [ nsfw, setNSFW ] = useState<boolean>()
+	const [nsfw, setNSFW] = useState<boolean>()
 	const router = useRouter()
 	useEffect(() => {
 		setNSFW(localStorage.nsfw)
 	}, [])
-	if(!data || data.data.length === 0 || data.totalPage < Number(query.page)) return <NotFound message={data?.data.length === 0 ? '해당 카테고리에 해당되는 봇이 존재하지 않습니다.' : null} />
-	return <>
-		<Hero type='bots' header={`${query.category} 카테고리 봇들`} description={`다양한 "${query.category}" 카테고리의 봇들을 만나보세요.`} />
-		{
-			query.category === 'NSFW' && !nsfw ? <NSFW onClick={() => setNSFW(true)} onDisableClick={() => localStorage.nsfw = true} />
-				: <Container>
-					{
-						router.query.category === '빗금 명령어' && <Segment className='mb-4'>
-							<h1 className='text-2xl font-bold pt-3.5 pb-1'>빗금 명령어</h1>
-							<Markdown text={'빗금 명렁어는 디스코드 채팅창에 `/` 를 입력하여 사용할 수 있습니다.'} />
+	if (!data || data.data.length === 0 || data.totalPage < Number(query.page))
+		return (
+			<NotFound
+				message={
+					data?.data.length === 0 ? '해당 카테고리에 해당되는 봇이 존재하지 않습니다.' : null
+				}
+			/>
+		)
+	return (
+		<>
+			<Hero
+				type='bots'
+				header={`${query.category} 카테고리 봇들`}
+				description={`다양한 "${query.category}" 카테고리의 봇들을 만나보세요.`}
+			/>
+			{query.category === 'NSFW' && !nsfw ? (
+				<NSFW onClick={() => setNSFW(true)} onDisableClick={() => (localStorage.nsfw = true)} />
+			) : (
+				<Container>
+					{router.query.category === '빗금 명령어' && (
+						<Segment className='mb-4'>
+							<h1 className='pb-1 pt-3.5 text-2xl font-bold'>빗금 명령어</h1>
+							<Markdown
+								text={'빗금 명렁어는 디스코드 채팅창에 `/` 를 입력하여 사용할 수 있습니다.'}
+							/>
 						</Segment>
-					}
+					)}
 					<Advertisement />
 					<ResponsiveGrid>
-						{
-							data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
-						}
+						{data.data.map((bot) => (
+							<BotCard key={bot.id} bot={bot} />
+						))}
 					</ResponsiveGrid>
-					<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/bots/categories/${query.category}`} />
+					<Paginator
+						totalPage={data.totalPage}
+						currentPage={data.currentPage}
+						pathname={`/bots/categories/${query.category}`}
+					/>
 					<Advertisement />
 				</Container>
-		}
-	</>
+			)}
+		</>
+	)
 }
 
 export const getServerSideProps = async (ctx: Context) => {
 	let data: List<Bot>
-	if(!ctx.query.page) ctx.query.page = '1'
-	const validate = await botCategoryListArgumentSchema.validate(ctx.query).then(el => el).catch(() => null)
-	if(!validate || isNaN(Number(ctx.query.page))) data = null
-	else data = await get.list.category.load(JSON.stringify({ page: Number(ctx.query.page), category: ctx.query.category }))
+	if (!ctx.query.page) ctx.query.page = '1'
+	const validate = await botCategoryListArgumentSchema
+		.validate(ctx.query)
+		.then((el) => el)
+		.catch(() => null)
+	if (!validate || isNaN(Number(ctx.query.page))) data = null
+	else
+		data = await get.list.category.load(
+			JSON.stringify({ page: Number(ctx.query.page), category: ctx.query.category })
+		)
 	return {
 		props: {
 			data,
-			query: ctx.query
-		}
+			query: ctx.query,
+		},
 	}
 }
 
 interface CategoryProps {
-  data: List<Bot>
-  query: URLQuery
+	data: List<Bot>
+	query: URLQuery
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery  
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  category: string
-  page?: string
+	category: string
+	page?: string
 }
 
-export default Category
\ No newline at end of file
+export default Category
diff --git a/pages/bots/categories/index.tsx b/pages/bots/categories/index.tsx
index 63613a9..737e789 100644
--- a/pages/bots/categories/index.tsx
+++ b/pages/bots/categories/index.tsx
@@ -4,32 +4,56 @@ import { NextSeo } from 'next-seo'
 
 import { botCategories, botCategoryIcon } from '@utils/Constants'
 
-
 const Container = dynamic(() => import('@components/Container'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const Tag = dynamic(() => import('@components/Tag'))
 const Segment = dynamic(() => import('@components/Segment'))
 
-const Categories:NextPage = () => {
-	return <Container paddingTop>
-		<NextSeo title='전체 카테고리' description='한국 디스코드 리스트의 전체 카테고리입니다.' />
-		<h1 className='text-2xl font-bold mt-2 mb-5'>전체 카테고리</h1>
-		<Segment className='mb-10'>
-			<div className='text-center flex flex-wrap mt-1.5'>
-				{
-					botCategories.map(t => <Tag key={t} text={<>
-						{
-							{ '빗금 명령어': <span className='fa-stack' style={{ fontSize: '1em', height: '1.2em', lineHeight: '1em', width: '20px', verticalAlign: 'middle' }}>
-								<i className='fas fa-square fa-stack-1x fa-md' />
-								<i className='fas fa-slash fa-rotate-90 fa-xs fa-stack-1x fa-inverse' style={{ fontSize: '0.3rem' }} />
-							</span> }[t] ?? <i className={botCategoryIcon[t]} />
-						} {t}
-					</>} href={`/bots/categories/${t}`} dark bigger /> )
-				}
-			</div>
-		</Segment>
-		<Advertisement />
-	</Container>
+const Categories: NextPage = () => {
+	return (
+		<Container paddingTop>
+			<NextSeo title='전체 카테고리' description='한국 디스코드 리스트의 전체 카테고리입니다.' />
+			<h1 className='mb-5 mt-2 text-2xl font-bold'>전체 카테고리</h1>
+			<Segment className='mb-10'>
+				<div className='mt-1.5 flex flex-wrap text-center'>
+					{botCategories.map((t) => (
+						<Tag
+							key={t}
+							text={
+								<>
+									{{
+										'빗금 명령어': (
+											<span
+												className='fa-stack'
+												style={{
+													fontSize: '1em',
+													height: '1.2em',
+													lineHeight: '1em',
+													width: '20px',
+													verticalAlign: 'middle',
+												}}
+											>
+												<i className='fas fa-square fa-stack-1x fa-md' />
+												<i
+													className='fas fa-slash fa-rotate-90 fa-xs fa-stack-1x fa-inverse'
+													style={{ fontSize: '0.3rem' }}
+												/>
+											</span>
+										),
+									}[t] ?? <i className={botCategoryIcon[t]} />}{' '}
+									{t}
+								</>
+							}
+							href={`/bots/categories/${t}`}
+							dark
+							bigger
+						/>
+					))}
+				</div>
+			</Segment>
+			<Advertisement />
+		</Container>
+	)
 }
 
-export default Categories
\ No newline at end of file
+export default Categories
diff --git a/pages/bots/index.tsx b/pages/bots/index.tsx
index 6c10aec..eb429ed 100644
--- a/pages/bots/index.tsx
+++ b/pages/bots/index.tsx
@@ -18,49 +18,54 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 			<Hero type='bots' />
 			<Container className='pb-10'>
 				<Advertisement />
-				<h1 className='text-3xl font-bold mt-10 mb-2'>
+				<h1 className='mb-2 mt-10 text-3xl font-bold'>
 					<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹
 				</h1>
 				<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
 				<ResponsiveGrid>
-					{
-						votes.data.map(bot=> <BotCard key={bot.id} bot={bot} />)
-					}
+					{votes.data.map((bot) => (
+						<BotCard key={bot.id} bot={bot} />
+					))}
 				</ResponsiveGrid>
-				<Paginator totalPage={votes.totalPage} currentPage={votes.currentPage} pathname='/bots/list/votes' />
+				<Paginator
+					totalPage={votes.totalPage}
+					currentPage={votes.currentPage}
+					pathname='/bots/list/votes'
+				/>
 				<Advertisement />
-				<h1 className='text-3xl font-bold mb-2'>
+				<h1 className='mb-2 text-3xl font-bold'>
 					<i className='fa fa-check mr-3 mt-10 text-emerald-500' /> 신뢰된 봇
 				</h1>
 				<p className='text-base'>한국 디스코드 리스트에서 인증받은 신뢰할 수 있는 봇들입니다!!</p>
 				<ResponsiveGrid>
-					{
-						trusted.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
-					}
+					{trusted.data.slice(0, 4).map((bot) => (
+						<BotCard key={bot.id} bot={bot} />
+					))}
 				</ResponsiveGrid>
-				<h1 className='text-3xl font-bold mt-20 mb-2'>
+				<h1 className='mb-2 mt-20 text-3xl font-bold'>
 					<i className='far fa-star mr-3 text-amber-500' /> 새로운 봇
 				</h1>
 				<p className='text-base'>최근에 한국 디스코드 리스트에 추가된 따끈따끈한 봇입니다.</p>
 				<ResponsiveGrid>
-					{
-						newBots.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
-					}
+					{newBots.data.slice(0, 4).map((bot) => (
+						<BotCard key={bot.id} bot={bot} />
+					))}
 				</ResponsiveGrid>
-				<LongButton href='/bots/list/new' center>더보기</LongButton>
+				<LongButton href='/bots/list/new' center>
+					더보기
+				</LongButton>
 				<Advertisement />
 			</Container>
 		</>
 	)
 }
 
-export const getServerSideProps = async() => {
+export const getServerSideProps = async () => {
 	const votes = await Query.get.list.votes.load(1)
 	const newBots = await Query.get.list.new.load(1)
 	const trusted = await Query.get.list.trusted.load(1)
 
-	return { props: { votes, newBots, trusted }}
-
+	return { props: { votes, newBots, trusted } }
 }
 
 interface IndexProps {
diff --git a/pages/bots/list/new.tsx b/pages/bots/list/new.tsx
index a4e5232..792ebbd 100644
--- a/pages/bots/list/new.tsx
+++ b/pages/bots/list/new.tsx
@@ -10,32 +10,38 @@ const BotCard = dynamic(() => import('@components/BotCard'))
 const Container = dynamic(() => import('@components/Container'))
 const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 
-const New:NextPage<NewProps> = ({ data }) => {
-	return <>
-		<Hero type='bots' header='새로운 봇' description='최근에 한국 디스코드 리스트에 추가된 봇들입니다!' />
-		<Container className='pb-10'>
-			<Advertisement />
-			<ResponsiveGrid>
-				{
-					data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
-				}
-			</ResponsiveGrid>
-			<Advertisement />
-		</Container>
-	</>
+const New: NextPage<NewProps> = ({ data }) => {
+	return (
+		<>
+			<Hero
+				type='bots'
+				header='새로운 봇'
+				description='최근에 한국 디스코드 리스트에 추가된 봇들입니다!'
+			/>
+			<Container className='pb-10'>
+				<Advertisement />
+				<ResponsiveGrid>
+					{data.data.map((bot) => (
+						<BotCard key={bot.id} bot={bot} />
+					))}
+				</ResponsiveGrid>
+				<Advertisement />
+			</Container>
+		</>
+	)
 }
 
 export const getServerSideProps = async () => {
 	const data = await get.list.new.load(1)
 	return {
 		props: {
-			data
-		}
+			data,
+		},
 	}
 }
 
 interface NewProps {
-  data: List<Bot>
+	data: List<Bot>
 }
 
-export default New
\ No newline at end of file
+export default New
diff --git a/pages/bots/list/votes.tsx b/pages/bots/list/votes.tsx
index ec5df55..ebd4598 100644
--- a/pages/bots/list/votes.tsx
+++ b/pages/bots/list/votes.tsx
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic'
 import { ParsedUrlQuery } from 'querystring'
 
 import { Bot, List } from '@types'
-import { get }from '@utils/Query'
+import { get } from '@utils/Query'
 
 import NotFound from '../../404'
 import { PageCount } from '@utils/Yup'
@@ -16,40 +16,49 @@ const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const Container = dynamic(() => import('@components/Container'))
 const Paginator = dynamic(() => import('@components/Paginator'))
 
-const Votes:NextPage<VotesProps> = ({ data }) => {
+const Votes: NextPage<VotesProps> = ({ data }) => {
 	const router = useRouter()
-	if(!data || data.data.length === 0 || data.totalPage < Number(router.query.page)) return <NotFound />
-	return <>
-		<Hero type='bots' header='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
-		<section id='list'>
-			<Container className='pb-10'>
-				<Advertisement />
-				<ResponsiveGrid>
-					{
-						data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
-					}
-				</ResponsiveGrid>
-				<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/bots/list/votes' />
-				<Advertisement />
-			</Container>
-		</section>
-	</>
+	if (!data || data.data.length === 0 || data.totalPage < Number(router.query.page))
+		return <NotFound />
+	return (
+		<>
+			<Hero type='bots' header='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!' />
+			<section id='list'>
+				<Container className='pb-10'>
+					<Advertisement />
+					<ResponsiveGrid>
+						{data.data.map((bot) => (
+							<BotCard key={bot.id} bot={bot} />
+						))}
+					</ResponsiveGrid>
+					<Paginator
+						totalPage={data.totalPage}
+						currentPage={data.currentPage}
+						pathname='/bots/list/votes'
+					/>
+					<Advertisement />
+				</Container>
+			</section>
+		</>
+	)
 }
-export const getServerSideProps = async (ctx:Context) => {
+export const getServerSideProps = async (ctx: Context) => {
 	let data: List<Bot>
-	if(!ctx.query.page) ctx.query.page = '1'
-	const validate = await PageCount.validate(ctx.query.page).then(el => el).catch(() => null)
-	if(!validate || isNaN(Number(ctx.query.page))) data = null
+	if (!ctx.query.page) ctx.query.page = '1'
+	const validate = await PageCount.validate(ctx.query.page)
+		.then((el) => el)
+		.catch(() => null)
+	if (!validate || isNaN(Number(ctx.query.page))) data = null
 	else data = await get.list.votes.load(Number(ctx.query.page))
 	return {
 		props: {
-			data
-		}
+			data,
+		},
 	}
 }
 
 interface VotesProps {
-  data: List<Bot>
+	data: List<Bot>
 }
 
 interface Context extends NextPageContext {
diff --git a/pages/bots/search.tsx b/pages/bots/search.tsx
index 385bddd..b1d9c98 100644
--- a/pages/bots/search.tsx
+++ b/pages/bots/search.tsx
@@ -8,7 +8,6 @@ import { get } from '@utils/Query'
 import { SearchQuerySchema } from '@utils/Yup'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 
-
 const Hero = dynamic(() => import('@components/Hero'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const BotCard = dynamic(() => import('@components/BotCard'))
@@ -18,75 +17,96 @@ const Paginator = dynamic(() => import('@components/Paginator'))
 const LongButton = dynamic(() => import('@components/LongButton'))
 const Redirect = dynamic(() => import('@components/Redirect'))
 
-const SearchComponent: FC<{data: List<Bot>, query: URLQuery }> = ({ data, query }) => {
-	return <div className='py-10'>
-		{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
-			<>
-				<ResponsiveGrid>
-					{
-						data.data.map(el => <BotCard key={el.id} bot={el as Bot} /> )
-					}
-				</ResponsiveGrid>
-				<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/search' searchParams={query} />
-			</>
-		}
-	</div>
+const SearchComponent: FC<{ data: List<Bot>; query: URLQuery }> = ({ data, query }) => {
+	return (
+		<div className='py-10'>
+			{!data || data.data.length === 0 ? (
+				<h1 className='py-20 text-center text-3xl font-bold'>검색 결과가 없습니다.</h1>
+			) : (
+				<>
+					<ResponsiveGrid>
+						{data.data.map((el) => (
+							<BotCard key={el.id} bot={el as Bot} />
+						))}
+					</ResponsiveGrid>
+					<Paginator
+						totalPage={data.totalPage}
+						currentPage={data.currentPage}
+						pathname='/search'
+						searchParams={query}
+					/>
+				</>
+			)}
+		</div>
+	)
 }
-const Search:NextPage<SearchProps> = ({ botData, query }) => {
-	if(!query?.q) return <Redirect text={false} to='/' />
-	return <>
-		<Hero type='bots' header={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
-		<Container>
-			<section id='list'>
-				<Advertisement />
-				<h1 className='text-4xl font-bold'>봇</h1>
-				<SearchComponent data={botData} query={query} />
-				<h1 className='text-2xl font-bold py-10'>서버를 찾으시나요?</h1>
-				<LongButton center href={KoreanbotsEndPoints.URL.searchServer(query.q)}>서버 검색 결과 보기</LongButton>
-				<Advertisement />
-			</section>
-		</Container>
-	</>
+const Search: NextPage<SearchProps> = ({ botData, query }) => {
+	if (!query?.q) return <Redirect text={false} to='/' />
+	return (
+		<>
+			<Hero
+				type='bots'
+				header={`"${query.q}" 검색 결과`}
+				description={`'${query.q}' 에 대한 검색 결과입니다.`}
+			/>
+			<Container>
+				<section id='list'>
+					<Advertisement />
+					<h1 className='text-4xl font-bold'>봇</h1>
+					<SearchComponent data={botData} query={query} />
+					<h1 className='py-10 text-2xl font-bold'>서버를 찾으시나요?</h1>
+					<LongButton center href={KoreanbotsEndPoints.URL.searchServer(query.q)}>
+						서버 검색 결과 보기
+					</LongButton>
+					<Advertisement />
+				</section>
+			</Container>
+		</>
+	)
 }
 
-export const getServerSideProps = async(ctx: Context) => {
-	if(ctx.query.query && !ctx.query.q) ctx.query.q = ctx.query.query
-	if(!ctx.query?.q) {
+export const getServerSideProps = async (ctx: Context) => {
+	if (ctx.query.query && !ctx.query.q) ctx.query.q = ctx.query.query
+	if (!ctx.query?.q) {
 		return {
 			redirect: {
 				destination: '/',
-				permanent: true
+				permanent: true,
 			},
-			props: {}
+			props: {},
 		}
 	}
-	if(!ctx.query.page) ctx.query.page = '1'
-	const validate = await SearchQuerySchema.validate(ctx.query).then(el => el).catch(() => null)
-	if(!validate || isNaN(Number(ctx.query.page))) return { props: { query: ctx.query } }
+	if (!ctx.query.page) ctx.query.page = '1'
+	const validate = await SearchQuerySchema.validate(ctx.query)
+		.then((el) => el)
+		.catch(() => null)
+	if (!validate || isNaN(Number(ctx.query.page))) return { props: { query: ctx.query } }
 	else {
 		return {
 			props: {
-				botData: await get.list.search.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page })).then(el => el).catch(() => null),
-				query: ctx.query
-			}
+				botData: await get.list.search
+					.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page }))
+					.then((el) => el)
+					.catch(() => null),
+				query: ctx.query,
+			},
 		}
 	}
 }
 
-
 interface SearchProps {
-  botData?: List<Bot>
-  query: URLQuery
+	botData?: List<Bot>
+	query: URLQuery
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery  
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  q?: string
+	q?: string
 	query?: string
-  page?: string
+	page?: string
 }
 
-export default Search
\ No newline at end of file
+export default Search
diff --git a/pages/calculator.tsx b/pages/calculator.tsx
index c2ed21d..0c183f3 100644
--- a/pages/calculator.tsx
+++ b/pages/calculator.tsx
@@ -10,81 +10,112 @@ import { DiscordEnpoints, GuildPermissions } from '@utils/Constants'
 const Container = dynamic(() => import('@components/Container'))
 const Input = dynamic(() => import('@components/Form/Input'))
 
-const Calculator:NextPage<CalculatorProps> = ({ query }) => {
-	const [ value, setValue ] = useState<{[perm: string]: boolean}>({})
-	const Perm = ({ name, perm, yellow }:{ name: string, perm: number, yellow?: boolean }) => {
-		return <li>
-			<label className='inline-flex items-center py-1'>
-				<input className='form-checkbox text-discord-blurple bg-gray-300 h-5 w-5 rounded' type='checkbox' checked={value[perm]} onChange={() => {
-					setValue({  ...value, [perm]: !value[perm] })
-				}} />
-				<span className={`ml-2.5 text-lg ${yellow ? 'text-amber-500' : ''}`}>{name}</span>
-			</label>
-		</li>
-	
+const Calculator: NextPage<CalculatorProps> = ({ query }) => {
+	const [value, setValue] = useState<{ [perm: string]: boolean }>({})
+	const Perm = ({ name, perm, yellow }: { name: string; perm: number; yellow?: boolean }) => {
+		return (
+			<li>
+				<label className='inline-flex items-center py-1'>
+					<input
+						className='form-checkbox h-5 w-5 rounded bg-gray-300 text-discord-blurple'
+						type='checkbox'
+						checked={value[perm]}
+						onChange={() => {
+							setValue({ ...value, [perm]: !value[perm] })
+						}}
+					/>
+					<span className={`ml-2.5 text-lg ${yellow ? 'text-amber-500' : ''}`}>{name}</span>
+				</label>
+			</li>
+		)
 	}
-	return <Container paddingTop className='pb-10'>
-		<NextSeo title='봇 초대링크 생성기' description='디스코드 봇 초대링크를 간편하게 생성하세요' openGraph={{
-			title:'봇 초대링크 생성기',
-			description: '디스코드 봇 초대링크를 간편하게 생성하세요'
-		}} />
-		<h1 className='text-4xl font-bold mt-2 mb-4'>봇 초대링크 생성기</h1>
-		<div className='text-2xl font-bold inline-flex items-center'>권한: {String(Object.keys(value).filter(el => value[el]).map(el => Number(el)).reduce((prev, curr) => BigInt(prev) | BigInt(curr), BigInt(0)))} 
-			<span className='ml-2 text-lg font-semibold'>= { Object.keys(value).filter(el => value[el]).map(el => `0x${Number(el).toString(16)}`).join(' | ') }</span>
-		</div>
-		<div className='grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 mt-2'>
-			<div>
-				<h2 className='text-2xl font-bold'>일반 권한</h2>
-				<ul>
-					{
-						GuildPermissions.general.map(el => <Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />)
-					}
-				</ul>
-				
+	return (
+		<Container paddingTop className='pb-10'>
+			<NextSeo
+				title='봇 초대링크 생성기'
+				description='디스코드 봇 초대링크를 간편하게 생성하세요'
+				openGraph={{
+					title: '봇 초대링크 생성기',
+					description: '디스코드 봇 초대링크를 간편하게 생성하세요',
+				}}
+			/>
+			<h1 className='mb-4 mt-2 text-4xl font-bold'>봇 초대링크 생성기</h1>
+			<div className='inline-flex items-center text-2xl font-bold'>
+				권한:{' '}
+				{String(
+					Object.keys(value)
+						.filter((el) => value[el])
+						.map((el) => Number(el))
+						.reduce((prev, curr) => BigInt(prev) | BigInt(curr), BigInt(0))
+				)}
+				<span className='ml-2 text-lg font-semibold'>
+					={' '}
+					{Object.keys(value)
+						.filter((el) => value[el])
+						.map((el) => `0x${Number(el).toString(16)}`)
+						.join(' | ')}
+				</span>
 			</div>
-			<div>
-				<h2 className='text-2xl font-bold'>멤버쉽 권한</h2>
-				<ul>
-					{
-						GuildPermissions.membership.map(el => <Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />)
-					}
-				</ul>
+			<div className='mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3'>
+				<div>
+					<h2 className='text-2xl font-bold'>일반 권한</h2>
+					<ul>
+						{GuildPermissions.general.map((el) => (
+							<Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />
+						))}
+					</ul>
+				</div>
+				<div>
+					<h2 className='text-2xl font-bold'>멤버쉽 권한</h2>
+					<ul>
+						{GuildPermissions.membership.map((el) => (
+							<Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />
+						))}
+					</ul>
+				</div>
+				<div>
+					<h2 className='text-2xl font-bold'>채팅 채널 권한</h2>
+					<ul>
+						{GuildPermissions.channel.map((el) => (
+							<Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />
+						))}
+					</ul>
+				</div>
+				<div>
+					<h2 className='text-2xl font-bold'>음성 채널 권한</h2>
+					<ul>
+						{GuildPermissions.voice.map((el) => (
+							<Perm key={el.name} name={el.name} perm={el.flag} />
+						))}
+					</ul>
+				</div>
+				<div>
+					<h2 className='text-2xl font-bold'>고급 권한</h2>
+					<ul>
+						{GuildPermissions.advanced.map((el) => (
+							<Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />
+						))}
+					</ul>
+				</div>
 			</div>
-			<div>
-				<h2 className='text-2xl font-bold'>채팅 채널 권한</h2>
-				<ul>
-					{
-						GuildPermissions.channel.map(el => <Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />)
-					}
-				</ul>
+			<div className='py-10'>
+				<span className='text-amber-500'>
+					노란색 = 서버에 2단계 인증 필수가 활성화되어있다면, 봇 소유자는{' '}
+					<a href='https://support.discord.com/hc/ko/articles/219576828-2단계-인증-설정하기'>
+						2단계 인증
+					</a>
+					이 완료되어있어야합니다.
+				</span>
 			</div>
-			<div>
-				<h2 className='text-2xl font-bold'>음성 채널 권한</h2>
-				<ul>
-					{
-						GuildPermissions.voice.map(el => <Perm key={el.name} name={el.name} perm={el.flag} />)
-					}
-				</ul>
-			</div>
-			<div>
-				<h2 className='text-2xl font-bold'>고급 권한</h2>
-				<ul>
-					{
-						GuildPermissions.advanced.map(el => <Perm key={el.name} name={el.name} perm={el.flag} yellow={el.twofactor} />)
-					}
-				</ul>
-			</div>
-		</div>
-		<div className='py-10'>
-			<span className='text-amber-500'>노란색 = 서버에 2단계 인증 필수가 활성화되어있다면, 봇 소유자는 <a href='https://support.discord.com/hc/ko/articles/219576828-2단계-인증-설정하기'>2단계 인증</a>이 완료되어있어야합니다.</span>
-		</div>
-		<Formik onSubmit={()=> console.log('Pong?')} initialValues={{
-			id: query.id?.toString() || '',
-			scope: 'bot',
-			redirect: ''
-		}}>
-			{
-				({ values, setFieldValue }) => (
+			<Formik
+				onSubmit={() => console.log('Pong?')}
+				initialValues={{
+					id: query.id?.toString() || '',
+					scope: 'bot',
+					redirect: '',
+				}}
+			>
+				{({ values, setFieldValue }) => (
 					<Form>
 						<div className='grid gap-3 lg:grid-cols-4'>
 							<div>
@@ -94,7 +125,12 @@ const Calculator:NextPage<CalculatorProps> = ({ query }) => {
 							</div>
 							<div>
 								<h6>스코프 (Scope)</h6>
-								<button onClick={() => setFieldValue('scope', 'bot applications.commands')} className='text-blue-500 hover:text-blue-400'>빗금 명령어(Slash Command) 봇인가요?</button>
+								<button
+									onClick={() => setFieldValue('scope', 'bot applications.commands')}
+									className='text-blue-500 hover:text-blue-400'
+								>
+									빗금 명령어(Slash Command) 봇인가요?
+								</button>
 								<Input name='scope' placeholder='bot' />
 							</div>
 							<div>
@@ -104,20 +140,37 @@ const Calculator:NextPage<CalculatorProps> = ({ query }) => {
 							</div>
 						</div>
 						<div className='mt-2'>
-							초대링크: <a rel='noreferrer' target='_blank' href={values.id ? DiscordEnpoints.InviteApplication(values.id, value, values.scope, values.redirect) : null} className='cursor-pointer text-blue-500 hover:text-blue-400'>{DiscordEnpoints.InviteApplication(values.id, value, values.scope, values.redirect)}</a>
+							초대링크:{' '}
+							<a
+								rel='noreferrer'
+								target='_blank'
+								href={
+									values.id
+										? DiscordEnpoints.InviteApplication(
+												values.id,
+												value,
+												values.scope,
+												values.redirect
+										  )
+										: null
+								}
+								className='cursor-pointer text-blue-500 hover:text-blue-400'
+							>
+								{DiscordEnpoints.InviteApplication(values.id, value, values.scope, values.redirect)}
+							</a>
 						</div>
 					</Form>
-				)
-			}
-		</Formik>
-	</Container>
+				)}
+			</Formik>
+		</Container>
+	)
 }
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
 	return {
 		props: {
-			query: ctx.query
-		}
+			query: ctx.query,
+		},
 	}
 }
 
diff --git a/pages/callback/discord.tsx b/pages/callback/discord.tsx
index 0d44875..43543f9 100644
--- a/pages/callback/discord.tsx
+++ b/pages/callback/discord.tsx
@@ -7,11 +7,11 @@ import { redirectTo } from '@utils/Tools'
 
 const Loader = dynamic(() => import('@components/Loader'))
 
-const DiscordCallback:NextPage = () => {
+const DiscordCallback: NextPage = () => {
 	const router = useRouter()
-	const [ notRedirecting, setNotRedirecting ] = useState(false)
+	const [notRedirecting, setNotRedirecting] = useState(false)
 	useEffect(() => {
-		if(window.opener) {
+		if (window.opener) {
 			setNotRedirecting(true)
 			window.opener.location.reload()
 		} else {
@@ -19,10 +19,14 @@ const DiscordCallback:NextPage = () => {
 			localStorage.removeItem('redirectTo')
 		}
 	}, [router])
-  
-	return <>
-		<Loader text={notRedirecting ? '해당 창을 닫고 원래 앱으로 돌아가주세요.' : '리다이렉트 중 입니다.'} />
-	</>
+
+	return (
+		<>
+			<Loader
+				text={notRedirecting ? '해당 창을 닫고 원래 앱으로 돌아가주세요.' : '리다이렉트 중 입니다.'}
+			/>
+		</>
+	)
 }
 
-export default DiscordCallback
\ No newline at end of file
+export default DiscordCallback
diff --git a/pages/community-rule.tsx b/pages/community-rule.tsx
index 165c090..6cfa9cd 100644
--- a/pages/community-rule.tsx
+++ b/pages/community-rule.tsx
@@ -3,17 +3,12 @@ import dynamic from 'next/dynamic'
 
 import { SpecialEndPoints } from '@utils/Constants'
 
-
-const Docs = dynamic(()=> import('@components/Docs'))
+const Docs = dynamic(() => import('@components/Docs'))
 const Markdown = dynamic(() => import('@components/Markdown'))
 
-
 const CommunityRule: NextPage<CommunityRuleProps> = ({ content }) => {
 	return (
-		<Docs
-			header='커뮤니티 규칙'
-			description='한국 디스코드 리스트 커뮤니티 규칙입니다.'
-		>
+		<Docs header='커뮤니티 규칙' description='한국 디스코드 리스트 커뮤니티 규칙입니다.'>
 			<Markdown text={content} />
 		</Docs>
 	)
@@ -24,14 +19,15 @@ interface CommunityRuleProps {
 }
 
 export const getStaticProps: GetStaticProps<CommunityRuleProps> = async () => {
-	const res = await fetch(SpecialEndPoints.Github.Content('koreanbots', 'terms', 'community-rule.md'))
+	const res = await fetch(
+		SpecialEndPoints.Github.Content('koreanbots', 'terms', 'community-rule.md')
+	)
 	const json = await res.json()
 	return {
 		props: {
-			content: Buffer.from(json.content, 'base64').toString('utf-8')
-		}
+			content: Buffer.from(json.content, 'base64').toString('utf-8'),
+		},
 	}
 }
 
 export default CommunityRule
-
diff --git a/pages/debug.tsx b/pages/debug.tsx
index 0b18e67..7a59a38 100644
--- a/pages/debug.tsx
+++ b/pages/debug.tsx
@@ -1,15 +1,15 @@
 import dynamic from 'next/dynamic'
 import { useFormik } from 'formik'
 
-const Container = dynamic(()=> import('@components/Container'))
-const Divider = dynamic(()=> import('@components/Divider'))
-const Segment = dynamic(()=> import('@components/Segment'))
+const Container = dynamic(() => import('@components/Container'))
+const Divider = dynamic(() => import('@components/Divider'))
+const Segment = dynamic(() => import('@components/Segment'))
 
 import Package from '../package.json'
 import Markdown from '@components/Markdown'
 import { parseDockerhubTag } from '@utils/Tools'
 
-const ClientInfo = ():JSX.Element => {
+const ClientInfo = (): JSX.Element => {
 	const formik = useFormik({
 		initialValues: {
 			markdown: `<div align="center">
@@ -24,38 +24,52 @@ const ClientInfo = ():JSX.Element => {
 
 [트위터](https://twitter.com/koreanbots)
 https://github.com/koreanbots
-`
+`,
+		},
+		onSubmit: () => {
+			alert('Pong')
 		},
-		onSubmit: ()=>{ alert('Pong') }
 	})
-	return <Container paddingTop className='pb-10'>
-		<h1 className='text-4xl font-bold mb-3 mt-3'>개발자모드</h1>
-		<h2 className='text-3xl font-semibold mb-4'>정보들</h2>
-		<Segment>
-			<div className='markdown-body text-black dark:text-white'>
-				<h1>빌드정보</h1>
-				<ul className='list-disc'>
-					<li>Tag: <code>{parseDockerhubTag(process.env.NEXT_PUBLIC_TAG)}</code></li>
-					<li>Version: <code>v{Package.version}</code></li>
-					<li>Hash: <code>{process.env.NEXT_PUBLIC_SOURCE_COMMIT}</code></li>
-				</ul>
-
-			</div>
-		</Segment>
-		<Divider />
-		<h2 className='text-3xl font-semibold mb-2'>테스트</h2>
-		<h3 className='text-2xl font-semibold mb-2'>마크다운</h3>
-		<Segment>
-			<div className='lg:flex'>
-				<div className='w-full lg:w-1/2 min-h-48'>
-					<textarea className='resize-none w-full h-full dark:bg-discord-dark outline-none p-5' name='markdown' value={formik.values.markdown} onChange={formik.handleChange}/>
+	return (
+		<Container paddingTop className='pb-10'>
+			<h1 className='mb-3 mt-3 text-4xl font-bold'>개발자모드</h1>
+			<h2 className='mb-4 text-3xl font-semibold'>정보들</h2>
+			<Segment>
+				<div className='markdown-body text-black dark:text-white'>
+					<h1>빌드정보</h1>
+					<ul className='list-disc'>
+						<li>
+							Tag: <code>{parseDockerhubTag(process.env.NEXT_PUBLIC_TAG)}</code>
+						</li>
+						<li>
+							Version: <code>v{Package.version}</code>
+						</li>
+						<li>
+							Hash: <code>{process.env.NEXT_PUBLIC_SOURCE_COMMIT}</code>
+						</li>
+					</ul>
 				</div>
-				<div className='w-full lg:w-1/2 p-10'>
-					<Markdown text={formik.values.markdown} />
+			</Segment>
+			<Divider />
+			<h2 className='mb-2 text-3xl font-semibold'>테스트</h2>
+			<h3 className='mb-2 text-2xl font-semibold'>마크다운</h3>
+			<Segment>
+				<div className='lg:flex'>
+					<div className='min-h-48 w-full lg:w-1/2'>
+						<textarea
+							className='h-full w-full resize-none p-5 outline-none dark:bg-discord-dark'
+							name='markdown'
+							value={formik.values.markdown}
+							onChange={formik.handleChange}
+						/>
+					</div>
+					<div className='w-full p-10 lg:w-1/2'>
+						<Markdown text={formik.values.markdown} />
+					</div>
 				</div>
-			</div>
-		</Segment>
-	</Container>
+			</Segment>
+		</Container>
+	)
 }
 
-export default ClientInfo
\ No newline at end of file
+export default ClientInfo
diff --git a/pages/developers/applications/bots/[id].tsx b/pages/developers/applications/bots/[id].tsx
index 8317338..1cc6fc7 100644
--- a/pages/developers/applications/bots/[id].tsx
+++ b/pages/developers/applications/bots/[id].tsx
@@ -28,113 +28,168 @@ const Modal = dynamic(() => import('@components/Modal'))
 
 const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme, csrfToken }) => {
 	const router = useRouter()
-	const [ data, setData ] = useState<ResponseProps<unknown>>(null)
-	const [ modalOpened, setModalOpen ] = useState(false)
-	const [ showToken, setShowToken ] = useState(false)
-	const [ tokenCopied, setTokenCopied ] = useClipboard(spec?.token, {
-		successDuration: 1000
+	const [data, setData] = useState<ResponseProps<unknown>>(null)
+	const [modalOpened, setModalOpen] = useState(false)
+	const [showToken, setShowToken] = useState(false)
+	const [tokenCopied, setTokenCopied] = useClipboard(spec?.token, {
+		successDuration: 1000,
 	})
 	async function updateApplication(d: DeveloperBot) {
 		const res = await Fetch(`/applications/bots/${bot.id}`, {
-	 		method: 'PATCH',
-	 		body: JSON.stringify(cleanObject(d))
-	 	})
-	 	setData(res)
-	 }
+			method: 'PATCH',
+			body: JSON.stringify(cleanObject(d)),
+		})
+		setData(res)
+	}
 
 	async function resetToken() {
 		const res = await Fetch<{ token: string }>(`/applications/bots/${bot.id}/reset`, {
 			method: 'POST',
-			body: JSON.stringify({ token: spec.token, _csrf: csrfToken })
+			body: JSON.stringify({ token: spec.token, _csrf: csrfToken }),
 		})
 		setData(res)
 
 		return res
 	}
 
-	if(!user) {
+	if (!user) {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
 		return
 	}
-	if(!bot || !spec) return <NotFound />
+	if (!bot || !spec) return <NotFound />
 	return (
 		<DeveloperLayout enabled='applications'>
-			<Link
-				href='/developers/applications'
-				className='text-blue-500 hover:text-blue-400'>
-
-				<i className='fas fa-arrow-left' />돌아가기
+			<Link href='/developers/applications' className='text-blue-500 hover:text-blue-400'>
+				<i className='fas fa-arrow-left' />
+				돌아가기
 			</Link>
 			<h1 className='text-3xl font-bold'>봇 설정</h1>
-			<p className='text-gray-400'>한국 디스코드 리스트 API에 사용할 정보를 이곳에서 설정하실 수 있습니다.</p>
-			<div className='lg:flex pt-6'>
+			<p className='text-gray-400'>
+				한국 디스코드 리스트 API에 사용할 정보를 이곳에서 설정하실 수 있습니다.
+			</p>
+			<div className='pt-6 lg:flex'>
 				<div className='lg:w-1/5'>
 					<DiscordAvatar userID={bot.id} />
 				</div>
-				<div className='lg:w-4/5 relative'>
+				<div className='relative lg:w-4/5'>
 					<div className='mt-4'>
-						{
-							!data ? '' : data.code === 200 ? 
-								<Message type='success'>
-									<h2 className='text-lg font-extrabold'>수정 성공!</h2>
-									<p>봇 정보를 저장했습니다.</p>
-								</Message> : <Message type='error'>
-									<h2 className='text-lg font-extrabold'>{data.message}</h2>
-									<ul className='list-disc list-inside'>
-										{
-											data.errors?.map((el, i)=> <li key={i}>{el}</li>)
-										}
-									</ul>
-								</Message>
-						}
+						{!data ? (
+							''
+						) : data.code === 200 ? (
+							<Message type='success'>
+								<h2 className='text-lg font-extrabold'>수정 성공!</h2>
+								<p>봇 정보를 저장했습니다.</p>
+							</Message>
+						) : (
+							<Message type='error'>
+								<h2 className='text-lg font-extrabold'>{data.message}</h2>
+								<ul className='list-inside list-disc'>
+									{data.errors?.map((el, i) => <li key={i}>{el}</li>)}
+								</ul>
+							</Message>
+						)}
 					</div>
-					<div className='grid text-left px-6'>
-						<h2 className='text-3xl font-bold mb-2 mt-3'>{bot.name}#{bot.tag}</h2>
+					<div className='grid px-6 text-left'>
+						<h2 className='mb-2 mt-3 text-3xl font-bold'>
+							{bot.name}#{bot.tag}
+						</h2>
 						<h3 className='text-lg font-semibold'>봇 토큰</h3>
-						<pre className='text-sm overflow-x-scroll w-full'>{showToken ? spec.token : '******************'}</pre>
-						<div className='pt-3 pb-6'>
-							<Button onClick={() => setShowToken(!showToken)}>{showToken ? '숨기기' : '보기'}</Button>
-							<Button onClick={setTokenCopied} className={tokenCopied ? 'bg-emerald-400 text-white' : null}>{tokenCopied ? '복사됨' : '복사'}</Button>
-							<Button onClick={()=> setModalOpen(true)}>재발급</Button>
-							<Modal isOpen={modalOpened} onClose={() => setModalOpen(false)} dark={theme === 'dark'} header='정말로 토큰을 재발급하시겠습니까?'>
+						<pre className='w-full overflow-x-scroll text-sm'>
+							{showToken ? spec.token : '******************'}
+						</pre>
+						<div className='pb-6 pt-3'>
+							<Button onClick={() => setShowToken(!showToken)}>
+								{showToken ? '숨기기' : '보기'}
+							</Button>
+							<Button
+								onClick={setTokenCopied}
+								className={tokenCopied ? 'bg-emerald-400 text-white' : null}
+							>
+								{tokenCopied ? '복사됨' : '복사'}
+							</Button>
+							<Button onClick={() => setModalOpen(true)}>재발급</Button>
+							<Modal
+								isOpen={modalOpened}
+								onClose={() => setModalOpen(false)}
+								dark={theme === 'dark'}
+								header='정말로 토큰을 재발급하시겠습니까?'
+							>
 								<p>기존에 사용중이시던 토큰은 더 이상 사용하실 수 없습니다</p>
-								<div className='text-right pt-6'>
-									<Button className='bg-gray-500 text-white hover:opacity-90' onClick={()=> setModalOpen(false)}>취소</Button>
-									<Button onClick={async ()=> {
-										const res = await resetToken()
-										spec.token = res.data.token
-										setModalOpen(false)
-									}}>재발급</Button>
+								<div className='pt-6 text-right'>
+									<Button
+										className='bg-gray-500 text-white hover:opacity-90'
+										onClick={() => setModalOpen(false)}
+									>
+										취소
+									</Button>
+									<Button
+										onClick={async () => {
+											const res = await resetToken()
+											spec.token = res.data.token
+											setModalOpen(false)
+										}}
+									>
+										재발급
+									</Button>
 								</div>
 							</Modal>
 						</div>
-						<Formik validationSchema={DeveloperBotSchema} initialValues={{
-							webhookURL: spec.webhookURL || '',
-							_csrf: csrfToken
-						}}
-						onSubmit={updateApplication}>
+						<Formik
+							validationSchema={DeveloperBotSchema}
+							initialValues={{
+								webhookURL: spec.webhookURL || '',
+								_csrf: csrfToken,
+							}}
+							onSubmit={updateApplication}
+						>
 							{({ errors, touched }) => (
 								<Form>
 									<div className='mb-2'>
-										<h3 className='font-bold mb-1'>
-                                            웹훅 URL
-											{(!data || data.code !== 200) && spec.webhookStatus === WebhookStatus.Disabled && (
-												<Tooltip direction='left' text='웹훅 링크가 유효하지 않아 웹훅이 중지되었습니다.'>
-													<span className='text-red-500 text-base font-semibold pl-1' role='img' aria-label='warning'>⚠️</span>
-												</Tooltip>
-											)}
+										<h3 className='mb-1 font-bold'>
+											웹훅 URL
+											{(!data || data.code !== 200) &&
+												spec.webhookStatus === WebhookStatus.Disabled && (
+													<Tooltip
+														direction='left'
+														text='웹훅 링크가 유효하지 않아 웹훅이 중지되었습니다.'
+													>
+														<span
+															className='pl-1 text-base font-semibold text-red-500'
+															role='img'
+															aria-label='warning'
+														>
+															⚠️
+														</span>
+													</Tooltip>
+												)}
 										</h3>
-										<p className='text-gray-400 text-sm mb-1'>웹훅을 이용하여 다양한 한국 디스코드 리스트의 봇에 발생하는 이벤트를 받아볼 수 있습니다.<br/>
-                                        웹훅 링크가 유효하지 않을 경우 웹훅이 중지되며, 다시 저장할 경우 다시 활성화됩니다.<br/>
-                                        웹훅에 대한 자세한 내용은 <Link
+										<p className='mb-1 text-sm text-gray-400'>
+											웹훅을 이용하여 다양한 한국 디스코드 리스트의 봇에 발생하는 이벤트를 받아볼 수
+											있습니다.
+											<br />
+											웹훅 링크가 유효하지 않을 경우 웹훅이 중지되며, 다시 저장할 경우 다시
+											활성화됩니다.
+											<br />
+											웹훅에 대한 자세한 내용은{' '}
+											<Link
 												href={'/developers/docs/%EC%9B%B9%ED%9B%84%ED%81%AC'}
-												className='text-blue-500 hover:text-blue-400 font-semibold'>개발자 문서</Link>에서 확인하실 수 있습니다.
+												className='font-semibold text-blue-500 hover:text-blue-400'
+											>
+												개발자 문서
+											</Link>
+											에서 확인하실 수 있습니다.
 										</p>
 										<Input name='webhookURL' placeholder='https://webhook.koreanbots.dev' />
-										{touched.webhookURL && errors.webhookURL ? <div className='text-red-500 text-xs font-light mt-1'>{errors.webhookURL}</div> : null}
+										{touched.webhookURL && errors.webhookURL ? (
+											<div className='mt-1 text-xs font-light text-red-500'>
+												{errors.webhookURL}
+											</div>
+										) : null}
 									</div>
-									<Button type='submit'><i className='far fa-save'/> 저장</Button>
+									<Button type='submit'>
+										<i className='far fa-save' /> 저장
+									</Button>
 								</Form>
 							)}
 						</Formik>
@@ -143,12 +198,11 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme,
 			</div>
 		</DeveloperLayout>
 	)
-
 }
 
 interface BotApplicationProps {
-  user: string
-  spec: BotSpec
+	user: string
+	spec: BotSpec
 	bot: Bot
 	csrfToken: string
 	theme: Theme
@@ -157,19 +211,24 @@ interface BotApplicationProps {
 export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const user = (await get.Authorization(parsed?.token)) || ''
-  
+
 	return {
-		props: { user, spec: await get.botSpec(ctx.query.id, user), bot: await get.bot.load(ctx.query.id), csrfToken: getToken(ctx.req, ctx.res) }
+		props: {
+			user,
+			spec: await get.botSpec(ctx.query.id, user),
+			bot: await get.bot.load(ctx.query.id),
+			csrfToken: getToken(ctx.req, ctx.res),
+		},
 	}
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  id: string
-  date: string
+	id: string
+	date: string
 }
 
-export default BotApplication
\ No newline at end of file
+export default BotApplication
diff --git a/pages/developers/applications/index.tsx b/pages/developers/applications/index.tsx
index 46b248f..906433c 100644
--- a/pages/developers/applications/index.tsx
+++ b/pages/developers/applications/index.tsx
@@ -12,30 +12,41 @@ const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout'))
 const Login = dynamic(() => import('@components/Login'))
 
 const Applications: NextPage<ApplicationsProps> = ({ user }) => {
-	if(!user) return <Login>
-		<NextSeo title='한디리 개발자' description='한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.' />
-	</Login>
-	return <DeveloperLayout enabled='applications'>
-		<h1 className='text-3xl font-bold'>나의 봇</h1>
-		<p className='text-gray-400'>한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.</p>
-		<div className='grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2'>
-			{
-				(user.bots as Bot[]).map(bot => <Application key={bot.id} id={bot.id} name={bot.name} type='bot' />)
-			}
-		</div>
-		<h1 className='text-3xl font-bold mt-10'>나의 서버</h1>
-		<p className='text-gray-400'>한국 디스코드 리스트 API를 활용하여 서버에 다양한 기능을 추가해보세요.</p>
-		<div className='grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2'>
-			{
-				(user.servers as Server[]).map(bot => <Application key={bot.id} id={bot.id} name={bot.name} type='server' />)
-			}
-		</div>
-	</DeveloperLayout>
-
+	if (!user)
+		return (
+			<Login>
+				<NextSeo
+					title='한디리 개발자'
+					description='한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.'
+				/>
+			</Login>
+		)
+	return (
+		<DeveloperLayout enabled='applications'>
+			<h1 className='text-3xl font-bold'>나의 봇</h1>
+			<p className='text-gray-400'>
+				한국 디스코드 리스트 API를 활용하여 봇에 다양한 기능을 추가해보세요.
+			</p>
+			<div className='mt-2 grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8'>
+				{(user.bots as Bot[]).map((bot) => (
+					<Application key={bot.id} id={bot.id} name={bot.name} type='bot' />
+				))}
+			</div>
+			<h1 className='mt-10 text-3xl font-bold'>나의 서버</h1>
+			<p className='text-gray-400'>
+				한국 디스코드 리스트 API를 활용하여 서버에 다양한 기능을 추가해보세요.
+			</p>
+			<div className='mt-2 grid grid-cols-1 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8'>
+				{(user.servers as Server[]).map((bot) => (
+					<Application key={bot.id} id={bot.id} name={bot.name} type='server' />
+				))}
+			</div>
+		</DeveloperLayout>
+	)
 }
 
 interface ApplicationsProps {
-  user: User
+	user: User
 }
 
 export const getServerSideProps = async (ctx: NextPageContext) => {
@@ -43,7 +54,7 @@ export const getServerSideProps = async (ctx: NextPageContext) => {
 	const user = (await get.Authorization(parsed?.token)) || ''
 
 	return {
-		props: { user: await get.user.load(user) }
+		props: { user: await get.user.load(user) },
 	}
 }
-export default Applications
\ No newline at end of file
+export default Applications
diff --git a/pages/developers/applications/servers/[id].tsx b/pages/developers/applications/servers/[id].tsx
index c5de5d6..260df07 100644
--- a/pages/developers/applications/servers/[id].tsx
+++ b/pages/developers/applications/servers/[id].tsx
@@ -25,18 +25,24 @@ const ServerIcon = dynamic(() => import('@components/ServerIcon'))
 const Message = dynamic(() => import('@components/Message'))
 const Modal = dynamic(() => import('@components/Modal'))
 
-const ServerApplication: NextPage<ServerApplicationProps> = ({ user, spec, server, theme, csrfToken }) => {
+const ServerApplication: NextPage<ServerApplicationProps> = ({
+	user,
+	spec,
+	server,
+	theme,
+	csrfToken,
+}) => {
 	const router = useRouter()
-	const [ data, setData ] = useState<ResponseProps<unknown>>(null)
-	const [ modalOpened, setModalOpen ] = useState(false)
-	const [ showToken, setShowToken ] = useState(false)
-	const [ tokenCopied, setTokenCopied ] = useClipboard(spec?.token, {
-		successDuration: 1000
+	const [data, setData] = useState<ResponseProps<unknown>>(null)
+	const [modalOpened, setModalOpen] = useState(false)
+	const [showToken, setShowToken] = useState(false)
+	const [tokenCopied, setTokenCopied] = useClipboard(spec?.token, {
+		successDuration: 1000,
 	})
 	async function updateApplication(d: DeveloperServer) {
 		const res = await Fetch(`/applications/servers/${server.id}`, {
 			method: 'PATCH',
-			body: JSON.stringify(cleanObject(d))
+			body: JSON.stringify(cleanObject(d)),
 		})
 		setData(res)
 	}
@@ -44,119 +50,173 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({ user, spec, serve
 	async function resetToken() {
 		const res = await Fetch<{ token: string }>(`/applications/servers/${server.id}/reset`, {
 			method: 'POST',
-			body: JSON.stringify({ token: spec.token, _csrf: csrfToken })
+			body: JSON.stringify({ token: spec.token, _csrf: csrfToken }),
 		})
 		setData(res)
 
 		return res
 	}
 
-	if(!user) {
+	if (!user) {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
 		return
 	}
-	if(!server) return <NotFound />
+	if (!server) return <NotFound />
 	return (
 		<DeveloperLayout enabled='applications'>
-			<Link
-				href='/developers/applications'
-				className='text-blue-500 hover:text-blue-400'>
-
-				<i className='fas fa-arrow-left' />돌아가기
+			<Link href='/developers/applications' className='text-blue-500 hover:text-blue-400'>
+				<i className='fas fa-arrow-left' />
+				돌아가기
 			</Link>
 			<h1 className='text-3xl font-bold'>서버 설정</h1>
-			<p className='text-gray-400'>한국 디스코드 리스트 API에 사용할 정보를 이곳에서 설정하실 수 있습니다.</p>
-			{
-				spec ? <>
-					<div className='lg:flex pt-6'>
+			<p className='text-gray-400'>
+				한국 디스코드 리스트 API에 사용할 정보를 이곳에서 설정하실 수 있습니다.
+			</p>
+			{spec ? (
+				<>
+					<div className='pt-6 lg:flex'>
 						<div className='lg:w-1/5'>
 							<ServerIcon id={server.id} />
 						</div>
-						<div className='lg:w-4/5 relative'>
+						<div className='relative lg:w-4/5'>
 							<div className='mt-4'>
-								{
-									!data ? '' : data.code === 200 ? 
-										<Message type='success'>
-											<h2 className='text-lg font-extrabold'>수정 성공!</h2>
-											<p>서버 정보를 저장했습니다.</p>
-										</Message> : <Message type='error'>
-											<h2 className='text-lg font-extrabold'>{data.message}</h2>
-											<ul className='list-disc list-inside'>
-												{
-													data.errors?.map((el, i)=> <li key={i}>{el}</li>)
-												}
-											</ul>
-										</Message>
-								}
+								{!data ? (
+									''
+								) : data.code === 200 ? (
+									<Message type='success'>
+										<h2 className='text-lg font-extrabold'>수정 성공!</h2>
+										<p>서버 정보를 저장했습니다.</p>
+									</Message>
+								) : (
+									<Message type='error'>
+										<h2 className='text-lg font-extrabold'>{data.message}</h2>
+										<ul className='list-inside list-disc'>
+											{data.errors?.map((el, i) => <li key={i}>{el}</li>)}
+										</ul>
+									</Message>
+								)}
 							</div>
-							<div className='grid text-left px-6'>
-								<h2 className='text-3xl font-bold mb-2 mt-3'>{server.name}</h2>
+							<div className='grid px-6 text-left'>
+								<h2 className='mb-2 mt-3 text-3xl font-bold'>{server.name}</h2>
 								<h3 className='text-lg font-semibold'>서버 토큰</h3>
-								<pre className='text-sm overflow-x-scroll w-full'>{showToken ? spec.token : '******************'}</pre>
-								<div className='pt-3 pb-6'>
-									<Button onClick={() => setShowToken(!showToken)}>{showToken ? '숨기기' : '보기'}</Button>
-									<Button onClick={setTokenCopied} className={tokenCopied ? 'bg-emerald-400 text-white' : null}>{tokenCopied ? '복사됨' : '복사'}</Button>
-									<Button onClick={()=> setModalOpen(true)}>재발급</Button>
-									<Modal isOpen={modalOpened} onClose={() => setModalOpen(false)} dark={theme === 'dark'} header='정말로 토큰을 재발급하시겠습니까?'>
+								<pre className='w-full overflow-x-scroll text-sm'>
+									{showToken ? spec.token : '******************'}
+								</pre>
+								<div className='pb-6 pt-3'>
+									<Button onClick={() => setShowToken(!showToken)}>
+										{showToken ? '숨기기' : '보기'}
+									</Button>
+									<Button
+										onClick={setTokenCopied}
+										className={tokenCopied ? 'bg-emerald-400 text-white' : null}
+									>
+										{tokenCopied ? '복사됨' : '복사'}
+									</Button>
+									<Button onClick={() => setModalOpen(true)}>재발급</Button>
+									<Modal
+										isOpen={modalOpened}
+										onClose={() => setModalOpen(false)}
+										dark={theme === 'dark'}
+										header='정말로 토큰을 재발급하시겠습니까?'
+									>
 										<p>기존에 사용중이시던 토큰은 더 이상 사용하실 수 없습니다</p>
-										<div className='text-right pt-6'>
-											<Button className='bg-gray-500 text-white hover:opacity-90' onClick={()=> setModalOpen(false)}>취소</Button>
-											<Button onClick={async ()=> {
-												const res = await resetToken()
-												if(res.data?.token) spec.token = res.data.token
-												setModalOpen(false)
-											}}>재발급</Button>
+										<div className='pt-6 text-right'>
+											<Button
+												className='bg-gray-500 text-white hover:opacity-90'
+												onClick={() => setModalOpen(false)}
+											>
+												취소
+											</Button>
+											<Button
+												onClick={async () => {
+													const res = await resetToken()
+													if (res.data?.token) spec.token = res.data.token
+													setModalOpen(false)
+												}}
+											>
+												재발급
+											</Button>
 										</div>
 									</Modal>
 								</div>
-								<Formik validationSchema={DeveloperServerSchema} initialValues={{
-									webhookURL: spec.webhookURL || '',
-									_csrf: csrfToken
-								}}
-								onSubmit={updateApplication}>
+								<Formik
+									validationSchema={DeveloperServerSchema}
+									initialValues={{
+										webhookURL: spec.webhookURL || '',
+										_csrf: csrfToken,
+									}}
+									onSubmit={updateApplication}
+								>
 									{({ errors, touched }) => (
 										<Form>
 											<div className='mb-2'>
-												<h3 className='font-bold mb-1'>
-                                                    웹훅 URL
-													{(!data || data.code !== 200) && spec.webhookStatus === WebhookStatus.Disabled && (
-														<Tooltip direction='left' text='웹훅 링크가 유효하지 않아 웹훅이 중지되었습니다.'>
-															<span className='text-red-500 text-base font-semibold pl-1' role='img' aria-label='warning'>⚠️</span>
-														</Tooltip>
-													)}
+												<h3 className='mb-1 font-bold'>
+													웹훅 URL
+													{(!data || data.code !== 200) &&
+														spec.webhookStatus === WebhookStatus.Disabled && (
+															<Tooltip
+																direction='left'
+																text='웹훅 링크가 유효하지 않아 웹훅이 중지되었습니다.'
+															>
+																<span
+																	className='pl-1 text-base font-semibold text-red-500'
+																	role='img'
+																	aria-label='warning'
+																>
+																	⚠️
+																</span>
+															</Tooltip>
+														)}
 												</h3>
-												<p className='text-gray-400 text-sm mb-1'>웹훅을 이용하여 한국 디스코드 리스트의 서버에 발생하는 이벤트를 받아볼 수 있습니다.<br/>
-                                                웹훅 링크가 유효하지 않을 경우 웹훅이 중지되며, 다시 저장할 경우 다시 활성화됩니다.<br/>
-                                                웹훅에 대한 자세한 내용은 <Link
+												<p className='mb-1 text-sm text-gray-400'>
+													웹훅을 이용하여 한국 디스코드 리스트의 서버에 발생하는 이벤트를 받아볼 수
+													있습니다.
+													<br />
+													웹훅 링크가 유효하지 않을 경우 웹훅이 중지되며, 다시 저장할 경우 다시
+													활성화됩니다.
+													<br />
+													웹훅에 대한 자세한 내용은{' '}
+													<Link
 														href={'/developers/docs/%EC%9B%B9%ED%9B%84%ED%81%AC'}
-														className='text-blue-500 hover:text-blue-400 font-semibold'>개발자 문서</Link>에서 확인하실 수 있습니다.
+														className='font-semibold text-blue-500 hover:text-blue-400'
+													>
+														개발자 문서
+													</Link>
+													에서 확인하실 수 있습니다.
 												</p>
 												<Input name='webhookURL' placeholder='https://webhook.koreanbots.dev' />
-												{touched.webhookURL && errors.webhookURL ? <div className='text-red-500 text-xs font-light mt-1'>{errors.webhookURL}</div> : null}
+												{touched.webhookURL && errors.webhookURL ? (
+													<div className='mt-1 text-xs font-light text-red-500'>
+														{errors.webhookURL}
+													</div>
+												) : null}
 											</div>
-											<Button type='submit'><i className='far fa-save'/> 저장</Button>
+											<Button type='submit'>
+												<i className='far fa-save' /> 저장
+											</Button>
 										</Form>
 									)}
 								</Formik>
 							</div>
 						</div>
 					</div>
-				</> : <div className='mt-5'>
+				</>
+			) : (
+				<div className='mt-5'>
 					<Message type='error'>
 						<h2 className='text-lg font-extrabold'>서버 정보를 불러올 수 없습니다.</h2>
 						<p>서버에서 봇이 추방되었거나, 봇이 오프라인이여서 서버 정보를 갱신할 수 없습니다.</p>
 					</Message>
 				</div>
-			}
+			)}
 		</DeveloperLayout>
 	)
-
 }
 
 interface ServerApplicationProps {
-  user: string
-  spec: BotSpec
+	user: string
+	spec: BotSpec
 	server: Server
 	csrfToken: string
 	theme: Theme
@@ -167,16 +227,21 @@ export const getServerSideProps = async (ctx: Context) => {
 	const user = (await get.Authorization(parsed?.token)) || ''
 	const server = await get.server.load(ctx.query.id)
 	return {
-		props: { user, spec: server?.state === 'unreachable' ? null : await get.serverSpec(ctx.query.id, user), server, csrfToken: getToken(ctx.req, ctx.res) }
+		props: {
+			user,
+			spec: server?.state === 'unreachable' ? null : await get.serverSpec(ctx.query.id, user),
+			server,
+			csrfToken: getToken(ctx.req, ctx.res),
+		},
 	}
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  id: string
+	id: string
 }
 
-export default ServerApplication
\ No newline at end of file
+export default ServerApplication
diff --git a/pages/developers/docs/[first]/[second].tsx b/pages/developers/docs/[first]/[second].tsx
index 082ec2e..bd66077 100644
--- a/pages/developers/docs/[first]/[second].tsx
+++ b/pages/developers/docs/[first]/[second].tsx
@@ -11,89 +11,104 @@ import NotFound from 'pages/404'
 import Message from '@components/Message'
 
 const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout'))
-const Markdown = dynamic(() => import ('@components/Markdown'))
+const Markdown = dynamic(() => import('@components/Markdown'))
 
 const docsDir = './api-docs/docs'
 const Docs: NextPage<DocsProps> = ({ docs }) => {
 	const router = useRouter()
-	const [ document, setDoc ] = useState<DocsData>(null)
+	const [document, setDoc] = useState<DocsData>(null)
 	useEffect(() => {
-		if(!router.query.first) return
-		let res = docs?.find(el => el.name === router.query.first)
-		if(router.query.second) res = res?.list?.find(el => el.name === router.query.second)
+		if (!router.query.first) return
+		let res = docs?.find((el) => el.name === router.query.first)
+		if (router.query.second) res = res?.list?.find((el) => el.name === router.query.second)
 		setDoc(res || { name: 'Not Found' })
 		setTimeout(highlightBlocks, 100)
 	}, [docs, router.query])
 
 	useEffect(() => highlightBlocks, [document])
-	if(document?.name === 'Not Found') return <NotFound />
-	return <DeveloperLayout enabled='docs' docs={docs} currentDoc={(router.query.second || router.query.first) as string}>
-		<div className='px-2'>
-			{
-				!document ? ''
-					: <Markdown text={document.text} options={{ openLinksInNewWindow: false }} components={{ message: Message, code }} allowedTag={['message']} />
-			}
-		</div>
-	</DeveloperLayout>
+	if (document?.name === 'Not Found') return <NotFound />
+	return (
+		<DeveloperLayout
+			enabled='docs'
+			docs={docs}
+			currentDoc={(router.query.second || router.query.first) as string}
+		>
+			<div className='px-2'>
+				{!document ? (
+					''
+				) : (
+					<Markdown
+						text={document.text}
+						options={{ openLinksInNewWindow: false }}
+						components={{ message: Message, code }}
+						allowedTag={['message']}
+					/>
+				)}
+			</div>
+		</DeveloperLayout>
+	)
 }
 
-export async function getStaticPaths () {
+export async function getStaticPaths() {
 	return {
 		paths: [],
-		fallback: true
+		fallback: true,
 	}
 }
 
-export async function getStaticProps () {
-	const docs = (await Promise.all((await readdir(docsDir)).map(async el => {
-		const isDir = (await lstat(join(docsDir, el))).isDirectory()
-		if(!isDir) {
-			return {
-				name: el.split('.').slice(0, -1).join('.'),
-				text: (await readFile(join(docsDir, el))).toString()
-			}
-		}
-		else {
-			return {
-				name: el,
-				list: await Promise.all((await readdir(join(docsDir, el))).map(async e => {
+export async function getStaticProps() {
+	const docs = (
+		await Promise.all(
+			(await readdir(docsDir)).map(async (el) => {
+				const isDir = (await lstat(join(docsDir, el))).isDirectory()
+				if (!isDir) {
 					return {
-						name: e.split('.').slice(0, -1).join('.'),
-						text: (await readFile(join(docsDir, el, e))).toString()
+						name: el.split('.').slice(0, -1).join('.'),
+						text: (await readFile(join(docsDir, el))).toString(),
 					}
-				}))
-			}
-		}
-	}))).sort((a, b) => {
-		if('list' in b && 'text' in a) return -1
+				} else {
+					return {
+						name: el,
+						list: await Promise.all(
+							(await readdir(join(docsDir, el))).map(async (e) => {
+								return {
+									name: e.split('.').slice(0, -1).join('.'),
+									text: (await readFile(join(docsDir, el, e))).toString(),
+								}
+							})
+						),
+					}
+				}
+			})
+		)
+	).sort((a, b) => {
+		if ('list' in b && 'text' in a) return -1
 		return a.name.localeCompare(b.name)
-	}) 
+	})
 
 	return {
-		props: { docs }
+		props: { docs },
 	}
 }
 
-function code({ children }:{ children: string }):JSX.Element {
+function code({ children }: { children: string }): JSX.Element {
 	const methods = {
 		get: 'text-emerald-400',
 		post: 'text-amber-400',
 		put: 'text-blue-500',
 		patch: 'text-amber-400',
-		delete: 'text-red-500'
+		delete: 'text-red-500',
 	}
-	return <code className={`${methods[String(children).toLowerCase()]}`}>
-		{children}
-	</code>
+	return <code className={`${methods[String(children).toLowerCase()]}`}>{children}</code>
 }
 function highlightBlocks() {
 	const nodes = window.document.querySelectorAll('pre code')
-	nodes.forEach(el => {
+	nodes.forEach((el) => {
 		window.hljs.highlightBlock(el)
 	})
 }
 interface DocsProps {
-  docs: DocsData[]
+	docs: DocsData[]
 }
 
-export default Docs
\ No newline at end of file
+export default Docs
diff --git a/pages/developers/docs/[first]/index.tsx b/pages/developers/docs/[first]/index.tsx
index 9acf1e0..2ae5895 100644
--- a/pages/developers/docs/[first]/index.tsx
+++ b/pages/developers/docs/[first]/index.tsx
@@ -1 +1 @@
-export { default, getStaticPaths, getStaticProps } from './[second]'
\ No newline at end of file
+export { default, getStaticPaths, getStaticProps } from './[second]'
diff --git a/pages/discord.tsx b/pages/discord.tsx
index b636ec3..061f600 100644
--- a/pages/discord.tsx
+++ b/pages/discord.tsx
@@ -4,8 +4,8 @@ import dynamic from 'next/dynamic'
 
 const Redirect = dynamic(() => import('@components/Redirect'))
 
-const Discord:NextPage = () => {
-	return <Redirect to={KoreanbotsDiscord}/>
+const Discord: NextPage = () => {
+	return <Redirect to={KoreanbotsDiscord} />
 }
 
-export default Discord
\ No newline at end of file
+export default Discord
diff --git a/pages/guidelines.tsx b/pages/guidelines.tsx
index 26f7389..8e6ce18 100644
--- a/pages/guidelines.tsx
+++ b/pages/guidelines.tsx
@@ -3,11 +3,9 @@ import dynamic from 'next/dynamic'
 
 import { SpecialEndPoints } from '@utils/Constants'
 
-
-const Docs = dynamic(()=> import('@components/Docs'))
+const Docs = dynamic(() => import('@components/Docs'))
 const Markdown = dynamic(() => import('@components/Markdown'))
 
-
 const Guidelines: NextPage<GuidelinesProps> = ({ content }) => {
 	return (
 		<Docs
@@ -28,10 +26,9 @@ export const getStaticProps: GetStaticProps<GuidelinesProps> = async () => {
 	const json = await res.json()
 	return {
 		props: {
-			content: Buffer.from(json.content, 'base64').toString('utf-8')
-		}
+			content: Buffer.from(json.content, 'base64').toString('utf-8'),
+		},
 	}
 }
 
 export default Guidelines
-
diff --git a/pages/index.tsx b/pages/index.tsx
index 5d24fbf..f14e34e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -4,7 +4,6 @@ import dynamic from 'next/dynamic'
 import { Bot, List, Server } from '@types'
 import * as Query from '@utils/Query'
 
-
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const Container = dynamic(() => import('@components/Container'))
@@ -19,39 +18,42 @@ const Index: NextPage<IndexProps> = ({ bots, servers }) => {
 			<Hero />
 			<Container className='pb-10'>
 				<Advertisement />
-				<h1 className='text-3xl font-bold mt-10 mb-2'>
+				<h1 className='mb-2 mt-10 text-3xl font-bold'>
 					<i className='fas fa-robot mr-5 text-koreanbots-blue' /> 봇 리스트
 				</h1>
 				<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
 				<ResponsiveGrid>
-					{
-						bots.data.slice(0, 8).map(bot=> <BotCard key={bot.id} bot={bot} />)
-					}
+					{bots.data.slice(0, 8).map((bot) => (
+						<BotCard key={bot.id} bot={bot} />
+					))}
 				</ResponsiveGrid>
-				<LongButton href='/bots' center>봇 리스트 바로가기</LongButton>
+				<LongButton href='/bots' center>
+					봇 리스트 바로가기
+				</LongButton>
 				<Advertisement />
-				<h1 className='text-3xl font-bold mt-10 mb-2'>
+				<h1 className='mb-2 mt-10 text-3xl font-bold'>
 					<i className='fas fa-users mr-5 text-koreanbots-blue' /> 서버 리스트
 				</h1>
 				<p className='text-base'>하트를 많이 받은 서버들의 순위입니다!</p>
 				<ResponsiveGrid>
-					{
-						servers.data.slice(0, 8).map(bot=> <ServerCard key={bot.id} type='list' server={bot} />)
-					}
+					{servers.data.slice(0, 8).map((bot) => (
+						<ServerCard key={bot.id} type='list' server={bot} />
+					))}
 				</ResponsiveGrid>
-				<LongButton href='/servers' center>서버 리스트 바로가기</LongButton>
+				<LongButton href='/servers' center>
+					서버 리스트 바로가기
+				</LongButton>
 				<Advertisement />
 			</Container>
 		</>
 	)
 }
 
-export const getServerSideProps = async() => {
+export const getServerSideProps = async () => {
 	const bots = await Query.get.list.votes.load(1)
 	const servers = await Query.get.serverList.votes.load(1)
 
-	return { props: { bots, servers }}
-
+	return { props: { bots, servers } }
 }
 
 interface IndexProps {
diff --git a/pages/iu.tsx b/pages/iu.tsx
index 0ac0cb4..477b63a 100644
--- a/pages/iu.tsx
+++ b/pages/iu.tsx
@@ -1,12 +1,12 @@
 import { GetServerSideProps } from 'next'
 import NotFound from './404'
 
-export const getServerSideProps: GetServerSideProps = async ctx => {
+export const getServerSideProps: GetServerSideProps = async (ctx) => {
 	ctx.res.statusCode = 516
 	ctx.res.setHeader('IU', '<3')
 	return {
-		props: {}
+		props: {},
 	}
 }
 
-export default NotFound
\ No newline at end of file
+export default NotFound
diff --git a/pages/license.tsx b/pages/license.tsx
index 23a8577..8e0b782 100644
--- a/pages/license.tsx
+++ b/pages/license.tsx
@@ -9,63 +9,85 @@ const Docs = dynamic(() => import('@components/Docs'))
 const Segment = dynamic(() => import('@components/Segment'))
 const Markdown = dynamic(() => import('@components/Markdown'))
 
-
 const Opensource: NextPage<OpensourceProps> = ({ packageJson, mainLicense, license }) => {
-	return <Docs title='오픈소스' header={<h1 className='font-black text-4xl'>
-		<span className='text-koreanbots-blue'>한디리</span>
-		<span><i className='text-red-500 fas fa-heart ml-2 mr-3' /> </span>
-		<span>오픈소스</span>
-	</h1>} subheader='한국 디스코드 리스트는 오픈소스 프로젝트이며, 다양한 오픈소스 프로젝트가 사용되었습니다.'>
-		<h1 className='text-3xl font-bold'>소스코드</h1>
-		<a href='https://github.com/koreanbots/koreanbots'><i className='fab fa-github'/>Github</a>
-		<h2 className='text-2xl font-semibold my-2'>라이선스</h2>
-		<Segment>
-			<>
-				<Markdown text={`
+	return (
+		<Docs
+			title='오픈소스'
+			header={
+				<h1 className='text-4xl font-black'>
+					<span className='text-koreanbots-blue'>한디리</span>
+					<span>
+						<i className='fas fa-heart ml-2 mr-3 text-red-500' />{' '}
+					</span>
+					<span>오픈소스</span>
+				</h1>
+			}
+			subheader='한국 디스코드 리스트는 오픈소스 프로젝트이며, 다양한 오픈소스 프로젝트가 사용되었습니다.'
+		>
+			<h1 className='text-3xl font-bold'>소스코드</h1>
+			<a href='https://github.com/koreanbots/koreanbots'>
+				<i className='fab fa-github' />
+				Github
+			</a>
+			<h2 className='my-2 text-2xl font-semibold'>라이선스</h2>
+			<Segment>
+				<>
+					<Markdown
+						text={`
 [원문](https://github.com/koreanbots/koreanbots/blob/master/LICENSE)
 
-${mainLicense}`} />
-			</>
-		</Segment>
+${mainLicense}`}
+					/>
+				</>
+			</Segment>
 
-		<h1 className='text-3xl font-bold mt-6'>타 소프트웨어 라이선스</h1>
-		<div>
-      다음 소프트웨어들이 사용되었습니다:<br/>
-			{
-				Object.keys(packageJson.dependencies).concat(Object.keys(packageJson.devDependencies)).map(el=> <span key={el}><a className='text-blue-500 hover:text-blue-400' href={`https://npmjs.org/package/${el}`}>{el}</a> </span>)
-			}
-			{
-				license.map((el, i)=> 
+			<h1 className='mt-6 text-3xl font-bold'>타 소프트웨어 라이선스</h1>
+			<div>
+				다음 소프트웨어들이 사용되었습니다:
+				<br />
+				{Object.keys(packageJson.dependencies)
+					.concat(Object.keys(packageJson.devDependencies))
+					.map((el) => (
+						<span key={el}>
+							<a
+								className='text-blue-500 hover:text-blue-400'
+								href={`https://npmjs.org/package/${el}`}
+							>
+								{el}
+							</a>{' '}
+						</span>
+					))}
+				{license.map((el, i) => (
 					<div key={i}>
-						<h2 className='text-xl font-semibold my-3'>{el.dependencies.join(', ')}</h2>
+						<h2 className='my-3 text-xl font-semibold'>{el.dependencies.join(', ')}</h2>
 						<Segment>
 							<Markdown text={el.content} />
 						</Segment>
-					</div>)
-			}
-		</div>
-	</Docs>
+					</div>
+				))}
+			</div>
+		</Docs>
+	)
 }
 
 interface OpensourceProps {
-   mainLicense: string
-   packageJson: {
-      dependencies: Record<string, string>
-      devDependencies: Record<string, string>
-   }
-   license: ILicense[]
+	mainLicense: string
+	packageJson: {
+		dependencies: Record<string, string>
+		devDependencies: Record<string, string>
+	}
+	license: ILicense[]
 }
 
-export async function getStaticProps () {
-	const license = await generateLicenseFile.getProjectLicenses('./').then(license => license)
+export async function getStaticProps() {
+	const license = await generateLicenseFile.getProjectLicenses('./').then((license) => license)
 
 	return {
 		props: {
 			packageJson: require('package.json'),
 			mainLicense: readFileSync('./LICENSE').toString(),
-			license
-		}
+			license,
+		},
 	}
-
 }
-export default Opensource
\ No newline at end of file
+export default Opensource
diff --git a/pages/panel.tsx b/pages/panel.tsx
index a52454f..84bad31 100644
--- a/pages/panel.tsx
+++ b/pages/panel.tsx
@@ -18,71 +18,98 @@ const ServerCard = dynamic(() => import('@components/ServerCard'))
 const SubmittedBotCard = dynamic(() => import('@components/SubmittedBotCard'))
 const Login = dynamic(() => import('@components/Login'))
 
-const Panel:NextPage<PanelProps> = ({ logged, user, submits, csrfToken }) => {
+const Panel: NextPage<PanelProps> = ({ logged, user, submits, csrfToken }) => {
 	const router = useRouter()
-	const [ submitLimit, setSubmitLimit ] = useState(8)
-	if(!logged) return <Login>
-		<NextSeo title='관리 패널' />
-	</Login>
-	return <Container paddingTop className='pt-5 pb-10'>
-		<NextSeo title='관리 패널' />
-		<h1 className='text-4xl font-bold'>관리 패널</h1>
-		<h2 className='text-2xl font-bold mt-4'>깃허브 계정 연동</h2>
-		<p className='text-gray-400 mb-2'>연동한 깃허브 계정은 프로필에 표시됩니다.</p>
-		<Button className={`${user.github ? 'bg-red-600 text-white' : 'bg-gray-200 dark:bg-github-black'} hover:opacity-80`} onClick={user.github ? async () => {
-			await Fetch('/api/auth/github', {
-				method: 'DELETE',
-				body: JSON.stringify({
-					_csrf: csrfToken
-				})
-			}, true)
-			router.reload()
-		} : null} href={user.github ? null : '/api/auth/github'}>
-			<i className='fab fa-github' /> 깃허브 계정 연동 {user.github ? '취소' : ''}
-		</Button>
-		<div className='mt-6'>
-			<h2 className='text-3xl font-bold'>나의 봇</h2>
-			{
-				user.bots.length === 0 ? <h2 className='text-xl'>소유한 봇이 없습니다.</h2> :
+	const [submitLimit, setSubmitLimit] = useState(8)
+	if (!logged)
+		return (
+			<Login>
+				<NextSeo title='관리 패널' />
+			</Login>
+		)
+	return (
+		<Container paddingTop className='pb-10 pt-5'>
+			<NextSeo title='관리 패널' />
+			<h1 className='text-4xl font-bold'>관리 패널</h1>
+			<h2 className='mt-4 text-2xl font-bold'>깃허브 계정 연동</h2>
+			<p className='mb-2 text-gray-400'>연동한 깃허브 계정은 프로필에 표시됩니다.</p>
+			<Button
+				className={`${
+					user.github ? 'bg-red-600 text-white' : 'bg-gray-200 dark:bg-github-black'
+				} hover:opacity-80`}
+				onClick={
+					user.github
+						? async () => {
+								await Fetch(
+									'/api/auth/github',
+									{
+										method: 'DELETE',
+										body: JSON.stringify({
+											_csrf: csrfToken,
+										}),
+									},
+									true
+								)
+								router.reload()
+						  }
+						: null
+				}
+				href={user.github ? null : '/api/auth/github'}
+			>
+				<i className='fab fa-github' /> 깃허브 계정 연동 {user.github ? '취소' : ''}
+			</Button>
+			<div className='mt-6'>
+				<h2 className='text-3xl font-bold'>나의 봇</h2>
+				{user.bots.length === 0 ? (
+					<h2 className='text-xl'>소유한 봇이 없습니다.</h2>
+				) : (
 					<ResponsiveGrid>
-						{
-							(user.bots as Bot[]).map(bot=> <BotCard key={bot.id} bot={bot} manage />)
-						}
+						{(user.bots as Bot[]).map((bot) => (
+							<BotCard key={bot.id} bot={bot} manage />
+						))}
 					</ResponsiveGrid>
-			}
-		</div>
-		<div className='mt-6'>
-			<h2 className='text-3xl font-bold'>나의 서버</h2>
-			{
-				user.servers.length === 0 ? <h2 className='text-xl'>소유한 서버가 없습니다.</h2> :
+				)}
+			</div>
+			<div className='mt-6'>
+				<h2 className='text-3xl font-bold'>나의 서버</h2>
+				{user.servers.length === 0 ? (
+					<h2 className='text-xl'>소유한 서버가 없습니다.</h2>
+				) : (
 					<ResponsiveGrid>
-						{
-							(user.servers as Server[]).map(server=> <ServerCard key={server.id} server={server} type='manage' />)
-						}
+						{(user.servers as Server[]).map((server) => (
+							<ServerCard key={server.id} server={server} type='manage' />
+						))}
 					</ResponsiveGrid>
-			}
-		</div>
-		<div className='mt-6'>
-			<h2 className='text-3xl font-bold'>봇 심사이력</h2>
-			{
-				submits.length === 0 ? <h2 className='text-xl'>심사이력이 없습니다.</h2> : 
+				)}
+			</div>
+			<div className='mt-6'>
+				<h2 className='text-3xl font-bold'>봇 심사이력</h2>
+				{submits.length === 0 ? (
+					<h2 className='text-xl'>심사이력이 없습니다.</h2>
+				) : (
 					<>
-						<p className='text-left text-gray-400 text-sm font-medium'>자세히 보려면 카드를 클릭하세요.</p>
-						<div className='grid gap-4 2xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 mt-12'>
-							{
-								submits.slice(0, submitLimit).map(el=> <SubmittedBotCard key={el.date} href={`/pendingBots/${el.id}/${el.date}`} submit={el} />)
-							}
+						<p className='text-left text-sm font-medium text-gray-400'>
+							자세히 보려면 카드를 클릭하세요.
+						</p>
+						<div className='mt-12 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4'>
+							{submits.slice(0, submitLimit).map((el) => (
+								<SubmittedBotCard
+									key={el.date}
+									href={`/pendingBots/${el.id}/${el.date}`}
+									submit={el}
+								/>
+							))}
 						</div>
-						{
-							submitLimit < submits.length && <div className='text-center pt-4'>
-								<Button onClick={() => setSubmitLimit(submitLimit+8)}>더보기</Button>
+						{submitLimit < submits.length && (
+							<div className='pt-4 text-center'>
+								<Button onClick={() => setSubmitLimit(submitLimit + 8)}>더보기</Button>
 							</div>
-						}
+						)}
 					</>
-			}
-			
-		</div>
-	</Container>
+				)}
+			</div>
+		</Container>
+	)
 }
 
 export const getServerSideProps = async (ctx: NextPageContext) => {
@@ -90,14 +117,21 @@ export const getServerSideProps = async (ctx: NextPageContext) => {
 	const user = (await get.Authorization(parsed?.token)) || ''
 	const submits = await get.botSubmits.load(user)
 
-	return { props: { logged: !!user, user:  await get.user.load(user), submits, csrfToken: getToken(ctx.req, ctx.res) } }
+	return {
+		props: {
+			logged: !!user,
+			user: await get.user.load(user),
+			submits,
+			csrfToken: getToken(ctx.req, ctx.res),
+		},
+	}
 }
 
 interface PanelProps {
-  logged: boolean
-  user: User
-  submits: SubmittedBot[]
+	logged: boolean
+	user: User
+	submits: SubmittedBot[]
 	csrfToken: string
 }
 
-export default Panel
\ No newline at end of file
+export default Panel
diff --git a/pages/pendingBots/[id]/[date].tsx b/pages/pendingBots/[id]/[date].tsx
index 76eb9da..e6e888d 100644
--- a/pages/pendingBots/[id]/[date].tsx
+++ b/pages/pendingBots/[id]/[date].tsx
@@ -20,61 +20,72 @@ const LongButton = dynamic(() => import('@components/LongButton'))
 const Tag = dynamic(() => import('@components/Tag'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const Segment = dynamic(() => import('@components/Segment'))
-const Markdown = dynamic(() => import ('@components/Markdown'))
+const Markdown = dynamic(() => import('@components/Markdown'))
 const Owner = dynamic(() => import('@components/Owner'))
 const Message = dynamic(() => import('@components/Message'))
 
 const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
-	const [ isCopied, setCopied ] = useClipboard(data?.desc, {
-		successDuration: 1000
+	const [isCopied, setCopied] = useClipboard(data?.desc, {
+		successDuration: 1000,
 	})
-	if(!data) return <NotFound />
+	if (!data) return <NotFound />
 	return (
 		<Container paddingTop className='py-10'>
 			<NextSeo title='심사이력' />
-			<div className='lg:flex w-full'>
-				<div className='w-full lg:w-3/4 lg:pr-5 py-8 text-center lg:text-left'>
-					{
-						data.state === 0 ? <Message type='info'>
+			<div className='w-full lg:flex'>
+				<div className='w-full py-8 text-center lg:w-3/4 lg:pr-5 lg:text-left'>
+					{data.state === 0 ? (
+						<Message type='info'>
 							<h2 className='text-lg font-extrabold'>승인 대기중</h2>
 							<p>해당 봇은 아직 승인 대기 상태입니다.</p>
-                            
-						</Message> 
-							: data.state === 1 ? <Message type='success'>
-								<h2 className='text-lg font-extrabold'>승인됨</h2>
-								<p>신청하신 해당 봇이 승인되었습니다!</p>
-								<p><Link href={`/bots/${data.id}`} className='text-blue-500 hover:text-blue-400'>봇 페이지</Link></p>
-							</Message> : <Message type='error'>
-								<h2 className='text-lg font-extrabold'>거부됨</h2>
-								<p>아쉽게도 신청하신 해당 봇은 거부되었습니다.</p>
-								{
-									data.reason && <>
-										<p>사유: <strong>{BotSubmissionDenyReasonPresetsName[data.reason] || data.reason}</strong></p>
-										<div className='pt-2'>
-											{DenyPresetsArticle[data.reason]}
-										</div>
-									</>
-								}
-								<div className='pt-2'>
-									{data.strikes < 3 ? (
-										<p>
-                                            앞으로 {3 - data.strikes}번의 심사 기회가 남았습니다. 심사 기회를 모두 소진하시면 동일한 봇으로의 심사가 제한됩니다. <br/>
-                                            '프라이빗 봇', '봇 오프라인', '공식 디스코드 서버 미참여'로 거부된 경우 심사 기회가 차감되지 않습니다.
-										</p>
-									) : (
-										<p>더 이상 해당 봇으로 심사를 신청하실 수 없습니다.</p>
-									)}
-								</div>
-							</Message>
-					}
-					<p className='dark:text-gray-300 text-gray-800 text-base mt-3'>{data.intro}</p>
+						</Message>
+					) : data.state === 1 ? (
+						<Message type='success'>
+							<h2 className='text-lg font-extrabold'>승인됨</h2>
+							<p>신청하신 해당 봇이 승인되었습니다!</p>
+							<p>
+								<Link href={`/bots/${data.id}`} className='text-blue-500 hover:text-blue-400'>
+									봇 페이지
+								</Link>
+							</p>
+						</Message>
+					) : (
+						<Message type='error'>
+							<h2 className='text-lg font-extrabold'>거부됨</h2>
+							<p>아쉽게도 신청하신 해당 봇은 거부되었습니다.</p>
+							{data.reason && (
+								<>
+									<p>
+										사유:{' '}
+										<strong>
+											{BotSubmissionDenyReasonPresetsName[data.reason] || data.reason}
+										</strong>
+									</p>
+									<div className='pt-2'>{DenyPresetsArticle[data.reason]}</div>
+								</>
+							)}
+							<div className='pt-2'>
+								{data.strikes < 3 ? (
+									<p>
+										앞으로 {3 - data.strikes}번의 심사 기회가 남았습니다. 심사 기회를 모두
+										소진하시면 동일한 봇으로의 심사가 제한됩니다. <br />
+										'프라이빗 봇', '봇 오프라인', '공식 디스코드 서버 미참여'로 거부된 경우 심사
+										기회가 차감되지 않습니다.
+									</p>
+								) : (
+									<p>더 이상 해당 봇으로 심사를 신청하실 수 없습니다.</p>
+								)}
+							</div>
+						</Message>
+					)}
+					<p className='mt-3 text-base text-gray-800 dark:text-gray-300'>{data.intro}</p>
 				</div>
 				<div className='w-full lg:w-1/4 lg:pt-8'>
 					<LongButton
 						newTab
 						href={
 							data.url ??
-                                `https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
+							`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
 						}
 					>
 						<h4 className='whitespace-nowrap'>
@@ -83,25 +94,29 @@ const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
 					</LongButton>
 					<LongButton onClick={setCopied}>
 						<h4>
-							{ isCopied ? <><i className='fas fa-check text-emerald-400' /> 복사됨</> : <><i className='far fa-copy'/> 설명 마크다운 복사하기</>}
+							{isCopied ? (
+								<>
+									<i className='fas fa-check text-emerald-400' /> 복사됨
+								</>
+							) : (
+								<>
+									<i className='far fa-copy' /> 설명 마크다운 복사하기
+								</>
+							)}
 						</h4>
 					</LongButton>
 				</div>
-                
-                
 			</div>
 			<Divider className='px-5' />
 			<div className='lg:flex lg:flex-row-reverse'>
 				<div className='mb-1 w-full lg:w-1/4'>
 					<h2 className='3xl mb-2 font-bold'>정보</h2>
-					<div className='grid gap-4 grid-cols-1 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white rounded-sm'>
+					<div className='grid grid-cols-1 gap-4 rounded-sm bg-little-white px-4 py-4 text-black dark:bg-discord-black dark:text-gray-400'>
 						<div className='flex'>
 							<div className='w-2/5'>
 								<i className='fas fa-fingerprint' /> ID
 							</div>
-							<div className='text-black dark:text-gray-400 truncate'>
-								{data.id}
-							</div>
+							<div className='truncate text-black dark:text-gray-400'>{data.id}</div>
 						</div>
 						<div className='flex'>
 							<div className='w-2/5'>
@@ -122,12 +137,12 @@ const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
 					</div>
 					<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
 					<div className='flex flex-wrap'>
-						{data.category.map(el => (
+						{data.category.map((el) => (
 							<Tag key={el} text={el} href={`/bots/categories/${el}`} />
 						))}
 					</div>
 					<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
-					{(data.owners as User[]).map(el => (
+					{(data.owners as User[]).map((el) => (
 						<Owner
 							key={el.id}
 							id={el.id}
@@ -145,7 +160,7 @@ const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
 								href={`https://discord.gg/${data.discord}`}
 							>
 								<i className='fab fa-discord' />
-                                    디스코드 서버
+								디스코드 서버
 							</a>
 						)}
 						{data.web && (
@@ -156,7 +171,7 @@ const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
 								href={data.web}
 							>
 								<i className='fas fa-globe' />
-                                    웹사이트
+								웹사이트
 							</a>
 						)}
 						{data.git && (
@@ -173,10 +188,10 @@ const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
 					</div>
 					<Advertisement size='tall' />
 				</div>
-				<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
+				<div className='markdown-body w-full pt-10 lg:w-3/4 lg:pr-5'>
 					<Advertisement />
 					<Segment className='my-4'>
-						<Markdown text={data.desc}/>
+						<Markdown text={data.desc} />
 					</Segment>
 					<Advertisement />
 				</div>
@@ -189,52 +204,94 @@ export const getServerSideProps = async (ctx: Context) => {
 	const data = await get.botSubmit.load(JSON.stringify(ctx.query))
 	return {
 		props: {
-			data: data ? {
-				...data,
-				strikes: await get.botSubmitStrikes(data.id)
-			} : null
-		}
+			data: data
+				? {
+						...data,
+						strikes: await get.botSubmitStrikes(data.id),
+				  }
+				: null,
+		},
 	}
 }
 
 const DenyPresetsArticle = {
-	MISSING_VERIFY: <>
-		<p><strong>개발자 확인 불가</strong>로 거부되셨다면 본인이 봇의 소유자라는 것을 증명할 수 없다는 뜻입니다.</p>
-		<p>본인이 봇 소유자임을 증명하려면, 개발자의 태그(username#0000 형식)가 반드시 다음 명령어중에 포함되어야합니다.
+	MISSING_VERIFY: (
+		<>
+			<p>
+				<strong>개발자 확인 불가</strong>로 거부되셨다면 본인이 봇의 소유자라는 것을 증명할 수
+				없다는 뜻입니다.
+			</p>
+			<p>
+				본인이 봇 소유자임을 증명하려면, 개발자의 태그(username#0000 형식)가 반드시 다음 명령어중에
+				포함되어야합니다.
+				<ul className='list-inside list-disc'>
+					<li>도움 명령어: 도움, 도움말, 명령어, help, commands</li>
+					<li>[접두사]hellothisisverification 응답: 유저#태그(아이디)</li>
+				</ul>
+			</p>
+		</>
+	),
+	OFFLINE: (
+		<>
+			<p>
+				<strong>봇 오프라인</strong>으로 거부되셨다면 심사 당시에 봇이 오프라인으로 명령어가
+				응답하지 않았다는 뜻입니다.
+			</p>
+			<p>
+				봇이 24시간 호스팅 되지 않는다면, 아쉽게도 저희가 심사 시간을 맞춰드릴 수 없기에 심사 시간과
+				봇의 온라인 시간이 맞지 않는다면 심사를 진행할 수 없습니다.
+			</p>
+		</>
+	),
+	INVALID_CATEGORY: (
+		<p>
+			한 개 이상의 올바르지 않은 카테고리가 포함되어 있습니다. 반드시 <strong>봇에 해당되는</strong>{' '}
+			카테고리만 선택해주세요. <br />
+			카테고리에 대한 자세한 설명은{' '}
+			<a
+				className='text-blue-500 hover:text-blue-400'
+				href='https://contents.koreanbots.dev/categories'
+			>
+				여기
+			</a>
+			에서 확인하실 수 있습니다.
+		</p>
+	),
+	PRIVATE: (
+		<p>
+			봇을 초대할 수 없어, 심사를 진행할 수 없습니다. 다음 항목을 확인해주세요.
 			<ul className='list-inside list-disc'>
-				<li>도움 명령어: 도움, 도움말, 명령어, help, commands</li>
-				<li>[접두사]hellothisisverification 응답: 유저#태그(아이디)</li>
+				<li>봇이 공개 봇인가요?</li>
+				<li>봇이 아직 인증을 받지 못하였는데 100서버에 도달하여 초대가 불가한가요?</li>
+				<li>"REQUIRES OAUTH2 CODE GRANT" 옵션을 사용하고 있나요?</li>위 항목들을 해결하신 뒤에 다시
+				신청해주세요.
 			</ul>
 		</p>
-	</>,
-	OFFLINE: <>
-		<p><strong>봇 오프라인</strong>으로 거부되셨다면 심사 당시에 봇이 오프라인으로 명령어가 응답하지 않았다는 뜻입니다.</p>
-		<p>봇이 24시간 호스팅 되지 않는다면, 아쉽게도 저희가 심사 시간을 맞춰드릴 수 없기에 심사 시간과 봇의 온라인 시간이 맞지 않는다면 심사를 진행할 수 없습니다.</p>
-	</>,
-	INVALID_CATEGORY:	<p>한 개 이상의 올바르지 않은 카테고리가 포함되어 있습니다. 반드시 <strong>봇에 해당되는</strong> 카테고리만 선택해주세요. <br/>카테고리에 대한 자세한 설명은 <a className='text-blue-500 hover:text-blue-400' href='https://contents.koreanbots.dev/categories'>여기</a>에서 확인하실 수 있습니다.</p>,
-	PRIVATE: <p>봇을 초대할 수 없어, 심사를 진행할 수 없습니다. 다음 항목을 확인해주세요.
-		<ul className='list-inside list-disc'>
-			<li>봇이 공개 봇인가요?</li>
-			<li>봇이 아직 인증을 받지 못하였는데 100서버에 도달하여 초대가 불가한가요?</li>
-			<li>"REQUIRES OAUTH2 CODE GRANT" 옵션을 사용하고 있나요?</li>
-			위 항목들을 해결하신 뒤에 다시 신청해주세요.
-		</ul>
-	</p>,
-	LICENSE_VIOLATION: <p>한 건 이상의 오픈소스 라이선스 위반사항이 있습니다. 사용하신 오픈소스를 라이선스에 맞추어, 사이트 내 봇 설명과 봇 명령어 안에 기재해주세요.</p>,
-	ABSENT_AT_DISCORD: <p>반드시 <a href='/discord'>공식 디스코드</a>에 참가해주세요.</p>
+	),
+	LICENSE_VIOLATION: (
+		<p>
+			한 건 이상의 오픈소스 라이선스 위반사항이 있습니다. 사용하신 오픈소스를 라이선스에 맞추어,
+			사이트 내 봇 설명과 봇 명령어 안에 기재해주세요.
+		</p>
+	),
+	ABSENT_AT_DISCORD: (
+		<p>
+			반드시 <a href='/discord'>공식 디스코드</a>에 참가해주세요.
+		</p>
+	),
 }
 
 interface PendingBotProps {
-  data: SubmittedBot & {strikes: number | null}
+	data: SubmittedBot & { strikes: number | null }
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  id: string
-  date: string
+	id: string
+	date: string
 }
 
-export default PendingBot
\ No newline at end of file
+export default PendingBot
diff --git a/pages/privacy.tsx b/pages/privacy.tsx
index a54af9b..4228ad8 100644
--- a/pages/privacy.tsx
+++ b/pages/privacy.tsx
@@ -4,7 +4,7 @@ import fetch from 'node-fetch'
 
 import { SpecialEndPoints } from '@utils/Constants'
 
-const Docs = dynamic(()=> import('@components/Docs'))
+const Docs = dynamic(() => import('@components/Docs'))
 const Markdown = dynamic(() => import('@components/Markdown'))
 
 const Privacy: NextPage<PrivacyProps> = ({ content }) => {
@@ -16,12 +16,14 @@ const Privacy: NextPage<PrivacyProps> = ({ content }) => {
 }
 
 export const getStaticProps: GetStaticProps<PrivacyProps> = async () => {
-	const res = await fetch(SpecialEndPoints.Github.Content('koreanbots', 'terms', 'privacy-policy.md'))
+	const res = await fetch(
+		SpecialEndPoints.Github.Content('koreanbots', 'terms', 'privacy-policy.md')
+	)
 	const json = await res.json()
 	return {
 		props: {
-			content: Buffer.from(json.content, 'base64').toString('utf-8')
-		}
+			content: Buffer.from(json.content, 'base64').toString('utf-8'),
+		},
 	}
 }
 
@@ -29,4 +31,4 @@ interface PrivacyProps {
 	content: string
 }
 
-export default Privacy
\ No newline at end of file
+export default Privacy
diff --git a/pages/profile.tsx b/pages/profile.tsx
index 96d2f30..00e371e 100644
--- a/pages/profile.tsx
+++ b/pages/profile.tsx
@@ -3,8 +3,8 @@ import dynamic from 'next/dynamic'
 
 const Redirect = dynamic(() => import('@components/Redirect'))
 
-const Discord:NextPage = () => {
-	return <Redirect to='/panel'/>
+const Discord: NextPage = () => {
+	return <Redirect to='/panel' />
 }
 
-export default Discord
\ No newline at end of file
+export default Discord
diff --git a/pages/search.tsx b/pages/search.tsx
index c87a466..7f1bbd4 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -8,7 +8,6 @@ import { get } from '@utils/Query'
 import { SearchQuerySchema } from '@utils/Yup'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 
-
 const Hero = dynamic(() => import('@components/Hero'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const BotCard = dynamic(() => import('@components/BotCard'))
@@ -18,84 +17,121 @@ const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const LongButton = dynamic(() => import('@components/LongButton'))
 const Redirect = dynamic(() => import('@components/Redirect'))
 
-const SearchComponent: FC<{data: List<Bot|Server>, query: URLQuery, type: 'bot' | 'server' }> = ({ data, query, type }) => {
-	return <div className='py-20'>
-		<h1 className='text-4xl font-bold'>{type === 'bot' ? '봇' : '서버'}</h1>
-		{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
-			<>
-				<ResponsiveGrid>
-					{
-						data.data.map(el => ( type === 'bot' ? <BotCard key={el.id} bot={el as Bot} /> : <ServerCard key={el.id} type='list' server={el as Server} /> ))
-					}
-				</ResponsiveGrid>
-				{
-					data.totalPage !== 1 && <LongButton center href={type === 'bot' ? KoreanbotsEndPoints.URL.searchBot(query.q) : KoreanbotsEndPoints.URL.searchServer(query.q)}>
-						더보기
-					</LongButton>
-				}
-			</>
-		}
-	</div>
+const SearchComponent: FC<{
+	data: List<Bot | Server>
+	query: URLQuery
+	type: 'bot' | 'server'
+}> = ({ data, query, type }) => {
+	return (
+		<div className='py-20'>
+			<h1 className='text-4xl font-bold'>{type === 'bot' ? '봇' : '서버'}</h1>
+			{!data || data.data.length === 0 ? (
+				<h1 className='py-20 text-center text-3xl font-bold'>검색 결과가 없습니다.</h1>
+			) : (
+				<>
+					<ResponsiveGrid>
+						{data.data.map((el) =>
+							type === 'bot' ? (
+								<BotCard key={el.id} bot={el as Bot} />
+							) : (
+								<ServerCard key={el.id} type='list' server={el as Server} />
+							)
+						)}
+					</ResponsiveGrid>
+					{data.totalPage !== 1 && (
+						<LongButton
+							center
+							href={
+								type === 'bot'
+									? KoreanbotsEndPoints.URL.searchBot(query.q)
+									: KoreanbotsEndPoints.URL.searchServer(query.q)
+							}
+						>
+							더보기
+						</LongButton>
+					)}
+				</>
+			)}
+		</div>
+	)
 }
-const Search:NextPage<SearchProps> = ({ botData, serverData, priority, query }) => {
-	if(!query?.q) return <Redirect text={false} to='/' />
-	const list: ('bot'|'server')[] = [ 'bot', 'server' ]
-	return <>
-		<Hero type={priority ? priority === 'bot' ? 'bots' : 'servers' : 'all'} header={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
-		<Container>
-			<section id='list'>
-				<Advertisement />
-				{
-					(priority === 'server' ? list.reverse() : list).map(el => <SearchComponent key={el} data={el === 'bot' ? botData : serverData} query={query} type={el} />)
-				}	
-				<Advertisement />
-			</section>
-		</Container>
-	</>
+const Search: NextPage<SearchProps> = ({ botData, serverData, priority, query }) => {
+	if (!query?.q) return <Redirect text={false} to='/' />
+	const list: ('bot' | 'server')[] = ['bot', 'server']
+	return (
+		<>
+			<Hero
+				type={priority ? (priority === 'bot' ? 'bots' : 'servers') : 'all'}
+				header={`"${query.q}" 검색 결과`}
+				description={`'${query.q}' 에 대한 검색 결과입니다.`}
+			/>
+			<Container>
+				<section id='list'>
+					<Advertisement />
+					{(priority === 'server' ? list.reverse() : list).map((el) => (
+						<SearchComponent
+							key={el}
+							data={el === 'bot' ? botData : serverData}
+							query={query}
+							type={el}
+						/>
+					))}
+					<Advertisement />
+				</section>
+			</Container>
+		</>
+	)
 }
 
-export const getServerSideProps = async(ctx: Context) => {
-	if(ctx.query.query && !ctx.query.q) ctx.query.q = ctx.query.query
-	if(!ctx.query?.q) {
+export const getServerSideProps = async (ctx: Context) => {
+	if (ctx.query.query && !ctx.query.q) ctx.query.q = ctx.query.query
+	if (!ctx.query?.q) {
 		return {
 			redirect: {
 				destination: '/',
-				permanent: true
+				permanent: true,
 			},
-			props: {}
+			props: {},
 		}
 	}
-	if(!ctx.query.page) ctx.query.page = '1'
-	const validate = await SearchQuerySchema.validate(ctx.query).then(el => el).catch(() => null)
-	if(!validate || isNaN(Number(ctx.query.page))) return { props: { query: ctx.query } }
+	if (!ctx.query.page) ctx.query.page = '1'
+	const validate = await SearchQuerySchema.validate(ctx.query)
+		.then((el) => el)
+		.catch(() => null)
+	if (!validate || isNaN(Number(ctx.query.page))) return { props: { query: ctx.query } }
 	else {
 		return {
 			props: {
-				botData: await get.list.search.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page })).then(el => el).catch(() => null),
-				serverData: await get.serverList.search.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page })).then(el => el).catch(() => null),
+				botData: await get.list.search
+					.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page }))
+					.then((el) => el)
+					.catch(() => null),
+				serverData: await get.serverList.search
+					.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page }))
+					.then((el) => el)
+					.catch(() => null),
 				query: ctx.query,
-				priority: validate.priority || null
-			}
+				priority: validate.priority || null,
+			},
 		}
 	}
 }
 
-
 interface SearchProps {
-  botData?: List<Bot>
+	botData?: List<Bot>
 	serverData?: List<Server>
 	priority?: 'bot' | 'server'
-  query: URLQuery
+	query: URLQuery
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery  
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  q?: string
+	q?: string
 	query?: string
-  page?: string
+	page?: string
 }
 
-export default Search
\ No newline at end of file
+export default Search
diff --git a/pages/security.tsx b/pages/security.tsx
index c228b47..6c367b7 100644
--- a/pages/security.tsx
+++ b/pages/security.tsx
@@ -12,70 +12,91 @@ const Button = dynamic(() => import('@components/Button'))
 const BODY = '중요도:\n설명:\n\n영향을 줄 수 있는 경우:'
 
 const Security: NextPage<SecurityProps> = ({ bugReports }) => {
-	return <Docs
-		header='버그 바운티 프로그램'
-		description='한국 디스코드 리스트는 보안을 최우선으로 생각합니다.'
-	>
-		<h1 className='mb-3 text-3xl font-bold text-koreanbots-blue'>소개</h1>
-		<p>한국 디스코드 리스트는 보안을 우선으로 생각합니다. 보안 버그 제보를 장려하기위해 보안 관련 취약점을 제보해주신 분께 소정의 보상을 지급해드립니다.</p>
-		<h1 className='mt-6 mb-3 text-3xl font-bold text-koreanbots-blue'>규칙</h1>
-		<ul className='list-disc list-inside'>
-			<li>자신이 소유하고 있는 계정과 봇에서만 테스트해야합니다. 절대로 다른 유저에게 영향을 주어서는 안됩니다.</li>
-			<li>한국 디스코드 리스트의 서비스에 피해를 끼치는 활동을 해서는 안됩니다. 예) 무차별 대입, DDoS, DoS 등</li>
-			<li>취약점을 찾기 위해 스캐너와 같은 자동화 도구는 사용하지 마세요.</li>
-			<li>발견한 문제에 대한 모든 정보는 보안팀이 완벽하게 조사하고 해결하기 전까지는 절대로 제3자에게 공개/공유해서는 안됩니다.</li>
-			<li>한국 디스코드 리스트는 제보된 문제에 관한 모든 정보를 공개할 권한을 가집니다.</li>
-		</ul>
-		<h1 className='mt-6 mb-3 text-3xl font-bold text-koreanbots-blue'>범위</h1>
-		<ul className='list-disc list-inside'>
-			{
-				['koreanbots.dev 및 *.koreanbots.dev', 'kbots.link', '디스코드.한국'].map(el => <li key={el}>{el}</li>)
-			}
-		</ul>
-		<h1 className='mt-6 mb-3 text-3xl font-bold text-koreanbots-blue'>취약점에 포함되지 않는 사항</h1>
-		<ul className='list-disc list-inside'>
-			<li>이미 한국 디스코드 리스트 내부에서 해당 취약점을 인지하고 있는 경우</li>
-			<li>Brute force 공격</li>
-			<li>Clickjacking</li>
-			<li>DoS 공격</li>
-			<li>본인에게만 영향이 미치는 취약점(Self XSS 등)</li>
-		</ul>
-		<h1 className='mt-6 mb-3 text-3xl font-bold text-koreanbots-blue'>취약점을 제보해주신 분들</h1>
-		<div className='flex flex-wrap'>
-			{
-				bugReports.filter(el=>el).map(u => 
-					<div key={u.id} className='flex items-center mr-2.5'>
-						<DiscordAvatar userID={u.id} size={128} className='rounded-full w-6 h-6 mr-1' />
-						<span className='text-base font-semibold dark:text-gray-300'>{u.globalName} {`(@${u.username})`}</span>
-					</div>
-				)
-			}
-		</div>
-		<ul className='flex flex-wrap mt-2 list-disc list-inside'>
-			{
-				BUG_REPORT_GROUPS.map((g, i) => <li key={i} className='text-base font-semibold dark:text-gray-300'>
-					{g}
+	return (
+		<Docs
+			header='버그 바운티 프로그램'
+			description='한국 디스코드 리스트는 보안을 최우선으로 생각합니다.'
+		>
+			<h1 className='mb-3 text-3xl font-bold text-koreanbots-blue'>소개</h1>
+			<p>
+				한국 디스코드 리스트는 보안을 우선으로 생각합니다. 보안 버그 제보를 장려하기위해 보안 관련
+				취약점을 제보해주신 분께 소정의 보상을 지급해드립니다.
+			</p>
+			<h1 className='mb-3 mt-6 text-3xl font-bold text-koreanbots-blue'>규칙</h1>
+			<ul className='list-inside list-disc'>
+				<li>
+					자신이 소유하고 있는 계정과 봇에서만 테스트해야합니다. 절대로 다른 유저에게 영향을
+					주어서는 안됩니다.
 				</li>
-				)
-			}
-		</ul>
-		<div className='text-center py-36'>
-			<h1 className='text-3xl font-bold mb-6'>취약점을 발견하셨나요?</h1>
-			<Button href={`mailto:team@koreanbots.dev?subject=[Security] &body=${encodeURI(BODY)}`}>제보하기</Button>
-		</div>
-	</Docs>
+				<li>
+					한국 디스코드 리스트의 서비스에 피해를 끼치는 활동을 해서는 안됩니다. 예) 무차별 대입,
+					DDoS, DoS 등
+				</li>
+				<li>취약점을 찾기 위해 스캐너와 같은 자동화 도구는 사용하지 마세요.</li>
+				<li>
+					발견한 문제에 대한 모든 정보는 보안팀이 완벽하게 조사하고 해결하기 전까지는 절대로
+					제3자에게 공개/공유해서는 안됩니다.
+				</li>
+				<li>한국 디스코드 리스트는 제보된 문제에 관한 모든 정보를 공개할 권한을 가집니다.</li>
+			</ul>
+			<h1 className='mb-3 mt-6 text-3xl font-bold text-koreanbots-blue'>범위</h1>
+			<ul className='list-inside list-disc'>
+				{['koreanbots.dev 및 *.koreanbots.dev', 'kbots.link', '디스코드.한국'].map((el) => (
+					<li key={el}>{el}</li>
+				))}
+			</ul>
+			<h1 className='mb-3 mt-6 text-3xl font-bold text-koreanbots-blue'>
+				취약점에 포함되지 않는 사항
+			</h1>
+			<ul className='list-inside list-disc'>
+				<li>이미 한국 디스코드 리스트 내부에서 해당 취약점을 인지하고 있는 경우</li>
+				<li>Brute force 공격</li>
+				<li>Clickjacking</li>
+				<li>DoS 공격</li>
+				<li>본인에게만 영향이 미치는 취약점(Self XSS 등)</li>
+			</ul>
+			<h1 className='mb-3 mt-6 text-3xl font-bold text-koreanbots-blue'>
+				취약점을 제보해주신 분들
+			</h1>
+			<div className='flex flex-wrap'>
+				{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' />
+							<span className='text-base font-semibold dark:text-gray-300'>
+								{u.globalName} {`(@${u.username})`}
+							</span>
+						</div>
+					))}
+			</div>
+			<ul className='mt-2 flex list-inside list-disc flex-wrap'>
+				{BUG_REPORT_GROUPS.map((g, i) => (
+					<li key={i} className='text-base font-semibold dark:text-gray-300'>
+						{g}
+					</li>
+				))}
+			</ul>
+			<div className='py-36 text-center'>
+				<h1 className='mb-6 text-3xl font-bold'>취약점을 발견하셨나요?</h1>
+				<Button href={`mailto:team@koreanbots.dev?subject=[Security] &body=${encodeURI(BODY)}`}>
+					제보하기
+				</Button>
+			</div>
+		</Docs>
+	)
 }
 
 export const getServerSideProps: GetServerSideProps<SecurityProps> = async () => {
 	return {
 		props: {
-			bugReports: await Promise.all(BUG_REPORTERS.map(u => get.user.load(u)))
-		}
+			bugReports: await Promise.all(BUG_REPORTERS.map((u) => get.user.load(u))),
+		},
 	}
 }
 
 export default Security
 
 interface SecurityProps {
-  bugReports: User[]
-}
\ No newline at end of file
+	bugReports: User[]
+}
diff --git a/pages/servers/[id]/edit.tsx b/pages/servers/[id]/edit.tsx
index 3215e3c..ca48052 100644
--- a/pages/servers/[id]/edit.tsx
+++ b/pages/servers/[id]/edit.tsx
@@ -8,7 +8,14 @@ import { ParsedUrlQuery } from 'querystring'
 import { getJosaPicker } from 'josa'
 
 import { get } from '@utils/Query'
-import { checkUserFlag, cleanObject, getRandom, makeServerURL, parseCookie, redirectTo } from '@utils/Tools'
+import {
+	checkUserFlag,
+	cleanObject,
+	getRandom,
+	makeServerURL,
+	parseCookie,
+	redirectTo,
+} from '@utils/Tools'
 import { ManageServer, ManageServerSchema } from '@utils/Yup'
 import { serverCategories, ServerIntroList } from '@utils/Constants'
 import { Server, Theme, User } from '@types'
@@ -34,147 +41,269 @@ const Captcha = dynamic(() => import('@components/Captcha'))
 const Login = dynamic(() => import('@components/Login'))
 const Forbidden = dynamic(() => import('@components/Forbidden'))
 
-const ManageServerPage:NextPage<ManageServerProps> = ({ server, user, owners, csrfToken, theme }) => {
-	const [ data, setData ] = useState(null)
-	const [ deleteModal, setDeleteModal ] = useState(false)
+const ManageServerPage: NextPage<ManageServerProps> = ({
+	server,
+	user,
+	owners,
+	csrfToken,
+	theme,
+}) => {
+	const [data, setData] = useState(null)
+	const [deleteModal, setDeleteModal] = useState(false)
 	const router = useRouter()
 
 	async function submitServer(value: ManageServer) {
-		const res = await Fetch(`/servers/${server.id}`, { method: 'PATCH', body: JSON.stringify(cleanObject<ManageServer>(value)) })
+		const res = await Fetch(`/servers/${server.id}`, {
+			method: 'PATCH',
+			body: JSON.stringify(cleanObject<ManageServer>(value)),
+		})
 		setData(res)
 	}
 
-	if(!server) return <NotFound />
-	if(!user) return <Login>
-		<NextSeo title='서버 정보 수정하기' description='서버의 정보를 수정합니다.'/>
-	</Login>
-	if(!(owners as User[]).find(el => el.id === user.id) && !checkUserFlag(user.flags, 'staff')) return <Forbidden />
-	return <Container paddingTop className='pt-5 pb-10'>
-		<NextSeo title={`${server.name} 수정하기`} description='서버의 정보를 수정합니다.'/>
-		<h1 className='text-3xl font-bold mb-8'>서버 관리하기</h1>
-		<Formik initialValues={cleanObject({
-			invite: server.invite,
-			intro: server.intro,
-			desc: server.desc,
-			category: server.category,
-			_csrf: csrfToken
-		})}
-		validationSchema={ManageServerSchema}
-		onSubmit={submitServer}>
-			{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
-				<Form>
-					<div className='md:flex text-center md:text-left'>
-						<ServerIcon id={server.id} className='md:mx-1 mx-auto rounded-full'/>
-						<div className='md:w-2/3 px-8 py-6'>
-							<h1 className='text-3xl font-bold'>{server.name}</h1>
-							<h2>ID: {server.id}</h2>
+	if (!server) return <NotFound />
+	if (!user)
+		return (
+			<Login>
+				<NextSeo title='서버 정보 수정하기' description='서버의 정보를 수정합니다.' />
+			</Login>
+		)
+	if (!(owners as User[]).find((el) => el.id === user.id) && !checkUserFlag(user.flags, 'staff'))
+		return <Forbidden />
+	return (
+		<Container paddingTop className='pb-10 pt-5'>
+			<NextSeo title={`${server.name} 수정하기`} description='서버의 정보를 수정합니다.' />
+			<h1 className='mb-8 text-3xl font-bold'>서버 관리하기</h1>
+			<Formik
+				initialValues={cleanObject({
+					invite: server.invite,
+					intro: server.intro,
+					desc: server.desc,
+					category: server.category,
+					_csrf: csrfToken,
+				})}
+				validationSchema={ManageServerSchema}
+				onSubmit={submitServer}
+			>
+				{({ 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' />
+							<div className='px-8 py-6 md:w-2/3'>
+								<h1 className='text-3xl font-bold'>{server.name}</h1>
+								<h2>ID: {server.id}</h2>
+							</div>
 						</div>
-					</div>
-					{
-						data ? data.code === 200 ? <div className='mt-4'>
-							<Redirect to={makeServerURL(server)}>
-								<Message type='success'>
-									<h2 className='text-lg font-extrabold'>정보를 저장했습니다.</h2>
-									<p>반영까지는 시간이 조금 걸릴 수 있습니다!</p>
-								</Message>
-							</Redirect>
-						</div> : <div className='mt-4'>
-							<Message type='error'>
-								<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
-								<ul className='list-disc list-inside'>
-									{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
-								</ul>
-							</Message>
-						</div> : ''
-					}
-					<Label For='category' label='카테고리' labelDesc='서버에 해당되는 카테고리를 선택해주세요' required error={errors.category && touched.category ? errors.category as string : null}>
-						<Selects options={serverCategories.map(el=> ({ label: el, value: el }))} handleChange={(value) => {
-							setFieldValue('category', value.map(v=> v.value))
-						}} handleTouch={() => setFieldTouched('category', true)} values={values.category as string[]} setValues={(value) => setFieldValue('category', value)} />
-						<span className='text-gray-400 mt-1 text-sm'>서버 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요. <strong>반드시 해당되는 카테고리만 선택해주세요.</strong></span>
-					</Label>
-					<Label For='invite' label='서버 초대코드' labelDesc='서버의 초대코드를 입력해주세요. (만료되지 않는 코드로 입력해주세요!)' error={errors.invite && touched.invite ? errors.invite : null} short required>
-						<div className='flex items-center'>
-										discord.gg/<Input name='invite' placeholder='JEh53MQ' />
-						</div>
-					</Label>
-					<Divider />
-					<Label For='intro' label='서버 소개' labelDesc='서버를 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)' error={errors.intro && touched.intro ? errors.intro : null} required>
-						<Input name='intro' placeholder={getRandom(ServerIntroList)} />
-					</Label>
-					<Label For='desc' label='서버 설명' labelDesc={<>서버를 자세하게 설명해주세요! (최대 1500자)<br/>마크다운을 지원합니다!</>} error={errors.desc && touched.desc ? errors.desc : null} required>
-						<TextArea max={1500} name='desc' placeholder='서버에 대해 최대한 자세히 설명해주세요!' theme={theme === 'dark' ? 'dark' : 'light'} value={values.desc} setValue={(value) => setFieldValue('desc', value)} />
-					</Label>
-					<Label For='preview' label='설명 미리보기' labelDesc='다음 결과는 실제와 다를 수 있습니다.'>
-						<Segment>
-							<Markdown text={values.desc} />
-						</Segment>
-					</Label>
-					<Divider />
-					<p className='text-base mt-2 mb-5'>
-						<span className='text-red-500 font-semibold'> *</span> = 필수 항목
-					</p>
-					<Button type='submit' onClick={() => window.scrollTo({ top: 0 })}>
-						<>
-							<i className='far fa-save'/> 저장
-						</>
-					</Button>
-				</Form>
-			)}
-		</Formik>
-		{
-			(checkUserFlag(user.flags, 'staff') || server.owner?.id === user.id) && <div className='py-4'>
-				<Divider />
-				<h2 className='text-2xl font-semibold pb-2'>위험구역</h2>
-				<p className='text-gray-400 mb-3'>관리자 추가나 소유권 이전은 웹사이트에서 진행하실 수 없습니다. 디스코드 서버 내에서 "관리자" 권한을 부여하시거나 서버의 소유권을 이전하시면 됩니다.</p>
-				<Segment>
-					<div className='lg:flex items-center'>
-						<div className='grow py-1'>
-							<h3 className='text-lg font-semibold'>서버 삭제하기</h3>
-							<p className='text-gray-400'>서버를 삭제하게 되면 되돌릴 수 없습니다.</p>
-						</div>
-					
-						<Button onClick={() => setDeleteModal(true)} className='h-10 bg-red-500 hover:opacity-80 text-white lg:w-1/8'><i className='fas fa-trash' /> 서버 삭제하기</Button>
-						<Modal full header={`${server.name} 삭제하기`} isOpen={deleteModal} dark={theme === 'dark'} onClose={() => setDeleteModal(false)} closeIcon>
-							<Formik initialValues={{ name: '', _captcha: '', _csrf: csrfToken }} onSubmit={async (v) => {
-								const res = await Fetch(`/servers/${server.id}`, { method: 'DELETE', body: JSON.stringify(v) })
-								if(res.code === 200) {
-									alert('성공적으로 삭제하였습니다.')
-									redirectTo(router, '/')
-								}
-								else alert(res.message)
-							}}>
-								{
-									({ values, setFieldValue }) => <Form>
-										<Message type='warning'>
-											<p>서버를 삭제하게 되면 되돌릴 수 없습니다.<br/>하트 수를 포함한 모든 서버 정보가 영구적으로 삭제됩니다.</p>
-											<p>계속 하시려면 서버의 이름 <strong>{server.name}</strong>{getJosaPicker('을')(server.name)} 입력해주세요.</p>
+						{data ? (
+							data.code === 200 ? (
+								<div className='mt-4'>
+									<Redirect to={makeServerURL(server)}>
+										<Message type='success'>
+											<h2 className='text-lg font-extrabold'>정보를 저장했습니다.</h2>
+											<p>반영까지는 시간이 조금 걸릴 수 있습니다!</p>
 										</Message>
-										<div className='py-4'>
-											<Input name='name' placeholder={server.name} />
-										</div>
-										<Captcha dark={theme === 'dark'} onVerify={(k) => setFieldValue('_captcha', k)} />
-										<Button disabled={values.name !== server.name || !values._captcha} className={`mt-4 bg-red-500 text-white ${values.name !== server.name || !values._captcha ? 'opacity-80' : 'hover:opacity-80'}`} type='submit'><i className='fas fa-trash' /> 삭제</Button>
-									</Form>
-								}
-							</Formik>
-						</Modal>
-					</div>
-				</Segment>
-			</div>
-		}
-	</Container>
+									</Redirect>
+								</div>
+							) : (
+								<div className='mt-4'>
+									<Message type='error'>
+										<h2 className='text-lg font-extrabold'>
+											{data.message || '오류가 발생했습니다.'}
+										</h2>
+										<ul className='list-inside list-disc'>
+											{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
+										</ul>
+									</Message>
+								</div>
+							)
+						) : (
+							''
+						)}
+						<Label
+							For='category'
+							label='카테고리'
+							labelDesc='서버에 해당되는 카테고리를 선택해주세요'
+							required
+							error={errors.category && touched.category ? (errors.category as string) : null}
+						>
+							<Selects
+								options={serverCategories.map((el) => ({ label: el, value: el }))}
+								handleChange={(value) => {
+									setFieldValue(
+										'category',
+										value.map((v) => v.value)
+									)
+								}}
+								handleTouch={() => setFieldTouched('category', true)}
+								values={values.category as string[]}
+								setValues={(value) => setFieldValue('category', value)}
+							/>
+							<span className='mt-1 text-sm text-gray-400'>
+								서버 카드에는 앞 3개의 카테고리만 표시됩니다. 드래그하여 카테고리를 정렬하세요.{' '}
+								<strong>반드시 해당되는 카테고리만 선택해주세요.</strong>
+							</span>
+						</Label>
+						<Label
+							For='invite'
+							label='서버 초대코드'
+							labelDesc='서버의 초대코드를 입력해주세요. (만료되지 않는 코드로 입력해주세요!)'
+							error={errors.invite && touched.invite ? errors.invite : null}
+							short
+							required
+						>
+							<div className='flex items-center'>
+								discord.gg/
+								<Input name='invite' placeholder='JEh53MQ' />
+							</div>
+						</Label>
+						<Divider />
+						<Label
+							For='intro'
+							label='서버 소개'
+							labelDesc='서버를 소개할 수 있는 간단한 설명을 적어주세요. (최대 60자)'
+							error={errors.intro && touched.intro ? errors.intro : null}
+							required
+						>
+							<Input name='intro' placeholder={getRandom(ServerIntroList)} />
+						</Label>
+						<Label
+							For='desc'
+							label='서버 설명'
+							labelDesc={
+								<>
+									서버를 자세하게 설명해주세요! (최대 1500자)
+									<br />
+									마크다운을 지원합니다!
+								</>
+							}
+							error={errors.desc && touched.desc ? errors.desc : null}
+							required
+						>
+							<TextArea
+								max={1500}
+								name='desc'
+								placeholder='서버에 대해 최대한 자세히 설명해주세요!'
+								theme={theme === 'dark' ? 'dark' : 'light'}
+								value={values.desc}
+								setValue={(value) => setFieldValue('desc', value)}
+							/>
+						</Label>
+						<Label
+							For='preview'
+							label='설명 미리보기'
+							labelDesc='다음 결과는 실제와 다를 수 있습니다.'
+						>
+							<Segment>
+								<Markdown text={values.desc} />
+							</Segment>
+						</Label>
+						<Divider />
+						<p className='mb-5 mt-2 text-base'>
+							<span className='font-semibold text-red-500'> *</span> = 필수 항목
+						</p>
+						<Button type='submit' onClick={() => window.scrollTo({ top: 0 })}>
+							<>
+								<i className='far fa-save' /> 저장
+							</>
+						</Button>
+					</Form>
+				)}
+			</Formik>
+			{(checkUserFlag(user.flags, 'staff') || server.owner?.id === user.id) && (
+				<div className='py-4'>
+					<Divider />
+					<h2 className='pb-2 text-2xl font-semibold'>위험구역</h2>
+					<p className='mb-3 text-gray-400'>
+						관리자 추가나 소유권 이전은 웹사이트에서 진행하실 수 없습니다. 디스코드 서버 내에서
+						"관리자" 권한을 부여하시거나 서버의 소유권을 이전하시면 됩니다.
+					</p>
+					<Segment>
+						<div className='items-center lg:flex'>
+							<div className='grow py-1'>
+								<h3 className='text-lg font-semibold'>서버 삭제하기</h3>
+								<p className='text-gray-400'>서버를 삭제하게 되면 되돌릴 수 없습니다.</p>
+							</div>
+
+							<Button
+								onClick={() => setDeleteModal(true)}
+								className='lg:w-1/8 h-10 bg-red-500 text-white hover:opacity-80'
+							>
+								<i className='fas fa-trash' /> 서버 삭제하기
+							</Button>
+							<Modal
+								full
+								header={`${server.name} 삭제하기`}
+								isOpen={deleteModal}
+								dark={theme === 'dark'}
+								onClose={() => setDeleteModal(false)}
+								closeIcon
+							>
+								<Formik
+									initialValues={{ name: '', _captcha: '', _csrf: csrfToken }}
+									onSubmit={async (v) => {
+										const res = await Fetch(`/servers/${server.id}`, {
+											method: 'DELETE',
+											body: JSON.stringify(v),
+										})
+										if (res.code === 200) {
+											alert('성공적으로 삭제하였습니다.')
+											redirectTo(router, '/')
+										} else alert(res.message)
+									}}
+								>
+									{({ values, setFieldValue }) => (
+										<Form>
+											<Message type='warning'>
+												<p>
+													서버를 삭제하게 되면 되돌릴 수 없습니다.
+													<br />
+													하트 수를 포함한 모든 서버 정보가 영구적으로 삭제됩니다.
+												</p>
+												<p>
+													계속 하시려면 서버의 이름 <strong>{server.name}</strong>
+													{getJosaPicker('을')(server.name)} 입력해주세요.
+												</p>
+											</Message>
+											<div className='py-4'>
+												<Input name='name' placeholder={server.name} />
+											</div>
+											<Captcha
+												dark={theme === 'dark'}
+												onVerify={(k) => setFieldValue('_captcha', k)}
+											/>
+											<Button
+												disabled={values.name !== server.name || !values._captcha}
+												className={`mt-4 bg-red-500 text-white ${
+													values.name !== server.name || !values._captcha
+														? 'opacity-80'
+														: 'hover:opacity-80'
+												}`}
+												type='submit'
+											>
+												<i className='fas fa-trash' /> 삭제
+											</Button>
+										</Form>
+									)}
+								</Formik>
+							</Modal>
+						</div>
+					</Segment>
+				</div>
+			)}
+		</Container>
+	)
 }
 
 export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const user = await get.Authorization(parsed?.token)
-	return { props: {
-		server: await get.server.load(ctx.query.id),
-		user: await get.user.load(user || ''),
-		owners: await get.serverOwners(ctx.query.id),
-		csrfToken: getToken(ctx.req, ctx.res)
-	} }
+	return {
+		props: {
+			server: await get.server.load(ctx.query.id),
+			user: await get.user.load(user || ''),
+			owners: await get.serverOwners(ctx.query.id),
+			csrfToken: getToken(ctx.req, ctx.res),
+		},
+	}
 }
 
 interface ManageServerProps {
@@ -193,4 +322,4 @@ interface Query extends ParsedUrlQuery {
 	id: string
 }
 
-export default ManageServerPage
\ No newline at end of file
+export default ManageServerPage
diff --git a/pages/servers/[id]/index.tsx b/pages/servers/[id]/index.tsx
index d734800..b06bfc3 100644
--- a/pages/servers/[id]/index.tsx
+++ b/pages/servers/[id]/index.tsx
@@ -14,7 +14,13 @@ import { DiscordEnpoints, DSKR_BOT_ID, KoreanbotsEndPoints } from '@utils/Consta
 import { get, safeImageHost } from '@utils/Query'
 import Day from '@utils/Day'
 import Fetch from '@utils/Fetch'
-import { checkBotFlag, checkServerFlag, checkUserFlag, formatNumber, parseCookie } from '@utils/Tools'
+import {
+	checkBotFlag,
+	checkServerFlag,
+	checkUserFlag,
+	formatNumber,
+	parseCookie,
+} from '@utils/Tools'
 import { getToken } from '@utils/Csrf'
 
 import NotFound from '../../404'
@@ -28,119 +34,168 @@ const Owner = dynamic(() => import('@components/Owner'))
 const Segment = dynamic(() => import('@components/Segment'))
 const LongButton = dynamic(() => import('@components/LongButton'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
-const Markdown = dynamic(() => import ('@components/Markdown'))
+const Markdown = dynamic(() => import('@components/Markdown'))
 const Message = dynamic(() => import('@components/Message'))
 const Modal = dynamic(() => import('@components/Modal'))
 
 const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
-	const [ emojisModal, setEmojisModal ] = useState(false)
-	const [ ownersModal, setOwnersModal ] = useState(false)
-	const [ owners, setOwners ] = useState<User[]>(null)
+	const [emojisModal, setEmojisModal] = useState(false)
+	const [ownersModal, setOwnersModal] = useState(false)
+	const [owners, setOwners] = useState<User[]>(null)
 	const bg = checkBotFlag(data?.flags, 'trusted') && data?.banner
 	const router = useRouter()
 	useEffect(() => {
-		if(data) Fetch<User[]>(`/servers/${data.id}/owners`).then(async res => {
-			if(res?.code === 200) setOwners(res.data)
-		})
-	}, [ data ])
+		if (data)
+			Fetch<User[]>(`/servers/${data.id}/owners`).then(async (res) => {
+				if (res?.code === 200) setOwners(res.data)
+			})
+	}, [data])
 	if (!data?.id) return <NotFound />
 	return (
-		<div style={bg ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed` } : {}}>
+		<div
+			style={
+				bg
+					? {
+							background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed`,
+					  }
+					: {}
+			}
+		>
 			<Container paddingTop className='py-10'>
 				<NextSeo
 					title={data.name}
 					description={data.intro}
 					twitter={{
-						cardType: 'summary_large_image'
+						cardType: 'summary_large_image',
 					}}
 					openGraph={{
 						images: [
 							{
-								url: KoreanbotsEndPoints.OG.server(data.id, data.name, data.intro, data.category, [formatNumber(data.votes), formatNumber(data.members)]),
+								url: KoreanbotsEndPoints.OG.server(data.id, data.name, data.intro, data.category, [
+									formatNumber(data.votes),
+									formatNumber(data.members),
+								]),
 								width: 2048,
 								height: 1170,
-								alt: 'Server Preview Image'
-							}
-						]
+								alt: 'Server Preview Image',
+							},
+						],
 					}}
 				/>
-				{
-					data.state === 'blocked' ? <div className='pb-40'>
+				{data.state === 'blocked' ? (
+					<div className='pb-40'>
 						<Message type='error'>
 							<h2 className='text-lg font-extrabold'>해당 서버는 관리자에 의해 삭제되었습니다.</h2>
 						</Message>
 					</div>
-						: <>
-							<div className='w-full pb-2'>
-								{
-									data.state === 'unreachable' ? <Message type='error'>
-										<h2 className='text-lg font-extrabold'>서버 정보를 갱신할 수 없습니다.</h2>
-										<p>서버에서 봇이 추방되었거나, 봇이 오프라인이여서 서버 정보를 갱신할 수 없습니다.</p>
-										{
-											owners?.find(el => el.id === user?.id) && <>
-												<h3 className='text-md font-bold pt-2'>서버 관리자시군요!</h3>
-												<p>봇을 서버에서 추방하셨다면 <a className='text-blue-600 hover:text-blue-500 cursor-pointer' href={`${DiscordEnpoints.InviteApplication(DSKR_BOT_ID, {}, 'bot', null, data.id)}&disable_guild_select=true`}>이곳</a>을 눌러 봇을 다시 초대해주세요!</p>
-											</>
-										}
-									</Message> :
-										data.state === 'reported' ?
-											<Message type='error'>
-												<h2 className='text-lg font-extrabold'>해당 서버는 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
-												<p>해당 서버를 주의해주세요.</p>
-												<p>서버 관리자 분은 <Link href='/guidelines' className='text-blue-500 hover:text-blue-400'>가이드라인</Link>에 대한 위반사항을 확인해주시고 <Link href='/discord' className='text-blue-500 hover:text-blue-400'>디스코드 서버</Link>로 문의해주세요.</p>
-											</Message> : ''
-								}
+				) : (
+					<>
+						<div className='w-full pb-2'>
+							{data.state === 'unreachable' ? (
+								<Message type='error'>
+									<h2 className='text-lg font-extrabold'>서버 정보를 갱신할 수 없습니다.</h2>
+									<p>
+										서버에서 봇이 추방되었거나, 봇이 오프라인이여서 서버 정보를 갱신할 수 없습니다.
+									</p>
+									{owners?.find((el) => el.id === user?.id) && (
+										<>
+											<h3 className='text-md pt-2 font-bold'>서버 관리자시군요!</h3>
+											<p>
+												봇을 서버에서 추방하셨다면{' '}
+												<a
+													className='cursor-pointer text-blue-600 hover:text-blue-500'
+													href={`${DiscordEnpoints.InviteApplication(
+														DSKR_BOT_ID,
+														{},
+														'bot',
+														null,
+														data.id
+													)}&disable_guild_select=true`}
+												>
+													이곳
+												</a>
+												을 눌러 봇을 다시 초대해주세요!
+											</p>
+										</>
+									)}
+								</Message>
+							) : data.state === 'reported' ? (
+								<Message type='error'>
+									<h2 className='text-lg font-extrabold'>
+										해당 서버는 신고가 접수되어, 관리자에 의해 잠금 상태입니다.
+									</h2>
+									<p>해당 서버를 주의해주세요.</p>
+									<p>
+										서버 관리자 분은{' '}
+										<Link href='/guidelines' className='text-blue-500 hover:text-blue-400'>
+											가이드라인
+										</Link>
+										에 대한 위반사항을 확인해주시고{' '}
+										<Link href='/discord' className='text-blue-500 hover:text-blue-400'>
+											디스코드 서버
+										</Link>
+										로 문의해주세요.
+									</p>
+								</Message>
+							) : (
+								''
+							)}
+						</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' />
 							</div>
-							<div className='lg:flex w-full'>
-								<div className='w-full text-center lg:w-2/12'>
-									<ServerIcon
-										id={data.id}
-										size={256}
-										className='w-full rounded-full'
-									/>
-								</div>
-								<div className='grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
-									<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>
-										{data.name}{' '}
-										{checkServerFlag(data.flags, 'trusted') ? (
-											<Tooltip placement='bottom' overlay='해당 서버는 한국 디스코드 리스트에서 엄격한 기준을 통과한 서버 입니다!'>
-												<span className='text-koreanbots-blue text-3xl'>
-													<i className='fas fa-award' />
-												</span>
-											</Tooltip>
-										) : ''}
-									</h1>
-									<p className={`${bg ? 'text-gray-300' : 'dark:text-gray-300 text-gray-800'} text-base`}>{data.intro}</p>
-								</div>
-								<div className='w-full lg:w-1/4'>
-									{
-										['ok', 'unreachable'].includes(data.state) && <LongButton
-											newTab
-											href={`/servers/${router.query.id}/join`}
+							<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' } : {}}>
+									{data.name}{' '}
+									{checkServerFlag(data.flags, 'trusted') ? (
+										<Tooltip
+											placement='bottom'
+											overlay='해당 서버는 한국 디스코드 리스트에서 엄격한 기준을 통과한 서버 입니다!'
 										>
-											<h4 className='whitespace-nowrap'>
-												<i className='fas fa-user-plus text-discord-blurple' /> 참가하기
-											</h4>
-										</LongButton>
-									}
-									<Link href={`/servers/${router.query.id}/vote`} legacyBehavior>
-										<LongButton>
-											<h4>
-												<i className='fas fa-heart text-red-600' /> 하트 추가
-											</h4>
-											<span className='ml-1 px-2 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg'>
-												{formatNumber(data.votes)}
+											<span className='text-3xl text-koreanbots-blue'>
+												<i className='fas fa-award' />
 											</span>
+										</Tooltip>
+									) : (
+										''
+									)}
+								</h1>
+								<p
+									className={`${
+										bg ? 'text-gray-300' : 'text-gray-800 dark:text-gray-300'
+									} text-base`}
+								>
+									{data.intro}
+								</p>
+							</div>
+							<div className='w-full lg:w-1/4'>
+								{['ok', 'unreachable'].includes(data.state) && (
+									<LongButton newTab href={`/servers/${router.query.id}/join`}>
+										<h4 className='whitespace-nowrap'>
+											<i className='fas fa-user-plus text-discord-blurple' /> 참가하기
+										</h4>
+									</LongButton>
+								)}
+								<Link href={`/servers/${router.query.id}/vote`} legacyBehavior>
+									<LongButton>
+										<h4>
+											<i className='fas fa-heart text-red-600' /> 하트 추가
+										</h4>
+										<span className='ml-1 rounded-lg bg-little-white-hover px-2 text-center text-sm text-black dark:bg-very-black dark:text-gray-400'>
+											{formatNumber(data.votes)}
+										</span>
+									</LongButton>
+								</Link>
+								{(owners?.find((el) => el.id === user?.id) ||
+									checkUserFlag(user?.flags, 'staff')) && (
+									<>
+										<LongButton href={`/servers/${data.id}/edit`}>
+											<h4>
+												<i className='fas fa-cogs' /> 관리하기
+											</h4>
 										</LongButton>
-									</Link>
-									{
-										(owners?.find(el => el.id === user?.id) || checkUserFlag(user?.flags, 'staff')) && <>
-											<LongButton href={`/servers/${data.id}/edit`}>
-												<h4>
-													<i className='fas fa-cogs' /> 관리하기
-												</h4>
-											</LongButton>
-											{/* <LongButton onClick={async() => {
+										{/* <LongButton onClick={async() => {
                                                 const res = await Fetch(`/servers/${data.id}/stats`, { method: 'PATCH'} )
                                                 if(res.code !== 200) return alert(res.message)
                                                 else window.location.reload()
@@ -149,96 +204,119 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
                                                     <i className='fas fa-sync' /> 정보 갱신하기
                                                 </h4>
                                             </LongButton> */}
-										</>
-									}
-								</div>
+									</>
+								)}
 							</div>
-							<Divider className='px-5' />
-							<div className='hidden lg:block'>
-								<Advertisement />
-							</div>
-							<div className='lg:flex lg:flex-row-reverse' style={bg ? { color: 'white' } : {}}>
-								<div className='mb-1 w-full lg:w-1/4'>
-									<h2 className='3xl mb-2 font-bold'>정보</h2>
-									<div className='grid gap-4 grid-cols-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white rounded-sm'>
-										<div>
-											<i className='fas fa-users' /> 멤버 수
-										</div>
-										<div>{data.members || 'N/A'}</div>
-										<div>
-											<i className='far fa-gem' /> 부스트 티어
-										</div>
-										<div>{typeof data.boostTier === 'number' ? `${data.boostTier}레벨` : 'N/A'}</div>
-										<div>
-											<i className='fas fa-calendar-day' /> 서버 생성일
-										</div>
-										<div>{Day(date).fromNow(false)}</div>
-										{
-											checkServerFlag(data.flags, 'discord_partnered') ?
-												<Tooltip overlay='해당 서버는 디스코드 파트너 입니다.'>
-													<div className='col-span-2'>
-														<i className='fas fa-infinity text-discord-blurple' /> 디스코드 파트너
-													</div>
-												</Tooltip>
-												: ''
-										}
-										{
-											checkServerFlag(data.flags, 'verified') ?
-												<Tooltip overlay='해당 서버는 디스코드에서 인증된 서버입니다.'>
-													<div className='col-span-2'>
-														<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
-													</div>
-												</Tooltip>
-												: ''
-										}
+						</div>
+						<Divider className='px-5' />
+						<div className='hidden lg:block'>
+							<Advertisement />
+						</div>
+						<div className='lg:flex lg:flex-row-reverse' style={bg ? { color: 'white' } : {}}>
+							<div className='mb-1 w-full lg:w-1/4'>
+								<h2 className='3xl mb-2 font-bold'>정보</h2>
+								<div className='grid grid-cols-2 gap-4 rounded-sm bg-little-white px-4 py-4 text-black dark:bg-discord-black dark:text-gray-400'>
+									<div>
+										<i className='fas fa-users' /> 멤버 수
 									</div>
-									<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
-									<div className='flex flex-wrap'>
-										{data.category.map(el => (
-											<Tag key={el} text={el} href={`/servers/categories/${el}`} />
-										))}
+									<div>{data.members || 'N/A'}</div>
+									<div>
+										<i className='far fa-gem' /> 부스트 티어
 									</div>
-									{ 
-										data.emojis.length !== 0 && <>
-											<h2 className='3xl mb-2 mt-2 font-bold'>이모지</h2>
-											<div className='flex flex-wrap'>
-												{
-													data.emojis.slice(0, 5).map(el => <Image src={el.url} key={el.name} className='h-8 m-1' />)
-												}
-												{
-													data.emojis.length > 5 && <Tag className='cursor-pointer' onClick={() => setEmojisModal(true)} text={`+${data.emojis.length - 5}개`} />
-												}
+									<div>{typeof data.boostTier === 'number' ? `${data.boostTier}레벨` : 'N/A'}</div>
+									<div>
+										<i className='fas fa-calendar-day' /> 서버 생성일
+									</div>
+									<div>{Day(date).fromNow(false)}</div>
+									{checkServerFlag(data.flags, 'discord_partnered') ? (
+										<Tooltip overlay='해당 서버는 디스코드 파트너 입니다.'>
+											<div className='col-span-2'>
+												<i className='fas fa-infinity text-discord-blurple' /> 디스코드 파트너
 											</div>
-											<Modal header='이모지 전체보기' closeIcon isOpen={emojisModal} onClose={() => setEmojisModal(false)}
-												full dark={theme === 'dark'}>
-												<strong>{data.emojis.length}</strong>개의 이모지가 있습니다.
-												<div className='flex flex-wrap'>
-													{
-														data.emojis.map(el => <Tooltip zIndex={1000} key={el.name} placement='top' overlay={`:${el.name}:`} mouseLeaveDelay={0}>
-															<div>
-																<Image src={el.url} className='h-8 m-1' />
-															</div>
-														</Tooltip>)
-													}
-												</div>
-											</Modal>
-										</>
-									}
-									<h2 className='3xl mb-2 mt-2 font-bold'>소유자</h2>
-									{
-										data.owner && <Owner
-											key={data.owner.id}
-											id={data.owner.id}
-											tag={data.owner.tag}
-											globalName={data.owner.globalName}
-											username={data.owner.username}
-										/>
-									}
-									<LongButton onClick={() => setOwnersModal(true)}>관리자 전체보기</LongButton>
-									<Modal header='관리자 전체보기' closeIcon isOpen={ownersModal} onClose={() => setOwnersModal(false)}
-										full dark={theme === 'dark'}>
-										<div className='grid gap-x-1 grid-rows-1 md:grid-cols-2'>
-											{owners ? owners.map(el => (
+										</Tooltip>
+									) : (
+										''
+									)}
+									{checkServerFlag(data.flags, 'verified') ? (
+										<Tooltip overlay='해당 서버는 디스코드에서 인증된 서버입니다.'>
+											<div className='col-span-2'>
+												<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
+											</div>
+										</Tooltip>
+									) : (
+										''
+									)}
+								</div>
+								<h2 className='3xl mb-2 mt-2 font-bold'>카테고리</h2>
+								<div className='flex flex-wrap'>
+									{data.category.map((el) => (
+										<Tag key={el} text={el} href={`/servers/categories/${el}`} />
+									))}
+								</div>
+								{data.emojis.length !== 0 && (
+									<>
+										<h2 className='3xl mb-2 mt-2 font-bold'>이모지</h2>
+										<div className='flex flex-wrap'>
+											{data.emojis.slice(0, 5).map((el) => (
+												<Image src={el.url} key={el.name} className='m-1 h-8' />
+											))}
+											{data.emojis.length > 5 && (
+												<Tag
+													className='cursor-pointer'
+													onClick={() => setEmojisModal(true)}
+													text={`+${data.emojis.length - 5}개`}
+												/>
+											)}
+										</div>
+										<Modal
+											header='이모지 전체보기'
+											closeIcon
+											isOpen={emojisModal}
+											onClose={() => setEmojisModal(false)}
+											full
+											dark={theme === 'dark'}
+										>
+											<strong>{data.emojis.length}</strong>개의 이모지가 있습니다.
+											<div className='flex flex-wrap'>
+												{data.emojis.map((el) => (
+													<Tooltip
+														zIndex={1000}
+														key={el.name}
+														placement='top'
+														overlay={`:${el.name}:`}
+														mouseLeaveDelay={0}
+													>
+														<div>
+															<Image src={el.url} className='m-1 h-8' />
+														</div>
+													</Tooltip>
+												))}
+											</div>
+										</Modal>
+									</>
+								)}
+								<h2 className='3xl mb-2 mt-2 font-bold'>소유자</h2>
+								{data.owner && (
+									<Owner
+										key={data.owner.id}
+										id={data.owner.id}
+										tag={data.owner.tag}
+										globalName={data.owner.globalName}
+										username={data.owner.username}
+									/>
+								)}
+								<LongButton onClick={() => setOwnersModal(true)}>관리자 전체보기</LongButton>
+								<Modal
+									header='관리자 전체보기'
+									closeIcon
+									isOpen={ownersModal}
+									onClose={() => setOwnersModal(false)}
+									full
+									dark={theme === 'dark'}
+								>
+									<div className='grid grid-rows-1 gap-x-1 md:grid-cols-2'>
+										{owners ? (
+											owners.map((el) => (
 												<Owner
 													key={el.id}
 													id={el.id}
@@ -247,30 +325,33 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
 													username={el.username}
 													crown={el.id === data.owner?.id}
 												/>
-											)) : <strong>불러오는 중...</strong>}
-										</div>
-									</Modal>
-									<div className='list grid'>
-										<Link
-											href={`/servers/${router.query.id}/report`}
-											className='text-red-600 hover:underline cursor-pointer'
-											aria-hidden='true'>
-
-											<i className='far fa-flag' />신고하기
-										</Link>
-                                            
+											))
+										) : (
+											<strong>불러오는 중...</strong>
+										)}
 									</div>
-									<Advertisement size='tall' />
-								</div>
-								<div className='w-full lg:pr-5 lg:w-3/4'>
-									<Segment className='my-4'>
-										<Markdown text={desc}/>
-									</Segment>
-									<Advertisement />
+								</Modal>
+								<div className='list grid'>
+									<Link
+										href={`/servers/${router.query.id}/report`}
+										className='cursor-pointer text-red-600 hover:underline'
+										aria-hidden='true'
+									>
+										<i className='far fa-flag' />
+										신고하기
+									</Link>
 								</div>
+								<Advertisement size='tall' />
 							</div>
-						</>
-				}
+							<div className='w-full lg:w-3/4 lg:pr-5'>
+								<Segment className='my-4'>
+									<Markdown text={desc} />
+								</Segment>
+								<Advertisement />
+							</div>
+						</div>
+					</>
+				)}
 			</Container>
 		</div>
 	)
@@ -279,20 +360,25 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
 export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const data = await get.server.load(ctx.query.id)
-	if(!data) return {
-		props: {
-			data
+	if (!data)
+		return {
+			props: {
+				data,
+			},
 		}
-	}
 	const desc = safeImageHost(data.desc)
 	const user = await get.Authorization(parsed?.token)
-	if((checkServerFlag(data.flags, 'trusted') || checkServerFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== ctx.query.id) {
+	if (
+		(checkServerFlag(data.flags, 'trusted') || checkServerFlag(data.flags, 'partnered')) &&
+		data.vanity &&
+		data.vanity !== ctx.query.id
+	) {
 		return {
 			redirect: {
 				destination: `/servers/${data.vanity}`,
-				permanent: true
+				permanent: true,
 			},
-			props: {}
+			props: {},
 		}
 	}
 	return {
@@ -301,15 +387,13 @@ export const getServerSideProps = async (ctx: Context) => {
 			desc,
 			date: Number(SnowflakeUtil.deconstruct(data.id ?? '0').timestamp),
 			user: await get.user.load(user || ''),
-			csrfToken: getToken(ctx.req, ctx.res)
+			csrfToken: getToken(ctx.req, ctx.res),
 		},
 	}
 }
 
 export default Servers
 
-
-
 interface ServersProps {
 	data: Server
 	desc: string
diff --git a/pages/servers/[id]/join.tsx b/pages/servers/[id]/join.tsx
index b2dd918..3008e64 100644
--- a/pages/servers/[id]/join.tsx
+++ b/pages/servers/[id]/join.tsx
@@ -6,14 +6,14 @@ const Join: NextPage = () => <NotFound />
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
 	const data = await get.server.load(ctx.query.id as string)
-	if(!data) return { props: {} }
+	if (!data) return { props: {} }
 	// // const record = await Bots.updateOne({ _id: data.id, 'inviteMetrix.day': getYYMMDD() }, { $inc: { 'inviteMetrix.$.count': 1 } })
 	// if(record.n === 0) await Bots.findByIdAndUpdate(data.id, { $push: { inviteMetrix: { count: 1 } } }, { upsert: true })
 	ctx.res.statusCode = 307
 	ctx.res.setHeader('Location', DiscordEnpoints.ServerInvite(data.invite))
 	return {
-		props: {}
+		props: {},
 	}
 }
 
-export default Join
\ No newline at end of file
+export default Join
diff --git a/pages/servers/[id]/report.tsx b/pages/servers/[id]/report.tsx
index dd06342..a08764d 100644
--- a/pages/servers/[id]/report.tsx
+++ b/pages/servers/[id]/report.tsx
@@ -19,94 +19,144 @@ import { getJosaPicker } from 'josa'
 import { serverReportCats } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
 
-
 const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))
 const Login = dynamic(() => import('@components/Login'))
 
 const ReportServer: NextPage<ReportServerProps> = ({ data, user, csrfToken }) => {
-	const [ reportRes, setReportRes ] = useState<ResponseProps<unknown>>(null)
-	if(!data?.id) return <NotFound />
-	if(!user) return <Login>
-		<NextSeo title='신고하기' />
-	</Login>
+	const [reportRes, setReportRes] = useState<ResponseProps<unknown>>(null)
+	if (!data?.id) return <NotFound />
+	if (!user)
+		return (
+			<Login>
+				<NextSeo title='신고하기' />
+			</Login>
+		)
 	return (
 		<Container paddingTop className='py-10'>
 			<NextSeo title={`${data.name} 신고하기`} />
 			<Link href={makeServerURL(data)} className='text-blue-500 hover:opacity-80'>
-				<i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.name}</strong>{getJosaPicker('로')(data.name)}돌아가기
+				<i className='fas fa-arrow-left mb-3 mt-3' /> <strong>{data.name}</strong>
+				{getJosaPicker('로')(data.name)}돌아가기
 			</Link>
-			{
-				reportRes?.code === 200 ? <Message type='success'>
+			{reportRes?.code === 200 ? (
+				<Message type='success'>
 					<h2 className='text-lg font-semibold'>성공적으로 제출하였습니다!</h2>
-					<p>더 자세한 설명이 필요할 수 있습니다. <strong>반드시 <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요!!</strong></p>
-				</Message> : <Formik onSubmit={async (body) => {
-					const res = await Fetch(`/servers/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
-					setReportRes(res)
-				}} validationSchema={ReportSchema} initialValues={{
-					category: null,
-					description: '',
-					_csrf: csrfToken
-				}}>
-					{
-						({ errors, touched, values, setFieldValue }) => (
-							<Form>
-								<div className='mb-5'>
-									{
-										reportRes && <div className='my-5'>
-											<Message type='error'>
-												<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
-												<ul className='list-disc'>
-													{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
-												</ul>
-											</Message>
-										</div>
-									}
-									<h3 className='font-bold'>신고 구분</h3>
-									<p className='text-gray-400 text-sm mb-1'>해당되는 항목을 선택해주세요.</p>
-									{
-										serverReportCats.map(el => 
-											<div key={el}>
-												<label>
-													<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
-													{el}
-												</label>
-											</div>
-										)
-									}
-									<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category as string : null}</div>
-									{
-										values.category && <>
-											{
-												{
-													[serverReportCats[1]]: <Message type='info'>
-														<h3 className='font-bold text-xl'>본인 혹은 다른 사람이 위험에 처해 있나요?</h3>
-														<p>당신은 소중한 사람입니다.</p>
-														<p className='list-disc list-item list-inside'>자살예방상담전화 1393 | 청소년전화 1388</p>
-													</Message>,
-													[serverReportCats[3]]: <DMCA values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />,
-													[serverReportCats[4]]: <Message type='warning'>
-														<h3 className='font-bold text-xl'>디스코드 약관을 위반사항을 신고하시려고요?</h3>
-														<p><a className='text-blue-400' target='_blank' rel='noreferrer' href='http://dis.gd/report'>디스코드 문의</a>를 통해 직접 디스코드에 신고하실 수도 있습니다.</p>
-													</Message>
-                            
-												}[values.category]
-											}
-											{
-												![serverReportCats[3]].includes(values.category) && <>
-													<h3 className='font-bold mt-2'>설명</h3>
-													<p className='text-gray-400 text-sm mb-1'>최대한 자세하게 기재해주세요.</p>
-													<TextField values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />
-												</>
-											}
-										</>
-									}
+					<p>
+						더 자세한 설명이 필요할 수 있습니다.{' '}
+						<strong>
+							반드시{' '}
+							<a className='text-blue-600 hover:text-blue-500' href='/discord'>
+								공식 디스코드
+							</a>
+							에 참여해주세요!!
+						</strong>
+					</p>
+				</Message>
+			) : (
+				<Formik
+					onSubmit={async (body) => {
+						const res = await Fetch(`/servers/${data.id}/report`, {
+							method: 'POST',
+							body: JSON.stringify(body),
+						})
+						setReportRes(res)
+					}}
+					validationSchema={ReportSchema}
+					initialValues={{
+						category: null,
+						description: '',
+						_csrf: csrfToken,
+					}}
+				>
+					{({ errors, touched, values, setFieldValue }) => (
+						<Form>
+							<div className='mb-5'>
+								{reportRes && (
+									<div className='my-5'>
+										<Message type='error'>
+											<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
+											<ul className='list-disc'>
+												{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
+											</ul>
+										</Message>
+									</div>
+								)}
+								<h3 className='font-bold'>신고 구분</h3>
+								<p className='mb-1 text-sm text-gray-400'>해당되는 항목을 선택해주세요.</p>
+								{serverReportCats.map((el) => (
+									<div key={el}>
+										<label>
+											<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
+											{el}
+										</label>
+									</div>
+								))}
+								<div className='mt-1 text-xs font-light text-red-500'>
+									{errors.category && touched.category ? (errors.category as string) : null}
 								</div>
-							</Form>
-						)
-					}
+								{values.category && (
+									<>
+										{
+											{
+												[serverReportCats[1]]: (
+													<Message type='info'>
+														<h3 className='text-xl font-bold'>
+															본인 혹은 다른 사람이 위험에 처해 있나요?
+														</h3>
+														<p>당신은 소중한 사람입니다.</p>
+														<p className='list-item list-inside list-disc'>
+															자살예방상담전화 1393 | 청소년전화 1388
+														</p>
+													</Message>
+												),
+												[serverReportCats[3]]: (
+													<DMCA
+														values={values}
+														errors={errors}
+														touched={touched}
+														setFieldValue={setFieldValue}
+													/>
+												),
+												[serverReportCats[4]]: (
+													<Message type='warning'>
+														<h3 className='text-xl font-bold'>
+															디스코드 약관을 위반사항을 신고하시려고요?
+														</h3>
+														<p>
+															<a
+																className='text-blue-400'
+																target='_blank'
+																rel='noreferrer'
+																href='http://dis.gd/report'
+															>
+																디스코드 문의
+															</a>
+															를 통해 직접 디스코드에 신고하실 수도 있습니다.
+														</p>
+													</Message>
+												),
+											}[values.category]
+										}
+										{![serverReportCats[3]].includes(values.category) && (
+											<>
+												<h3 className='mt-2 font-bold'>설명</h3>
+												<p className='mb-1 text-sm text-gray-400'>최대한 자세하게 기재해주세요.</p>
+												<TextField
+													values={values}
+													errors={errors}
+													touched={touched}
+													setFieldValue={setFieldValue}
+												/>
+											</>
+										)}
+									</>
+								)}
+							</div>
+						</Form>
+					)}
 				</Formik>
-			}
+			)}
 		</Container>
 	)
 }
@@ -115,28 +165,28 @@ export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const data = await get.server.load(ctx.query.id)
 	const user = await get.Authorization(parsed?.token)
-	
+
 	return {
 		props: {
 			csrfToken: getToken(ctx.req, ctx.res),
 			data,
-			user: await get.user.load(user || '')
+			user: await get.user.load(user || ''),
 		},
 	}
 }
 
 interface ReportServerProps {
 	csrfToken: string
-  data: Server
-  user: User
+	data: Server
+	user: User
 }
 
 interface Context extends CsrfContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
 	id: string
 }
 
-export default ReportServer
\ No newline at end of file
+export default ReportServer
diff --git a/pages/servers/[id]/vote.tsx b/pages/servers/[id]/vote.tsx
index 2264acd..055e752 100644
--- a/pages/servers/[id]/vote.tsx
+++ b/pages/servers/[id]/vote.tsx
@@ -19,7 +19,6 @@ import { getJosaPicker } from 'josa'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
 
-
 const Container = dynamic(() => import('@components/Container'))
 const ServerIcon = dynamic(() => import('@components/ServerIcon'))
 const Button = dynamic(() => import('@components/Button'))
@@ -30,76 +29,119 @@ const Login = dynamic(() => import('@components/Login'))
 const Message = dynamic(() => import('@components/Message'))
 
 const VoteServer: NextPage<VoteServerProps> = ({ data, user, theme, csrfToken }) => {
-	const [ votingStatus, setVotingStatus ] = useState(0)
-	const [ result, setResult ] = useState<ResponseProps<{retryAfter?: number}>>(null)
+	const [votingStatus, setVotingStatus] = useState(0)
+	const [result, setResult] = useState<ResponseProps<{ retryAfter?: number }>>(null)
 	const router = useRouter()
-	if(!data?.id) return <NotFound />
-	if(!user) return <Login>
-		<NextSeo title={data.name} description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`} openGraph={{
-			images: [
-				{
-					url: KoreanbotsEndPoints.CDN.icon(data.id, { format: 'png', size: 256 }),
-					width: 256,
-					height: 256,
-					alt: 'Server Icon'
-				}
-			]
-		}} />
-	</Login>
-	
-	if((checkServerFlag(data.flags, 'trusted') || checkServerFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== router.query.id) router.push(`/servers/${data.vanity}/vote?csrfToken=${csrfToken}`)
+	if (!data?.id) return <NotFound />
+	if (!user)
+		return (
+			<Login>
+				<NextSeo
+					title={data.name}
+					description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`}
+					openGraph={{
+						images: [
+							{
+								url: KoreanbotsEndPoints.CDN.icon(data.id, { format: 'png', size: 256 }),
+								width: 256,
+								height: 256,
+								alt: 'Server Icon',
+							},
+						],
+					}}
+				/>
+			</Login>
+		)
+
+	if (
+		(checkServerFlag(data.flags, 'trusted') || checkServerFlag(data.flags, 'partnered')) &&
+		data.vanity &&
+		data.vanity !== router.query.id
+	)
+		router.push(`/servers/${data.vanity}/vote?csrfToken=${csrfToken}`)
 	return (
 		<Container paddingTop className='py-10'>
-			<NextSeo title={data.name} description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`} openGraph={{
-				images: [
-					{
-						url: KoreanbotsEndPoints.CDN.icon(data.id, { format: 'png', size: 256 }),
-						width: 256,
-						height: 256,
-						alt: 'Server Avatar'
-					}
-				]
-			}} />
-			{
-				data.state === 'blocked' ? <div className='pb-40'>
+			<NextSeo
+				title={data.name}
+				description={`한국 디스코드 리스트에서 ${data.name}에 투표하세요.`}
+				openGraph={{
+					images: [
+						{
+							url: KoreanbotsEndPoints.CDN.icon(data.id, { format: 'png', size: 256 }),
+							width: 256,
+							height: 256,
+							alt: 'Server Avatar',
+						},
+					],
+				}}
+			/>
+			{data.state === 'blocked' ? (
+				<div className='pb-40'>
 					<Message type='error'>
 						<h2 className='text-lg font-extrabold'>해당 서버는 관리자에 의해 삭제되었습니다.</h2>
 					</Message>
-				</div> : <>
+				</div>
+			) : (
+				<>
 					<Advertisement />
 					<Link href={makeServerURL(data)} className='text-blue-500 hover:opacity-80'>
-						<i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.name}</strong>{getJosaPicker('로')(data.name)}돌아가기
+						<i className='fas fa-arrow-left mb-3 mt-3' /> <strong>{data.name}</strong>
+						{getJosaPicker('로')(data.name)}돌아가기
 					</Link>
 					<Segment className='mb-16 py-8'>
 						<div className='text-center'>
-							<ServerIcon id={data.id} className='mx-auto w-52 h-52 bg-white mb-4 rounded-full' />
-							<Tag text={<span><i className='fas fa-heart text-red-600' /> {data.votes}</span>} dark />
-							<h1 className='text-3xl font-bold mt-3'>{data.name}</h1>
+							<ServerIcon id={data.id} className='mx-auto mb-4 h-52 w-52 rounded-full bg-white' />
+							<Tag
+								text={
+									<span>
+										<i className='fas fa-heart text-red-600' /> {data.votes}
+									</span>
+								}
+								dark
+							/>
+							<h1 className='mt-3 text-3xl font-bold'>{data.name}</h1>
 							<h4 className='text-md mt-1'>12시간마다 다시 투표하실 수 있습니다.</h4>
-							<div className='inline-block mt-2'>
-								{
-									votingStatus === 0 ? <Button onClick={()=> setVotingStatus(1)}>
-										<><i className='far fa-heart text-red-600'/> 하트 추가</>
-									</Button> 
-										: votingStatus === 1 ? <Captcha dark={theme === 'dark'} onVerify={async (key) => {
-											const res = await Fetch<{ retryAfter: number }|unknown>(`/servers/${data.id}/vote`, { method: 'POST', body: JSON.stringify({ _csrf: csrfToken, _captcha: key }) })
+							<div className='mt-2 inline-block'>
+								{votingStatus === 0 ? (
+									<Button onClick={() => setVotingStatus(1)}>
+										<>
+											<i className='far fa-heart text-red-600' /> 하트 추가
+										</>
+									</Button>
+								) : votingStatus === 1 ? (
+									<Captcha
+										dark={theme === 'dark'}
+										onVerify={async (key) => {
+											const res = await Fetch<{ retryAfter: number } | unknown>(
+												`/servers/${data.id}/vote`,
+												{
+													method: 'POST',
+													body: JSON.stringify({ _csrf: csrfToken, _captcha: key }),
+												}
+											)
 											setResult(res)
 											setVotingStatus(2)
 										}}
-										/>
-											: result.code === 200 ? <h2 className='text-2xl font-bold'>해당 서버에 투표했습니다!</h2>
-												: result.code === 429 ? <>
-													<h2 className='text-2xl font-bold'>이미 해당 서버에 투표하였습니다.</h2>
-													<h4 className='text-md mt-1'>{Day(+new Date() + result.data?.retryAfter).fromNow()} 다시 투표하실 수 있습니다.</h4>
-												</>
-													: <p>{result.message}</p>
-								}
+									/>
+								) : result.code === 200 ? (
+									<h2 className='text-2xl font-bold'>해당 서버에 투표했습니다!</h2>
+								) : result.code === 429 ? (
+									<>
+										<h2 className='text-2xl font-bold'>이미 해당 서버에 투표하였습니다.</h2>
+										<h4 className='text-md mt-1'>
+											{Day(+new Date() + result.data?.retryAfter).fromNow()} 다시 투표하실 수
+											있습니다.
+										</h4>
+									</>
+								) : (
+									<p>{result.message}</p>
+								)}
 							</div>
-                    
 						</div>
 					</Segment>
-					<Advertisement /></>
-			}
+					<Advertisement />
+				</>
+			)}
 		</Container>
 	)
 }
@@ -108,30 +150,30 @@ export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const data = await get.server.load(ctx.query.id)
 	const user = await get.Authorization(parsed?.token)
-	
+
 	return {
 		props: {
 			csrfToken: getToken(ctx.req, ctx.res),
 			data,
-			user: await get.user.load(user || '')
+			user: await get.user.load(user || ''),
 		},
 	}
 }
 
 interface VoteServerProps {
 	csrfToken: string
-  vote: boolean
-  data: Server
-  user: User
+	vote: boolean
+	data: Server
+	user: User
 	theme: Theme
 }
 
 interface Context extends CsrfContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
 	id: string
 }
 
-export default VoteServer
\ No newline at end of file
+export default VoteServer
diff --git a/pages/servers/categories/[category].tsx b/pages/servers/categories/[category].tsx
index 6dab93b..b4f0c2e 100644
--- a/pages/servers/categories/[category].tsx
+++ b/pages/servers/categories/[category].tsx
@@ -15,48 +15,71 @@ const Container = dynamic(() => import('@components/Container'))
 const Paginator = dynamic(() => import('@components/Paginator'))
 
 const Category: NextPage<CategoryProps> = ({ data, query }) => {
-	if(!data || data.data.length === 0 || data.totalPage < Number(query.page)) return <NotFound message={data?.data.length === 0 ? '해당 카테고리에 해당되는 서버가 존재하지 않습니다.' : null} />
-	return <>
-		<Hero type='servers' header={`${query.category} 카테고리 서버들`} description={`다양한 "${query.category}" 카테고리의 서버들을 만나보세요.`} />
-		<Container>
-			<Advertisement />
-			<ResponsiveGrid>
-				{
-					data.data.map(server => <ServerCard type='list' key={server.id} server={server} /> )
+	if (!data || data.data.length === 0 || data.totalPage < Number(query.page))
+		return (
+			<NotFound
+				message={
+					data?.data.length === 0 ? '해당 카테고리에 해당되는 서버가 존재하지 않습니다.' : null
 				}
-			</ResponsiveGrid>
-			<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/servers/categories/${query.category}`} />
-			<Advertisement />
-		</Container>
-	</>
+			/>
+		)
+	return (
+		<>
+			<Hero
+				type='servers'
+				header={`${query.category} 카테고리 서버들`}
+				description={`다양한 "${query.category}" 카테고리의 서버들을 만나보세요.`}
+			/>
+			<Container>
+				<Advertisement />
+				<ResponsiveGrid>
+					{data.data.map((server) => (
+						<ServerCard type='list' key={server.id} server={server} />
+					))}
+				</ResponsiveGrid>
+				<Paginator
+					totalPage={data.totalPage}
+					currentPage={data.currentPage}
+					pathname={`/servers/categories/${query.category}`}
+				/>
+				<Advertisement />
+			</Container>
+		</>
+	)
 }
 
 export const getServerSideProps = async (ctx: Context) => {
 	let data: List<Server>
-	if(!ctx.query.page) ctx.query.page = '1'
-	const validate = await serverCategoryListArgumentSchema.validate(ctx.query).then(el => el).catch(() => null)
-	if(!validate || isNaN(Number(ctx.query.page))) data = null
-	else data = await get.serverList.category.load(JSON.stringify({ page: Number(ctx.query.page), category: ctx.query.category }))
+	if (!ctx.query.page) ctx.query.page = '1'
+	const validate = await serverCategoryListArgumentSchema
+		.validate(ctx.query)
+		.then((el) => el)
+		.catch(() => null)
+	if (!validate || isNaN(Number(ctx.query.page))) data = null
+	else
+		data = await get.serverList.category.load(
+			JSON.stringify({ page: Number(ctx.query.page), category: ctx.query.category })
+		)
 	return {
 		props: {
 			data,
-			query: ctx.query
-		}
+			query: ctx.query,
+		},
 	}
 }
 
 interface CategoryProps {
-  data: List<Server>
-  query: URLQuery
+	data: List<Server>
+	query: URLQuery
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery  
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  category: string
-  page?: string
+	category: string
+	page?: string
 }
 
-export default Category
\ No newline at end of file
+export default Category
diff --git a/pages/servers/categories/index.tsx b/pages/servers/categories/index.tsx
index bb2b619..a4417c4 100644
--- a/pages/servers/categories/index.tsx
+++ b/pages/servers/categories/index.tsx
@@ -4,27 +4,39 @@ import { NextSeo } from 'next-seo'
 
 import { serverCategories, serverCategoryIcon } from '@utils/Constants'
 
-
 const Container = dynamic(() => import('@components/Container'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const Tag = dynamic(() => import('@components/Tag'))
 const Segment = dynamic(() => import('@components/Segment'))
 
-const Categories:NextPage = () => {
-	return <Container paddingTop>
-		<NextSeo title='전체 카테고리' description='한국 디스코드 리스트 서버들의 전체 카테고리입니다.' />
-		<h1 className='text-2xl font-bold mt-2 mb-5'>전체 카테고리</h1>
-		<Segment className='mb-10'>
-			<div className='text-center flex flex-wrap mt-1.5'>
-				{
-					serverCategories.map(t => <Tag key={t} text={<>
-						<i className={serverCategoryIcon[t]} /> {t}
-					</>} href={`/servers/categories/${t}`} dark bigger /> )
-				}
-			</div>
-		</Segment>
-		<Advertisement />
-	</Container>
+const Categories: NextPage = () => {
+	return (
+		<Container paddingTop>
+			<NextSeo
+				title='전체 카테고리'
+				description='한국 디스코드 리스트 서버들의 전체 카테고리입니다.'
+			/>
+			<h1 className='mb-5 mt-2 text-2xl font-bold'>전체 카테고리</h1>
+			<Segment className='mb-10'>
+				<div className='mt-1.5 flex flex-wrap text-center'>
+					{serverCategories.map((t) => (
+						<Tag
+							key={t}
+							text={
+								<>
+									<i className={serverCategoryIcon[t]} /> {t}
+								</>
+							}
+							href={`/servers/categories/${t}`}
+							dark
+							bigger
+						/>
+					))}
+				</div>
+			</Segment>
+			<Advertisement />
+		</Container>
+	)
 }
 
-export default Categories
\ No newline at end of file
+export default Categories
diff --git a/pages/servers/index.tsx b/pages/servers/index.tsx
index 66ff0ff..1793f33 100644
--- a/pages/servers/index.tsx
+++ b/pages/servers/index.tsx
@@ -12,41 +12,46 @@ const Paginator = dynamic(() => import('@components/Paginator'))
 const Hero = dynamic(() => import('@components/Hero'))
 
 const ServerIndex: NextPage<ServerIndexProps> = ({ votes, trusted }) => {
-	return <>
-		<Hero type='servers' />
-		<Container className='pb-10'>
-			<Advertisement />
-			<h1 className='text-3xl font-bold mt-10 mb-2'>
-				<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹
-			</h1>
-			<p className='text-base'>하트를 많이 받은 서버들의 순위입니다!</p>
-			<ResponsiveGrid>
-				{
-					votes.data.map(server=> <ServerCard type='list' key={server.id} server={server} />)
-				}
-			</ResponsiveGrid>
-			<Paginator totalPage={votes.totalPage} currentPage={votes.currentPage} pathname='/servers/list/votes' />
-			<Advertisement />
-			<h1 className='text-3xl font-bold mb-2'>
-				<i className='fa fa-check mr-3 mt-10 text-emerald-500' /> 신뢰된 서버
-			</h1>
-			<p className='text-base'>한국 디스코드 리스트에서 인증받은 신뢰할 수 있는 서버들입니다!!</p>
-			<ResponsiveGrid>
-				{
-					trusted.data.slice(0, 4).map(server=> <ServerCard type='list' key={server.id} server={server} />)
-				}
-			</ResponsiveGrid>
-			<Advertisement />
-		</Container>
-	</>
+	return (
+		<>
+			<Hero type='servers' />
+			<Container className='pb-10'>
+				<Advertisement />
+				<h1 className='mb-2 mt-10 text-3xl font-bold'>
+					<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹
+				</h1>
+				<p className='text-base'>하트를 많이 받은 서버들의 순위입니다!</p>
+				<ResponsiveGrid>
+					{votes.data.map((server) => (
+						<ServerCard type='list' key={server.id} server={server} />
+					))}
+				</ResponsiveGrid>
+				<Paginator
+					totalPage={votes.totalPage}
+					currentPage={votes.currentPage}
+					pathname='/servers/list/votes'
+				/>
+				<Advertisement />
+				<h1 className='mb-2 text-3xl font-bold'>
+					<i className='fa fa-check mr-3 mt-10 text-emerald-500' /> 신뢰된 서버
+				</h1>
+				<p className='text-base'>한국 디스코드 리스트에서 인증받은 신뢰할 수 있는 서버들입니다!!</p>
+				<ResponsiveGrid>
+					{trusted.data.slice(0, 4).map((server) => (
+						<ServerCard type='list' key={server.id} server={server} />
+					))}
+				</ResponsiveGrid>
+				<Advertisement />
+			</Container>
+		</>
+	)
 }
 
-export const getServerSideProps = async() => {
+export const getServerSideProps = async () => {
 	const votes = await Query.get.serverList.votes.load(1)
 	const trusted = await Query.get.serverList.trusted.load(1)
 
-	return { props: { votes,trusted }}
-
+	return { props: { votes, trusted } }
 }
 
 interface ServerIndexProps {
diff --git a/pages/servers/list/votes.tsx b/pages/servers/list/votes.tsx
index 07c98fc..b825543 100644
--- a/pages/servers/list/votes.tsx
+++ b/pages/servers/list/votes.tsx
@@ -4,7 +4,7 @@ import dynamic from 'next/dynamic'
 import { ParsedUrlQuery } from 'querystring'
 
 import { Server, List } from '@types'
-import { get }from '@utils/Query'
+import { get } from '@utils/Query'
 
 import NotFound from '../../404'
 import { PageCount } from '@utils/Yup'
@@ -16,40 +16,49 @@ const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const Container = dynamic(() => import('@components/Container'))
 const Paginator = dynamic(() => import('@components/Paginator'))
 
-const Votes:NextPage<VotesProps> = ({ data }) => {
+const Votes: NextPage<VotesProps> = ({ data }) => {
 	const router = useRouter()
-	if(!data || data.data.length === 0 || data.totalPage < Number(router.query.page)) return <NotFound />
-	return <>
-		<Hero type='servers' header='하트 랭킹' description='하트를 많이 받은 서버들의 순위입니다!'/>
-		<section id='list'>
-			<Container className='pb-10'>
-				<Advertisement />
-				<ResponsiveGrid>
-					{
-						data.data.map(server => <ServerCard type='list' key={server.id} server={server} /> )
-					}
-				</ResponsiveGrid>
-				<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/servers/list/votes' />
-				<Advertisement />
-			</Container>
-		</section>
-	</>
+	if (!data || data.data.length === 0 || data.totalPage < Number(router.query.page))
+		return <NotFound />
+	return (
+		<>
+			<Hero type='servers' header='하트 랭킹' description='하트를 많이 받은 서버들의 순위입니다!' />
+			<section id='list'>
+				<Container className='pb-10'>
+					<Advertisement />
+					<ResponsiveGrid>
+						{data.data.map((server) => (
+							<ServerCard type='list' key={server.id} server={server} />
+						))}
+					</ResponsiveGrid>
+					<Paginator
+						totalPage={data.totalPage}
+						currentPage={data.currentPage}
+						pathname='/servers/list/votes'
+					/>
+					<Advertisement />
+				</Container>
+			</section>
+		</>
+	)
 }
-export const getServerSideProps = async (ctx:Context) => {
+export const getServerSideProps = async (ctx: Context) => {
 	let data: List<Server>
-	if(!ctx.query.page) ctx.query.page = '1'
-	const validate = await PageCount.validate(ctx.query.page).then(el => el).catch(() => null)
-	if(!validate || isNaN(Number(ctx.query.page))) data = null
+	if (!ctx.query.page) ctx.query.page = '1'
+	const validate = await PageCount.validate(ctx.query.page)
+		.then((el) => el)
+		.catch(() => null)
+	if (!validate || isNaN(Number(ctx.query.page))) data = null
 	else data = await get.serverList.votes.load(Number(ctx.query.page))
 	return {
 		props: {
-			data
-		}
+			data,
+		},
 	}
 }
 
 interface VotesProps {
-  data: List<Server>
+	data: List<Server>
 }
 
 interface Context extends NextPageContext {
diff --git a/pages/servers/search.tsx b/pages/servers/search.tsx
index 1ab05d5..7222eb5 100644
--- a/pages/servers/search.tsx
+++ b/pages/servers/search.tsx
@@ -8,7 +8,6 @@ import { get } from '@utils/Query'
 import { SearchQuerySchema } from '@utils/Yup'
 import { KoreanbotsEndPoints } from '@utils/Constants'
 
-
 const Hero = dynamic(() => import('@components/Hero'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const ServerCard = dynamic(() => import('@components/ServerCard'))
@@ -18,75 +17,96 @@ const Paginator = dynamic(() => import('@components/Paginator'))
 const LongButton = dynamic(() => import('@components/LongButton'))
 const Redirect = dynamic(() => import('@components/Redirect'))
 
-const SearchComponent: FC<{data: List<Server>, query: URLQuery }> = ({ data, query }) => {
-	return <div className='py-10'>
-		{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
-			<>
-				<ResponsiveGrid>
-					{
-						data.data.map(el => <ServerCard key={el.id} type='list' server={el as Server} /> )
-					}
-				</ResponsiveGrid>
-				<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/search' searchParams={query} />
-			</>
-		}
-	</div>
+const SearchComponent: FC<{ data: List<Server>; query: URLQuery }> = ({ data, query }) => {
+	return (
+		<div className='py-10'>
+			{!data || data.data.length === 0 ? (
+				<h1 className='py-20 text-center text-3xl font-bold'>검색 결과가 없습니다.</h1>
+			) : (
+				<>
+					<ResponsiveGrid>
+						{data.data.map((el) => (
+							<ServerCard key={el.id} type='list' server={el as Server} />
+						))}
+					</ResponsiveGrid>
+					<Paginator
+						totalPage={data.totalPage}
+						currentPage={data.currentPage}
+						pathname='/search'
+						searchParams={query}
+					/>
+				</>
+			)}
+		</div>
+	)
 }
-const Search:NextPage<SearchProps> = ({ serverData, query }) => {
-	if(!query?.q) return <Redirect text={false} to='/' />
-	return <>
-		<Hero type='servers' header={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
-		<Container>
-			<section id='list'>
-				<Advertisement />
-				<h1 className='text-4xl font-bold'>서버</h1>
-				<SearchComponent data={serverData} query={query} />
-				<h1 className='text-2xl font-bold py-10'>봇을 찾으시나요?</h1>
-				<LongButton center href={KoreanbotsEndPoints.URL.searchBot(query.q)}>봇 검색 결과 보기</LongButton>
-				<Advertisement />
-			</section>
-		</Container>
-	</>
+const Search: NextPage<SearchProps> = ({ serverData, query }) => {
+	if (!query?.q) return <Redirect text={false} to='/' />
+	return (
+		<>
+			<Hero
+				type='servers'
+				header={`"${query.q}" 검색 결과`}
+				description={`'${query.q}' 에 대한 검색 결과입니다.`}
+			/>
+			<Container>
+				<section id='list'>
+					<Advertisement />
+					<h1 className='text-4xl font-bold'>서버</h1>
+					<SearchComponent data={serverData} query={query} />
+					<h1 className='py-10 text-2xl font-bold'>봇을 찾으시나요?</h1>
+					<LongButton center href={KoreanbotsEndPoints.URL.searchBot(query.q)}>
+						봇 검색 결과 보기
+					</LongButton>
+					<Advertisement />
+				</section>
+			</Container>
+		</>
+	)
 }
 
-export const getServerSideProps = async(ctx: Context) => {
-	if(ctx.query.query && !ctx.query.q) ctx.query.q = ctx.query.query
-	if(!ctx.query?.q) {
+export const getServerSideProps = async (ctx: Context) => {
+	if (ctx.query.query && !ctx.query.q) ctx.query.q = ctx.query.query
+	if (!ctx.query?.q) {
 		return {
 			redirect: {
 				destination: '/',
-				permanent: true
+				permanent: true,
 			},
-			props: {}
+			props: {},
 		}
 	}
-	if(!ctx.query.page) ctx.query.page = '1'
-	const validate = await SearchQuerySchema.validate(ctx.query).then(el => el).catch(() => null)
-	if(!validate || isNaN(Number(ctx.query.page))) return { props: { query: ctx.query } }
+	if (!ctx.query.page) ctx.query.page = '1'
+	const validate = await SearchQuerySchema.validate(ctx.query)
+		.then((el) => el)
+		.catch(() => null)
+	if (!validate || isNaN(Number(ctx.query.page))) return { props: { query: ctx.query } }
 	else {
 		return {
 			props: {
-				serverData: await get.serverList.search.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page })).then(el => el).catch(() => null),
-				query: ctx.query
-			}
+				serverData: await get.serverList.search
+					.load(JSON.stringify({ query: ctx.query.q || '', page: ctx.query.page }))
+					.then((el) => el)
+					.catch(() => null),
+				query: ctx.query,
+			},
 		}
 	}
 }
 
-
 interface SearchProps {
-  serverData?: List<Server>
-  query: URLQuery
+	serverData?: List<Server>
+	query: URLQuery
 }
 
 interface Context extends NextPageContext {
-  query: URLQuery  
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
-  q?: string
+	q?: string
 	query?: string
-  page?: string
+	page?: string
 }
 
-export default Search
\ No newline at end of file
+export default Search
diff --git a/pages/tos.tsx b/pages/tos.tsx
index 0ebf258..969e523 100644
--- a/pages/tos.tsx
+++ b/pages/tos.tsx
@@ -3,11 +3,9 @@ import dynamic from 'next/dynamic'
 
 import { SpecialEndPoints } from '@utils/Constants'
 
-
-const Docs = dynamic(()=> import('@components/Docs'))
+const Docs = dynamic(() => import('@components/Docs'))
 const Markdown = dynamic(() => import('@components/Markdown'))
 
-
 const ToS: NextPage<ToSProps> = ({ content }) => {
 	return (
 		<Docs
@@ -28,10 +26,9 @@ export const getStaticProps: GetStaticProps<ToSProps> = async () => {
 	const json = await res.json()
 	return {
 		props: {
-			content: Buffer.from(json.content, 'base64').toString('utf-8')
-		}
+			content: Buffer.from(json.content, 'base64').toString('utf-8'),
+		},
 	}
 }
 
 export default ToS
-
diff --git a/pages/users/[id]/index.tsx b/pages/users/[id]/index.tsx
index e5a503d..499ab6b 100644
--- a/pages/users/[id]/index.tsx
+++ b/pages/users/[id]/index.tsx
@@ -1,4 +1,3 @@
-
 import { NextPage, NextPageContext } from 'next'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
@@ -33,51 +32,57 @@ const Users: NextPage<UserProps> = ({ user, data }) => {
 		<Container paddingTop className='py-10'>
 			<NextSeo
 				title={data.globalName}
-				description={data.bots.length === 0 ? `${data.globalName}님의 프로필입니다.` : josa(
-					`${(data.bots as Bot[])
-						.slice(0, 5)
-						.map(el => el.name)
-						.join(', ')}#{을} 제작합니다.`
-				)}
+				description={
+					data.bots.length === 0
+						? `${data.globalName}님의 프로필입니다.`
+						: josa(
+								`${(data.bots as Bot[])
+									.slice(0, 5)
+									.map((el) => el.name)
+									.join(', ')}#{을} 제작합니다.`
+						  )
+				}
 				openGraph={{
-					images: [{
-						url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
-						width: 256,
-						height: 256,
-						alt: 'User Avatar'
-					}]
+					images: [
+						{
+							url: KoreanbotsEndPoints.CDN.avatar(data.id, { format: 'png', size: 256 }),
+							width: 256,
+							height: 256,
+							alt: 'User Avatar',
+						},
+					],
 				}}
 			/>
 			<div className='lg:flex'>
-				<div className='w-3/5 mx-auto text-center lg:w-1/6'>
-					<DiscordAvatar
-						size={512}
-						userID={data.id}
-						className='w-full rounded-full'
-					/>
+				<div className='mx-auto w-3/5 text-center lg:w-1/6'>
+					<DiscordAvatar size={512} userID={data.id} className='w-full rounded-full' />
 				</div>
-				<div className='grow px-5 py-10 w-full text-center lg:w-5/12 lg:text-left'>
+				<div className='w-full grow px-5 py-10 text-center lg:w-5/12 lg:text-left'>
 					<div>
-						{
-							(data.tag !== '0') ? <div className='lg:flex mt-3 mb-1 '>
+						{data.tag !== '0' ? (
+							<div className='mb-1 mt-3 lg:flex '>
 								<h1 className='text-4xl font-bold'>{data.username}</h1>
-								<span className='ml-0.5 text-gray-400 text-3xl font-semibold mt-1'>#{data.tag}</span>
-							</div> : <div className='lg:flex mt-3 mb-1 flex-col'>
-								<h1 className='text-4xl font-bold'>{data.globalName}</h1>
-								<span className='text-gray-400 text-2xl font-semibold mt-1'>@{data.username}</span>
+								<span className='ml-0.5 mt-1 text-3xl font-semibold text-gray-400'>
+									#{data.tag}
+								</span>
 							</div>
-						}
-						<div className='badges flex mb-2 justify-center lg:justify-start'>
+						) : (
+							<div className='mb-1 mt-3 flex-col lg:flex'>
+								<h1 className='text-4xl font-bold'>{data.globalName}</h1>
+								<span className='mt-1 text-2xl font-semibold text-gray-400'>@{data.username}</span>
+							</div>
+						)}
+						<div className='badges mb-2 flex justify-center lg:justify-start'>
 							{checkUserFlag(data.flags, 'staff') && (
 								<Tooltip text='한국 디스코드 리스트 스탭입니다.' direction='left'>
-									<div className='pr-5 text-koreanbots-blue text-2xl'>
+									<div className='pr-5 text-2xl text-koreanbots-blue'>
 										<i className='fas fa-hammer' />
 									</div>
 								</Tooltip>
 							)}
 							{checkUserFlag(data.flags, 'bughunter') && (
 								<Tooltip text='버그를 많이 제보해주신 분입니다.' direction='left'>
-									<div className='pr-5 text-emerald-500 text-2xl'>
+									<div className='pr-5 text-2xl text-emerald-500'>
 										<i className='fas fa-bug' />
 									</div>
 								</Tooltip>
@@ -95,43 +100,46 @@ const Users: NextPage<UserProps> = ({ user, data }) => {
 								href={`https://github.com/${data.github}`}
 							/>
 						)}
-						{
-							user?.id !== data.id && <div className='list-none mt-2'>
+						{user?.id !== data.id && (
+							<div className='mt-2 list-none'>
 								<Link
 									href={`/users/${router.query.id}/report`}
-									className='text-red-600 hover:underline cursor-pointer'
-									aria-hidden='true'>
-
-									<i className='far fa-flag' />신고하기
+									className='cursor-pointer text-red-600 hover:underline'
+									aria-hidden='true'
+								>
+									<i className='far fa-flag' />
+									신고하기
 								</Link>
 							</div>
-						}
+						)}
 					</div>
 				</div>
 			</div>
 			<Divider />
 			<h2 className='mt-8 pb-4 text-3xl font-bold'>소유한 봇</h2>
-			
-			{data.bots.length === 0 ? <h2 className='text-xl'>소유한 봇이 없습니다.</h2> : 
+
+			{data.bots.length === 0 ? (
+				<h2 className='text-xl'>소유한 봇이 없습니다.</h2>
+			) : (
 				<ResponsiveGrid>
-					{
-						(data.bots as Bot[]).filter(el => el.state !== 'blocked').map((bot: Bot) => (
+					{(data.bots as Bot[])
+						.filter((el) => el.state !== 'blocked')
+						.map((bot: Bot) => (
 							<BotCard key={bot.id} bot={bot} />
-						))
-					}
+						))}
 				</ResponsiveGrid>
-			}
-			
+			)}
+
 			<h2 className='py-4 text-3xl font-bold'>소유한 서버</h2>
-			{data.servers.length === 0 ? <h2 className='text-xl'>소유한 서버가 없습니다.</h2> :
+			{data.servers.length === 0 ? (
+				<h2 className='text-xl'>소유한 서버가 없습니다.</h2>
+			) : (
 				<ResponsiveGrid>
-					{
-						(data.servers as Server[]).map((server: Server) => (
-							<ServerCard type='list' key={server.id} server={server} />
-						))
-					}
+					{(data.servers as Server[]).map((server: Server) => (
+						<ServerCard type='list' key={server.id} server={server} />
+					))}
 				</ResponsiveGrid>
-			}
+			)}
 			<Advertisement />
 		</Container>
 	)
@@ -139,10 +147,17 @@ const Users: NextPage<UserProps> = ({ user, data }) => {
 
 export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
-	
+
 	const user = (await get.Authorization(parsed?.token)) || ''
 	const data = await get.user.load(ctx.query.id)
-	return { props: { user: (await get.user.load(user)) || {}, data, date: Number(SnowflakeUtil.deconstruct(data?.id ?? '0')?.timestamp), csrfToken: getToken(ctx.req, ctx.res) } }
+	return {
+		props: {
+			user: (await get.user.load(user)) || {},
+			data,
+			date: Number(SnowflakeUtil.deconstruct(data?.id ?? '0')?.timestamp),
+			csrfToken: getToken(ctx.req, ctx.res),
+		},
+	}
 }
 
 interface UserProps {
diff --git a/pages/users/[id]/report.tsx b/pages/users/[id]/report.tsx
index 268f77d..0460c6b 100644
--- a/pages/users/[id]/report.tsx
+++ b/pages/users/[id]/report.tsx
@@ -19,97 +19,138 @@ import { getJosaPicker } from 'josa'
 import { reportCats } from '@utils/Constants'
 import { NextSeo } from 'next-seo'
 
-
 const Container = dynamic(() => import('@components/Container'))
 const Message = dynamic(() => import('@components/Message'))
 const Login = dynamic(() => import('@components/Login'))
 
 const ReportUser: NextPage<ReportUserProps> = ({ data, user, csrfToken }) => {
-	const [ reportRes, setReportRes ] = useState<ResponseProps<unknown>>(null)
-	if(!data?.id) return <NotFound />
-	if(!user) return <Login>
-		<NextSeo title='신고하기' />
-	</Login>
-	if(user?.id === data.id) return <>
-		<div className='flex items-center justify-center h-screen select-none'>
-			<div className='container mx-auto px-20 md:text-left text-center'>
-				<h1 className='text-6xl font-semibold'>저런..!</h1>
-				<p className='text-gray-400 text-lg mt-2'>유감스럽게도 자기 자신은 신고할 수 없습니다.</p>
-			</div>
-		</div>
-	</>
+	const [reportRes, setReportRes] = useState<ResponseProps<unknown>>(null)
+	if (!data?.id) return <NotFound />
+	if (!user)
+		return (
+			<Login>
+				<NextSeo title='신고하기' />
+			</Login>
+		)
+	if (user?.id === data.id)
+		return (
+			<>
+				<div className='flex h-screen select-none items-center justify-center'>
+					<div className='container mx-auto px-20 text-center md:text-left'>
+						<h1 className='text-6xl font-semibold'>저런..!</h1>
+						<p className='mt-2 text-lg text-gray-400'>
+							유감스럽게도 자기 자신은 신고할 수 없습니다.
+						</p>
+					</div>
+				</div>
+			</>
+		)
 	return (
 		<Container paddingTop className='py-10'>
 			<NextSeo title={`${data.globalName} 신고하기`} />
 			<Link href={makeUserURL(data)} className='text-blue-500 hover:opacity-80'>
-				<i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.globalName}</strong>{getJosaPicker('로')(data.globalName)}돌아가기
+				<i className='fas fa-arrow-left mb-3 mt-3' /> <strong>{data.globalName}</strong>
+				{getJosaPicker('로')(data.globalName)}돌아가기
 			</Link>
-			{
-				reportRes?.code === 200 ? <Message type='success'>
+			{reportRes?.code === 200 ? (
+				<Message type='success'>
 					<h2 className='text-lg font-semibold'>성공적으로 제출하였습니다!</h2>
-					<p>더 자세한 설명이 필요할 수 있습니다. <strong>반드시 <a className='text-blue-600 hover:text-blue-500' href='/discord'>공식 디스코드</a>에 참여해주세요!!</strong></p>
-				</Message> : <Formik onSubmit={async (body) => {
-					const res = await Fetch(`/users/${data.id}/report`, { method: 'POST', body: JSON.stringify(body) })
-					setReportRes(res)
-				}} validationSchema={ReportSchema} initialValues={{
-					category: null,
-					description: '',
-					_csrf: csrfToken
-				}}>
-					{
-						({ errors, touched, values, setFieldValue }) => (
-							<Form>
-								<div className='mb-5'>
-									{
-										reportRes && <div className='my-5'>
-											<Message type='error'>
-												<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
-												<ul className='list-disc'>
-													{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
-												</ul>
-											</Message>
-										</div>
-									}
-									<h3 className='font-bold'>신고 구분</h3>
-									<p className='text-gray-400 text-sm mb-1'>해당되는 항목을 선택해주세요.</p>
-									{
-										reportCats.map(el => 
-											<div key={el}>
-												<label>
-													<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
-													{el}
-												</label>
-											</div>
-										)
-									}
-									<div className='mt-1 text-red-500 text-xs font-light'>{errors.category && touched.category ? errors.category as string: null}</div>
-									{
-										values.category && <>
-											{
-												values.category === '오픈소스 라이선스, 저작권 위반 등 권리 침해' ? <DMCA values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} /> :
-													values.category === '괴롭힘, 모욕, 명예훼손' ? <>
-														<Message type='info'>
-															<h3 className='font-bold text-xl'>본인 혹은 다른 사람이 위험에 처해 있나요?</h3>
-															<p>당신은 소중한 사람입니다.</p>
-															<p className='list-disc list-item list-inside'>자살예방상담전화 1393 | 청소년전화 1388</p>
-														</Message>
-													</> : ''
-											}
-											{
-												!['오픈소스 라이선스, 저작권 위반 등 권리 침해'].includes(values.category) && <>
-													<h3 className='font-bold mt-2'>설명</h3>
-													<p className='text-gray-400 text-sm mb-1'>최대한 자세하게 기재해주세요.</p>
-													<TextField values={values} errors={errors} touched={touched} setFieldValue={setFieldValue} />
-												</>
-											}
-										</>
-									}
+					<p>
+						더 자세한 설명이 필요할 수 있습니다.{' '}
+						<strong>
+							반드시{' '}
+							<a className='text-blue-600 hover:text-blue-500' href='/discord'>
+								공식 디스코드
+							</a>
+							에 참여해주세요!!
+						</strong>
+					</p>
+				</Message>
+			) : (
+				<Formik
+					onSubmit={async (body) => {
+						const res = await Fetch(`/users/${data.id}/report`, {
+							method: 'POST',
+							body: JSON.stringify(body),
+						})
+						setReportRes(res)
+					}}
+					validationSchema={ReportSchema}
+					initialValues={{
+						category: null,
+						description: '',
+						_csrf: csrfToken,
+					}}
+				>
+					{({ errors, touched, values, setFieldValue }) => (
+						<Form>
+							<div className='mb-5'>
+								{reportRes && (
+									<div className='my-5'>
+										<Message type='error'>
+											<h2 className='text-lg font-semibold'>{reportRes.message}</h2>
+											<ul className='list-disc'>
+												{reportRes.errors?.map((el, n) => <li key={n}>{el}</li>)}
+											</ul>
+										</Message>
+									</div>
+								)}
+								<h3 className='font-bold'>신고 구분</h3>
+								<p className='mb-1 text-sm text-gray-400'>해당되는 항목을 선택해주세요.</p>
+								{reportCats.map((el) => (
+									<div key={el}>
+										<label>
+											<Field type='radio' name='category' value={el} className='mr-1.5 py-2' />
+											{el}
+										</label>
+									</div>
+								))}
+								<div className='mt-1 text-xs font-light text-red-500'>
+									{errors.category && touched.category ? (errors.category as string) : null}
 								</div>
-							</Form>
-						)
-					}
+								{values.category && (
+									<>
+										{values.category === '오픈소스 라이선스, 저작권 위반 등 권리 침해' ? (
+											<DMCA
+												values={values}
+												errors={errors}
+												touched={touched}
+												setFieldValue={setFieldValue}
+											/>
+										) : values.category === '괴롭힘, 모욕, 명예훼손' ? (
+											<>
+												<Message type='info'>
+													<h3 className='text-xl font-bold'>
+														본인 혹은 다른 사람이 위험에 처해 있나요?
+													</h3>
+													<p>당신은 소중한 사람입니다.</p>
+													<p className='list-item list-inside list-disc'>
+														자살예방상담전화 1393 | 청소년전화 1388
+													</p>
+												</Message>
+											</>
+										) : (
+											''
+										)}
+										{!['오픈소스 라이선스, 저작권 위반 등 권리 침해'].includes(values.category) && (
+											<>
+												<h3 className='mt-2 font-bold'>설명</h3>
+												<p className='mb-1 text-sm text-gray-400'>최대한 자세하게 기재해주세요.</p>
+												<TextField
+													values={values}
+													errors={errors}
+													touched={touched}
+													setFieldValue={setFieldValue}
+												/>
+											</>
+										)}
+									</>
+								)}
+							</div>
+						</Form>
+					)}
 				</Formik>
-			}
+			)}
 		</Container>
 	)
 }
@@ -118,28 +159,28 @@ export const getServerSideProps = async (ctx: Context) => {
 	const parsed = parseCookie(ctx.req)
 	const data = await get.user.load(ctx.query.id)
 	const user = await get.Authorization(parsed?.token)
-	
+
 	return {
 		props: {
 			csrfToken: getToken(ctx.req, ctx.res),
 			data,
-			user: await get.user.load(user || '')
+			user: await get.user.load(user || ''),
 		},
 	}
 }
 
 interface ReportUserProps {
 	csrfToken: string
-  data: User
-  user: User
+	data: User
+	user: User
 }
 
 interface Context extends CsrfContext {
-  query: URLQuery
+	query: URLQuery
 }
 
 interface URLQuery extends ParsedUrlQuery {
 	id: string
 }
 
-export default ReportUser
\ No newline at end of file
+export default ReportUser
diff --git a/pages/verification.tsx b/pages/verification.tsx
index 90b3508..130b73d 100644
--- a/pages/verification.tsx
+++ b/pages/verification.tsx
@@ -3,13 +3,11 @@ import dynamic from 'next/dynamic'
 
 import { SpecialEndPoints } from '@utils/Constants'
 
-
 const Button = dynamic(() => import('@components/Button'))
 const Divider = dynamic(() => import('@components/Divider'))
-const Docs = dynamic(()=> import('@components/Docs'))
+const Docs = dynamic(() => import('@components/Docs'))
 const Markdown = dynamic(() => import('@components/Markdown'))
 
-
 const Verification: NextPage<VerificationProps> = ({ content }) => {
 	return (
 		<Docs
@@ -18,9 +16,11 @@ const Verification: NextPage<VerificationProps> = ({ content }) => {
 		>
 			<Markdown text={content} />
 			<Divider />
-			<div className='text-center pt-10'>
-				<h2 className='text-2xl font-bold mb-6'>지금 바로 신청하세요</h2>
-				<Button href='https://github.com/koreanbots/verification'><i className='fab fa-github' /> 신청하기</Button>
+			<div className='pt-10 text-center'>
+				<h2 className='mb-6 text-2xl font-bold'>지금 바로 신청하세요</h2>
+				<Button href='https://github.com/koreanbots/verification'>
+					<i className='fab fa-github' /> 신청하기
+				</Button>
 			</div>
 		</Docs>
 	)
@@ -31,12 +31,14 @@ interface VerificationProps {
 }
 
 export const getStaticProps: GetStaticProps<VerificationProps> = async () => {
-	const res = await fetch(SpecialEndPoints.Github.Content('koreanbots', 'verification', 'README.md'))
+	const res = await fetch(
+		SpecialEndPoints.Github.Content('koreanbots', 'verification', 'README.md')
+	)
 	const json = await res.json()
 	return {
 		props: {
-			content: Buffer.from(json.content, 'base64').toString('utf-8')
-		}
+			content: Buffer.from(json.content, 'base64').toString('utf-8'),
+		},
 	}
 }
 
diff --git a/types/global.d.ts b/types/global.d.ts
index 2dbb135..c019089 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -18,7 +18,6 @@ declare module 'yup' {
 	}
 }
 
-
 declare module 'difflib' {
 	export function unifiedDiff(before: string, after: string): string[]
-}
\ No newline at end of file
+}
diff --git a/types/index.ts b/types/index.ts
index fd3afc1..d159866 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -134,9 +134,9 @@ export interface MetrixData {
 	createdAt: Date
 }
 export interface DocsData {
-  name: string
-  list?: DocsData[]
-  text?: string
+	name: string
+	list?: DocsData[]
+	text?: string
 }
 
 export enum UserFlags {
@@ -144,7 +144,7 @@ export enum UserFlags {
 	staff = 1 << 0,
 	bughunter = 1 << 1,
 	botreviewer = 1 << 2,
-	premium = 1 << 3
+	premium = 1 << 3,
 }
 
 export enum BotFlags {
@@ -186,14 +186,14 @@ export enum DiscordUserFlags {
 
 export enum WebhookStatus {
 	None = 0,
-	Discord = 1, 
+	Discord = 1,
 	HTTP = 2,
-	Disabled = 3
+	Disabled = 3,
 }
 
 export enum WebhookType {
 	HeartChange = 0,
-	ServerCountChange = 1
+	ServerCountChange = 1,
 }
 
 export interface List<T> {
@@ -315,7 +315,7 @@ export type BotCategory =
 	| 'NSFW'
 	| '검색'
 
-export type ServerCategory = 
+export type ServerCategory =
 	| '커뮤니티'
 	| '친목'
 	| '음악'
diff --git a/utils/Constants.ts b/utils/Constants.ts
index 76af9c3..639300e 100644
--- a/utils/Constants.ts
+++ b/utils/Constants.ts
@@ -30,7 +30,7 @@ export const Status = {
 	},
 	streaming: {
 		text: '방송중',
-		color: 'violet-500'
+		color: 'violet-500',
 	},
 	null: {
 		text: '알 수 없음',
@@ -93,31 +93,31 @@ export const botCategories = [
 	'오버워치',
 	'리그 오브 레전드',
 	'배틀그라운드',
-	'마인크래프트'
+	'마인크래프트',
 ]
 
 export const botCategoryIcon = {
-	'관리': 'fas fa-cogs',
-	'뮤직': 'fas fa-music',
-	'전적': 'fas fa-puzzle-piece',
+	관리: 'fas fa-cogs',
+	뮤직: 'fas fa-music',
+	전적: 'fas fa-puzzle-piece',
 	'웹 대시보드': 'fas fa-sliders-h',
-	'로깅': 'fas fa-pencil-alt',
+	로깅: 'fas fa-pencil-alt',
 	'빗금 명령어': null,
-	'도박': 'fas fa-money-bill-alt',
-	'게임': 'fas fa-gamepad',
-	'밈': 'fas fa-image',
-	'레벨링': 'fas fa-angle-double-up',
-	'유틸리티': 'fas fa-tools',
-	'번역': 'fas fa-language',
-	'대화': 'fas fa-comments',
-	'NSFW': 'fas fa-exclamation-triangle',
-	'검색': 'fas fa-search',
-	'학교': 'fas fa-school',
-	'코로나19': 'fas fa-viruses',
-	'오버워치': 'fas fa-mask',
+	도박: 'fas fa-money-bill-alt',
+	게임: 'fas fa-gamepad',
+	밈: 'fas fa-image',
+	레벨링: 'fas fa-angle-double-up',
+	유틸리티: 'fas fa-tools',
+	번역: 'fas fa-language',
+	대화: 'fas fa-comments',
+	NSFW: 'fas fa-exclamation-triangle',
+	검색: 'fas fa-search',
+	학교: 'fas fa-school',
+	코로나19: 'fas fa-viruses',
+	오버워치: 'fas fa-mask',
 	'리그 오브 레전드': 'fas fa-chess',
-	'배틀그라운드': 'fas fa-meteor',
-	'마인크래프트': 'fas fa-cubes'
+	배틀그라운드: 'fas fa-meteor',
+	마인크래프트: 'fas fa-cubes',
 }
 
 export const serverCategories = [
@@ -133,22 +133,22 @@ export const serverCategories = [
 	'오버워치',
 	'리그 오브 레전드',
 	'배틀그라운드',
-	'마인크래프트'
+	'마인크래프트',
 ]
 
 export const serverCategoryIcon = {
-	'커뮤니티': 'fas fa-comments',
-	'친목': 'fas fa-user-friends',
-	'음악': 'fas fa-music',
+	커뮤니티: 'fas fa-comments',
+	친목: 'fas fa-user-friends',
+	음악: 'fas fa-music',
 	'IT & 과학': 'fas fa-flask',
-	'봇': 'fas fa-robot',
-	'교육': 'fas fa-graduation-cap',
-	'연애': 'fas fa-hand-holding-heart',
-	'게임': 'fas fa-gamepad',
-	'오버워치': 'fas fa-mask',
+	봇: 'fas fa-robot',
+	교육: 'fas fa-graduation-cap',
+	연애: 'fas fa-hand-holding-heart',
+	게임: 'fas fa-gamepad',
+	오버워치: 'fas fa-mask',
 	'리그 오브 레전드': 'fas fa-chess',
-	'배틀그라운드': 'fas fa-meteor',
-	'마인크래프트': 'fas fa-cubes'
+	배틀그라운드: 'fas fa-meteor',
+	마인크래프트: 'fas fa-cubes',
 }
 
 export const reportCats = [
@@ -171,24 +171,20 @@ export const serverReportCats = [
 	'기타',
 ]
 
-export const imageSafeHost = [
-	'koreanbots.dev',
-	'githubusercontent.com',
-	'cdn.discordapp.com'
-]
+export const imageSafeHost = ['koreanbots.dev', 'githubusercontent.com', 'cdn.discordapp.com']
 
 export const MessageColor = {
 	success: 'bg-emerald-200 text-emerald-800',
 	error: 'bg-red-200 text-red-800',
 	warning: 'bg-amber-50 text-amber-700',
-	info: 'bg-blue-200 text-blue-800'
+	info: 'bg-blue-200 text-blue-800',
 }
 
 export const BASE_URLs = {
 	api: 'https://discord.com/api',
 	invite: 'https://discord.gg',
 	cdn: 'https://cdn.discordapp.com',
-	camo: 'https://camo.koreanbots.dev'
+	camo: 'https://camo.koreanbots.dev',
 }
 
 export const BotBadgeType = (data: Bot) => {
@@ -196,23 +192,24 @@ export const BotBadgeType = (data: Bot) => {
 		servers: {
 			label: '서버수',
 			status: data.servers === 0 ? 'N/A' : formatNumber(data.servers),
-			color: '7289DA'
+			color: '7289DA',
 		},
 		votes: {
 			label: '하트',
 			status: `${formatNumber(data.votes)}`,
-			color: 'ef4444'
+			color: 'ef4444',
 		},
 		status: {
 			label: '상태',
 			status: Status[data.status]?.text || '알 수 없음',
-			color: {
-				online: '34d399',
-				idle: 'fcd34d',
-				dnd: 'ef4444',
-				streaming: '8b5cf6'
-			}[data.status] || '6b7280'
-		}
+			color:
+				{
+					online: '34d399',
+					idle: 'fcd34d',
+					dnd: 'ef4444',
+					streaming: '8b5cf6',
+				}[data.status] || '6b7280',
+		},
 	}
 }
 
@@ -221,49 +218,88 @@ export const ServerBadgeType = (data: Server) => {
 		members: {
 			label: '멤버수',
 			status: !data.members ? 'N/A' : formatNumber(data.members),
-			color: '7289DA'
+			color: '7289DA',
 		},
 		votes: {
 			label: '하트',
 			status: `${formatNumber(data.votes)}`,
-			color: 'ef4444'
+			color: 'ef4444',
 		},
 		boost: {
 			label: '부스트',
 			status: `${!data.boostTier ? 0 : data.boostTier}레벨`,
-			color: 'fe73fa'
-		}
+			color: 'fe73fa',
+		},
 	}
 }
 
-
 export const DiscordEnpoints = {
 	Token: BASE_URLs.api + '/oauth2/token',
 	Me: BASE_URLs.api + '/v9/users/@me',
 	Guilds: BASE_URLs.api + '/v9/users/@me/guilds',
-	InviteApplication: (id: string, perms: { [perm: string]: boolean }, scope: string, redirect?: string, guild_id?: string): string => `${BASE_URLs.api}/oauth2/authorize?client_id=${id ? id.split(' ')[0] : 'CLIENT_ID'}&permissions=${Object.keys(perms).filter(el => perms[el]).map(el => Number(el)).reduce((prev, curr) => BigInt(prev) | BigInt(curr), BigInt(0))}&scope=${scope ? encodeURI(scope) : 'bot'}${redirect ? `&redirect_uri=${encodeURIComponent(redirect)}` : ''}${guild_id ? `&guild_id=${guild_id}` : ''}`,
-	ServerInvite: (code: string): string => `${BASE_URLs.invite}/${code}`, 
+	InviteApplication: (
+		id: string,
+		perms: { [perm: string]: boolean },
+		scope: string,
+		redirect?: string,
+		guild_id?: string
+	): string =>
+		`${BASE_URLs.api}/oauth2/authorize?client_id=${
+			id ? id.split(' ')[0] : 'CLIENT_ID'
+		}&permissions=${Object.keys(perms)
+			.filter((el) => perms[el])
+			.map((el) => Number(el))
+			.reduce((prev, curr) => BigInt(prev) | BigInt(curr), BigInt(0))}&scope=${
+			scope ? encodeURI(scope) : 'bot'
+		}${redirect ? `&redirect_uri=${encodeURIComponent(redirect)}` : ''}${
+			guild_id ? `&guild_id=${guild_id}` : ''
+		}`,
+	ServerInvite: (code: string): string => `${BASE_URLs.invite}/${code}`,
 	CDN: class CDN {
 		static root = BASE_URLs.cdn
-		static emoji (id: string, options:ImageOptions={}) { return makeImageURL(`${this.root}/emojis/${id}`, options) }
-		static guild (id: string, hash: string, options:ImageOptions={}) { return makeImageURL(`${this.root}/icons/${id}/${hash}`, options) }
-		static default (tag: string|number, options:ImageOptions={}) { return makeImageURL(`${this.root}/embed/avatars/${!isNaN(Number(tag)) ? Number(tag) % 5 : 0}`, options) }
-		static user (id: string, hash: string, options:ImageOptions={}) { return makeImageURL(`${this.root}/avatars/${id}/${hash}`, options) }
-	}
+		static emoji(id: string, options: ImageOptions = {}) {
+			return makeImageURL(`${this.root}/emojis/${id}`, options)
+		}
+		static guild(id: string, hash: string, options: ImageOptions = {}) {
+			return makeImageURL(`${this.root}/icons/${id}/${hash}`, options)
+		}
+		static default(tag: string | number, options: ImageOptions = {}) {
+			return makeImageURL(
+				`${this.root}/embed/avatars/${!isNaN(Number(tag)) ? Number(tag) % 5 : 0}`,
+				options
+			)
+		}
+		static user(id: string, hash: string, options: ImageOptions = {}) {
+			return makeImageURL(`${this.root}/avatars/${id}/${hash}`, options)
+		}
+	},
 }
 
 export const KoreanbotsEndPoints = {
 	OG: class {
 		static root = 'https://og.koreanbots.dev'
 		static origin = 'https://koreanbots.dev'
-		static generate(id: string, name: string, bio: string, tags: string[], stats: string[], type: 'bot' | 'server') {
+		static generate(
+			id: string,
+			name: string,
+			bio: string,
+			tags: string[],
+			stats: string[],
+			type: 'bot' | 'server'
+		) {
 			const u = new URL(this.root)
 			u.pathname = name + '.png'
-			u.searchParams.append('image', this.origin + ( type === 'bot' ? KoreanbotsEndPoints.CDN.avatar(id, { format: 'webp', size: 256 }) : KoreanbotsEndPoints.CDN.icon(id, { format: 'webp', size: 256 }) ))
+			u.searchParams.append(
+				'image',
+				this.origin +
+					(type === 'bot'
+						? KoreanbotsEndPoints.CDN.avatar(id, { format: 'webp', size: 256 })
+						: KoreanbotsEndPoints.CDN.icon(id, { format: 'webp', size: 256 }))
+			)
 			u.searchParams.append('bio', bio)
 			u.searchParams.append('type', type)
-			tags.map(t => u.searchParams.append('tags', t))
-			stats.map(s => u.searchParams.append('stats', s))
+			tags.map((t) => u.searchParams.append('tags', t))
+			stats.map((s) => u.searchParams.append('stats', s))
 			return u.href
 		}
 		static bot(id: string, name: string, bio: string, tags: string[], stats: string[]) {
@@ -275,78 +311,106 @@ export const KoreanbotsEndPoints = {
 	},
 	CDN: class {
 		static root = '/api/image'
-		static avatar (id: string, options: KoreanbotsImageOptions) { return makeImageURL(`${this.root}/discord/avatars/${id}`, options) }
-		static icon (id: string,  options: KoreanbotsImageOptions) { return makeImageURL(`${this.root}/discord/icons/${id}`, options) }
+		static avatar(id: string, options: KoreanbotsImageOptions) {
+			return makeImageURL(`${this.root}/discord/avatars/${id}`, options)
+		}
+		static icon(id: string, options: KoreanbotsImageOptions) {
+			return makeImageURL(`${this.root}/discord/icons/${id}`, options)
+		}
 	},
 	URL: class {
 		static root = process.env.KOREANBOTS_URL || 'https://koreanbots.dev'
-		static bot (id: string) { return `${this.root}/bots/${id}` }
-		static server (id: string) { return `${this.root}/servers/${id}` }
-		static user (id: string) { return `${this.root}/users/${id}` }
-		static submittedBot(id: string, date: number) { return `${this.root}/pendingBots/${id}/${date}` }
-		static searchBot(query: string) { return `${this.root}/bots/search?q=${encodeURIComponent(query)}` }
-		static searchServer(query: string) { return `${this.root}/servers/search?q=${encodeURIComponent(query)}` }
+		static bot(id: string) {
+			return `${this.root}/bots/${id}`
+		}
+		static server(id: string) {
+			return `${this.root}/servers/${id}`
+		}
+		static user(id: string) {
+			return `${this.root}/users/${id}`
+		}
+		static submittedBot(id: string, date: number) {
+			return `${this.root}/pendingBots/${id}/${date}`
+		}
+		static searchBot(query: string) {
+			return `${this.root}/bots/search?q=${encodeURIComponent(query)}`
+		}
+		static searchServer(query: string) {
+			return `${this.root}/servers/search?q=${encodeURIComponent(query)}`
+		}
 	},
 	baseAPI: '/api/v2',
 	login: '/api/auth/discord',
-	logout: '/api/auth/discord/logout'
+	logout: '/api/auth/discord/logout',
 }
 
 export const SpecialEndPoints = {
 	Github: {
-		Content: (owner: string, repo: string, path: string) => `https://api.github.com/repos/${owner}/${repo}/contents/${path}`,
-		Token: (clientID: string, clientSecret: string, code: string) => `https://github.com/login/oauth/access_token?client_id=${clientID}&client_secret=${clientSecret}&code=${code}`,
-		Me: 'https://api.github.com/user'
+		Content: (owner: string, repo: string, path: string) =>
+			`https://api.github.com/repos/${owner}/${repo}/contents/${path}`,
+		Token: (clientID: string, clientSecret: string, code: string) =>
+			`https://github.com/login/oauth/access_token?client_id=${clientID}&client_secret=${clientSecret}&code=${code}`,
+		Me: 'https://api.github.com/user',
 	},
 	HCaptcha: {
-		Verify: 'https://hcaptcha.com/siteverify'
-	}
+		Verify: 'https://hcaptcha.com/siteverify',
+	},
 }
 
-export const GlobalRatelimitIgnore = [
-	'/api/image/discord/avatars/'
-]
+export const GlobalRatelimitIgnore = ['/api/image/discord/avatars/']
 
 export const Oauth = {
-	discord: (clientID: string, scope: string) => `https://discord.com/oauth2/authorize?client_id=${clientID}&scope=${scope}&permissions=0&response_type=code&redirect_uri=${process.env.KOREANBOTS_URL}/api/auth/discord/callback&prompt=none`,
-	github: (clientID: string) => `https://github.com/login/oauth/authorize?client_id=${clientID}&redirect_uri=${process.env.KOREANBOTS_URL}/api/auth/github/callback`
+	discord: (clientID: string, scope: string) =>
+		`https://discord.com/oauth2/authorize?client_id=${clientID}&scope=${scope}&permissions=0&response_type=code&redirect_uri=${process.env.KOREANBOTS_URL}/api/auth/discord/callback&prompt=none`,
+	github: (clientID: string) =>
+		`https://github.com/login/oauth/authorize?client_id=${clientID}&redirect_uri=${process.env.KOREANBOTS_URL}/api/auth/github/callback`,
+}
+export const git = {
+	'github.com': { icon: 'github', text: 'GitHub' },
+	'gitlab.com': { icon: 'gitlab', text: 'GitLab' },
 }
-export const git = { 'github.com': { icon: 'github', text: 'GitHub' },  'gitlab.com':  { icon: 'gitlab', text: 'GitLab' }}
 
 export const KoreanbotsDiscord = 'https://discord.gg/JEh53MQ'
-export const ThemeColors = [{ name: '파랑', rgb: 'rgb(51, 102, 255)', hex: '#3366FF', color: 'koreanbots-blue' }, { name: '하양', rgb: 'rgb(251, 251, 251)', hex: '#FBFBFB', color: 'little-white' }, { name: '검정', rgb: 'rgb(27, 30, 35)', hex: '#1B1E23', color: 'very-black' }, { name: '보라', rgb: 'rgb(88, 101, 242)', hex: '#5865f2', color: 'discord-blurple' } ]
-export const KoreanbotsEmoji = [{
-	name: '한국 디스코드 리스트',
-	short_names: ['koreanbots', 'kbots', 'dbkr'],
-	emoticons: [],
-	keywords: ['koreanbots', '한국 디스코드 리스트', '한디리', 'kbots'],
-	imageUrl: '/logo.png'
-},
-{
-	name: 'Discord',
-	short_names: ['discord'],
-	emoticons: [],
-	keywords: ['discord', '디스코드', '디코'],
-	imageUrl: '/emojis/discord.svg'
-},
-{
-	name: 'Javascript',
-	short_names: ['javascript', 'js'],
-	emoticons: [],
-	keywords: ['javascript', 'js', '자바스크립트'],
-	imageUrl: '/emojis/javascript.png'
-},
-{
-	name: 'Python',
-	short_names: ['python', 'py'],
-	emoticons: [],
-	keywords: ['python', 'py', '파이썬'],
-	imageUrl: '/emojis/python.png'
-}]
+export const ThemeColors = [
+	{ name: '파랑', rgb: 'rgb(51, 102, 255)', hex: '#3366FF', color: 'koreanbots-blue' },
+	{ name: '하양', rgb: 'rgb(251, 251, 251)', hex: '#FBFBFB', color: 'little-white' },
+	{ name: '검정', rgb: 'rgb(27, 30, 35)', hex: '#1B1E23', color: 'very-black' },
+	{ name: '보라', rgb: 'rgb(88, 101, 242)', hex: '#5865f2', color: 'discord-blurple' },
+]
+export const KoreanbotsEmoji = [
+	{
+		name: '한국 디스코드 리스트',
+		short_names: ['koreanbots', 'kbots', 'dbkr'],
+		emoticons: [],
+		keywords: ['koreanbots', '한국 디스코드 리스트', '한디리', 'kbots'],
+		imageUrl: '/logo.png',
+	},
+	{
+		name: 'Discord',
+		short_names: ['discord'],
+		emoticons: [],
+		keywords: ['discord', '디스코드', '디코'],
+		imageUrl: '/emojis/discord.svg',
+	},
+	{
+		name: 'Javascript',
+		short_names: ['javascript', 'js'],
+		emoticons: [],
+		keywords: ['javascript', 'js', '자바스크립트'],
+		imageUrl: '/emojis/javascript.png',
+	},
+	{
+		name: 'Python',
+		short_names: ['python', 'py'],
+		emoticons: [],
+		keywords: ['python', 'py', '파이썬'],
+		imageUrl: '/emojis/python.png',
+	},
+]
 
 export const shortcutKeyMap: KeyMap = {
 	SHORTCUT_HELP: ['command+/', 'ctrl+/'],
-	CHANGE_THEME: ['command+shift+d', 'ctrl+shift+d']
+	CHANGE_THEME: ['command+shift+d', 'ctrl+shift+d'],
 }
 
 export const ErrorText = {
@@ -360,164 +424,173 @@ export const ErrorText = {
 	406: '연결을 받아드릴 수 없습니다.',
 	429: '지정된 시간에 너무 많은 요청을 보내셨습니다. 잠시 후 다시 시도해주세요.',
 	500: '서버 내부 오류가 발생하였습니다.',
-	502: '올바르지 않은 게이트웨이입니다.'
+	502: '올바르지 않은 게이트웨이입니다.',
 }
 
-export const ErrorMessage = ['지나가던 고양이가 선을 밟았어요..', '무언가 잘못되었어요..!', '이게 아닌데...', '어쩜 이렇게 오류가 또 나는건지?']
+export const ErrorMessage = [
+	'지나가던 고양이가 선을 밟았어요..',
+	'무언가 잘못되었어요..!',
+	'이게 아닌데...',
+	'어쩜 이렇게 오류가 또 나는건지?',
+]
 
-export const ServerIntroList = ['한국어를 배울 수 있는 최고의 공간입니다!', '김치의 다양한 요리법을 소개하는 서버입니다.', '좋아하는 노래를 들을 수 있는 곳 입니다.', '게임을 함께 할 사람을 찾을 수 있습니다.']
+export const ServerIntroList = [
+	'한국어를 배울 수 있는 최고의 공간입니다!',
+	'김치의 다양한 요리법을 소개하는 서버입니다.',
+	'좋아하는 노래를 들을 수 있는 곳 입니다.',
+	'게임을 함께 할 사람을 찾을 수 있습니다.',
+]
 export const BotSubmissionDenyReasonPresetsName = {
 	MISSING_VERIFY: '개발자 확인 불가',
 	OFFLINE: '봇 오프라인',
 	INVALID_CATEGORY: '올바르지 않은 카테고리',
 	PRIVATE: '프라이빗 봇',
 	LICENSE_VIOLATION: '오픈소스 라이선스 위반',
-	ABSENT_AT_DISCORD: '공식 디스코드 서버 미참여'
+	ABSENT_AT_DISCORD: '공식 디스코드 서버 미참여',
 }
 
 export const GuildPermissions = {
 	general: [
 		{
 			name: '채널 보기',
-			flag: 0x00000400
+			flag: 0x00000400,
 		},
 		{
 			name: '채널 관리하기',
 			flag: 0x00000010,
-			twofactor: true
+			twofactor: true,
 		},
 		{
 			name: '역할 관리하기',
 			flag: 0x10000000,
-			twofactor: true
+			twofactor: true,
 		},
 		{
 			name: '이모티콘 관리하기',
 			flag: 0x40000000,
-			twofactor: true
+			twofactor: true,
 		},
 		{
 			name: '감사 로그 보기',
-			flag: 0x00000080
+			flag: 0x00000080,
 		},
 		{
 			name: '웹후크 관리하기',
 			flag: 0x20000000,
-			twofactor: true
+			twofactor: true,
 		},
 		{
 			name: '서버 관리하기',
 			flag: 0x00000020,
-			twofactor: true
-		}
+			twofactor: true,
+		},
 	],
 	membership: [
 		{
 			name: '초대 코드 만들기',
-			flag: 0x00000001
+			flag: 0x00000001,
 		},
 		{
 			name: '별명 변경하기',
-			flag: 0x04000000
+			flag: 0x04000000,
 		},
 		{
 			name: '별명 관리하기',
-			flag: 0x08000000
+			flag: 0x08000000,
 		},
 		{
 			name: '멤버 추방하기',
 			flag: 0x00000002,
-			twofactor: true
+			twofactor: true,
 		},
 		{
 			name: '멤버 차단하기',
 			flag: 0x00000004,
-			twofactor: true
-		}
+			twofactor: true,
+		},
 	],
 	channel: [
 		{
 			name: '메세지 보내기',
-			flag: 0x00000800
+			flag: 0x00000800,
 		},
 		{
 			name: '링크 첨부',
-			flag: 0x00004000
+			flag: 0x00004000,
 		},
 		{
 			name: '파일 첨부',
-			flag: 0x00008000
+			flag: 0x00008000,
 		},
 		{
 			name: '반응 추가하기',
-			flag: 0x00000040
+			flag: 0x00000040,
 		},
 		{
 			name: '외부 이모티콘 사용',
-			flag: 0x00040000
+			flag: 0x00040000,
 		},
 		{
 			name: '@everyone, @here 모든 역할 멘션하기',
-			flag: 0x00020000
+			flag: 0x00020000,
 		},
 		{
 			name: '메세지 관리',
 			flag: 0x00002000,
-			twofactor: true
+			twofactor: true,
 		},
 		{
 			name: '메세지 기록 보기',
-			flag: 0x00010000
+			flag: 0x00010000,
 		},
 		{
 			name: '텍스트 음성 변환 메세지 전송',
-			flag: 0x00001000
+			flag: 0x00001000,
 		},
 		{
 			name: '빗금 명령어 사용',
-			flag: 0x80000000
-		}
+			flag: 0x80000000,
+		},
 	],
 	voice: [
 		{
 			name: '연결',
-			flag: 0x00100000
+			flag: 0x00100000,
 		},
 		{
 			name: '말하기',
-			flag: 0x00200000
+			flag: 0x00200000,
 		},
 		{
 			name: '동영상',
-			flag: 0x00000200
-
+			flag: 0x00000200,
 		},
 		{
 			name: '음성 감지 사용',
-			flag: 0x02000000
+			flag: 0x02000000,
 		},
 		{
 			name: '우선 발언권',
-			flag: 0x00000100
+			flag: 0x00000100,
 		},
 		{
 			name: '멤버들의 마이크 음소거하기',
-			flag: 0x00400000
+			flag: 0x00400000,
 		},
 		{
 			name: '멤버의 헤드셋 음소거하기',
-			flag: 0x00800000
+			flag: 0x00800000,
 		},
 		{
 			name: '멤버 이동',
-			flag: 0x01000000
-		}
+			flag: 0x01000000,
+		},
 	],
 	advanced: [
 		{
 			name: '관리자',
 			flag: 0x8,
-			twofactor: true
-		}
-	]
+			twofactor: true,
+		},
+	],
 }
diff --git a/utils/Csrf.ts b/utils/Csrf.ts
index df694ee..2b2bfed 100644
--- a/utils/Csrf.ts
+++ b/utils/Csrf.ts
@@ -23,7 +23,7 @@ export const getToken = (req: IncomingMessage, res: ServerResponse) => {
 			serialize(csrfKey, key, {
 				httpOnly: true,
 				sameSite: 'lax',
-				path: '/'
+				path: '/',
 			})
 		)
 	}
diff --git a/utils/DiscordBot.ts b/utils/DiscordBot.ts
index c3dea15..fb17355 100644
--- a/utils/DiscordBot.ts
+++ b/utils/DiscordBot.ts
@@ -1,29 +1,32 @@
 import * as Discord from 'discord.js'
 
 export const DiscordBot = new Discord.Client({
-	intents: Number(process.env.DISCORD_CLIENT_INTENTS ?? 32767)
+	intents: Number(process.env.DISCORD_CLIENT_INTENTS ?? 32767),
 })
 
 export const ServerListDiscordBot = new Discord.Client({
-	intents: []
+	intents: [],
 })
 
-const dummyURL = 'https://discord.com/api/webhooks/123123123123123123/asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf'
+const dummyURL =
+	'https://discord.com/api/webhooks/123123123123123123/asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf'
 
 export const webhookClients = {
 	bot: new Discord.Collection<string, Discord.WebhookClient>(),
 	server: new Discord.Collection<string, Discord.WebhookClient>(),
 	internal: {
-		log: new Discord.WebhookClient({url: process.env.LOG_WEBHOOK_URL ?? dummyURL}),
-		reviewLog: new Discord.WebhookClient({url: process.env.REVIEW_LOG_WEBHOOK_URL ?? dummyURL}),
-		openReviewLog: new Discord.WebhookClient({url: process.env.OPEN_REVIEW_LOG_WEBHOOK_URL ?? dummyURL}),
-		statsLog: new Discord.WebhookClient({url: process.env.STATS_LOG_WEBHOOK_URL ?? dummyURL}),
-		reportChannel: new Discord.WebhookClient({url: process.env.REPORT_WEBHOOK_URL ?? dummyURL})
-	}
+		log: new Discord.WebhookClient({ url: process.env.LOG_WEBHOOK_URL ?? dummyURL }),
+		reviewLog: new Discord.WebhookClient({ url: process.env.REVIEW_LOG_WEBHOOK_URL ?? dummyURL }),
+		openReviewLog: new Discord.WebhookClient({
+			url: process.env.OPEN_REVIEW_LOG_WEBHOOK_URL ?? dummyURL,
+		}),
+		statsLog: new Discord.WebhookClient({ url: process.env.STATS_LOG_WEBHOOK_URL ?? dummyURL }),
+		reportChannel: new Discord.WebhookClient({ url: process.env.REPORT_WEBHOOK_URL ?? dummyURL }),
+	},
 }
 
 DiscordBot.on('ready', async () => {
-	console.log('I\'m Ready')
+	console.log('Discord Client is ready')
 	await getMainGuild().members.fetch()
 	console.log(`Fetched ${getMainGuild().members.cache.size} Members`)
 })
@@ -33,12 +36,24 @@ ServerListDiscordBot.login(process.env.DISCORD_SERVERLIST_TOKEN)
 
 export const getMainGuild = () => DiscordBot.guilds.cache.get(process.env.GUILD_ID)
 
-export const discordLog = async (type: string, issuerID: string, embed?: Discord.EmbedBuilder, attachment?: { content: string, format: string}, content?: string): Promise<void> => {
+export const discordLog = async (
+	type: string,
+	issuerID: string,
+	embed?: Discord.EmbedBuilder,
+	attachment?: { content: string; format: string },
+	content?: string
+): Promise<void> => {
 	webhookClients.internal.log.send({
 		content: `[${type}] <@${issuerID}> (${issuerID})\n${content || ''}`,
 		embeds: [embed && embed.setTitle(type).setTimestamp(new Date())],
-		...(attachment && { files: [
-			new Discord.AttachmentBuilder(Buffer.from(attachment.content), {name: `${type.toLowerCase().replace(/\//g, '-')}-${issuerID}-${Date.now()}.${attachment.format}`
-			})]})
+		...(attachment && {
+			files: [
+				new Discord.AttachmentBuilder(Buffer.from(attachment.content), {
+					name: `${type.toLowerCase().replace(/\//g, '-')}-${issuerID}-${Date.now()}.${
+						attachment.format
+					}`,
+				}),
+			],
+		}),
 	})
 }
diff --git a/utils/Fetch.ts b/utils/Fetch.ts
index d96fe53..279b4e7 100644
--- a/utils/Fetch.ts
+++ b/utils/Fetch.ts
@@ -1,9 +1,15 @@
 import { ResponseProps } from '@types'
 import { KoreanbotsEndPoints } from './Constants'
 
-const Fetch = async <T>(endpoint: string, options?: RequestInit, rawEndpoint=false): Promise<ResponseProps<T>> => {
+const Fetch = async <T>(
+	endpoint: string,
+	options?: RequestInit,
+	rawEndpoint = false
+): Promise<ResponseProps<T>> => {
 	options = options ?? {}
-	const url = (rawEndpoint ? '' : KoreanbotsEndPoints.baseAPI) + (endpoint.startsWith('/') ? endpoint : '/' + endpoint)
+	const url =
+		(rawEndpoint ? '' : KoreanbotsEndPoints.baseAPI) +
+		(endpoint.startsWith('/') ? endpoint : '/' + endpoint)
 
 	const res = await fetch(url, {
 		method: 'GET',
diff --git a/utils/Jwt.ts b/utils/Jwt.ts
index 59479f1..ea7d95e 100644
--- a/utils/Jwt.ts
+++ b/utils/Jwt.ts
@@ -3,9 +3,18 @@ import * as jwt from 'jsonwebtoken'
 const publicPem = process.env.PUBLIC_PEM?.replace(/\\n/g, '\n')
 const privateKey = process.env.PRIVATE_KEY?.replace(/\\n/g, '\n')
 
-export function sign(payload: string | Record<string, unknown>, options?: JWTSignOption): string | null {
+export function sign(
+	payload: string | Record<string, unknown>,
+	options?: JWTSignOption
+): string | null {
 	try {
-		return jwt.sign(payload, privateKey, options ? { ...options, algorithm: 'RS256', allowInsecureKeySizes: true } : { algorithm: 'RS256', allowInsecureKeySizes: true })
+		return jwt.sign(
+			payload,
+			privateKey,
+			options
+				? { ...options, algorithm: 'RS256', allowInsecureKeySizes: true }
+				: { algorithm: 'RS256', allowInsecureKeySizes: true }
+		)
 	} catch {
 		return null
 	}
@@ -13,15 +22,15 @@ export function sign(payload: string | Record<string, unknown>, options?: JWTSig
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function verify(token?: string): any | null {
-	if(!token) return null
+	if (!token) return null
 	try {
 		return jwt.verify(token, publicPem)
-	} catch(e) {
-		if(e.name !== 'TokenExpiredError') console.error(e)
+	} catch (e) {
+		if (e.name !== 'TokenExpiredError') console.error(e)
 		return null
 	}
 }
 
 interface JWTSignOption {
-  expiresIn: number | string
+	expiresIn: number | string
 }
diff --git a/utils/Knex.ts b/utils/Knex.ts
index 65f10da..e51361f 100644
--- a/utils/Knex.ts
+++ b/utils/Knex.ts
@@ -8,5 +8,5 @@ export default knex({
 		password: process.env.MYSQL_PASSWORD || 'test',
 		database: process.env.MYSQL_DATABASE || 'discordbots',
 		charset: 'utf8mb4',
-	}
+	},
 })
diff --git a/utils/Logger.ts b/utils/Logger.ts
index 2e686a5..b90c1c4 100644
--- a/utils/Logger.ts
+++ b/utils/Logger.ts
@@ -1,11 +1,11 @@
 const Logger = {
-	debug: function(message: string) {
+	debug: function (message: string) {
 		print('DEBUG', message, genStyle('cyan'))
 	},
-	warn: function(message: string) {
+	warn: function (message: string) {
 		print('WARN', message, genStyle('yellow'))
 	},
-	error: function(message: string) {
+	error: function (message: string) {
 		print('ERROR', message, genStyle('red', 'white'))
 	},
 }
diff --git a/utils/Mongo.ts b/utils/Mongo.ts
index 3103f7c..e9c1e57 100644
--- a/utils/Mongo.ts
+++ b/utils/Mongo.ts
@@ -1,38 +1,56 @@
 import mongoose, { InferSchemaType, Model, ObtainSchemaGeneric, Schema } from 'mongoose'
 import { getYYMMDD } from './Tools'
 
-mongoose.connect(`mongodb://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@${process.env.MONGO_HOST || 'localhost'}/${process.env.MONGO_DATABASE}`)
+mongoose.connect(
+	`mongodb://${process.env.MONGO_USER}:${process.env.MONGO_PASSWORD}@${
+		process.env.MONGO_HOST || 'localhost'
+	}/${process.env.MONGO_DATABASE}`
+)
 
 const db = mongoose.connection
 
 db.on('error', console.error.bind(console, 'connection error:'))
-db.once('open', () => 
-	console.log('[DB] Mongo Connected')
-)
+db.once('open', () => console.log('[DB] Mongo Connected'))
 
-const metrix = { day: { type: String, default: getYYMMDD, unique: true }, createdAt: { type: Date, default: Date.now }, count: Number }
+const metrix = {
+	day: { type: String, default: getYYMMDD, unique: true },
+	createdAt: { type: Date, default: Date.now },
+	count: Number,
+}
 const botSchema = new mongoose.Schema({
 	_id: String,
-	serverMetrix: [ metrix ],
-	viewMetrix: [ metrix ],
-	voteMetrix: [ { ...metrix, increasement: { type: Number, default: 1 } } ],
-	inviteMetrix: [ metrix ],
-	comments: [ { author: String, date: { type: Date, defualt: Date.now }, comment: String, rating: Number, upvotes: [ String ], downvotes: [ String ] } ],
+	serverMetrix: [metrix],
+	viewMetrix: [metrix],
+	voteMetrix: [{ ...metrix, increasement: { type: Number, default: 1 } }],
+	inviteMetrix: [metrix],
+	comments: [
+		{
+			author: String,
+			date: { type: Date, defualt: Date.now },
+			comment: String,
+			rating: Number,
+			upvotes: [String],
+			downvotes: [String],
+		},
+	],
 })
 
 const serverSchema = new mongoose.Schema({
 	_id: String,
-	data: {}
+	data: {},
 })
 
 type ModelType<TSchema extends Schema> = Model<
-  InferSchemaType<TSchema>,
-  ObtainSchemaGeneric<TSchema, 'TQueryHelpers'>,
-  ObtainSchemaGeneric<TSchema, 'TInstanceMethods'>,
-  ObtainSchemaGeneric<TSchema, 'TVirtuals'>,
-  TSchema
+	InferSchemaType<TSchema>,
+	ObtainSchemaGeneric<TSchema, 'TQueryHelpers'>,
+	ObtainSchemaGeneric<TSchema, 'TInstanceMethods'>,
+	ObtainSchemaGeneric<TSchema, 'TVirtuals'>,
+	TSchema
 > &
-  ObtainSchemaGeneric<TSchema, 'TStaticMethods'>
+	ObtainSchemaGeneric<TSchema, 'TStaticMethods'>
 
-export const Bots = (mongoose.models.bots as ModelType<typeof botSchema>) || mongoose.model('bots', botSchema)
-export const Servers = (mongoose.models.servers as ModelType<typeof serverSchema>) || mongoose.model('servers', serverSchema)
\ No newline at end of file
+export const Bots =
+	(mongoose.models.bots as ModelType<typeof botSchema>) || mongoose.model('bots', botSchema)
+export const Servers =
+	(mongoose.models.servers as ModelType<typeof serverSchema>) ||
+	mongoose.model('servers', serverSchema)
diff --git a/utils/Query.ts b/utils/Query.ts
index 1b4ba27..edb0e50 100644
--- a/utils/Query.ts
+++ b/utils/Query.ts
@@ -3,8 +3,33 @@ import { TLRU } from 'tlru'
 import DataLoader from 'dataloader'
 import { ActivityType, GuildFeature, GuildMember, User as DiscordUser, UserFlags } from 'discord.js'
 
-import { Bot, Server, User, ListType, List, TokenRegister, BotFlags, DiscordUserFlags, SubmittedBot, DiscordTokenInfo, ServerData, ServerFlags, RawGuild, Nullable, Webhook, BotSpec, ServerSpec } from '@types'
-import { botCategories, DiscordEnpoints, imageSafeHost, serverCategories, SpecialEndPoints, VOTE_COOLDOWN } from './Constants'
+import {
+	Bot,
+	Server,
+	User,
+	ListType,
+	List,
+	TokenRegister,
+	BotFlags,
+	DiscordUserFlags,
+	SubmittedBot,
+	DiscordTokenInfo,
+	ServerData,
+	ServerFlags,
+	RawGuild,
+	Nullable,
+	Webhook,
+	BotSpec,
+	ServerSpec,
+} from '@types'
+import {
+	botCategories,
+	DiscordEnpoints,
+	imageSafeHost,
+	serverCategories,
+	SpecialEndPoints,
+	VOTE_COOLDOWN,
+} from './Constants'
 
 import knex from './Knex'
 import { Bots, Servers } from './Mongo'
@@ -16,7 +41,7 @@ import { markdownImage } from './Regex'
 
 export const imageRateLimit = new TLRU<unknown, number>({ maxAgeMs: 60000 })
 
-async function getBot(id: string, topLevel=true):Promise<Bot> {
+async function getBot(id: string, topLevel = true): Promise<Bot> {
 	const res = await knex('bots')
 		.select([
 			'id',
@@ -47,23 +72,31 @@ async function getBot(id: string, topLevel=true):Promise<Bot> {
 		.orWhere({ vanity: id, partnered: true })
 	if (res[0]) {
 		const discordBot = await get.discord.user.load(res[0].id)
-		if(!discordBot) return null
-		const botMember = await getMainGuild()?.members?.fetch(res[0].id).catch(e=> e) as GuildMember
+		if (!discordBot) return null
+		const botMember = (await getMainGuild()
+			?.members?.fetch(res[0].id)
+			.catch((e) => e)) as GuildMember
 		const name = discordBot.displayName
-		res[0].flags = res[0].flags | (discordBot.flags.bitfield & DiscordUserFlags.VERIFIED_BOT ? BotFlags.verified : 0) | (res[0].trusted ? BotFlags.trusted : 0) | (res[0].partnered ? BotFlags.partnered : 0)
+		res[0].flags =
+			res[0].flags |
+			(discordBot.flags.bitfield & DiscordUserFlags.VERIFIED_BOT ? BotFlags.verified : 0) |
+			(res[0].trusted ? BotFlags.trusted : 0) |
+			(res[0].partnered ? BotFlags.partnered : 0)
 		res[0].tag = discordBot.discriminator
 		res[0].avatar = discordBot.avatar
 		res[0].name = name
 		res[0].category = JSON.parse(res[0].category)
 		res[0].owners = JSON.parse(res[0].owners)
 
-		if(discordBot.flags.bitfield & UserFlags.BotHTTPInteractions) {
+		if (discordBot.flags.bitfield & UserFlags.BotHTTPInteractions) {
 			res[0].status = 'online'
-		} else if(botMember) {
-			if(!botMember.presence) {
+		} else if (botMember) {
+			if (!botMember.presence) {
 				res[0].status = 'offline'
 			} else {
-				res[0].status = botMember.presence.activities.some(r => r.type === ActivityType.Streaming) ? 'streaming' : botMember.presence.status
+				res[0].status = botMember.presence.activities.some((r) => r.type === ActivityType.Streaming)
+					? 'streaming'
+					: botMember.presence.status
 			}
 		} else {
 			res[0].status = null
@@ -78,13 +111,12 @@ async function getBot(id: string, topLevel=true):Promise<Bot> {
 		}
 
 		await knex('bots').update({ name }).where({ id })
-
 	}
 
 	return res[0] ?? null
 }
 
-async function getServer(id: string, topLevel=true): Promise<Server> {
+async function getServer(id: string, topLevel = true): Promise<Server> {
 	const res = await knex('servers')
 		.select([
 			'id',
@@ -100,19 +132,26 @@ async function getServer(id: string, topLevel=true): Promise<Server> {
 			'vanity',
 			'bg',
 			'banner',
-			'flags'
+			'flags',
 		])
 		.where({ id })
 		.orWhereRaw(`(flags & ${ServerFlags.trusted}) and vanity=?`, [id])
 		.orWhereRaw(`(flags & ${ServerFlags.partnered}) and vanity=?`, [id])
 	if (res[0]) {
 		const data = await getServerData(res[0].id)
-		if(!data || (+new Date() - +new Date(data.updatedAt)) > 3 * 60 * 1000) {
-			if(res[0].state === 'ok') res[0].state = 'unreachable'
+		if (!data || +new Date() - +new Date(data.updatedAt) > 3 * 60 * 1000) {
+			if (res[0].state === 'ok') res[0].state = 'unreachable'
 		} else {
-			res[0].flags = res[0].flags | (data.features.includes(GuildFeature.Partnered) && ServerFlags.discord_partnered) | (data.features.includes(GuildFeature.Verified) && ServerFlags.verified)
-			if(res[0].owners !== JSON.stringify([data.owner, ...data.admins]) || res[0].name !== data.name)
-				await knex('servers').update({ name: data.name, owners: JSON.stringify([data.owner, ...data.admins]) })
+			res[0].flags =
+				res[0].flags |
+				(data.features.includes(GuildFeature.Partnered) && ServerFlags.discord_partnered) |
+				(data.features.includes(GuildFeature.Verified) && ServerFlags.verified)
+			if (
+				res[0].owners !== JSON.stringify([data.owner, ...data.admins]) ||
+				res[0].name !== data.name
+			)
+				await knex('servers')
+					.update({ name: data.name, owners: JSON.stringify([data.owner, ...data.admins]) })
 					.where({ id: res[0].id })
 		}
 		delete res[0].owners
@@ -121,9 +160,12 @@ async function getServer(id: string, topLevel=true): Promise<Server> {
 		res[0].emojis = data?.emojis || []
 		res[0].category = JSON.parse(res[0].category)
 		res[0].boostTier = data?.boostTier ?? null
-		if(topLevel) {
-			res[0].owner = (await get._rawUser.load(data?.owner || '')) ||  null
-			res[0].bots = (await Promise.all(data?.bots.slice(0, 3).map(el => get._rawBot.load(el)) || [])).filter(el => el) || null
+		if (topLevel) {
+			res[0].owner = (await get._rawUser.load(data?.owner || '')) || null
+			res[0].bots =
+				(await Promise.all(data?.bots.slice(0, 3).map((el) => get._rawBot.load(el)) || [])).filter(
+					(el) => el
+				) || null
 		} else {
 			res[0].owner = data?.owner || null
 			res[0].bots = data?.bots || null
@@ -132,19 +174,22 @@ async function getServer(id: string, topLevel=true): Promise<Server> {
 	return res[0] ?? null
 }
 
-async function fetchServerOwners(id: string): Promise<User[]|null> {
+async function fetchServerOwners(id: string): Promise<User[] | null> {
 	const data = await getServerData(id)
-	return data ? [ await get._rawUser.load(data.owner), ...(await Promise.all(data.admins.map(el => get._rawUser.load(el)))) ].filter(el => el) : null
+	return data
+		? [
+				await get._rawUser.load(data.owner),
+				...(await Promise.all(data.admins.map((el) => get._rawUser.load(el)))),
+		  ].filter((el) => el)
+		: null
 }
 
-async function getServerData(id: string): Promise<ServerData|null> {
+async function getServerData(id: string): Promise<ServerData | null> {
 	return serialize((await Servers.findById(id))?.data || null)
 }
 
-async function getUser(id: string, topLevel = true):Promise<User> {
-	const res = await knex('users')
-		.select(['id', 'flags', 'github'])
-		.where({ id })
+async function getUser(id: string, topLevel = true): Promise<User> {
+	const res = await knex('users').select(['id', 'flags', 'github']).where({ id })
 	if (res[0]) {
 		const ownedBots = await knex('bots')
 			.select(['id'])
@@ -160,12 +205,15 @@ async function getUser(id: string, topLevel = true):Promise<User> {
 		res[0].username = discordUser?.username || 'Unknown User'
 		res[0].globalName = discordUser?.displayName || 'Unknown User'
 		if (topLevel) {
-			res[0].bots = (await Promise.all(ownedBots.map(async b => await get._rawBot.load(b.id)))).filter((el: Bot | null) => el)
-			res[0].servers = (await Promise.all(ownedServer.map(async b => await get._rawServer.load(b.id)))).filter((el: Server | null) => el)
-		}
-		else {
-			res[0].bots = ownedBots.map(el => el.id)
-			res[0].servers = ownedServer.map(el => el.id)
+			res[0].bots = (
+				await Promise.all(ownedBots.map(async (b) => await get._rawBot.load(b.id)))
+			).filter((el: Bot | null) => el)
+			res[0].servers = (
+				await Promise.all(ownedServer.map(async (b) => await get._rawServer.load(b.id)))
+			).filter((el: Server | null) => el)
+		} else {
+			res[0].bots = ownedBots.map((el) => el.id)
+			res[0].servers = ownedServer.map((el) => el.id)
 		}
 	}
 	return res[0] || null
@@ -173,19 +221,19 @@ async function getUser(id: string, topLevel = true):Promise<User> {
 
 async function getUserGuilds(id: string): Promise<Nullable<RawGuild[]>> {
 	const token = await fetchUserDiscordToken(id)
-	if(!token) return null
+	if (!token) return null
 	const guilds = await fetch(DiscordEnpoints.Guilds, {
 		headers: {
 			Authorization: `Bearer ${token.access_token}`,
-		}
-	}).then(r=> r.json())
-	if(!Array.isArray(guilds)) return null
+		},
+	}).then((r) => r.json())
+	if (!Array.isArray(guilds)) return null
 	return guilds
 }
 
-async function getBotList(type: ListType, page = 1, query?: string):Promise<List<Bot>> {
+async function getBotList(type: ListType, page = 1, query?: string): Promise<List<Bot>> {
 	let res: { id: string }[]
-	let count:string|number
+	let count: string | number
 	if (type === 'VOTE') {
 		count = (await knex('bots').whereNot({ state: 'blocked' }).count())[0]['count(*)']
 		res = await knex('bots')
@@ -196,13 +244,11 @@ async function getBotList(type: ListType, page = 1, query?: string):Promise<List
 			.select(['id'])
 			.whereNot({ state: 'blocked' })
 	} else if (type === 'TRUSTED') {
-		count = (
-			await knex('bots')
-				.where({ trusted: true })
-				.count()
-				.whereNot({ state: 'blocked' })
-		)[0]['count(*)']
-		res = await knex('bots').whereNot({ state: 'blocked' })
+		count = (await knex('bots').where({ trusted: true }).count().whereNot({ state: 'blocked' }))[0][
+			'count(*)'
+		]
+		res = await knex('bots')
+			.whereNot({ state: 'blocked' })
 			.where({ trusted: true })
 			.orderByRaw('RAND()')
 			.limit(16)
@@ -210,10 +256,7 @@ async function getBotList(type: ListType, page = 1, query?: string):Promise<List
 			.select(['id'])
 			.whereNot({ state: 'blocked' })
 	} else if (type === 'NEW') {
-		count = (
-			await knex('bots').whereNot({ state: 'blocked' })
-				.count()
-		)[0]['count(*)']
+		count = (await knex('bots').whereNot({ state: 'blocked' }).count())[0]['count(*)']
 		res = await knex('bots')
 			.orderBy('date', 'desc')
 			.limit(16)
@@ -222,12 +265,11 @@ async function getBotList(type: ListType, page = 1, query?: string):Promise<List
 			.whereNot({ state: 'blocked' })
 	} else if (type === 'PARTNERED') {
 		count = (
-			await knex('bots')
-				.where({ partnered: true }).andWhereNot({ state: 'blocked' })
-				.count()
+			await knex('bots').where({ partnered: true }).andWhereNot({ state: 'blocked' }).count()
 		)[0]['count(*)']
 		res = await knex('bots')
-			.where({ partnered: true }).andWhereNot({ state: 'blocked' })
+			.where({ partnered: true })
+			.andWhereNot({ state: 'blocked' })
 			.orderByRaw('RAND()')
 			.limit(16)
 			.offset(((page ? Number(page) : 1) - 1) * 16)
@@ -237,11 +279,13 @@ async function getBotList(type: ListType, page = 1, query?: string):Promise<List
 		if (!botCategories.includes(query)) throw new Error('알 수 없는 카테고리입니다.')
 		count = (
 			await knex('bots')
-				.where('category', 'like', `%${decodeURI(query)}%`).andWhereNot({ state: 'blocked' })
+				.where('category', 'like', `%${decodeURI(query)}%`)
+				.andWhereNot({ state: 'blocked' })
 				.count()
 		)[0]['count(*)']
 		res = await knex('bots')
-			.where('category', 'like', `%${decodeURI(query)}%`).andWhereNot({ state: 'blocked' })
+			.where('category', 'like', `%${decodeURI(query)}%`)
+			.andWhereNot({ state: 'blocked' })
 			.orderBy('votes', 'desc')
 			.orderBy('servers', 'desc')
 			.limit(16)
@@ -249,19 +293,34 @@ async function getBotList(type: ListType, page = 1, query?: string):Promise<List
 			.select(['id'])
 	} else if (type === 'SEARCH') {
 		if (!query) throw new Error('쿼리가 누락되었습니다.')
-		count = (await knex.raw('SELECT count(*) FROM bots WHERE `state` != "blocked" AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode)', [decodeURI(query) + '*']))[0][0]['count(*)']
-		res = (await knex.raw('SELECT id, votes, MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) as relevance FROM bots WHERE `state` != "blocked" AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) ORDER BY relevance DESC, votes DESC LIMIT 16 OFFSET ?', [decodeURI(query) + '*', decodeURI(query) + '*', ((page ? Number(page) : 1) - 1) * 16]))[0]
+		count = (
+			await knex.raw(
+				'SELECT count(*) FROM bots WHERE `state` != "blocked" AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode)',
+				[decodeURI(query) + '*']
+			)
+		)[0][0]['count(*)']
+		res = (
+			await knex.raw(
+				'SELECT id, votes, MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) as relevance FROM bots WHERE `state` != "blocked" AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) ORDER BY relevance DESC, votes DESC LIMIT 16 OFFSET ?',
+				[decodeURI(query) + '*', decodeURI(query) + '*', ((page ? Number(page) : 1) - 1) * 16]
+			)
+		)[0]
 	} else {
 		count = 1
 		res = []
 	}
 
-	return { type, data: (await Promise.all(res.map(async el => await getBot(el.id)))).map(r=> ({...r})), currentPage: page, totalPage: Math.ceil(Number(count) / 16) }
+	return {
+		type,
+		data: (await Promise.all(res.map(async (el) => await getBot(el.id)))).map((r) => ({ ...r })),
+		currentPage: page,
+		totalPage: Math.ceil(Number(count) / 16),
+	}
 }
 
-async function getServerList(type: ListType, page = 1, query?: string):Promise<List<Server>> {
+async function getServerList(type: ListType, page = 1, query?: string): Promise<List<Server>> {
 	let res: { id: string }[]
-	let count:string|number
+	let count: string | number
 	if (type === 'VOTE') {
 		count = (await knex('servers').whereNot({ state: 'blocked' }).count())[0]['count(*)']
 		res = await knex('servers')
@@ -279,7 +338,8 @@ async function getServerList(type: ListType, page = 1, query?: string):Promise<L
 				.where('last_updated', '>=', new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString())
 				.whereNot({ state: 'blocked' })
 		)[0]['count(*)']
-		res = await knex('servers').whereNot({ state: 'blocked' })
+		res = await knex('servers')
+			.whereNot({ state: 'blocked' })
 			.whereRaw(`flags & ${ServerFlags.trusted}`)
 			.orderByRaw('RAND()')
 			.limit(16)
@@ -288,10 +348,7 @@ async function getServerList(type: ListType, page = 1, query?: string):Promise<L
 			.where('last_updated', '>=', new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString())
 			.whereNot({ state: 'blocked' })
 	} else if (type === 'NEW') {
-		count = (
-			await knex('servers').whereNot({ state: 'blocked' })
-				.count()
-		)[0]['count(*)']
+		count = (await knex('servers').whereNot({ state: 'blocked' }).count())[0]['count(*)']
 		res = await knex('servers')
 			.orderBy('date', 'desc')
 			.limit(16)
@@ -302,12 +359,16 @@ async function getServerList(type: ListType, page = 1, query?: string):Promise<L
 	} else if (type === 'PARTNERED') {
 		count = (
 			await knex('servers')
-				.whereRaw(`flags & ${ServerFlags.partnered} AND last_updated >= ?`, [new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()])
+				.whereRaw(`flags & ${ServerFlags.partnered} AND last_updated >= ?`, [
+					new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+				])
 				.andWhereNot({ state: 'blocked' })
 				.count()
 		)[0]['count(*)']
 		res = await knex('servers')
-			.whereRaw(`flags & ${ServerFlags.partnered} AND last_updated >= ?`, [new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString()])
+			.whereRaw(`flags & ${ServerFlags.partnered} AND last_updated >= ?`, [
+				new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+			])
 			.andWhereNot({ state: 'blocked' })
 			.orderByRaw('RAND()')
 			.limit(16)
@@ -333,31 +394,92 @@ async function getServerList(type: ListType, page = 1, query?: string):Promise<L
 			.select(['id'])
 	} else if (type === 'SEARCH') {
 		if (!query) throw new Error('쿼리가 누락되었습니다.')
-		count = (await knex.raw('SELECT count(*) FROM servers WHERE `state` != "blocked" AND last_updated >= ? AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode)', [new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), decodeURI(query) + '*']))[0][0]['count(*)']
-		res = (await knex.raw('SELECT id, votes, MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) as relevance FROM servers WHERE `state` != "blocked" AND last_updated >= ? AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) ORDER BY relevance DESC, votes DESC LIMIT 16 OFFSET ?', [decodeURI(query)  + '*', new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), decodeURI(query)  + '*', ((page ? Number(page) : 1) - 1) * 16]))[0]
+		count = (
+			await knex.raw(
+				'SELECT count(*) FROM servers WHERE `state` != "blocked" AND last_updated >= ? AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode)',
+				[new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(), decodeURI(query) + '*']
+			)
+		)[0][0]['count(*)']
+		res = (
+			await knex.raw(
+				'SELECT id, votes, MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) as relevance FROM servers WHERE `state` != "blocked" AND last_updated >= ? AND MATCH(`name`, `intro`, `desc`) AGAINST(? in boolean mode) ORDER BY relevance DESC, votes DESC LIMIT 16 OFFSET ?',
+				[
+					decodeURI(query) + '*',
+					new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString(),
+					decodeURI(query) + '*',
+					((page ? Number(page) : 1) - 1) * 16,
+				]
+			)
+		)[0]
 	} else {
 		count = 1
 		res = []
 	}
-	return { type, data: (await Promise.all(res.map(async el => await getServer(el.id)))).map(r=> ({...r})), currentPage: page, totalPage: Math.ceil(Number(count) / 16) }
+	return {
+		type,
+		data: (await Promise.all(res.map(async (el) => await getServer(el.id)))).map((r) => ({ ...r })),
+		currentPage: page,
+		totalPage: Math.ceil(Number(count) / 16),
+	}
 }
 
 async function getBotSubmit(id: string, date: number): Promise<SubmittedBot> {
-	const res = await knex('submitted').select(['id', 'date', 'category', 'lib', 'prefix', 'intro', 'desc', 'url', 'web', 'git', 'discord', 'state', 'owners', 'reason']).where({ id, date })
-	if(res.length === 0) return null
+	const res = await knex('submitted')
+		.select([
+			'id',
+			'date',
+			'category',
+			'lib',
+			'prefix',
+			'intro',
+			'desc',
+			'url',
+			'web',
+			'git',
+			'discord',
+			'state',
+			'owners',
+			'reason',
+		])
+		.where({ id, date })
+	if (res.length === 0) return null
 	res[0].category = JSON.parse(res[0].category)
-	res[0].owners = await Promise.all(JSON.parse(res[0].owners).map(async (u: string)=> await get.user.load(u)))
+	res[0].owners = await Promise.all(
+		JSON.parse(res[0].owners).map(async (u: string) => await get.user.load(u))
+	)
 	return res[0]
 }
 
 async function getBotSubmits(id: string): Promise<SubmittedBot[]> {
-	if(!id) return []
-	let res = await knex('submitted').select(['id', 'date', 'category', 'lib', 'prefix', 'intro', 'desc', 'url', 'web', 'git', 'discord', 'state', 'owners', 'reason']).orderBy('date', 'desc').where('owners', 'LIKE', `%${id}%`)
-	res = await Promise.all(res.map(async el=> {
-		el.category = JSON.parse(el.category)
-		el.owners = await Promise.all(JSON.parse(el.owners).map(async (u: string)=> await get.user.load(u)))
-		return el
-	}))
+	if (!id) return []
+	let res = await knex('submitted')
+		.select([
+			'id',
+			'date',
+			'category',
+			'lib',
+			'prefix',
+			'intro',
+			'desc',
+			'url',
+			'web',
+			'git',
+			'discord',
+			'state',
+			'owners',
+			'reason',
+		])
+		.orderBy('date', 'desc')
+		.where('owners', 'LIKE', `%${id}%`)
+	res = await Promise.all(
+		res.map(async (el) => {
+			el.category = JSON.parse(el.category)
+			el.owners = await Promise.all(
+				JSON.parse(el.owners).map(async (u: string) => await get.user.load(u))
+			)
+			return el
+		})
+	)
 	return res
 }
 
@@ -366,51 +488,71 @@ async function getBotSubmits(id: string): Promise<SubmittedBot[]> {
  * @param botID
  * @returns Timestamp
  */
-async function getVote(userID: string, targetID: string, type: 'bot' | 'server'): Promise<number|null> {
+async function getVote(
+	userID: string,
+	targetID: string,
+	type: 'bot' | 'server'
+): Promise<number | null> {
 	const user = await knex('users').select(['votes']).where({ id: userID })
-	if(user.length === 0) return null
+	if (user.length === 0) return null
 	const data = JSON.parse(user[0].votes)
 	return data[`${type}:${targetID}`] || 0
 }
 
 async function getWebhook(id: string, type: 'bots' | 'servers'): Promise<Webhook | null> {
-	const res = (await knex(type).select(['webhook_url', 'webhook_status', 'webhook_failed_since', 'webhook_secret']).where({ id }))[0]
-	if(!res) return null
+	const res = (
+		await knex(type)
+			.select(['webhook_url', 'webhook_status', 'webhook_failed_since', 'webhook_secret'])
+			.where({ id })
+	)[0]
+	if (!res) return null
 	return {
 		url: res.webhook_url,
 		status: res.webhook_status,
 		failedSince: res.webhook_failed_since,
-		secret: res.webhook_secret
+		secret: res.webhook_secret,
 	}
 }
 
-async function voteBot(userID: string, botID: string): Promise<number|boolean> {
+async function voteBot(userID: string, botID: string): Promise<number | boolean> {
 	const user = await knex('users').select(['votes']).where({ id: userID })
 	const key = `bot:${botID}`
-	if(user.length === 0) return null
+	if (user.length === 0) return null
 	const date = +new Date()
 	const data = JSON.parse(user[0].votes)
 	const lastDate = data[key] || 0
-	if(date - lastDate < VOTE_COOLDOWN) return VOTE_COOLDOWN - (date - lastDate)
+	if (date - lastDate < VOTE_COOLDOWN) return VOTE_COOLDOWN - (date - lastDate)
 	data[key] = date
 	await knex('bots').where({ id: botID }).increment('votes', 1)
-	await knex('users').where({ id: userID }).update({ votes: JSON.stringify(data) })
-	const record = await Bots.updateOne({ _id: botID, 'voteMetrix.day': getYYMMDD() }, { $inc: { 'voteMetrix.$.increasement': 1, 'voteMetrix.$.count': 1 } })
-	if(record.matchedCount === 0) await Bots.findByIdAndUpdate(botID, { $push: { voteMetrix: { count: (await knex('bots').where({ id: botID }))[0].votes } } }, { upsert: true })
+	await knex('users')
+		.where({ id: userID })
+		.update({ votes: JSON.stringify(data) })
+	const record = await Bots.updateOne(
+		{ _id: botID, 'voteMetrix.day': getYYMMDD() },
+		{ $inc: { 'voteMetrix.$.increasement': 1, 'voteMetrix.$.count': 1 } }
+	)
+	if (record.matchedCount === 0)
+		await Bots.findByIdAndUpdate(
+			botID,
+			{ $push: { voteMetrix: { count: (await knex('bots').where({ id: botID }))[0].votes } } },
+			{ upsert: true }
+		)
 	return true
 }
 
-async function voteServer(userID: string, serverID: string): Promise<number|boolean> {
+async function voteServer(userID: string, serverID: string): Promise<number | boolean> {
 	const user = await knex('users').select(['votes']).where({ id: userID })
 	const key = `server:${serverID}`
-	if(user.length === 0) return null
+	if (user.length === 0) return null
 	const date = +new Date()
 	const data = JSON.parse(user[0].votes)
 	const lastDate = data[key] || 0
-	if(date - lastDate < VOTE_COOLDOWN) return VOTE_COOLDOWN - (date - lastDate)
+	if (date - lastDate < VOTE_COOLDOWN) return VOTE_COOLDOWN - (date - lastDate)
 	data[key] = date
 	await knex('servers').where({ id: serverID }).increment('votes', 1)
-	await knex('users').where({ id: userID }).update({ votes: JSON.stringify(data) })
+	await knex('users')
+		.where({ id: userID })
+		.update({ votes: JSON.stringify(data) })
 	// const record = await Servers.updateOne({ _id: serverID, 'voteMetrix.day': getYYMMDD() }, { $inc: { 'voteMetrix.$.increasement': 1, 'voteMetrix.$.count': 1 } })
 	// if(record.n === 0) await Servers.findByIdAndUpdate(serverID, { $push: { voteMetrix: { count: (await knex('servers').where({ id: serverID }))[0].votes } } }, { upsert: true })
 	return true
@@ -423,24 +565,33 @@ async function voteServer(userID: string, serverID: string): Promise<number|bool
  * @returns 5 - 3 or more denies
  * @returns obj - Success
  */
-async function submitBot(id: string, data: AddBotSubmit):Promise<1|2|3|4|5|SubmittedBot> {
-	const submits = await knex('submitted').select(['id']).where({ state: 0 }).andWhere('owners', 'LIKE', `%${id}%`)
-	if(submits.length > 1) return 1
+async function submitBot(
+	id: string,
+	data: AddBotSubmit
+): Promise<1 | 2 | 3 | 4 | 5 | SubmittedBot> {
+	const submits = await knex('submitted')
+		.select(['id'])
+		.where({ state: 0 })
+		.andWhere('owners', 'LIKE', `%${id}%`)
+	if (submits.length > 1) return 1
 	const botId = data.id
 	const strikes = await get.botSubmitStrikes(botId)
-	if(strikes >= 3) return 5
-	const date =  Math.round(+new Date()/1000)
+	if (strikes >= 3) return 5
+	const date = Math.round(+new Date() / 1000)
 	const sameID = await knex('submitted').select(['id']).where({ id: botId, state: 0 })
 	const bot = await get.bot.load(data.id)
-	if(sameID.length !== 0 || bot) return 2
+	if (sameID.length !== 0 || bot) return 2
 	const user = await DiscordBot.users.fetch(data.id).catch(() => false)
-	if(!user) return 3
-	const member = await getMainGuild().members.fetch(id).then(() => true).catch(() => false)
-	if(!member) return 4
+	if (!user) return 3
+	const member = await getMainGuild()
+		.members.fetch(id)
+		.then(() => true)
+		.catch(() => false)
+	if (!member) return 4
 	await knex('submitted').insert({
 		id: botId,
 		date: date,
-		owners: JSON.stringify([ id ]),
+		owners: JSON.stringify([id]),
 		lib: data.library,
 		prefix: data.prefix,
 		intro: data.intro,
@@ -450,7 +601,7 @@ async function submitBot(id: string, data: AddBotSubmit):Promise<1|2|3|4|5|Submi
 		url: data.url,
 		category: JSON.stringify(data.category),
 		discord: data.discord,
-		state: 0
+		state: 0,
 	})
 
 	return await getBotSubmit(botId, date)
@@ -463,47 +614,57 @@ async function submitBot(id: string, data: AddBotSubmit):Promise<1|2|3|4|5|Submi
  * @returns 4 - Invalid invite code
  */
 
-async function submitServer(userID: string, id: string, data: AddServerSubmit): Promise<1|2|3|4|boolean> {
+async function submitServer(
+	userID: string,
+	id: string,
+	data: AddServerSubmit
+): Promise<1 | 2 | 3 | 4 | boolean> {
 	const server = await get.server.load(id)
-	if(server) return 1
+	if (server) return 1
 	const serverData = await get.serverData(id)
-	if(!serverData) return 2
-	if(serverData.owner !== userID && !serverData.admins.includes(userID)) return 3
+	if (!serverData) return 2
+	if (serverData.owner !== userID && !serverData.admins.includes(userID)) return 3
 	const inviteData = await DiscordBot.fetchInvite(data.invite).catch(() => null)
-	if(!inviteData || inviteData.guild.id !== id || inviteData.expiresAt) return 4
+	if (!inviteData || inviteData.guild.id !== id || inviteData.expiresAt) return 4
 	await knex('servers').insert({
 		id: id,
 		name: serverData.name,
-		owners: JSON.stringify([ serverData.owner, ...serverData.admins ]),
+		owners: JSON.stringify([serverData.owner, ...serverData.admins]),
 		intro: data.intro,
 		desc: data.desc,
 		category: JSON.stringify(data.category),
 		invite: data.invite,
-		token: sign({ id })
+		token: sign({ id }),
 	})
 	get.server.clear(id)
 	return true
 }
 
 async function getBotSpec(id: string, userID: string): Promise<BotSpec | null> {
-	const res = await knex('bots').select(['id', 'token', 'webhook_url', 'webhook_status']).where({ id }).andWhere('owners', 'like', `%${userID}%`)
-	if(!res[0]) return null
+	const res = await knex('bots')
+		.select(['id', 'token', 'webhook_url', 'webhook_status'])
+		.where({ id })
+		.andWhere('owners', 'like', `%${userID}%`)
+	if (!res[0]) return null
 	return {
 		id: res[0].id,
 		token: res[0].token,
 		webhookURL: res[0].webhook_url,
-		webhookStatus: res[0].webhook_status
+		webhookStatus: res[0].webhook_status,
 	}
 }
 
 async function getServerSpec(id: string, userID: string): Promise<ServerSpec | null> {
-	const res = await knex('servers').select(['id', 'token', 'webhook_url', 'webhook_status']).where({ id }).andWhere('owners', 'like', `%${userID}%`)
-	if(!res[0]) return null
+	const res = await knex('servers')
+		.select(['id', 'token', 'webhook_url', 'webhook_status'])
+		.where({ id })
+		.andWhere('owners', 'like', `%${userID}%`)
+	if (!res[0]) return null
 	return {
 		id: res[0].id,
 		token: res[0].token,
 		webhookURL: res[0].webhook_url,
-		webhookStatus: res[0].webhook_status
+		webhookStatus: res[0].webhook_status,
 	}
 }
 
@@ -520,31 +681,35 @@ async function deleteServer(id: string): Promise<boolean> {
 
 async function updateBot(id: string, data: ManageBot): Promise<number> {
 	const res = await knex('bots').where({ id })
-	if(res.length === 0) return 0
-	await knex('bots').update({
-		prefix: data.prefix,
-		lib: data.library,
-		web: data.website,
-		git: data.git,
-		url: data.url,
-		discord: data.discord,
-		category: JSON.stringify(data.category),
-		intro: data.intro,
-		desc: data.desc
-	}).where({ id })
+	if (res.length === 0) return 0
+	await knex('bots')
+		.update({
+			prefix: data.prefix,
+			lib: data.library,
+			web: data.website,
+			git: data.git,
+			url: data.url,
+			discord: data.discord,
+			category: JSON.stringify(data.category),
+			intro: data.intro,
+			desc: data.desc,
+		})
+		.where({ id })
 
 	return 1
 }
 
 async function updatedServer(id: string, data: ManageServer) {
 	const res = await knex('servers').where({ id })
-	if(res.length === 0) return 0
-	await knex('servers').update({
-		invite: data.invite,
-		category: JSON.stringify(data.category),
-		intro: data.intro,
-		desc: data.desc
-	}).where({ id })
+	if (res.length === 0) return 0
+	await knex('servers')
+		.update({
+			invite: data.invite,
+			category: JSON.stringify(data.category),
+			intro: data.intro,
+			desc: data.desc,
+		})
+		.where({ id })
 
 	return 1
 }
@@ -556,51 +721,64 @@ async function updatedServer(id: string, data: ManageServer) {
  */
 async function updateServer(id: string, servers: number, shards: number) {
 	const bot = await get.bot.load(id)
-	if(bot.servers < 10000 && servers >= 10000) return 1
-	else if(bot.servers < 1000000 && servers >= 1000000) return 2
-	if(bot.shards < 200 && shards >= 200) return 3
-	await knex('bots').update({ servers: servers === undefined ? bot.servers : servers, shards: shards === undefined ? bot.shards : shards }).where({ id })
-	if(servers) {
-		await Bots.findByIdAndUpdate(id, { $pull: { serverMetrix: { day: getYYMMDD() } } }, { upsert: true })
+	if (bot.servers < 10000 && servers >= 10000) return 1
+	else if (bot.servers < 1000000 && servers >= 1000000) return 2
+	if (bot.shards < 200 && shards >= 200) return 3
+	await knex('bots')
+		.update({
+			servers: servers === undefined ? bot.servers : servers,
+			shards: shards === undefined ? bot.shards : shards,
+		})
+		.where({ id })
+	if (servers) {
+		await Bots.findByIdAndUpdate(
+			id,
+			{ $pull: { serverMetrix: { day: getYYMMDD() } } },
+			{ upsert: true }
+		)
 		await Bots.findByIdAndUpdate(id, { $push: { serverMetrix: { count: servers } } })
 	}
 	return
 }
 
 async function updateWebhook(id: string, type: 'bots' | 'servers', value: Partial<Webhook>) {
-	const res = await knex(type).update({ 
-		webhook_url: value.url, 
-		webhook_status: value.status, 
-		webhook_failed_since: value.failedSince, 
-		webhook_secret: value.secret
-	}).where({ id })
-	if(res !== 1) return false
+	const res = await knex(type)
+		.update({
+			webhook_url: value.url,
+			webhook_status: value.status,
+			webhook_failed_since: value.failedSince,
+			webhook_secret: value.secret,
+		})
+		.where({ id })
+	if (res !== 1) return false
 	return true
 }
 
 async function updateOwner(id: string, owners: string[]): Promise<void> {
-	await knex('bots').where({ id }).update({ owners: JSON.stringify(owners) })
+	await knex('bots')
+		.where({ id })
+		.update({ owners: JSON.stringify(owners) })
 	get.bot.clear(id)
 }
 
 async function resetBotToken(id: string, beforeToken: string) {
 	const token = sign({ id })
 	const bot = await knex('bots').update({ token }).where({ id, token: beforeToken })
-	if(bot !== 1) return null
+	if (bot !== 1) return null
 	return token
 }
 
 async function resetServerToken(id: string, beforeToken: string) {
 	const token = sign({ id })
 	const server = await knex('servers').update({ token }).where({ id, token: beforeToken })
-	if(server !== 1) return null
+	if (server !== 1) return null
 	return token
 }
 
 async function Github(id: string, github: string | null) {
-	if(github) {
+	if (github) {
 		const user = await knex('users').where({ github }).whereNot({ id })
-		if(user.length !== 0) return 0
+		if (user.length !== 0) return 0
 	}
 	await knex('users').update({ github }).where({ id })
 	return 1
@@ -608,12 +786,15 @@ async function Github(id: string, github: string | null) {
 
 async function getImage(url: string) {
 	const res = await fetch(url)
-	if(!res.ok) return null
+	if (!res.ok) return null
 	return await res.buffer()
 }
 
-async function getDiscordUser(id: string):Promise<DiscordUser> {
-	return await DiscordBot.users.fetch(id).then(u => u).catch(() => null)
+async function getDiscordUser(id: string): Promise<DiscordUser> {
+	return await DiscordBot.users
+		.fetch(id)
+		.then((u) => u)
+		.catch(() => null)
 }
 
 /**
@@ -622,17 +803,43 @@ async function getDiscordUser(id: string):Promise<DiscordUser> {
  * @returns 1 - UnVerified
  * @returns 2 - Blocked
  */
-async function assignToken(info: TokenRegister):Promise<string|1|2> {
-	let token = await knex('users').select(['token', 'perm']).where({ id: info.id || '' })
+async function assignToken(info: TokenRegister): Promise<string | 1 | 2> {
+	let token = await knex('users')
+		.select(['token', 'perm'])
+		.where({ id: info.id || '' })
 	let t: string
-	if(!info.verified) return 1
-	if(token.length === 0) {
+	if (!info.verified) return 1
+	if (token.length === 0) {
 		t = sign({ id: info.id }, { expiresIn: '30d' })
-		await knex('users').insert({ token: t, date: Math.round(Number(new Date()) / 1000), id: info.id, email: info.email, tag: info.discriminator, username: info.username, discord: sign({ access_token: info.access_token, expires_in: info.expires_in, refresh_token: info.refresh_token })  })
+		await knex('users').insert({
+			token: t,
+			date: Math.round(Number(new Date()) / 1000),
+			id: info.id,
+			email: info.email,
+			tag: info.discriminator,
+			username: info.username,
+			discord: sign({
+				access_token: info.access_token,
+				expires_in: info.expires_in,
+				refresh_token: info.refresh_token,
+			}),
+		})
 		token = await knex('users').select(['token']).where({ id: info.id })
-	} else await knex('users').update({ email: info.email, tag: info.discriminator, username: info.username, discord: sign({ access_token: info.access_token, expires_in: info.expires_in, refresh_token: info.refresh_token }) }).where({ id: info.id })
-	if(token[0].perm && token[0].perm !== 'user') return 2
-	if(!verify(token[0]?.token ?? '')) {
+	} else
+		await knex('users')
+			.update({
+				email: info.email,
+				tag: info.discriminator,
+				username: info.username,
+				discord: sign({
+					access_token: info.access_token,
+					expires_in: info.expires_in,
+					refresh_token: info.refresh_token,
+				}),
+			})
+			.where({ id: info.id })
+	if (token[0].perm && token[0].perm !== 'user') return 2
+	if (!verify(token[0]?.token ?? '')) {
 		t = sign({ id: info.id }, { expiresIn: '30d' })
 		await knex('users').update({ token: t }).where({ id: info.id })
 	} else t = token[0].token
@@ -640,67 +847,81 @@ async function assignToken(info: TokenRegister):Promise<string|1|2> {
 	return t
 }
 
-async function Authorization(token: string):Promise<string|false> {
+async function Authorization(token: string): Promise<string | false> {
 	const tokenInfo = verify(token ?? '')
-	const user = await knex('users').select(['id']).where({ id: tokenInfo?.id ?? '', token: token ?? '' })
-	if(user.length === 0) return false
+	const user = await knex('users')
+		.select(['id'])
+		.where({ id: tokenInfo?.id ?? '', token: token ?? '' })
+	if (user.length === 0) return false
 	else return user[0].id
 }
 
-async function BotAuthorization(token: string):Promise<string|false> {
+async function BotAuthorization(token: string): Promise<string | false> {
 	const tokenInfo = verify(token ?? '')
-	const bot = await knex('bots').select(['id']).where({ id: tokenInfo?.id ?? '', token: token ?? '' })
-	if(bot.length === 0) return false
+	const bot = await knex('bots')
+		.select(['id'])
+		.where({ id: tokenInfo?.id ?? '', token: token ?? '' })
+	if (bot.length === 0) return false
 	else return bot[0].id
 }
 
-async function ServerAuthorization(token: string): Promise<string|false> {
+async function ServerAuthorization(token: string): Promise<string | false> {
 	const tokenInfo = verify(token ?? '')
-	const server = await knex('servers').select(['id']).where({ id: tokenInfo?.id ?? '', token: token ?? '' })
-	if(server.length === 0) return false
+	const server = await knex('servers')
+		.select(['id'])
+		.where({ id: tokenInfo?.id ?? '', token: token ?? '' })
+	if (server.length === 0) return false
 	else return server[0].id
 }
 
 async function fetchUserDiscordToken(id: string): Promise<DiscordTokenInfo> {
 	const res = await knex('users').select(['discord']).where({ id })
 	let discord = verify(res[0]?.discord ?? '')
-	if(!discord) return null
-	if(Date.now() > (discord.iat + discord.expires_in) * 1000) {
+	if (!discord) return null
+	if (Date.now() > (discord.iat + discord.expires_in) * 1000) {
 		const token: DiscordTokenInfo = await fetch(DiscordEnpoints.Token, {
 			method: 'POST',
 			body: formData({
 				client_id: process.env.DISCORD_CLIENT_ID,
 				client_secret: process.env.DISCORD_CLIENT_SECRET,
 				refresh_token: discord.refresh_token,
-				grant_type: 'refresh_token'
+				grant_type: 'refresh_token',
 			}),
 			headers: {
 				'Content-Type': 'application/x-www-form-urlencoded',
 			},
-		}).then(r=> r.json())
+		}).then((r) => r.json())
 		if (token.error) return null
-		await knex('users').update({ discord: sign({ access_token: token.access_token, expires_in: token.expires_in, refresh_token: token.refresh_token }) }).where({ id })
+		await knex('users')
+			.update({
+				discord: sign({
+					access_token: token.access_token,
+					expires_in: token.expires_in,
+					refresh_token: token.refresh_token,
+				}),
+			})
+			.where({ id })
 		discord = token
 	}
 	return discord
 }
 
 async function addRequest(ip: string, map: TLRU<unknown, number>) {
-	if(!map.has(ip)) map.set(ip, 0)
+	if (!map.has(ip)) map.set(ip, 0)
 	map.set(ip, map.get(ip) + 1)
 }
 
 export async function CaptchaVerify(response: string): Promise<boolean> {
-	const res:{ success: boolean } = await fetch(SpecialEndPoints.HCaptcha.Verify, {
+	const res: { success: boolean } = await fetch(SpecialEndPoints.HCaptcha.Verify, {
 		method: 'POST',
 		headers: {
-			'Content-Type': 'application/x-www-form-urlencoded'
+			'Content-Type': 'application/x-www-form-urlencoded',
 		},
 		body: formData({
 			response,
-			secret: process.env.HCAPTCHA_KEY
-		})
-	}).then(r=> r.json())
+			secret: process.env.HCAPTCHA_KEY,
+		}),
+	}).then((r) => r.json())
 
 	return res.success
 }
@@ -709,16 +930,22 @@ export async function CaptchaVerify(response: string): Promise<boolean> {
 
 async function getBotSubmitList() {
 	const res = await knex('submitted').select(['id', 'date']).where({ state: 0 })
-	return await Promise.all(res.map(b => get.botSubmit.load(JSON.stringify({ id: b.id, date: b.date }))))
+	return await Promise.all(
+		res.map((b) => get.botSubmit.load(JSON.stringify({ id: b.id, date: b.date })))
+	)
 }
 
 async function getBotSubmitHistory(id: string): Promise<SubmittedBot[]> {
 	const res = await knex('submitted').select(['id', 'date']).where({ id })
-	return await Promise.all(res.map(b => get.botSubmit.load(JSON.stringify({ id: b.id, date: b.date }))))
+	return await Promise.all(
+		res.map((b) => get.botSubmit.load(JSON.stringify({ id: b.id, date: b.date })))
+	)
 }
 
 async function denyBotSubmission(id: string, date: number, reason?: string) {
-	await knex('submitted').update({ state: 2, reason: reason || null }).where({ state: 0, id, date })
+	await knex('submitted')
+		.update({ state: 2, reason: reason || null })
+		.where({ state: 0, id, date })
 }
 
 async function getBotSubmitStrikes(id: string) {
@@ -730,148 +957,273 @@ async function getBotSubmitStrikes(id: string) {
 }
 
 async function approveBotSubmission(id: string, date: number) {
-	const data = await knex('submitted').select(['id', 'date', 'category', 'lib', 'prefix', 'intro', 'desc', 'url', 'web', 'git', 'discord', 'state', 'owners', 'reason']).where({ state: 0, id, date })
-	if(!data[0]) return false
+	const data = await knex('submitted')
+		.select([
+			'id',
+			'date',
+			'category',
+			'lib',
+			'prefix',
+			'intro',
+			'desc',
+			'url',
+			'web',
+			'git',
+			'discord',
+			'state',
+			'owners',
+			'reason',
+		])
+		.where({ state: 0, id, date })
+	if (!data[0]) return false
 	await knex('submitted').where({ state: 0, id, date }).update({ state: 1 })
-	await knex('bots').insert({ id, date, owners: data[0].owners, lib: data[0].lib, prefix: data[0].prefix, intro: data[0].intro, desc: data[0].desc, url: data[0].url, web: data[0].web, git: data[0].git, category: data[0].category, discord: data[0].discord, token: sign({ id }) })
+	await knex('bots').insert({
+		id,
+		date,
+		owners: data[0].owners,
+		lib: data[0].lib,
+		prefix: data[0].prefix,
+		intro: data[0].intro,
+		desc: data[0].desc,
+		url: data[0].url,
+		web: data[0].web,
+		git: data[0].git,
+		category: data[0].category,
+		discord: data[0].discord,
+		token: sign({ id }),
+	})
 	return true
 }
 
 export function safeImageHost(text: string) {
-	return text?.replace(markdownImage, (matches: string, alt: string|undefined, link: string|undefined, description: string|undefined): string => {
-		try {
-			const url = new URL(link)
-			return `![${alt || description || ''}](${imageSafeHost.find(el => url.host.endsWith(el)) ? link : camoUrl(link) })`
-		} catch {
-			return matches
-		}
-	}) || null
+	return (
+		text?.replace(
+			markdownImage,
+			(
+				matches: string,
+				alt: string | undefined,
+				link: string | undefined,
+				description: string | undefined
+			): string => {
+				try {
+					const url = new URL(link)
+					return `![${alt || description || ''}](${
+						imageSafeHost.find((el) => url.host.endsWith(el)) ? link : camoUrl(link)
+					})`
+				} catch {
+					return matches
+				}
+			}
+		) || null
+	)
 }
 
 async function viewBot(id: string) {
-	const record = await Bots.updateOne({ _id: id, 'viewMetrix.day': getYYMMDD() }, { $inc: { 'viewMetrix.$.count': 1 } })
-	if(record.matchedCount === 0) await Bots.findByIdAndUpdate(id, { $push: { viewMetrix: { count: 0 } } }, { upsert: true })
+	const record = await Bots.updateOne(
+		{ _id: id, 'viewMetrix.day': getYYMMDD() },
+		{ $inc: { 'viewMetrix.$.count': 1 } }
+	)
+	if (record.matchedCount === 0)
+		await Bots.findByIdAndUpdate(id, { $push: { viewMetrix: { count: 0 } } }, { upsert: true })
 }
 
 export const get = {
 	discord: {
 		user: new DataLoader(
 			async (ids: string[]) =>
-				(await Promise.all(ids.map(async (id: string) => await getDiscordUser(id))))
-			, { cacheMap: new TLRU({ maxStoreSize: 5000, maxAgeMs: 43200000 }) }),
+				await Promise.all(ids.map(async (id: string) => await getDiscordUser(id))),
+			{ cacheMap: new TLRU({ maxStoreSize: 5000, maxAgeMs: 43200000 }) }
+		),
 	},
 	bot: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (el: string) => await getBot(el)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (el: string) => await getBot(el)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }
+	),
 	_rawBot: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (el: string) => await getBot(el, false)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (el: string) => await getBot(el, false)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }
+	),
 	botDescSafe: async (id: string) => {
 		const bot = await get.bot.load(id)
 		return safeImageHost(bot?.desc)
 	},
 	server: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (id: string) => await getServer(id)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 5000, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (id: string) => await getServer(id)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 5000, maxAgeMs: 60000 }) }
+	),
 	_rawServer: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (id: string) => await getServer(id, false)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 5000, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (id: string) => await getServer(id, false)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 5000, maxAgeMs: 60000 }) }
+	),
 	user: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (el: string) => await getUser(el)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (el: string) => await getUser(el)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }
+	),
 	_rawUser: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (el: string) => await getUser(el, false)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (el: string) => await getUser(el, false)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }
+	),
 	userGuilds: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (el: string) => await getUserGuilds(el)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (el: string) => await getUserGuilds(el)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }
+	),
 	botSubmits: new DataLoader(
 		async (ids: string[]) =>
-			(await Promise.all(ids.map(async (el: string) => await getBotSubmits(el)))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }),
+			(await Promise.all(ids.map(async (el: string) => await getBotSubmits(el)))).map((row) =>
+				serialize(row)
+			),
+		{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }
+	),
 	botSubmit: new DataLoader(
 		async (key: string[]) =>
-			(await Promise.all(key.map(async (el: string) => {
-				const json = JSON.parse(el)
-				return await getBotSubmit(json.id, json.date)
-			}))).map(row => serialize(row))
-		, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }),
+			(
+				await Promise.all(
+					key.map(async (el: string) => {
+						const json = JSON.parse(el)
+						return await getBotSubmit(json.id, json.date)
+					})
+				)
+			).map((row) => serialize(row)),
+		{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 60000 }) }
+	),
 	botSpec: getBotSpec,
 	serverSpec: getServerSpec,
 	list: {
 		category: new DataLoader(
 			async (key: string[]) =>
-				(await Promise.all(key.map(async (k: string) => {
-					const json = JSON.parse(k)
-					return await getBotList('CATEGORY', json.page, json.category)
-				}))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }),
+				(
+					await Promise.all(
+						key.map(async (k: string) => {
+							const json = JSON.parse(k)
+							return await getBotList('CATEGORY', json.page, json.category)
+						})
+					)
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }
+		),
 		search: new DataLoader(
 			async (key: string[]) =>
-				(await Promise.all(key.map(async (k: string) => {
-					const json = JSON.parse(k)
-					const res = await getBotList('SEARCH', json.page, json.query)
-					return { ...res, totalPage: Number(res.totalPage), currentPage: Number(res.currentPage) }
-				}))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }),
+				(
+					await Promise.all(
+						key.map(async (k: string) => {
+							const json = JSON.parse(k)
+							const res = await getBotList('SEARCH', json.page, json.query)
+							return {
+								...res,
+								totalPage: Number(res.totalPage),
+								currentPage: Number(res.currentPage),
+							}
+						})
+					)
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }
+		),
 		votes: new DataLoader(
 			async (pages: number[]) =>
-				(await Promise.all(pages.map(async (page: number) => await getBotList('VOTE', page)))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }),
+				(await Promise.all(pages.map(async (page: number) => await getBotList('VOTE', page)))).map(
+					(row) => serialize(row)
+				),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }
+		),
 		new: new DataLoader(
 			async (pages: number[]) =>
-				(await Promise.all(pages.map(async (page: number) => await getBotList('NEW', page)))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 1800000 }) }),
+				(await Promise.all(pages.map(async (page: number) => await getBotList('NEW', page)))).map(
+					(row) => serialize(row)
+				),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 1800000 }) }
+		),
 		trusted: new DataLoader(
 			async (pages: number[]) =>
-				(await Promise.all(pages.map(async (page: number) => await getBotList('TRUSTED', page)))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 3600000 }) }),
+				(
+					await Promise.all(pages.map(async (page: number) => await getBotList('TRUSTED', page)))
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 3600000 }) }
+		),
 	},
 	serverList: {
 		category: new DataLoader(
 			async (key: string[]) =>
-				(await Promise.all(key.map(async (k: string) => {
-					const json = JSON.parse(k)
-					return await getServerList('CATEGORY', json.page, json.category)
-				}))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }),
+				(
+					await Promise.all(
+						key.map(async (k: string) => {
+							const json = JSON.parse(k)
+							return await getServerList('CATEGORY', json.page, json.category)
+						})
+					)
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }
+		),
 		search: new DataLoader(
 			async (key: string[]) =>
-				(await Promise.all(key.map(async (k: string) => {
-					const json = JSON.parse(k)
-					const res = await getServerList('SEARCH', json.page, json.query)
-					return { ...res, totalPage: Number(res.totalPage), currentPage: Number(res.currentPage) }
-				}))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }),
+				(
+					await Promise.all(
+						key.map(async (k: string) => {
+							const json = JSON.parse(k)
+							const res = await getServerList('SEARCH', json.page, json.query)
+							return {
+								...res,
+								totalPage: Number(res.totalPage),
+								currentPage: Number(res.currentPage),
+							}
+						})
+					)
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }
+		),
 		votes: new DataLoader(
 			async (pages: number[]) =>
-				(await Promise.all(pages.map(async (page: number) => await getServerList('VOTE', page)))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }),
+				(
+					await Promise.all(pages.map(async (page: number) => await getServerList('VOTE', page)))
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 500000 }) }
+		),
 		new: new DataLoader(
 			async (pages: number[]) =>
-				(await Promise.all(pages.map(async (page: number) => await getServerList('NEW', page)))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 1800000 }) }),
+				(
+					await Promise.all(pages.map(async (page: number) => await getServerList('NEW', page)))
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 1800000 }) }
+		),
 		trusted: new DataLoader(
 			async (pages: number[]) =>
-				(await Promise.all(pages.map(async (page: number) => await getServerList('TRUSTED', page)))).map(row => serialize(row))
-			, { cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 3600000 }) }),
+				(
+					await Promise.all(pages.map(async (page: number) => await getServerList('TRUSTED', page)))
+				).map((row) => serialize(row)),
+			{ cacheMap: new TLRU({ maxStoreSize: 50, maxAgeMs: 3600000 }) }
+		),
 	},
 	images: {
 		user: new DataLoader(
 			async (urls: string[]) =>
-				(await Promise.all(urls.map(async (url: string) => await getImage(url))))
-			, { cacheMap: new TLRU({ maxStoreSize: 500, maxAgeMs: 3600000 }) }),
+				await Promise.all(urls.map(async (url: string) => await getImage(url))),
+			{ cacheMap: new TLRU({ maxStoreSize: 500, maxAgeMs: 3600000 }) }
+		),
 		server: new DataLoader(
 			async (urls: string[]) =>
-				(await Promise.all(urls.map(async (url: string) => await getImage(url))))
-			, { cacheMap: new TLRU({ maxStoreSize: 500, maxAgeMs: 3600000 }) }),
+				await Promise.all(urls.map(async (url: string) => await getImage(url))),
+			{ cacheMap: new TLRU({ maxStoreSize: 500, maxAgeMs: 3600000 }) }
+		),
 	},
 	serverData: getServerData,
 	webhook: getWebhook,
@@ -883,7 +1235,7 @@ export const get = {
 	botSubmitList: getBotSubmitList,
 	botSubmitHistory: getBotSubmitHistory,
 	botSubmitStrikes: getBotSubmitStrikes,
-	serverOwners: fetchServerOwners
+	serverOwners: fetchServerOwners,
 }
 
 export const update = {
@@ -898,7 +1250,7 @@ export const update = {
 	webhook: updateWebhook,
 	denyBotSubmission,
 	approveBotSubmission,
-	fetchUserDiscordToken
+	fetchUserDiscordToken,
 }
 
 export const put = {
@@ -906,17 +1258,17 @@ export const put = {
 	voteServer,
 	submitBot,
 	submitServer,
-	viewBot
+	viewBot,
 }
 
 export const remove = {
 	bot: deleteBot,
-	server: deleteServer
+	server: deleteServer,
 }
 
 export const ratelimit = {
 	image: (ip: string) => {
 		addRequest(ip, imageRateLimit)
 		return imageRateLimit.get(ip)
-	}
+	},
 }
diff --git a/utils/Regex.ts b/utils/Regex.ts
index acc42e5..cd6882a 100644
--- a/utils/Regex.ts
+++ b/utils/Regex.ts
@@ -11,4 +11,4 @@ export const Emoji =
 export const Heading = '<h\\d id="(.+?)">(.*?)<\\/h(\\d)>'
 export const EmojiSyntax = ':(\\w+):'
 export const ImageTag = /<img\s[^>]*?alt\s*=\s*['"]([^'"]*?)['"][^>]*?>/
-export const markdownImage = /!\[([^\]]*)\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g
\ No newline at end of file
+export const markdownImage = /!\[([^\]]*)\]\((.*?)\s*("(?:.*[^"])")?\s*\)/g
diff --git a/utils/RequestHandler.ts b/utils/RequestHandler.ts
index da1e249..d180a7d 100644
--- a/utils/RequestHandler.ts
+++ b/utils/RequestHandler.ts
@@ -14,9 +14,9 @@ const limiter = rateLimit({
 	keyGenerator: (req) => req.headers['x-forwarded-for'] as string,
 	skip: (req, res) => {
 		res.setHeader('X-RateLimit-Global', 'true')
-		if(GlobalRatelimitIgnore.map(el => req.url.startsWith(el)).find(el => el)) return true
+		if (GlobalRatelimitIgnore.map((el) => req.url.startsWith(el)).find((el) => el)) return true
 		return false
-	}
+	},
 })
 const RequestHandler = () =>
 	nc<NextApiRequest, NextApiResponse>({
@@ -27,8 +27,7 @@ const RequestHandler = () =>
 			console.error(err)
 			Sentry.captureException(err)
 			return ResponseWrapper(res, { code: 500 })
-		}
-	})
-		.use(limiter)
+		},
+	}).use(limiter)
 
 export default RequestHandler
diff --git a/utils/ResponseWrapper.ts b/utils/ResponseWrapper.ts
index 8af971c..37a79b7 100644
--- a/utils/ResponseWrapper.ts
+++ b/utils/ResponseWrapper.ts
@@ -19,7 +19,7 @@ export default function ResponseWrapper<T = unknown>(
 }
 
 interface ApiResponse {
-	status(status: string|number): void
+	status(status: string | number): void
 	setHeader(key: string, value: string): void
 	json(json: unknown): void
 }
diff --git a/utils/ShowdownExtensions.ts b/utils/ShowdownExtensions.ts
index 0fb7884..74b2620 100644
--- a/utils/ShowdownExtensions.ts
+++ b/utils/ShowdownExtensions.ts
@@ -3,10 +3,9 @@ import Twemoji from 'twemoji'
 import { KoreanbotsEmoji } from './Constants'
 
 export const anchorHeader = {
-	type:    'output',
-	regex:   Heading,
-	replace: function (__match: string, id:string, title:string, level:number): string {
-
+	type: 'output',
+	regex: Heading,
+	replace: function (__match: string, id: string, title: string, level: number): string {
 		// github anchor style
 		const href = id.replace(ImageTag, '$1').replace(/"/gi, '')
 		const octicon_html = `<a class="anchor mr-1 align-middle" aria-hidden="true" href="#${href}">
@@ -16,26 +15,30 @@ export const anchorHeader = {
 		</a>`
 
 		return `<h${level} id="${href}">${octicon_html}${title}</h${level}>`
-	}
+	},
 }
 
 export const twemoji = {
 	type: 'output',
 	regex: `${Emoji}{1,2}`,
-	replace: function(__match: string, two: string, one: string) {
+	replace: function (__match: string, two: string, one: string) {
 		const parsed = __match || two || one
-		const emoj = Twemoji.parse(parsed, { folder: 'svg', ext: '.svg', base: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/' })
-		if(!emoj) return parsed
+		const emoj = Twemoji.parse(parsed, {
+			folder: 'svg',
+			ext: '.svg',
+			base: 'https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/',
+		})
+		if (!emoj) return parsed
 		return emoj
-	} 
+	},
 }
 
 export const customEmoji = {
 	type: 'output',
 	regex: EmojiSyntax,
-	replace: function(__match: string, name: string): string {
-		const result = KoreanbotsEmoji.find(el => el.short_names.includes(name))
-		if(!name || !result) return `:${name}:`
+	replace: function (__match: string, name: string): string {
+		const result = KoreanbotsEmoji.find((el) => el.short_names.includes(name))
+		if (!name || !result) return `:${name}:`
 		return `<img class="emoji special" draggable="false" alt="${name}" src="${result.imageUrl}"/>`
-	}
+	},
 }
diff --git a/utils/Tools.ts b/utils/Tools.ts
index 0ed98da..067e6ac 100644
--- a/utils/Tools.ts
+++ b/utils/Tools.ts
@@ -24,45 +24,72 @@ export function handlePWA(): boolean {
 	return displayMode === 'standalone'
 }
 
-export function formatNumber(value: number):string  {
-	if(!value) return '0'
-	const suffixes = ['', '만', '억', '조','해']
-	const suffixNum = Math.floor((''+value).length/4)
-	let shortValue: number = parseFloat((suffixNum != 0 ? (value / Math.pow(10000, suffixNum)) : value).toPrecision(2))
+export function formatNumber(value: number): string {
+	if (!value) return '0'
+	const suffixes = ['', '만', '억', '조', '해']
+	const suffixNum = Math.floor(('' + value).length / 4)
+	let shortValue: number = parseFloat(
+		(suffixNum != 0 ? value / Math.pow(10000, suffixNum) : value).toPrecision(2)
+	)
 	if (shortValue % 1 != 0) {
 		shortValue = Number(shortValue.toFixed(1))
 	}
-	if(suffixNum ===  1 && shortValue < 1) return shortValue * 10 + '천'
-	else if(shortValue === 1000) return '1천'
-	return shortValue+suffixes[suffixNum]
+	if (suffixNum === 1 && shortValue < 1) return shortValue * 10 + '천'
+	else if (shortValue === 1000) return '1천'
+	return shortValue + suffixes[suffixNum]
 }
 
 function checkFlag(base: number, required: number) {
 	return (base & required) === required
 }
 
-export function checkUserFlag(base: number, required: number | keyof typeof UserFlags):boolean {
+export function checkUserFlag(base: number, required: number | keyof typeof UserFlags): boolean {
 	return checkFlag(base, typeof required === 'number' ? required : UserFlags[required])
 }
 
-export function checkBotFlag(base: number, required: number | keyof typeof BotFlags):boolean {
+export function checkBotFlag(base: number, required: number | keyof typeof BotFlags): boolean {
 	return checkFlag(base, typeof required === 'number' ? required : BotFlags[required])
 }
 
-export function checkServerFlag(base: number, required: number | keyof typeof ServerFlags):boolean {
+export function checkServerFlag(
+	base: number,
+	required: number | keyof typeof ServerFlags
+): boolean {
 	return checkFlag(base, typeof required === 'number' ? required : ServerFlags[required])
 }
 
-export function makeImageURL(root:string, { format='png', size=256 }:ImageOptions):string {
+export function makeImageURL(root: string, { format = 'png', size = 256 }: ImageOptions): string {
 	return `${root}.${format}?size=${size}`
 }
 
-export function makeBotURL({ id, vanity, flags=0 }: { flags?: number, vanity?:string, id: string }): string {
-	return `/bots/${(checkBotFlag(flags, 'trusted') || checkBotFlag(flags, 'partnered')) && vanity ? vanity : id}`
+export function makeBotURL({
+	id,
+	vanity,
+	flags = 0,
+}: {
+	flags?: number
+	vanity?: string
+	id: string
+}): string {
+	return `/bots/${
+		(checkBotFlag(flags, 'trusted') || checkBotFlag(flags, 'partnered')) && vanity ? vanity : id
+	}`
 }
 
-export function makeServerURL({ id, vanity, flags=0 }: { flags?: number, vanity?:string, id: string }): string {
-	return `/servers/${(checkServerFlag(flags, 'trusted') || checkServerFlag(flags, 'partnered')) && vanity ? vanity : id}`
+export function makeServerURL({
+	id,
+	vanity,
+	flags = 0,
+}: {
+	flags?: number
+	vanity?: string
+	id: string
+}): string {
+	return `/servers/${
+		(checkServerFlag(flags, 'trusted') || checkServerFlag(flags, 'partnered')) && vanity
+			? vanity
+			: id
+	}`
 }
 
 export function makeUserURL({ id }: { id: string }): string {
@@ -73,20 +100,24 @@ export function serialize<T>(data: T): T {
 	return JSON.parse(JSON.stringify(data))
 }
 
-export function diff(original: string, current: string, header=false, sep='\n', join?: string) {
-	return difflib.unifiedDiff(original.split(sep), current.split(sep)).slice(header ? 2 : 3).join(join ?? sep)
+export function diff(original: string, current: string, header = false, sep = '\n', join?: string) {
+	return difflib
+		.unifiedDiff(original.split(sep), current.split(sep))
+		.slice(header ? 2 : 3)
+		.join(join ?? sep)
 }
 
-export function objectDiff(original: Record<string, string>, current: Record<string, string>): [string, (string|null)[] ][] {
+export function objectDiff(
+	original: Record<string, string>,
+	current: Record<string, string>
+): [string, (string | null)[]][] {
 	const obj: Record<string, string[]> = {}
-	Object.entries(original).forEach(k =>
-		obj[k[0]] = [ k[1] ]
-	)
-	Object.entries(current).forEach(k => {
-		if(!obj[k[0]]) obj[k[0]] = []
+	Object.entries(original).forEach((k) => (obj[k[0]] = [k[1]]))
+	Object.entries(current).forEach((k) => {
+		if (!obj[k[0]]) obj[k[0]] = []
 		obj[k[0]][1] = k[1]
 	})
-	return Object.entries(obj).filter(k => k[1][0] !== k[1][1])
+	return Object.entries(obj).filter((k) => k[1][0] !== k[1][1])
 }
 
 export function makeDiscordCodeblock(content: string, lang?: string): string {
@@ -94,7 +125,11 @@ export function makeDiscordCodeblock(content: string, lang?: string): string {
 }
 
 export function inspect(object: unknown) {
-	return utilInspect(object, { depth: Infinity, maxArrayLength: Infinity, maxStringLength: Infinity})
+	return utilInspect(object, {
+		depth: Infinity,
+		maxArrayLength: Infinity,
+		maxStringLength: Infinity,
+	})
 }
 
 export function supportsWebP() {
@@ -118,21 +153,22 @@ export function systemTheme() {
 export function checkBrowser(): string {
 	const ua = navigator.userAgent
 	let tem
-	let M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+(\.\d+)?(\.\d+)?)/i) || []
-	if(/trident/i.test(M[1])){
-		tem=/\brv[ :]+(\d+)/g.exec(ua) || []
-		return 'IE '+(tem[1] || '')
+	let M =
+		ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+(\.\d+)?(\.\d+)?)/i) || []
+	if (/trident/i.test(M[1])) {
+		tem = /\brv[ :]+(\d+)/g.exec(ua) || []
+		return 'IE ' + (tem[1] || '')
 	}
-	if(M[1]=== 'Chrome'){
-		tem= ua.match(/\b(OPR|Edge|Whale)\/(\d+)/)
-		if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera')
+	if (M[1] === 'Chrome') {
+		tem = ua.match(/\b(OPR|Edge|Whale)\/(\d+)/)
+		if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera')
 	}
-	M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']
-	if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1])
+	M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?']
+	if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1])
 	return M.join(' ')
 }
 
-export function generateOauthURL(provider: 'discord'|'github', clientID: string, scope?: string) {
+export function generateOauthURL(provider: 'discord' | 'github', clientID: string, scope?: string) {
 	return Oauth[provider](clientID, scope)
 }
 
@@ -144,23 +180,21 @@ export function formData(details: { [key: string]: string | number | boolean })
 		formBody.push(encodedKey + '=' + encodedValue)
 	}
 	return formBody.join('&')
-	
 }
 
 export function bufferToStream(binary: Buffer) {
-
 	const readableInstanceStream = new Readable({
 		read() {
 			this.push(binary)
 			this.push(null)
-		}
+		},
 	})
 
 	return readableInstanceStream
 }
 
-export function parseCookie(req?: { headers: { cookie?: string }}): { [key: string]: string } {
-	if(!req) return {}
+export function parseCookie(req?: { headers: { cookie?: string } }): { [key: string]: string } {
+	if (!req) return {}
 	return cookie.parse(req.headers.cookie || '')
 }
 
@@ -183,11 +217,10 @@ export function camoUrl(url: string): string {
 	return BASE_URLs.camo + `/${HMAC(url)}/${toHex(url)}`
 }
 
-export function HMAC(value: string, secret=process.env.CAMO_SECRET):string|null {
+export function HMAC(value: string, secret = process.env.CAMO_SECRET): string | null {
 	try {
 		return createHmac('sha1', secret).update(value, 'utf8').digest('hex')
-	}
-	catch {
+	} catch {
 		return null
 	}
 }
@@ -196,7 +229,7 @@ export function toHex(value: string): string {
 	return Buffer.from(value).toString('hex')
 }
 
-export function getRandom<T=unknown>(arr: T[]): T {
+export function getRandom<T = unknown>(arr: T[]): T {
 	return arr[Math.floor(Math.random() * arr.length)]
 }
 
@@ -205,14 +238,14 @@ export function parseDockerhubTag(imageTag: string) {
 }
 
 export function getYYMMDD(): string {
-	return (new Date()).toISOString().slice(0, 10).split('-').join('')
+	return new Date().toISOString().slice(0, 10).split('-').join('')
 }
 
 export function convertMetrixToGraph(data: MetrixData[], keyname?: string) {
-	return data.map(el=> ({
+	return data.map((el) => ({
 		x: Day(el.day, 'YYMMDD').toDate(),
-		y: el[keyname] || el.count
+		y: el[keyname] || el.count,
 	}))
 }
 
-export * from './ShowdownExtensions'
\ No newline at end of file
+export * from './ShowdownExtensions'
diff --git a/utils/Webhook.ts b/utils/Webhook.ts
index 05b78c3..f3699ae 100644
--- a/utils/Webhook.ts
+++ b/utils/Webhook.ts
@@ -1,4 +1,13 @@
-import { APIEmbed, ButtonStyle, Colors, ComponentType, DiscordAPIError, parseWebhookURL, Snowflake, WebhookClient } from 'discord.js'
+import {
+	APIEmbed,
+	ButtonStyle,
+	Colors,
+	ComponentType,
+	DiscordAPIError,
+	parseWebhookURL,
+	Snowflake,
+	WebhookClient,
+} from 'discord.js'
 
 import { get, update } from './Query'
 import { DiscordBot, ServerListDiscordBot, webhookClients } from './DiscordBot'
@@ -9,16 +18,16 @@ import { makeBotURL, makeDiscordCodeblock, makeServerURL } from './Tools'
 import crypto from 'crypto'
 
 type RelayOptions = {
-	dest: string,
-	method: 'GET' | 'POST',
+	dest: string
+	method: 'GET' | 'POST'
 	data?: string
-	secret: string,
+	secret: string
 }
 
 const timeouts = new Map<Snowflake, Map<number, NodeJS.Timeout>>()
 
 const clearTimeouts = (id: Snowflake) => {
-	if(timeouts.has(id)) {
+	if (timeouts.has(id)) {
 		timeouts.get(id).forEach(clearTimeout)
 		timeouts.delete(id)
 		return true
@@ -31,7 +40,7 @@ async function sendRequest({
 	retryCount,
 	webhook,
 	target,
-	payload,	
+	payload,
 }: {
 	retryCount: number
 	webhook: Webhook
@@ -47,66 +56,74 @@ async function sendRequest({
 		dest: webhook.url,
 		method: 'POST',
 		data: JSON.stringify(payload),
-		secret: webhook.secret
-	}).then(async r => {
-		if(!r.ok) {
-			return null
-		}
-		return r.json()
-	}).catch(() => null)
+		secret: webhook.secret,
+	})
+		.then(async (r) => {
+			if (!r.ok) {
+				return null
+			}
+			return r.json()
+		})
+		.catch(() => null)
 
-	if(result === null) return
+	if (result === null) return
 
-	if(result.success) {
+	if (result.success) {
 		const data = result.data
-		if((200 <= result.status && result.status < 300) && data.length === 0) {
+		if (200 <= result.status && result.status < 300 && data.length === 0) {
 			await update.webhook(id, isBot ? 'bots' : 'servers', { failedSince: null })
 			return
-		} else if((400 <= result.status && result.status < 500) || data.length !== 0) {
-			if(!clearTimeouts(id)) return
+		} else if ((400 <= result.status && result.status < 500) || data.length !== 0) {
+			if (!clearTimeouts(id)) return
 			await update.webhook(id, isBot ? 'bots' : 'servers', {
 				status: WebhookStatus.Disabled,
 				failedSince: null,
-				secret: null
+				secret: null,
 			})
 			sendFailedMessage(target)
 			return
 		}
 	}
-	if(retryCount === 10) {
-		if(!webhook.failedSince) {
+	if (retryCount === 10) {
+		if (!webhook.failedSince) {
 			await update.webhook(id, isBot ? 'bots' : 'servers', {
-				failedSince: Math.floor(Date.now() / 1000)
+				failedSince: Math.floor(Date.now() / 1000),
 			})
-		} else if(Date.now() - webhook.failedSince * 1000 > 1000 * 60 * 60 * 24) {
-			if(!clearTimeouts(id)) return
+		} else if (Date.now() - webhook.failedSince * 1000 > 1000 * 60 * 60 * 24) {
+			if (!clearTimeouts(id)) return
 			await update.webhook(id, isBot ? 'bots' : 'servers', {
 				status: WebhookStatus.Disabled,
 				failedSince: null,
-				secret: null
+				secret: null,
 			})
 			sendFailedMessage(target)
 		}
 		return
 	}
 
-	if(!timeouts.has(id)) {
+	if (!timeouts.has(id)) {
 		timeouts.set(id, new Map())
 	}
 
-	timeouts.get(id).set(payload.timestamp, setTimeout(() => {
-		sendRequest({
-			retryCount: retryCount + 1,
-			webhook,
-			target,
-			payload
-		})
-	}, Math.pow(2, retryCount + 2) * 1000))
+	timeouts.get(id).set(
+		payload.timestamp,
+		setTimeout(
+			() => {
+				sendRequest({
+					retryCount: retryCount + 1,
+					webhook,
+					target,
+					payload,
+				})
+			},
+			Math.pow(2, retryCount + 2) * 1000
+		)
+	)
 }
 
 export function destroyWebhookClient(id: string, type: 'bot' | 'server') {
 	const client = webhookClients[type].get(id)
-	if(client) {
+	if (client) {
 		client.destroy()
 		webhookClients[type].delete(id)
 	}
@@ -118,8 +135,8 @@ function relayedFetch(options: RelayOptions): Promise<Response> {
 		body: JSON.stringify(options),
 		headers: {
 			'Content-Type': 'application/json',
-			'Authorization': process.env.WEBHOOK_RELAY_SECRET,
-		}
+			Authorization: process.env.WEBHOOK_RELAY_SECRET,
+		},
 	})
 }
 
@@ -127,52 +144,63 @@ const sendFailedMessage = async (target: Bot | Server): Promise<void> => {
 	const isBot = 'owners' in target
 	const users = isBot ? target.owners : [target.owner]
 
-	for(const user of users) {
-		const r = await (isBot ? DiscordBot : ServerListDiscordBot).users.send(typeof user === 'string' ? user : user.id, {
-			embeds: [
-				{
-					title: '웹후크 전송 실패',
-					description: `\`\`${target.name}\`\`에 등록된 웹후크 주소가 올바르지 않거나, 제대로 동작하지 않아 비활성화되었습니다.\n` +
-					'설정된 웹후크의 주소가 올바른지 확인해주세요.\n' +
-					`[개발자 패널](${process.env.KOREANBOTS_URL}/developers/applications/${isBot ? 'bots' : 'servers'}/${target.id})에서 설정된 내용을 다시 저장하면 웹후크가 활성화됩니다.\n` +
-					(isBot ? '문제가 지속될 경우 본 DM을 통해 문의해주세요.' : '문제가 지속될 경우 한디리 공식 디스코드 서버에서 문의해주세요.'),
-					color: Colors.Red
-				}
-			],
-			components: isBot ? [] : [
-				{
-					type: ComponentType.ActionRow,
-					components: [
-						{
-							type: ComponentType.Button,
-							label: '공식 디스코드 서버 참가하기',
-							style: ButtonStyle.Link,
-							url: 'https://discord.gg/koreanlist'
-						}
-					]
-				}
-			]
-		}).catch(() => null)
-		if(r) return
+	for (const user of users) {
+		const r = await (isBot ? DiscordBot : ServerListDiscordBot).users
+			.send(typeof user === 'string' ? user : user.id, {
+				embeds: [
+					{
+						title: '웹후크 전송 실패',
+						description:
+							`\`\`${target.name}\`\`에 등록된 웹후크 주소가 올바르지 않거나, 제대로 동작하지 않아 비활성화되었습니다.\n` +
+							'설정된 웹후크의 주소가 올바른지 확인해주세요.\n' +
+							`[개발자 패널](${process.env.KOREANBOTS_URL}/developers/applications/${
+								isBot ? 'bots' : 'servers'
+							}/${target.id})에서 설정된 내용을 다시 저장하면 웹후크가 활성화됩니다.\n` +
+							(isBot
+								? '문제가 지속될 경우 본 DM을 통해 문의해주세요.'
+								: '문제가 지속될 경우 한디리 공식 디스코드 서버에서 문의해주세요.'),
+						color: Colors.Red,
+					},
+				],
+				components: isBot
+					? []
+					: [
+							{
+								type: ComponentType.ActionRow,
+								components: [
+									{
+										type: ComponentType.Button,
+										label: '공식 디스코드 서버 참가하기',
+										style: ButtonStyle.Link,
+										url: 'https://discord.gg/koreanlist',
+									},
+								],
+							},
+					  ],
+			})
+			.catch(() => null)
+		if (r) return
 	}
 }
 
-export const verifyWebhook = async(webhookURL: string): Promise<string | false | null> => {
-	if(parseWebhookURL(webhookURL)) return null
+export const verifyWebhook = async (webhookURL: string): Promise<string | false | null> => {
+	if (parseWebhookURL(webhookURL)) return null
 	const secret = crypto.randomUUID()
 	const url = new URL(webhookURL)
 	url.searchParams.set('secret', secret)
 	const result = await relayedFetch({
 		dest: url.toString(),
 		method: 'GET',
-		secret
-	}).then(r => r.json()).catch(() => null)
+		secret,
+	})
+		.then((r) => r.json())
+		.catch(() => null)
 
-	if(result) {
+	if (result) {
 		const data = result.data ? JSON.parse(result.data) : null
-		if(data?.secret === secret) return secret 
+		if (data?.secret === secret) return secret
 	}
-	
+
 	return false
 }
 
@@ -181,102 +209,118 @@ export const sendWebhook = async (target: Bot | Server, payload: WebhookPayload)
 	const isBot = payload.type === 'bot'
 
 	const webhook = await get.webhook(id, isBot ? 'bots' : 'servers')
-	if(!webhook) return
-	if(webhook.status === 0) return
+	if (!webhook) return
+	if (webhook.status === 0) return
 
-	if(webhook.status === WebhookStatus.Discord) {
-		if(!webhookClients[payload.type].has(id)) {
-			webhookClients[payload.type].set(id, new WebhookClient({
-				url: webhook.url
-			}))
+	if (webhook.status === WebhookStatus.Discord) {
+		if (!webhookClients[payload.type].has(id)) {
+			webhookClients[payload.type].set(
+				id,
+				new WebhookClient({
+					url: webhook.url,
+				})
+			)
 		}
 		const client = webhookClients[payload.type].get(id)
 
 		const url = new URL(webhook.url)
-		const result = await client.send({
-			embeds: [buildEmbed({payload, target})],
-			threadId: url.searchParams.get('thread_id') || undefined
-		}).catch((r: DiscordAPIError | unknown)=> {
-			if(r instanceof DiscordAPIError) {
-				if(400 <= r.status && r.status < 500) {
-					return false
+		const result = await client
+			.send({
+				embeds: [buildEmbed({ payload, target })],
+				threadId: url.searchParams.get('thread_id') || undefined,
+			})
+			.catch((r: DiscordAPIError | unknown) => {
+				if (r instanceof DiscordAPIError) {
+					if (400 <= r.status && r.status < 500) {
+						return false
+					}
 				}
-			}
-			return true
-		})
-		if(!result) {
+				return true
+			})
+		if (!result) {
 			await update.webhook(id, isBot ? 'bots' : 'servers', { status: WebhookStatus.Disabled })
 			sendFailedMessage(target)
 			return
 		}
-	} else if(webhook.status === WebhookStatus.HTTP) {
+	} else if (webhook.status === WebhookStatus.HTTP) {
 		sendRequest({
 			retryCount: 0,
 			webhook,
 			target,
-			payload
+			payload,
 		})
 		return
 	}
 }
 
 function compare(before, after) {
-	if(before < after) {
+	if (before < after) {
 		return '🔺'
-	} else if(before === after) {
+	} else if (before === after) {
 		return '➖'
 	} else {
 		return '🔻'
 	}
 }
 
-function buildEmbed({payload, target}: {payload: WebhookPayload, target: Bot | Server}): APIEmbed {
-	const author = 'avatar' in target ? {
-		name: target.name,
-		icon_url: 
-			DiscordEnpoints.CDN.user(target.id, target.avatar, {format: 'png'}),
-		url: process.env.KOREANBOTS_URL + makeBotURL({id: target.id, vanity: target.vanity})
-	} : {
-		name: target.name,
-		icon_url:
-			DiscordEnpoints.CDN.guild(target.id, target.icon, {format: 'png'}),
-		url: process.env.KOREANBOTS_URL + makeServerURL({id: target.id, vanity: target.vanity})
-	}
+function buildEmbed({
+	payload,
+	target,
+}: {
+	payload: WebhookPayload
+	target: Bot | Server
+}): APIEmbed {
+	const author =
+		'avatar' in target
+			? {
+					name: target.name,
+					icon_url: DiscordEnpoints.CDN.user(target.id, target.avatar, { format: 'png' }),
+					url: process.env.KOREANBOTS_URL + makeBotURL({ id: target.id, vanity: target.vanity }),
+			  }
+			: {
+					name: target.name,
+					icon_url: DiscordEnpoints.CDN.guild(target.id, target.icon, { format: 'png' }),
+					url: process.env.KOREANBOTS_URL + makeServerURL({ id: target.id, vanity: target.vanity }),
+			  }
 	const footer = {
 		text: '한국 디스코드 리스트',
 		icon_url: DiscordBot.user.avatarURL(),
 	}
-	switch(payload.data.type) {
-	case WebhookType.HeartChange:
-		return {
-			author,
-			title: '❤️  하트 수 변동',
-			fields: [
-				{
-					name: '이전',
-					value: makeDiscordCodeblock(payload.data.before.toString()),
-					inline: true,
-				},
-				{
-					name: '이후',
-					value: makeDiscordCodeblock(payload.data.after.toString()),
-					inline: true,
-				}
-			],
-			color: 0xCD3E45,
-			footer,
-			timestamp: new Date().toISOString()
-		}
-	case WebhookType.ServerCountChange: 
-		return {
-			author,
-			title: '서버 수 변동',
-			description: payload.data.before ? `${payload.data.before} -> ${payload.data.after} (${compare(payload.data.before, payload.data.after)})` :
-				`+ ${payload.data.after}`,
-			color: Colors.Aqua,
-			footer,
-			timestamp: new Date().toISOString()
-		}
+	switch (payload.data.type) {
+		case WebhookType.HeartChange:
+			return {
+				author,
+				title: '❤️  하트 수 변동',
+				fields: [
+					{
+						name: '이전',
+						value: makeDiscordCodeblock(payload.data.before.toString()),
+						inline: true,
+					},
+					{
+						name: '이후',
+						value: makeDiscordCodeblock(payload.data.after.toString()),
+						inline: true,
+					},
+				],
+				color: 0xcd3e45,
+				footer,
+				timestamp: new Date().toISOString(),
+			}
+		case WebhookType.ServerCountChange:
+			return {
+				author,
+				title: '서버 수 변동',
+				description: payload.data.before
+					? `${payload.data.before} -> ${payload.data.after} (${compare(
+							payload.data.before,
+							payload.data.after
+					  )})`
+					: `+ ${payload.data.after}`,
+				color: Colors.Aqua,
+				footer,
+				timestamp: new Date().toISOString(),
+			}
 	}
 }
 
@@ -293,24 +337,24 @@ type BotWebhookData = (HeartChange | ServerCountChange) & {
 }
 
 type ServerWebhookPayload = {
-	type: 'server',
+	type: 'server'
 	data: ServerWebhookData
 }
 
 type BotWebhookPayload = {
-	type: 'bot',
+	type: 'bot'
 	data: BotWebhookData
 }
 
 type HeartChange = {
-	type: WebhookType.HeartChange,
-	before: number,
-	after: number,
+	type: WebhookType.HeartChange
+	before: number
+	after: number
 	userId: Snowflake
 }
 
 type ServerCountChange = {
-	type: WebhookType.ServerCountChange,
-	before: number | number,
+	type: WebhookType.ServerCountChange
+	before: number | number
 	after: number
-}
\ No newline at end of file
+}
diff --git a/utils/Yup.ts b/utils/Yup.ts
index 2d70093..d070403 100644
--- a/utils/Yup.ts
+++ b/utils/Yup.ts
@@ -5,21 +5,15 @@ import { botCategories, library, reportCats, serverCategories } from '@utils/Con
 import { HTTPProtocol, ID, Prefix, Url, Vanity } from '@utils/Regex'
 
 Yup.setLocale(YupKorean)
-Yup.addMethod(Yup.array, 'unique', function(message, mapper = a => a) {
-	return this.test('unique', message || 'array must be unique', function(list) {
+Yup.addMethod(Yup.array, 'unique', function (message, mapper = (a) => a) {
+	return this.test('unique', message || 'array must be unique', function (list) {
 		return list.length === new Set(list.map(mapper)).size
 	})
 })
 
 export const botListArgumentSchema: Yup.SchemaOf<botListArgument> = Yup.object({
-	type: Yup.mixed()
-		.oneOf(['VOTE', 'TRUSTED', 'NEW', 'PARTNERED', 'CATEGORY', 'SEARCH'])
-		.required(),
-	page: Yup.number()
-		.positive()
-		.integer()
-		.notRequired()
-		.default(1),
+	type: Yup.mixed().oneOf(['VOTE', 'TRUSTED', 'NEW', 'PARTNERED', 'CATEGORY', 'SEARCH']).required(),
+	page: Yup.number().positive().integer().notRequired().default(1),
 	query: Yup.string().notRequired(),
 })
 
@@ -31,12 +25,8 @@ export interface botListArgument {
 
 export const ImageOptionsSchema: Yup.SchemaOf<ImageOptions> = Yup.object({
 	id: Yup.string().required(),
-	ext: Yup.mixed<ext>()
-		.oneOf(['webp', 'png', 'gif'])
-		.required(),
-	size: Yup.mixed<ImageSize>()
-		.oneOf(['128', '256', '512'])
-		.required(),
+	ext: Yup.mixed<ext>().oneOf(['webp', 'png', 'gif']).required(),
+	size: Yup.mixed<ImageSize>().oneOf(['128', '256', '512']).required(),
 })
 
 interface ImageOptions {
@@ -50,20 +40,10 @@ type ImageSize = '128' | '256' | '512'
 
 export const WidgetOptionsSchema: Yup.SchemaOf<WidgetOptions> = Yup.object({
 	id: Yup.string().required(),
-	ext: Yup.mixed<widgetExt>()
-		.oneOf(['svg'])
-		.required(),
-	type: Yup.mixed<widgetType>()
-		.oneOf(['votes', 'servers', 'status'])
-		.required(),
-	scale: Yup.number()
-		.positive()
-		.min(0.5)
-		.max(3)
-		.required(),
-	style: Yup.mixed<'flat' | 'classic'>()
-		.oneOf(['flat', 'classic'])
-		.default('flat'),
+	ext: Yup.mixed<widgetExt>().oneOf(['svg']).required(),
+	type: Yup.mixed<widgetType>().oneOf(['votes', 'servers', 'status']).required(),
+	scale: Yup.number().positive().min(0.5).max(3).required(),
+	style: Yup.mixed<'flat' | 'classic'>().oneOf(['flat', 'classic']).default('flat'),
 	icon: Yup.boolean().default(true),
 })
 
@@ -81,20 +61,10 @@ type widgetExt = 'svg'
 
 export const ServerWidgetOptionsSchema: Yup.SchemaOf<ServerWidgetOptions> = Yup.object({
 	id: Yup.string().required(),
-	ext: Yup.mixed<widgetExt>()
-		.oneOf(['svg'])
-		.required(),
-	type: Yup.mixed<serverWidgetType>()
-		.oneOf(['votes', 'members', 'boost'])
-		.required(),
-	scale: Yup.number()
-		.positive()
-		.min(0.5)
-		.max(3)
-		.required(),
-	style: Yup.mixed<'flat' | 'classic'>()
-		.oneOf(['flat', 'classic'])
-		.default('flat'),
+	ext: Yup.mixed<widgetExt>().oneOf(['svg']).required(),
+	type: Yup.mixed<serverWidgetType>().oneOf(['votes', 'members', 'boost']).required(),
+	scale: Yup.number().positive().min(0.5).max(3).required(),
+	style: Yup.mixed<'flat' | 'classic'>().oneOf(['flat', 'classic']).default('flat'),
 	icon: Yup.boolean().default(true),
 })
 
@@ -108,10 +78,7 @@ interface ServerWidgetOptions {
 }
 
 type serverWidgetType = 'votes' | 'members' | 'boost'
-export const PageCount = Yup.number()
-	.integer()
-	.positive()
-	.required()
+export const PageCount = Yup.number().integer().positive().required()
 
 export const OauthCallbackSchema: Yup.SchemaOf<OauthCallback> = Yup.object({
 	code: Yup.string().required(),
@@ -119,9 +86,7 @@ export const OauthCallbackSchema: Yup.SchemaOf<OauthCallback> = Yup.object({
 
 export const botCategoryListArgumentSchema: Yup.SchemaOf<botCategoryListArgument> = Yup.object({
 	page: PageCount,
-	category: Yup.mixed()
-		.oneOf(botCategories)
-		.required(),
+	category: Yup.mixed().oneOf(botCategories).required(),
 })
 
 interface botCategoryListArgument {
@@ -129,12 +94,11 @@ interface botCategoryListArgument {
 	category: string
 }
 
-export const serverCategoryListArgumentSchema: Yup.SchemaOf<serverCategoryListArgument> = Yup.object({
-	page: PageCount,
-	category: Yup.mixed()
-		.oneOf(serverCategories)
-		.required(),
-})
+export const serverCategoryListArgumentSchema: Yup.SchemaOf<serverCategoryListArgument> =
+	Yup.object({
+		page: PageCount,
+		category: Yup.mixed().oneOf(serverCategories).required(),
+	})
 
 interface serverCategoryListArgument {
 	page: number
@@ -151,18 +115,13 @@ export const SearchQuerySchema: Yup.SchemaOf<SearchQuery> = Yup.object({
 		.max(50)
 		.required('검색어를 입력해주세요.')
 		.label('검색어'),
-	page: Yup.number()
-		.positive()
-		.integer()
-		.notRequired()
-		.default(1)
-		.label('페이지'),
-	priority: Yup.mixed().oneOf(['bot', 'server']).notRequired()
+	page: Yup.number().positive().integer().notRequired().default(1).label('페이지'),
+	priority: Yup.mixed().oneOf(['bot', 'server']).notRequired(),
 })
 
 interface SearchQuery {
 	q: string
-	page: number,
+	page: number
 	priority?: 'bot' | 'server'
 }
 
@@ -170,17 +129,13 @@ export const AddBotSubmitSchema: Yup.SchemaOf<AddBotSubmit> = Yup.object({
 	agree: Yup.boolean()
 		.oneOf([true], '상단의 체크박스를 클릭해주세요.')
 		.required('상단의 체크박스를 클릭해주세요.'),
-	id: Yup.string()
-		.matches(ID, '올바른 봇 ID를 입력해주세요.')
-		.required('봇 ID는 필수 항목입니다.'),
+	id: Yup.string().matches(ID, '올바른 봇 ID를 입력해주세요.').required('봇 ID는 필수 항목입니다.'),
 	prefix: Yup.string()
 		.matches(Prefix, '접두사는 띄어쓰기로 시작할 수 없습니다.')
 		.min(1, '접두사는 최소 1자여야합니다.')
 		.max(32, '접두사는 최대 32자까지만 가능합니다.')
 		.required('접두사는 필수 항목입니다.'),
-	library: Yup.string()
-		.oneOf(library)
-		.required('라이브러리는 필수 항목입니다.'),
+	library: Yup.string().oneOf(library).required('라이브러리는 필수 항목입니다.'),
 	website: Yup.string()
 		.matches(HTTPProtocol, 'http:// 또는 https:// 로 시작해야합니다.')
 		.matches(Url, '올바른 웹사이트 URL을 입력해주세요.')
@@ -214,7 +169,7 @@ export const AddBotSubmitSchema: Yup.SchemaOf<AddBotSubmit> = Yup.object({
 		.max(1500, '봇 설명은 최대 1500자여야합니다.')
 		.required('봇 설명은 필수 항목입니다.'),
 	_csrf: Yup.string().required(),
-	_captcha: Yup.string().required()
+	_captcha: Yup.string().required(),
 })
 
 export interface AddBotSubmit {
@@ -255,7 +210,7 @@ export const AddServerSubmitSchema: Yup.SchemaOf<AddServerSubmit> = Yup.object({
 		.max(1500, '서버 설명은 최대 1500자여야합니다.')
 		.required('서버 설명은 필수 항목입니다.'),
 	_csrf: Yup.string().required(),
-	_captcha: Yup.string().required()
+	_captcha: Yup.string().required(),
 })
 export interface AddServerSubmit {
 	agree: boolean
@@ -286,9 +241,14 @@ export interface BotStatUpdate {
 }
 
 export const ReportSchema: Yup.SchemaOf<Report> = Yup.object({
-	category: Yup.mixed().oneOf(reportCats, '신고 구분은 필수 항목입니다.').required('신고 구분은 필수 항목입니다.'),
-	description: Yup.string().min(100, '최소 100자여야합니다.').max(1500, '1500자 이하로 입력해주세요.').required('설명은 필수 항목입니다.'),
-	_csrf: Yup.string()
+	category: Yup.mixed()
+		.oneOf(reportCats, '신고 구분은 필수 항목입니다.')
+		.required('신고 구분은 필수 항목입니다.'),
+	description: Yup.string()
+		.min(100, '최소 100자여야합니다.')
+		.max(1500, '1500자 이하로 입력해주세요.')
+		.required('설명은 필수 항목입니다.'),
+	_csrf: Yup.string(),
 })
 
 export interface Report {
@@ -303,9 +263,7 @@ export const ManageBotSchema: Yup.SchemaOf<ManageBot> = Yup.object({
 		.min(1, '접두사는 최소 1자여야합니다.')
 		.max(32, '접두사는 최대 32자까지만 가능합니다.')
 		.required('접두사는 필수 항목입니다.'),
-	library: Yup.string()
-		.oneOf(library)
-		.required('라이브러리는 필수 항목입니다.'),
+	library: Yup.string().oneOf(library).required('라이브러리는 필수 항목입니다.'),
 	website: Yup.string()
 		.matches(HTTPProtocol, 'http:// 또는 https:// 로 시작해야합니다.')
 		.matches(Url, '올바른 웹사이트 URL을 입력해주세요.')
@@ -385,7 +343,7 @@ export interface ManageServer {
 
 export const CsrfCaptchaSchema: Yup.SchemaOf<CsrfCaptcha> = Yup.object({
 	_csrf: Yup.string().required(),
-	_captcha: Yup.string().required()
+	_captcha: Yup.string().required(),
 })
 
 export interface CsrfCaptcha {
@@ -440,7 +398,7 @@ export const EditBotOwnerSchema: Yup.SchemaOf<EditBotOwner> = Yup.object({
 		.unique('소유자 아이디는 중복될 수 없습니다.')
 		.required('소유자는 필수 항목입니다.'),
 	_csrf: Yup.string().required(),
-	_captcha: Yup.string().required()
+	_captcha: Yup.string().required(),
 })
 
 export interface EditBotOwner {
diff --git a/utils/useOutsideClick.ts b/utils/useOutsideClick.ts
index 954b3f6..375ab93 100644
--- a/utils/useOutsideClick.ts
+++ b/utils/useOutsideClick.ts
@@ -1,7 +1,7 @@
 import { RefObject, useEffect } from 'react'
 
 const useOutsideClick = (ref: RefObject<HTMLElement>, callback: () => void) => {
-	const handleClick = e => {
+	const handleClick = (e) => {
 		if (ref.current && !ref.current.contains(e.target)) {
 			callback()
 		}