From 4156ae614936906c34a319eaa6a6a1f44f319096 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Sun, 10 Jan 2021 13:19:06 +0900
Subject: [PATCH] style: lint

---
 .eslintrc.js                 |   1 +
 components/Advertisement.tsx |  14 ++---
 components/BotCard.tsx       |  48 ++++++++--------
 components/DiscordImage.tsx  |   2 +-
 components/Docs.tsx          |  14 ++---
 components/Footer.tsx        |  68 +++++++++++-----------
 components/LongButton.tsx    |   4 +-
 components/Navbar.tsx        | 108 +++++++++++++++++------------------
 components/Owner.tsx         |  12 ++--
 components/SEO.tsx           |  10 ++--
 components/Segment.tsx       |   2 +-
 components/Tag.tsx           |   4 +-
 components/Wave.tsx          |   4 +-
 pages/_app.tsx               |  22 +++----
 pages/_document.tsx          |   8 +--
 pages/bots/[id].tsx          |  88 ++++++++++++++--------------
 pages/guidelines.tsx         |  24 ++++----
 pages/index.tsx              |  28 ++++-----
 pages/privacy.tsx            |  26 ++++-----
 pages/users/[id].tsx         |  30 +++++-----
 20 files changed, 259 insertions(+), 258 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8c58286..dd38e82 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -27,6 +27,7 @@ module.exports = {
 		'@typescript-eslint'
 	],
 	rules: {
+		'jsx-quotes': ['error', 'prefer-single'],
 		'react/no-unescaped-entities': 'off',
 		'react/prop-types': 'off',
 		'react/react-in-jsx-scope': 'off',
diff --git a/components/Advertisement.tsx b/components/Advertisement.tsx
index 32ad8b8..46517e0 100644
--- a/components/Advertisement.tsx
+++ b/components/Advertisement.tsx
@@ -2,17 +2,17 @@ const Advertisement = (): JSX.Element => {
 	if (process.env.NODE_ENV === 'production')
 		return (
 			<ins
-				className="adsbygoogle mb-5 w-full"
+				className='adsbygoogle mb-5 w-full'
 				style={{ display: 'block' }}
-				data-ad-client="ca-pub-4856582423981759"
-				data-ad-slot="3250141451"
-				data-ad-format="auto"
-				data-adtest="on"
-				data-full-width-responsive="true"
+				data-ad-client='ca-pub-4856582423981759'
+				data-ad-slot='3250141451'
+				data-ad-format='auto'
+				data-adtest='on'
+				data-full-width-responsive='true'
 			></ins>
 		)
 	else
-		return <div className="my-5 py-12 w-full text-center text-white bg-gray-700">Advertisement</div>
+		return <div className='my-5 py-12 w-full text-center text-white bg-gray-700'>Advertisement</div>
 }
 
 export default Advertisement
diff --git a/components/BotCard.tsx b/components/BotCard.tsx
index 4747f2b..7b77e49 100644
--- a/components/BotCard.tsx
+++ b/components/BotCard.tsx
@@ -7,47 +7,47 @@ import Link from 'next/link'
 
 const BotCard = ({ bot }: BotProps): JSX.Element => {
 	return (
-		<div className="container mb-20">
-			<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">
-							<div className="flex mb-16 h-48">
-								<div className="w-2/3">
-									<div className="flex justify-start">
+		<div className='container mb-20'>
+			<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'>
+							<div className='flex mb-16 h-48'>
+								<div className='w-2/3'>
+									<div className='flex justify-start'>
 										<img
-											alt="Avatar"
+											alt='Avatar'
 											src={
 												bot.avatar
 													? `https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}.png?size=1024`
 													: `https://cdn.discordapp.com/embed/avatars/${Number(bot.tag) %
 															5}.png?size=1024`
 											}
-											className="rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white"
+											className='rounded-full absolute -left-2 -top-8 mx-auto w-32 h-32 bg-white'
 										/>
 									</div>
 
-									<div className="mt-28 px-4">
-										<h2 className="px-1 text-sm">
+									<div className='mt-28 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-2xl font-bold truncate">
+										<h1 className='mb-3 text-left text-2xl font-bold truncate'>
 											{bot.name}{' '}
 											{bot.trusted ? (
-												<span className="text-koreanbots-blue text-3xl">
-													<i className="fas fa-award" />
+												<span className='text-koreanbots-blue text-3xl'>
+													<i className='fas fa-award' />
 												</span>
 											) : ''}
 										</h1>
-										<p className="text-left text-gray-400 text-sm font-medium">{bot.intro}</p>
+										<p className='text-left text-gray-400 text-sm font-medium'>{bot.intro}</p>
 									</div>
 								</div>
-								<div className="grid grid-cols-1 pr-5 py-5 w-1/3 h-0">
+								<div className='grid grid-cols-1 pr-5 py-5 w-1/3 h-0'>
 									<Tag
 										text={
 											<>
-												<i className="fas fa-heart text-red-600" /> {formatNumber(bot.votes)}
+												<i className='fas fa-heart text-red-600' /> {formatNumber(bot.votes)}
 											</>
 										}
 										dark
@@ -55,30 +55,30 @@ const BotCard = ({ bot }: BotProps): JSX.Element => {
 									<Tag blurple text={<>{formatNumber(bot.servers)} 서버</>} dark />
 								</div>
 							</div>
-							<div className="category px-2 flex flex-wrap">
+							<div className='category px-2 flex flex-wrap'>
 								{bot.category.slice(0, 5).map(el => (
 									<Tag key={el} text={el} href={`/categories/${el}`} dark/>
 								))}
 							</div>
 							<Divider />
-							<div className="flex justify-evenly">
+							<div className='flex justify-evenly'>
 								<Link
 									href={`/bots/${
 										(bot.partnered || bot.trusted) && bot.vanity ? bot.vanity : bot.id
 									}`}
 								>
-									<a className="rounded-bl-2xl py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue hover:shadow-lg">
+									<a className='rounded-bl-2xl py-3 w-full text-center text-koreanbots-blue hover:text-white text-sm font-bold hover:bg-koreanbots-blue hover:shadow-lg'>
 										보기
 									</a>
 								</Link>
 								<a
-									rel="noopener noreferrer"
-									target="_blank"
+									rel='noopener noreferrer'
+									target='_blank'
 									href={
 										bot.url ??
 										`https://discordapp.com/oauth2/authorize?client_id=${bot.id}&scope=bot&permissions=0`
 									}
-									className="rounded-br-2xl py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple hover:shadow-lg"
+									className='rounded-br-2xl py-3 w-full text-center text-discord-blurple hover:text-white text-sm font-bold hover:bg-discord-blurple hover:shadow-lg'
 								>
 									초대하기
 								</a>
diff --git a/components/DiscordImage.tsx b/components/DiscordImage.tsx
index c259d07..e417b25 100644
--- a/components/DiscordImage.tsx
+++ b/components/DiscordImage.tsx
@@ -17,7 +17,7 @@ const DiscordImage = (props: {
 			}
 			width={props.size || 256}
 			height={props.size || 256}
-			data-fallback-image="/img/default.png"
+			data-fallback-image='/img/default.png'
 		/>
 	)
 }
diff --git a/components/Docs.tsx b/components/Docs.tsx
index 6025184..776ca1b 100644
--- a/components/Docs.tsx
+++ b/components/Docs.tsx
@@ -4,22 +4,22 @@ import Wave from './Wave'
 const Docs = ({ header, description, subheader, children }: DocsProps): JSX.Element => {
 	return (
 		<>
-			<div className="dark:bg-discord-black bg-discord-blurple">
-				<Container className="pb-28 pt-20" ignoreColor>
-					<h1 className="mt-10 text-center text-gray-100 text-4xl font-bold sm:text-left">
+			<div className='dark:bg-discord-black bg-discord-blurple'>
+				<Container className='pb-28 pt-20' ignoreColor>
+					<h1 className='mt-10 text-center text-gray-100 text-4xl font-bold sm:text-left'>
 						{header}
 					</h1>
-					<h2 className="mt-5 text-center text-gray-200 text-2xl font-medium sm:text-left">
+					<h2 className='mt-5 text-center text-gray-200 text-2xl font-medium sm:text-left'>
 						{description}
 					</h2>
-					<h2 className="mt-5 text-center text-gray-200 text-2xl font-medium sm:text-left">
+					<h2 className='mt-5 text-center text-gray-200 text-2xl font-medium sm:text-left'>
 						{subheader}
 					</h2>
 				</Container>
 			</div>
 			<Wave
-				color="currentColor"
-				className="dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white"
+				color='currentColor'
+				className='dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white'
 			/>
 			<Container>
 				<div>{children}</div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 1282286..bc8cdc2 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -4,65 +4,65 @@ import Wave from './Wave'
 
 const Footer = (): JSX.Element => {
 	return (
-		<div className="releative">
-			<Wave color="currentColor" className="dark:text-discord-dark text-white bg-discord-black" />
-			<div className="bottom-0 text-white bg-discord-black">
-				<Container className="pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-3/5" ignoreColor>
-					<div className="w-full lg:flex-grow">
-						<h1 className="text-koreanbots-blue text-3xl font-extrabold">국내봇을 한 곳에서.</h1>
-						<span className="text-base">2020 Koreanbots, All rights reserved.</span>
-						<div className="text-2xl">
-							<Link href="/discord">
-								<a className="mr-2">
-									<i className="fab fa-discord" />
+		<div className='releative'>
+			<Wave color='currentColor' className='dark:text-discord-dark text-white bg-discord-black' />
+			<div className='bottom-0 text-white bg-discord-black'>
+				<Container className='pb-20 pt-10 w-11/12 lg:flex lg:pt-0 lg:w-3/5' ignoreColor>
+					<div className='w-full lg:flex-grow'>
+						<h1 className='text-koreanbots-blue text-3xl font-extrabold'>국내봇을 한 곳에서.</h1>
+						<span className='text-base'>2020 Koreanbots, All rights reserved.</span>
+						<div className='text-2xl'>
+							<Link href='/discord'>
+								<a className='mr-2'>
+									<i className='fab fa-discord' />
 								</a>
 							</Link>
-							<a href="https://github.com/koreanbots" className="mr-2">
-								<i className="fab fa-github" />
+							<a href='https://github.com/koreanbots' className='mr-2'>
+								<i className='fab fa-github' />
 							</a>
 						</div>
 					</div>
-					<div className="flex-col mb-2 w-full lg:w-1/3">
-						<h2 className="text-koreanbots-blue text-base font-bold">한국 디스코드봇 리스트</h2>
-						<ul className="text-sm">
+					<div className='flex-col mb-2 w-full lg:w-1/3'>
+						<h2 className='text-koreanbots-blue text-base font-bold'>한국 디스코드봇 리스트</h2>
+						<ul className='text-sm'>
 							<li>
-								<Link href="/about">
-									<a className="hover:text-gray-300">소개</a>
+								<Link href='/about'>
+									<a className='hover:text-gray-300'>소개</a>
 								</Link>
 							</li>
 							<li>
-								<Link href="/api">
-									<a className="hover:text-gray-300">API</a>
+								<Link href='/api'>
+									<a className='hover:text-gray-300'>API</a>
 								</Link>
 							</li>
 						</ul>
 					</div>
-					<div className="flex-col mb-2 w-full lg:w-1/5">
-						<h2 className="text-koreanbots-blue text-base font-bold">커뮤니티</h2>
-						<ul className="text-sm">
+					<div className='flex-col mb-2 w-full lg:w-1/5'>
+						<h2 className='text-koreanbots-blue text-base font-bold'>커뮤니티</h2>
+						<ul className='text-sm'>
 							<li>
-								<Link href="/partners">
-									<a className="hover:text-gray-300">파트너</a>
+								<Link href='/partners'>
+									<a className='hover:text-gray-300'>파트너</a>
 								</Link>
 							</li>
 							<li>
-								<Link href="/verification">
-									<a className="hover:text-gray-300">인증</a>
+								<Link href='/verification'>
+									<a className='hover:text-gray-300'>인증</a>
 								</Link>
 							</li>
 						</ul>
 					</div>
-					<div className="flex-col mb-2 w-full lg:w-1/5">
-						<h2 className="text-koreanbots-blue text-base font-bold">약관</h2>
-						<ul className="text-sm">
+					<div className='flex-col mb-2 w-full lg:w-1/5'>
+						<h2 className='text-koreanbots-blue text-base font-bold'>약관</h2>
+						<ul className='text-sm'>
 							<li>
-								<Link href="/privacy">
-									<a className="hover:text-gray-300">개인정보취급방침</a>
+								<Link href='/privacy'>
+									<a className='hover:text-gray-300'>개인정보취급방침</a>
 								</Link>
 							</li>
 							<li>
-								<Link href="/guidelines">
-									<a className="hover:text-gray-300">가이드라인</a>
+								<Link href='/guidelines'>
+									<a className='hover:text-gray-300'>가이드라인</a>
 								</Link>
 							</li>
 						</ul>
diff --git a/components/LongButton.tsx b/components/LongButton.tsx
index 4b54043..dbabc24 100644
--- a/components/LongButton.tsx
+++ b/components/LongButton.tsx
@@ -3,8 +3,8 @@ import Link from 'next/link'
 
 const LongButton = ({ children, newTab=false, href, onClick, center=false }:LongButtonProps):JSX.Element => {
 	if(href) {
-		if(newTab)  return <a href={href} rel="noopener noreferrer"
-			target="_blank">
+		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`}>
 				{children}
 			</div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 75b060a..8f28d5d 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -5,57 +5,57 @@ const Navbar = (): JSX.Element => {
 	const [navbarOpen, setNavbarOpen] = useState<boolean>(false)
 	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 bg-transparent lg:absolute">
-				<div className="container flex flex-wrap items-center justify-between mx-auto px-4">
-					<div className="relative static block flex justify-between w-full lg:justify-start lg:w-auto">
+			<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 bg-transparent lg:absolute'>
+				<div className='container flex flex-wrap items-center justify-between mx-auto px-4'>
+					<div className='relative static block flex justify-between w-full lg:justify-start lg:w-auto'>
 						<a
-							className="logofont text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-300 font-semibold leading-relaxed uppercase sm:text-2xl"
-							href="/"
+							className='logofont text-large whitespace-no-wrap inline-block mr-4 py-2 hover:text-gray-300 font-semibold leading-relaxed uppercase sm:text-2xl'
+							href='/'
 						>
 							KOREANBOTS
 						</a>
 						<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"
+							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>
 					</div>
-					<div className="hidden flex-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">
+					<div className='hidden flex-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'>
 								<a
-									href="/discord"
-									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'
+									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'
 								>
 									디스코드
 								</a>
 							</li>
-							<li className="flex items-center">
-								<Link href="/about">
-									<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">
+							<li className='flex items-center'>
+								<Link href='/about'>
+									<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'>
 										소개
 									</a>
 								</Link>
 							</li>
-							<li className="flex items-center">
-								<Link href="/api">
-									<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">
+							<li className='flex items-center'>
+								<Link href='/api'>
+									<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'>
 										API
 									</a>
 								</Link>
 							</li>
-							<li className="flex items-center">
-								<Link href="/addbot">
-									<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">
+							<li className='flex items-center'>
+								<Link href='/addbot'>
+									<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'>
 										봇 추가하기
 									</a>
 								</Link>
 							</li>
-							<li className="flex items-center">
-								<Link href="/api/auth/discord">
-									<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">
+							<li className='flex items-center'>
+								<Link href='/api/auth/discord'>
+									<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'>
 										로그인
 									</a>
 								</Link>
@@ -69,55 +69,55 @@ const Navbar = (): JSX.Element => {
 					navbarOpen ? 'block' : 'hidden'
 				}`}
 			>
-				<nav className="mt-20">
-					<Link href="/about">
-						<a className="flex items-center px-8 py-2 text-gray-100 hover:text-gray-300">
+				<nav className='mt-20'>
+					<Link href='/about'>
+						<a className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
 							<svg
-								className="w-5 h-5"
-								viewBox="0 0 24 24"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
+								className='w-5 h-5'
+								viewBox='0 0 24 24'
+								fill='none'
+								xmlns='http://www.w3.org/2000/svg'
 							>
 								<path
-									d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
-									stroke="currentColor"
-									strokeWidth="2"
-									strokeLinecap="round"
-									strokeLinejoin="round"
+									d='M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17'
+									stroke='currentColor'
+									strokeWidth='2'
+									strokeLinecap='round'
+									strokeLinejoin='round'
 								/>
 							</svg>
 
-							<span className="px-2 font-medium">소개</span>
+							<span className='px-2 font-medium'>소개</span>
 						</a>
 					</Link>
-					<Link href="/about">
-						<a className="flex items-center px-8 py-2 text-gray-100 hover:text-gray-300">
-							<i className="fas fa-tools" />
+					<Link href='/about'>
+						<a className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
+							<i className='fas fa-tools' />
 
-							<span className="px-2 font-medium">API</span>
+							<span className='px-2 font-medium'>API</span>
 						</a>
 					</Link>
-					<Link href="/addbot">
-						<a className="flex items-center px-8 py-2 text-gray-100 hover:text-gray-300">
-							<i className="fas fa-plus"></i>
-							<span className="px-2 font-medium">봇 추가하기</span>
+					<Link href='/addbot'>
+						<a className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
+							<i className='fas fa-plus'></i>
+							<span className='px-2 font-medium'>봇 추가하기</span>
 						</a>
 					</Link>
 
-					<Link href="/api/auth/login">
-						<a 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='/api/auth/login'>
+						<a 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>
 					</Link>
 				</nav>
 
-				<div className="absolute bottom-0 my-10">
-					<a className="flex items-center px-8 py-2 text-gray-100 hover:text-gray-300">
-						<i className="fab fa-discord" />
+				<div className='absolute bottom-0 my-10'>
+					<a className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'>
+						<i className='fab fa-discord' />
 
-						<Link href="/discord">
-							<a className="px-2 font-medium">디스코드 서버</a>
+						<Link href='/discord'>
+							<a className='px-2 font-medium'>디스코드 서버</a>
 						</Link>
 					</a>
 				</div>
diff --git a/components/Owner.tsx b/components/Owner.tsx
index a8a06f5..0c763ba 100644
--- a/components/Owner.tsx
+++ b/components/Owner.tsx
@@ -3,13 +3,13 @@ import DiscordImage from './DiscordImage'
 
 const Owner = ({ id, username, tag, avatarHash }:OwnerProps):JSX.Element => {
 	return <Link href={`/users/${id}`}>
-		<div className="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">
-			<div className="rounded-full h-8 w-8 flex-shrink-0 mr-3 mt-1 overflow-hidden shadow-inner relative">
-				<DiscordImage userID={id} tag={tag} avatarHash={avatarHash} className="absolute inset-0 z-negative w-full h-full" size={50} />
+		<div className='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'>
+			<div className='rounded-full h-8 w-8 flex-shrink-0 mr-3 mt-1 overflow-hidden shadow-inner relative'>
+				<DiscordImage userID={id} tag={tag} avatarHash={avatarHash} className='absolute inset-0 z-negative w-full h-full' size={50} />
 			</div> 
-			<div className="flex-1 leading-snug w-0">
-				<h4 className="whitespace-nowrap">{username}
-				</h4><span className="text-sm text-gray-600">#{tag}</span>
+			<div className='flex-1 leading-snug w-0'>
+				<h4 className='whitespace-nowrap'>{username}
+				</h4><span className='text-sm text-gray-600'>#{tag}</span>
 			</div>
 		</div>
 		{/* <div className='text-base bg-little-white dark:bg-discord-black text-black dark:text-gray-400 px-2 rounded mr-1 mb-3 hover:bg-little-white-hover dark:hover:bg-discord-dark-hover w-full py-5'>  
diff --git a/components/SEO.tsx b/components/SEO.tsx
index cb9def9..d65de4a 100644
--- a/components/SEO.tsx
+++ b/components/SEO.tsx
@@ -4,11 +4,11 @@ const SEO = ({ title, description, image }: SEOProps): JSX.Element => {
 	return (
 		<Head>
 			<title>{title} - 한국 디스코드봇 리스트</title>
-			{description && <meta name="description" content={description} />}
-			<meta name="og:site_name" content="한국 디스코드봇 리스트" />
-			<meta name="og:title" content={title} />
-			{description && <meta name="og:description" content={description} />}
-			{image && <meta name="og:image" content={image} />}
+			{description && <meta name='description' content={description} />}
+			<meta name='og:site_name' content='한국 디스코드봇 리스트' />
+			<meta name='og:title' content={title} />
+			{description && <meta name='og:description' content={description} />}
+			{image && <meta name='og:image' content={image} />}
 		</Head>
 	)
 }
diff --git a/components/Segment.tsx b/components/Segment.tsx
index ebe0711..7721d85 100644
--- a/components/Segment.tsx
+++ b/components/Segment.tsx
@@ -1,6 +1,6 @@
 const Segment = ({ children }): JSX.Element => {
 	return (
-		<div className="p-5 text-black dark:text-white dark:bg-discord-black bg-little-white rounded-sm">
+		<div className='p-5 text-black dark:text-white dark:bg-discord-black bg-little-white rounded-sm'>
 			{children}
 		</div>
 	)
diff --git a/components/Tag.tsx b/components/Tag.tsx
index c921627..99c3b89 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -14,8 +14,8 @@ const Tag = ({
 	return href ? newTab ? (
 		<a
 			href={href}
-			rel="noopener noreferrer"
-			target="_blank"
+			rel='noopener noreferrer'
+			target='_blank'
 			className={`${className ?? ''} text-center text-base  ${
 				dark
 					? blurple
diff --git a/components/Wave.tsx b/components/Wave.tsx
index 66ac63c..5e5e667 100644
--- a/components/Wave.tsx
+++ b/components/Wave.tsx
@@ -1,9 +1,9 @@
 const Wave = ({ color, className }: WaveProps): JSX.Element => {
 	return (
-		<svg viewBox="0 0 1440 320" className={className}>
+		<svg viewBox='0 0 1440 320' className={className}>
 			<path
 				fill={color}
-				d="M0 192l34.3 5.3C68.6 203 137 213 206 186.7c68.3-26.7 137-90.7 205-96 69-5.7 138 48.3 206 90.6C685.7 224 754 256 823 272c68.4 16 137 16 206 0 68.1-16 137-48 205-69.3 68.9-21.7 137-31.7 172-37.4l34-5.3V0H0z"
+				d='M0 192l34.3 5.3C68.6 203 137 213 206 186.7c68.3-26.7 137-90.7 205-96 69-5.7 138 48.3 206 90.6C685.7 224 754 256 823 272c68.4 16 137 16 206 0 68.1-16 137-48 205-69.3 68.9-21.7 137-31.7 172-37.4l34-5.3V0H0z'
 			/>
 		</svg>
 	)
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5acd4f8..e714072 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -34,21 +34,21 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
 			localStorage.setItem('theme', systemColor)
 	}, [])
 	return (
-		<ThemeProvider defaultTheme={systemColor} attribute="class" storageKey="theme">
+		<ThemeProvider defaultTheme={systemColor} attribute='class' storageKey='theme'>
 			<Head>
-				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+				<meta name='viewport' content='width=device-width, initial-scale=1.0' />
 				<title>한국 디스코드봇 리스트</title>
-				<meta name="description" content="국내 디스코드봇들을 확인하고, 초대해보세요!" />
-				<meta name="og:title" content="한국 디스코드봇 리스트" />
-				<meta name="og:url" content="https://koreanbots.dev" />
-				<meta name="og:description" content="국내 디스코드봇들을 확인하고, 초대해보세요!" />
-				<meta name="og:image" content="/logo.png" />
-				<meta charSet="utf-8" />
-				<link rel="shortcut icon" href="/logo.png" />
-				<meta name="theme-color" content="#3366FF" />
+				<meta name='description' content='국내 디스코드봇들을 확인하고, 초대해보세요!' />
+				<meta name='og:title' content='한국 디스코드봇 리스트' />
+				<meta name='og:url' content='https://koreanbots.dev' />
+				<meta name='og:description' content='국내 디스코드봇들을 확인하고, 초대해보세요!' />
+				<meta name='og:image' content='/logo.png' />
+				<meta charSet='utf-8' />
+				<link rel='shortcut icon' href='/logo.png' />
+				<meta name='theme-color' content='#3366FF' />
 			</Head>
 			<Navbar />
-			<div className="iu-is-the-best h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white">
+			<div className='iu-is-the-best h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
 				<Component {...pageProps} />
 			</div>
 			<Footer />
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 8abf85c..58ad69b 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -11,11 +11,11 @@ class MyDocument extends Document {
 			<Html>
 				<Head>
 					<script
-						data-ad-client="ca-pub-4856582423981759"
+						data-ad-client='ca-pub-4856582423981759'
 						async
-						src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
+						src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
 					></script>
-					<script async src="https://www.googletagmanager.com/gtag/js?id=UA-165454387-1"></script>
+					<script async src='https://www.googletagmanager.com/gtag/js?id=UA-165454387-1'></script>
 					<script
 						dangerouslySetInnerHTML={{
 							__html: `
@@ -28,7 +28,7 @@ class MyDocument extends Document {
 						}}
 					/>
 				</Head>
-				<body className="h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white">
+				<body className='h-full text-black dark:text-gray-100 dark:bg-discord-dark bg-white'>
 					<Main />
 					<NextScript />
 				</body>
diff --git a/pages/bots/[id].tsx b/pages/bots/[id].tsx
index 64ff043..83fe28d 100644
--- a/pages/bots/[id].tsx
+++ b/pages/bots/[id].tsx
@@ -22,7 +22,7 @@ import Link from 'next/link'
 const Bots: NextPage<BotsProps> = ({ data, date }) => {
 	if (!data.id) return <NotFound />
 	return (
-		<Container paddingTop className="py-10">
+		<Container paddingTop className='py-10'>
 			<SEO
 				title={data.name}
 				description={data.intro}
@@ -32,16 +32,16 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 						: `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024`
 				}
 			/>
-			<div className="lg:flex">
-				<div className="w-full text-center lg:w-1/4">
+			<div className='lg:flex'>
+				<div className='w-full text-center lg:w-1/4'>
 					<DiscordImage
 						userID={data.id}
 						avatarHash={data.avatar}
 						tag={data.tag}
-						className="w-full"
+						className='w-full'
 					/>
 				</div>
-				<div className="flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left">
+				<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
 					<div>
 						<Tag
 							circular
@@ -52,18 +52,18 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 								</>
 							}
 						/>
-						<h1 className="mb-2 mt-3 text-4xl font-bold">
+						<h1 className='mb-2 mt-3 text-4xl font-bold'>
 							{data.name}{' '}
 							{data.trusted ? (
-								<span className="text-koreanbots-blue text-3xl">
-									<i className="fas fa-award" />
+								<span className='text-koreanbots-blue text-3xl'>
+									<i className='fas fa-award' />
 								</span>
 							) : ''}
 						</h1>
 					</div>
-					<p className="dark:text-gray-300 text-gray-800 text-base">{data.intro}</p>
+					<p className='dark:text-gray-300 text-gray-800 text-base'>{data.intro}</p>
 				</div>
-				<div className="w-full lg:w-1/4">
+				<div className='w-full lg:w-1/4'>
 					<LongButton
 						newTab
 						href={
@@ -71,50 +71,50 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 							`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
 						}
 					>
-						<h4 className="whitespace-nowrap">
-							<i className="fas fa-user-plus text-discord-blurple" /> 초대하기
+						<h4 className='whitespace-nowrap'>
+							<i className='fas fa-user-plus text-discord-blurple' /> 초대하기
 						</h4>
 					</LongButton>
 					<LongButton>
 						<h4>
-							<i className="fas fa-heart text-red-600" /> 하트 추가
+							<i className='fas fa-heart text-red-600' /> 하트 추가
 						</h4>
-						<span className="ml-1 px-2 py-1 text-center text-black dark:text-gray-400 text-sm bg-little-white-hover dark:bg-very-black rounded-lg">
+						<span className='ml-1 px-2 py-1 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>
 				</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-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white">
+			<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-2 px-4 py-4 text-black dark:text-gray-400 dark:bg-discord-black bg-little-white'>
 						<div>
-							<i className="far fa-flag" /> 접두사
+							<i className='far fa-flag' /> 접두사
 						</div>
-						<div className="markdown-body text-black dark:text-gray-400">
+						<div className='markdown-body text-black dark:text-gray-400'>
 							<code>{data.prefix}</code>
 						</div>
 						<div>
-							<i className="fas fa-users" /> 서버수
+							<i className='fas fa-users' /> 서버수
 						</div>
 						<div>{data.servers}</div>
 						<div>
-							<i className="fas fa-calendar-day" /> 봇 생성일
+							<i className='fas fa-calendar-day' /> 봇 생성일
 						</div>
 						<div>{Day(date).fromNow(false)}</div>
 						<div>
-							<i className="fas fa-check text-discord-blurple" /> 디스코드 인증됨
+							<i className='fas fa-check text-discord-blurple' /> 디스코드 인증됨
 						</div>
 					</div>
-					<h2 className="3xl mb-2 mt-2 font-bold">카테고리</h2>
-					<div className="flex flex-wrap">
+					<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={`/categories/${el}`} />
 						))}
 					</div>
-					<h2 className="3xl mb-2 mt-2 font-bold">제작자</h2>
+					<h2 className='3xl mb-2 mt-2 font-bold'>제작자</h2>
 					{(data.owners as User[]).map(el => (
 						<Owner
 							key={el.id}
@@ -124,40 +124,40 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 							username={el.username}
 						/>
 					))}
-					<div className="list grid">
+					<div className='list grid'>
 						<Link href={`/bots/${data.id}/report`}>
-							<a className="text-red-600 hover:underline">
-								<i className="far fa-flag" />
+							<a className='text-red-600 hover:underline'>
+								<i className='far fa-flag' />
 								신고하기
 							</a>
 						</Link>
 						{data.discord && (
 							<a
-								rel="noopener noreferrer"
-								target="_blank"
-								className="text-discord-blurple hover:underline"
+								rel='noopener noreferrer'
+								target='_blank'
+								className='text-discord-blurple hover:underline'
 								href={`https://discord.gg/${data.discord}`}
 							>
-								<i className="fab fa-discord" />
+								<i className='fab fa-discord' />
 								디스코드 서버
 							</a>
 						)}
 						{data.web && (
 							<a
-								rel="noopener noreferrer"
-								target="_blank"
-								className="text-blue-500 hover:underline"
+								rel='noopener noreferrer'
+								target='_blank'
+								className='text-blue-500 hover:underline'
 								href={data.web}
 							>
-								<i className="fas fa-globe" />
+								<i className='fas fa-globe' />
 								웹사이트
 							</a>
 						)}
 						{data.git && (
 							<a
-								rel="noopener noreferrer"
-								target="_blank"
-								className="hover:underline"
+								rel='noopener noreferrer'
+								target='_blank'
+								className='hover:underline'
 								href={data.git}
 							>
 								<i className={`fab fa-${git?.[new URL(data.git).hostname].icon ?? 'git-alt'}`} />
@@ -167,7 +167,7 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 					</div>
 					<Advertisement />
 				</div>
-				<div className="markdown-body pt-10 w-full lg:pr-5 lg:w-3/4">
+				<div className='markdown-body pt-10 w-full lg:pr-5 lg:w-3/4'>
 					<Advertisement />
 					<Segment>
 						<h1>이 메세지는 테스트 메세지입니다.</h1>
@@ -186,12 +186,12 @@ const Bots: NextPage<BotsProps> = ({ data, date }) => {
 								<td>apple</td>
 							</tbody>
 						</table>
-						<ul className="list-disc">
+						<ul className='list-disc'>
 							<li>first</li>
 							<li>second</li>
 						</ul>
 
-						<ul className="list-decimal">
+						<ul className='list-decimal'>
 							<li>first</li>
 							<li>second</li>
 						</ul>
diff --git a/pages/guidelines.tsx b/pages/guidelines.tsx
index e0a8761..5926eb6 100644
--- a/pages/guidelines.tsx
+++ b/pages/guidelines.tsx
@@ -4,18 +4,18 @@ import Docs from '../components/Docs'
 const Privacy: NextPage = () => {
 	return (
 		<Docs
-			header="가이드라인"
-			description="리스트에 등재되는 모든 봇들이 지켜야하는 가이드라인입니다!"
-			subheader="최초 작성: 2020-04-30 수정: 2020-05-15"
+			header='가이드라인'
+			description='리스트에 등재되는 모든 봇들이 지켜야하는 가이드라인입니다!'
+			subheader='최초 작성: 2020-04-30 수정: 2020-05-15'
 		>
-			<h1 className="mb-3 text-4xl font-bold">KOREANBOTS에 오신 것을 환영합니다.</h1>
+			<h1 className='mb-3 text-4xl font-bold'>KOREANBOTS에 오신 것을 환영합니다.</h1>
 			<p>봇 추가 또는 등재 유지를 위해서 반드시 지켜야할 가이드라인들입니다.</p>
 			<p>가이드라인 위반이 확인될 경우, 거부 또는 삭제 처리될 수 있음을 알려드립니다.</p>
-			<h2 className="mt-10 text-3xl font-semibold" id="봇">
+			<h2 className='mt-10 text-3xl font-semibold' id='봇'>
 				봇
 			</h2>
 			<p>아래는 봇 추가를 위해 반드시 지켜야할 규칙입니다.</p>
-			<ul className="list-inside list-disc">
+			<ul className='list-inside list-disc'>
 				<li>반드시 디스코드 서버에 참가해주세요.</li>
 				<li>카테고리는 정확하게 지정해주세요 (NSFW의 경우 반드시 NSFW를 지정해주셔야합니다.)</li>
 				<li>
@@ -31,7 +31,7 @@ const Privacy: NextPage = () => {
 				<li>
 					오픈소스봇을 따로 거부하지는 않지만, 반드시 <strong>라이선스</strong>를 지켜주세요.
 					원작자가 문제 제기할 경우, 통보없이 봇이 삭제되거나 거부될 수 있습니다.
-					<ul className="pl-3 list-inside list-disc">
+					<ul className='pl-3 list-inside list-disc'>
 						<li>
 							오픈소스 라이선스에 <strong>원소스를 표시해야 한다는 조항</strong>(MIT 등 해당)이
 							있다면, 소스같은 곳뿐만 아니라 반드시 봇 설명에 기재해주세요.
@@ -45,11 +45,11 @@ const Privacy: NextPage = () => {
 					</ul>
 				</li>
 			</ul>
-			<h3 className="mt-x text-lg font-semibold" id="금지사항">
+			<h3 className='mt-x text-lg font-semibold' id='금지사항'>
 				금지사항
 			</h3>
 			<p>다음 항목에 해당하는 봇의 등록을 거부할 수 있습니다.</p>
-			<ul className="list-inside list-disc">
+			<ul className='list-inside list-disc'>
 				<li>불법 프로그램 홍보 또는 판매 기타 행위를 조장하는 봇.</li>
 				<li>
 					디스코드 <strong>TOS</strong>나 <strong>가이드라인</strong>, <strong>개발자 약관</strong>
@@ -61,21 +61,21 @@ const Privacy: NextPage = () => {
 				</li>
 				<li>대한민국 법을 위반하거나 오픈소스 라이선스, API 라이선스등을 위반한 봇</li>
 			</ul>
-			<h2 className="mt-10 text-3xl font-semibold" id="유저">
+			<h2 className='mt-10 text-3xl font-semibold' id='유저'>
 				유저
 			</h2>
 			<p>
 				다음 항목에 해당하는 유저가 제작에 참여하고 있는(과거에 제작 참여 이력과는 관련 없음) 봇의
 				등록을 거부할 수 있습니다.
 			</p>
-			<ul className="list-inside list-disc">
+			<ul className='list-inside list-disc'>
 				<li>
 					디스코드 <strong>TOS</strong>나 <strong>가이드라인</strong>, <strong>개발자 약관</strong>{' '}
 					또는 <strong>대한민국 법</strong>, <strong>오픈소스 라이선스</strong>,{' '}
 					<strong>기타 라이선스</strong> 중 하나 이상을 위반 하고 있는 경우
 				</li>
 			</ul>
-			<p className="mt-10">
+			<p className='mt-10'>
 				위 항목들은 정확하게 인정되기 전까지는 처리할 수 없습니다. 또한, 처리하기 전에는 반드시
 				유저에게 통보를 시도해야합니다.
 			</p>
diff --git a/pages/index.tsx b/pages/index.tsx
index 7d10b08..c4c0aa4 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,24 +10,24 @@ import { Fetch } from '../utils'
 const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 	return (
 		<>
-			<div className="dark:bg-discord-black bg-discord-blurple">
-				<Container className="pb-28 pt-20" ignoreColor>
-					<h1 className="text-center text-gray-100 text-3xl font-bold sm:text-left">
+			<div className='dark:bg-discord-black bg-discord-blurple'>
+				<Container className='pb-28 pt-20' ignoreColor>
+					<h1 className='text-center text-gray-100 text-3xl font-bold sm:text-left'>
 						한국 디스코드봇 리스트
 					</h1>
 				</Container>
 			</div>
 			<Wave
-				color="currentColor"
-				className="dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white"
+				color='currentColor'
+				className='dark:text-discord-black text-discord-blurple dark:bg-discord-dark bg-white'
 			/>
 
 			<Container>
 				<Advertisement />
-				<h1 className="text-3xl font-bold">
-					<i className="far fa-heart mr-3 text-pink-600" /> 하트 랭킹
+				<h1 className='text-3xl font-bold'>
+					<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹
 				</h1>
-				<p className="text-base">하트를 많이 받은 봇들의 순위입니다!</p>
+				<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
 				<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
 					{
 						votes.data.slice(0, 8).map(bot=> <BotCard key={bot.id} bot={bot} />)
@@ -36,19 +36,19 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 				<LongButton href='/list/votes' center>
 					<h1 className='text-2xl'>더보기</h1>
 				</LongButton>
-				<h1 className="text-3xl font-bold mt-5">
-					<i className="far fa-star mr-3 text-yellow-500" /> 새로운 봇
+				<h1 className='text-3xl font-bold mt-5'>
+					<i className='far fa-star mr-3 text-yellow-500' /> 새로운 봇
 				</h1>
-				<p className="text-base">최근에 한국 디스코드봇 리스트에 추가된 따끈따끈한 봇입니다.</p>
+				<p className='text-base'>최근에 한국 디스코드봇 리스트에 추가된 따끈따끈한 봇입니다.</p>
 				<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
 					{
 						newBots.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
 					}
 				</div>
-				<h1 className="text-3xl font-bold">
-					<i className="fa fa-check mr-3 mt-10 text-green-500" /> 신뢰된 봇
+				<h1 className='text-3xl font-bold'>
+					<i className='fa fa-check mr-3 mt-10 text-green-500' /> 신뢰된 봇
 				</h1>
-				<p className="text-base">KOREANBOTS에서 인증받은 신뢰할 수 있는 봇들입니다!!</p>
+				<p className='text-base'>KOREANBOTS에서 인증받은 신뢰할 수 있는 봇들입니다!!</p>
 				<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
 					{
 						trusted.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
diff --git a/pages/privacy.tsx b/pages/privacy.tsx
index 03d2fce..6b1474f 100644
--- a/pages/privacy.tsx
+++ b/pages/privacy.tsx
@@ -3,19 +3,19 @@ import Docs from '../components/Docs'
 
 const Privacy: NextPage = () => {
 	return (
-		<Docs header="개인정보취급방침" description="저희가 개인정보를 취급하는 방침입니다.">
-			<h2 className="mt-10 text-3xl font-medium">개인정보 처리의 목적</h2>
+		<Docs header='개인정보취급방침' description='저희가 개인정보를 취급하는 방침입니다.'>
+			<h2 className='mt-10 text-3xl font-medium'>개인정보 처리의 목적</h2>
 			<p>
 				"한국 디스코드봇 리스트"('https://koreanbots.dev')는 다음 목적을 위하여 개인정보를 처리하고
 				있으며, 다음 목적 이외의 용도로는 사용하지 않습니다.
 			</p>
-			<ul className="list-inside list-disc">
+			<ul className='list-inside list-disc'>
 				<li>웹사이트에 표시 및 서비스 제공</li>
 				<li>빠른 웹사이트 문제 수정</li>
 				<li>사이트와 유저의 보안 유지</li>
 			</ul>
-			<h2 className="mt-10 text-3xl font-medium">수집하는 개인정보 항목</h2>
-			<ul className="list-inside list-disc">
+			<h2 className='mt-10 text-3xl font-medium'>수집하는 개인정보 항목</h2>
+			<ul className='list-inside list-disc'>
 				<li>
 					유저: 디스코드 Oauth를 통한 정보(이메일, 디스코드 유저의 ID, 아바타, 유저네임과 태그,
 					접속해있는 길드), 접속로그(IP주소, 접속 기기정보), 유저의 봇 투표 정보 | 선택항목: Github
@@ -27,12 +27,12 @@ const Privacy: NextPage = () => {
 					링크
 				</li>
 			</ul>
-			<h2 className="mt-10 text-3xl font-medium">개인정보 보유 및 이용기간</h2>
+			<h2 className='mt-10 text-3xl font-medium'>개인정보 보유 및 이용기간</h2>
 			<p>
 				개인정보는 <strong>서비스 종료시까지 보관을 원칙</strong>으로 하며, 유저의 요청시 언제든지
 				파기할 수 있습니다.
 			</p>
-			<h2 className="mt-10 text-3xl font-medium">이용자 및 법정 대리인의 권리와 행사 방법</h2>
+			<h2 className='mt-10 text-3xl font-medium'>이용자 및 법정 대리인의 권리와 행사 방법</h2>
 			<p>
 				회사는 정보통신망법 및 개인정보 보호법 등 관계 법령에서 규정하고 있는 이용자의 권리를 충실히
 				보장합니다.
@@ -41,28 +41,28 @@ const Privacy: NextPage = () => {
 				이용자는 언제든지 자신의 개인정보 및 이용 현황을 상시 확인할 수 있으며, 동의 철회 및 정정을
 				요청할 수 있습니다.
 			</p>
-			<h2 className="mt-10 text-3xl font-medium">개인정보의 파기</h2>
+			<h2 className='mt-10 text-3xl font-medium'>개인정보의 파기</h2>
 			<p>
 				개인정보의 수집 및 이용 목적이 달성 되면, 수집한 개인정보를 신속하고 안전한 방법으로
 				파기합니다.
 			</p>
-			<h2 className="mt-10 text-3xl font-medium">개인정보 보호책임자</h2>
+			<h2 className='mt-10 text-3xl font-medium'>개인정보 보호책임자</h2>
 			<p>
 				권리 침해와 개인정보 처리와 관한 불만처리 및 피해구제를 위하여 아래와 같이 개인정보보호
 				담당자를 지정하고 있습니다.
 			</p>
 			<h3>개인정보 보호 책임자</h3>
-			<ul className="list-inside list-disc">
+			<ul className='list-inside list-disc'>
 				<li>성명: 박준서</li>
 				<li>직책: 대표</li>
 				<li>
-					연락처: <a href="mailto:wonderlandpark@callisto.team">메일</a> 혹은 디스코드
+					연락처: <a href='mailto:wonderlandpark@callisto.team'>메일</a> 혹은 디스코드
 					@wonderlandpark#9999
 				</li>
 			</ul>
-			<h2 className="mt-10 text-3xl font-medium">개인정보 처리방침 변경 시 고지 의무</h2>
+			<h2 className='mt-10 text-3xl font-medium'>개인정보 처리방침 변경 시 고지 의무</h2>
 			<p>개인정보 처리방침의 변경이 있는 경우 시행 7일전 사전에 이용자에게 고지합니다.</p>
-			<h2 className="mt-10 text-3xl font-medium">정보주체의 권익침해에 대한 구제방법</h2>
+			<h2 className='mt-10 text-3xl font-medium'>정보주체의 권익침해에 대한 구제방법</h2>
 			<p>정보주체는 아래의 기관에 개인정보 침해에 대한 피해구제, 상담 등을 문의할 수 있습니다.</p>
 			<p>
 				아래의 기관은 당사와는 별개의 기관으로서, 당사의 자체적인 개인정보 불만처리, 피해 구제
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
index b8803db..6134874 100644
--- a/pages/users/[id].tsx
+++ b/pages/users/[id].tsx
@@ -18,7 +18,7 @@ const Users: NextPage<UserProps> = ({ data }) => {
 	if (!data.id) return <NotFound />
 	console.log(data.bots[0])
 	return (
-		<Container paddingTop className="py-10">
+		<Container paddingTop className='py-10'>
 			<SEO
 				title={data.username}
 				description={josa(
@@ -33,29 +33,29 @@ const Users: NextPage<UserProps> = ({ data }) => {
 						: `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024`
 				}
 			/>
-			<div className="lg:flex">
-				<div className="w-full text-center lg:w-1/4">
+			<div className='lg:flex'>
+				<div className='w-full text-center lg:w-1/4'>
 					<DiscordImage
 						userID={data.id}
 						avatarHash={data.avatar}
 						tag={data.tag}
-						className="w-full"
+						className='w-full'
 					/>
 				</div>
-				<div className="flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left">
+				<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
 					<div>
-						<h1 className="mb-2 mt-3 text-4xl font-bold">{data.username}</h1>
-						<span className="ml-0.5 text-gray-400 text-4xl font-semibold">#{data.tag}</span>
+						<h1 className='mb-2 mt-3 text-4xl font-bold'>{data.username}</h1>
+						<span className='ml-0.5 text-gray-400 text-4xl font-semibold'>#{data.tag}</span>
 						<br />
-						<div className="badges flex">
+						<div className='badges flex'>
 							{checkPerm(data.perm, 'staff') && (
-								<div className="pr-5 text-koreanbots-blue text-2xl">
-									<i className="fas fa-hammer" />
+								<div className='pr-5 text-koreanbots-blue text-2xl'>
+									<i className='fas fa-hammer' />
 								</div>
 							)}
 							{checkPerm(data.perm, 'bughunter') && (
-								<div className="pr-5 text-green-500 text-2xl">
-									<i className="fas fa-bug" />
+								<div className='pr-5 text-green-500 text-2xl'>
+									<i className='fas fa-bug' />
 								</div>
 							)}
 						</div>
@@ -65,7 +65,7 @@ const Users: NextPage<UserProps> = ({ data }) => {
 								newTab
 								text={
 									<>
-										<i className="fab fa-github" /> {data.github}
+										<i className='fab fa-github' /> {data.github}
 									</>
 								}
 								github
@@ -76,8 +76,8 @@ const Users: NextPage<UserProps> = ({ data }) => {
 				</div>
 			</div>
 			<Divider />
-			<h2 className="mt-8 text-3xl font-bold">제작한 봇</h2>
-			<div className="grid gap-4 mt-20 2xl:grid-cols-4 md:grid-cols-2">
+			<h2 className='mt-8 text-3xl font-bold'>제작한 봇</h2>
+			<div className='grid gap-4 mt-20 2xl:grid-cols-4 md:grid-cols-2'>
 				{(data.bots as Bot[]).map((bot: Bot) => (
 					<BotCard key={bot.id} bot={bot} />
 				))}