chore: deps (#566)

* chore: remove zlib-sync

* chore: pin version of @types/react

* chore: remove next-session

* chore: update tailwind

* chore: update tailwind

* chore: update lint

* chore: remove abort-controller

* chore: regen lock file

* fix: remove transparent

* chore: set plugin to not mutate existing style

components/BotCard.tsx

@@ -84,7 +84,7 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 								</Link>
 								{manage ? (
 									<Link href={`/bots/${bot.id}/edit`}>
-										<a className='py-3 w-full text-center text-green-500 hover:text-white text-sm font-bold hover:bg-green-500 rounded-br-2xl hover:shadow-lg transition duration-100 ease-in'>
+										<a 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'>
 											관리하기
 										</a>
 									</Link>

components/Footer.tsx

@@ -28,7 +28,7 @@ const Footer: React.FC<FooterProps> = ({ theme, setTheme }) => {
 							</a>
 						</div>
 					</div>
-					<div className='grid flex-grow gap-2 grid-cols-2 md:grid-cols-7'>
+					<div className='grid grow gap-2 grid-cols-2 md:grid-cols-7'>
 						<div className='col-span-2 mb-2'>
 							<h2 className='text-koreanbots-blue text-base font-bold'>한국 디스코드 리스트</h2>
 							<ul className='text-sm'>

components/Navbar.tsx

@@ -43,7 +43,7 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 	}, [ 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 bg-transparent lg:absolute'>
+			<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' : '/'}>
@@ -121,7 +121,7 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 							</li>
 						</ul>
 					</div>
-					<div className='hidden flex-grow items-center bg-white lg:flex lg:bg-transparent lg:shadow-none'>
+					<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)}>
 								{

components/Owner.tsx

@@ -5,11 +5,11 @@ const Owner: React.FC<OwnerProps> = ({ id, globalName, username, tag, crown=fals
 	return (
 		<Link href={`/users/${id}`}>
 			<a 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 flex-shrink-0 mr-3 mt-1 w-8 h-8 rounded-full shadow-inner overflow-hidden'>
+				<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' />
 				</div>
 				<div className='flex-1 w-0 leading-snug'>
-					<h4 className='whitespace-nowrap truncate'>{ crown && <i className='fas fa-crown text-yellow-300 text-xs' /> }{globalName}</h4>
+					<h4 className='whitespace-nowrap truncate'>{ crown && <i className='fas fa-crown text-amber-300 text-xs' /> }{globalName}</h4>
 					<span className='text-gray-600 text-sm'>{tag !== '0' ? '#' + tag : '@' + username}</span>
 				</div>
 			</a>

components/ReportTemplate.tsx

@@ -6,7 +6,7 @@ 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-green-400 fas fa-check-circle mr-1' />}
+	{checked && <i className='text-emerald-400 fas fa-check-circle mr-1' />}
 	{text}
 </>
 

components/Search.tsx

@@ -2,8 +2,6 @@ import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
-import AbortController from 'abort-controller'
-
 import { makeBotURL, makeServerURL, redirectTo } from '@utils/Tools'
 import Fetch from '@utils/Fetch'
 import { Bot, Server, ResponseProps } from '@types'
@@ -87,7 +85,7 @@ const Search: React.FC = () => {
 				<input
 					type='search'
 					maxLength={50}
-					className='flex-grow pr-20 px-7 py-3 h-16 text-xl bg-transparent border-0 border-none outline-none shadow'
+					className='grow pr-20 px-7 py-3 h-16 text-xl bg-transparent border-0 border-none outline-none shadow'
 					placeholder='검색...'
 					value={query}
 					onChange={e => {

components/ServerCard.tsx

@@ -85,7 +85,7 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 								{
 									type === 'add' ? 
 										server.data ? <Link href={newServerLink}>
-											<a className='py-3 w-full text-center text-green-500 hover:text-white text-sm font-bold hover:bg-green-500 rounded-b-2xl hover:shadow-lg transition duration-100 ease-in'>
+											<a 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'>
 												등록하기
 											</a>
 										</Link> : <Link href={newServerLink}>
@@ -106,7 +106,7 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 											</Link>
 											{type === 'manage' ? (
 												<Link href={`/servers/${server.id}/edit`}>
-													<a className='py-3 w-full text-center text-green-500 hover:text-white text-sm font-bold hover:bg-green-500 rounded-br-2xl hover:shadow-lg transition duration-100 ease-in'>
+													<a 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'>
 											관리하기
 													</a>
 												</Link>

components/SubmittedBotCard.tsx

@@ -11,7 +11,7 @@ const SubmittedBotCard: React.FC<SubmittedBotProps> = ({ href, submit }) => {
 			<a 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'>
 				<div className='h-18'>
 					<div className='flex'>
-						<div className='flex-grow w-full'>
+						<div className='grow w-full'>
 							<h2 className='text-lg'>{submit.id}</h2>
 						</div>
 						<div className='absolute right-0 grid grid-cols-1 px-4 w-2/5 h-0'>

package.json

@@ -17,8 +17,8 @@
 		"@fortawesome/fontawesome-free": "5.15.3",
 		"@hcaptcha/react-hcaptcha": "0.3.6",
 		"@sentry/nextjs": "^7.31.1",
-		"abort-controller": "3.0.0",
+		"@tailwindcss/forms": "^0.5.3",
-		"autoprefixer": "^10.3.1",
+		"autoprefixer": "^10.4.14",
 		"badgen": "3.2.2",
 		"cookie": "0.4.1",
 		"csrf": "3.1.0",
@@ -41,10 +41,9 @@
 		"next-connect": "0.10.1",
 		"next-pwa": "^5.6.0",
 		"next-seo": "^4.26.0",
-		"next-session": "3.4.0",
 		"node-emoji": "1.10.0",
 		"nprogress": "0.2.0",
-		"postcss": "8.3.6",
+		"postcss": "^8.4.24",
 		"postcss-preset-env": "6.7.0",
 		"rc-tooltip": "5.1.1",
 		"react": "17.0.2",
@@ -58,16 +57,14 @@
 		"react-sortable-hoc": "2.0.0",
 		"react-use-clipboard": "1.0.7",
 		"sanitize-html": "^2.8.1",
-		"tailwindcss": "2.2.7",
+		"tailwindcss": "^3.3.2",
 		"tlru": "1.0.2",
 		"twemoji": "13.1.0",
 		"url-regex-safe": "2.0.2",
 		"yup": "0.32.9",
-		"yup-locales-ko": "1.2.0",
+		"yup-locales-ko": "1.2.0"
-		"zlib-sync": "0.1.7"
 	},
 	"devDependencies": {
-		"@tailwindcss/custom-forms": "0.2.1",
 		"@types/cookie": "^0.4.1",
 		"@types/emoji-mart": "^3.0.5",
 		"@types/express-rate-limit": "^5.1.3",
@@ -84,20 +81,23 @@
 		"@types/sanitize-html": "^2.8.0",
 		"@types/twemoji": "^12.1.2",
 		"@types/url-regex-safe": "1.0.0",
-		"@typescript-eslint/eslint-plugin": "4.28.5",
+		"@typescript-eslint/eslint-plugin": "^5.59.11",
-		"@typescript-eslint/parser": "^4.28.5",
+		"@typescript-eslint/parser": "^5.59.11",
-		"eslint": "^7.31.0",
+		"eslint": "^8.43.0",
-		"eslint-config-next": "^11.0.1",
+		"eslint-config-next": "^13.4.6",
-		"eslint-config-prettier": "8.3.0",
+		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-jsx-a11y": "6.4.1",
+		"eslint-plugin-jsx-a11y": "^6.7.1",
-		"eslint-plugin-prettier": "3.4.0",
+		"eslint-plugin-prettier": "^4.2.1",
-		"eslint-plugin-react": "7.24.0",
+		"eslint-plugin-react": "^7.32.2",
-		"eslint-plugin-react-hooks": "4.2.0",
+		"eslint-plugin-react-hooks": "^4.6.0",
 		"jest": "^29.4.1",
 		"prettier": "^2.3.2",
 		"prettier-plugin-tailwind": "^2.2.12",
 		"ts-jest": "^29.0.5",
-		"typescript": "4.6.4"
+		"typescript": "^5.1.3"
+	},
+	"resolutions": {
+		"@types/react": "^17.0.15"
 	},
 	"license": "AGPL-3.0"
 }

pages/bots/[id]/edit.tsx

@@ -175,7 +175,7 @@ const ManageBotPage:NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme })
 				<h2 className='text-2xl font-semibold pb-2'>위험구역</h2>
 				<Segment>
 					<div className='lg:flex items-center'>
-						<div className='flex-grow py-1'>
+						<div className='grow py-1'>
 							<h3 className='text-lg font-semibold'>관리자 수정</h3>
 							<p className='text-gray-400'>봇의 관리자를 추가하거나 삭제합니다.</p>
 						</div>
@@ -221,7 +221,7 @@ const ManageBotPage:NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme })
 												}
 											</div>
 											<div className='flex'>
-												<div className='flex-grow pr-2'>
+												<div className='grow pr-2'>
 													<Input name='id' placeholder='추가할 유저 ID' />
 												</div>
 												<Button className='w-16 bg-discord-blurple' onClick={async () => {
@@ -248,7 +248,7 @@ const ManageBotPage:NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme })
 					</div>
 					<Divider />
 					<div className='lg:flex items-center'>
-						<div className='flex-grow py-1'>
+						<div className='grow py-1'>
 							<h3 className='text-lg font-semibold'>소유권 이전</h3>
 							<p className='text-gray-400'>봇의 소유권을 이전합니다. 소유권을 이전하게 되면 소유권을 잃게 됩니다.</p>
 						</div>
@@ -290,7 +290,7 @@ const ManageBotPage:NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme })
 					</div>
 					<Divider />
 					<div className='lg:flex items-center'>
-						<div className='flex-grow py-1'>
+						<div className='grow py-1'>
 							<h3 className='text-lg font-semibold'>봇 삭제하기</h3>
 							<p className='text-gray-400'>봇을 삭제하게 되면 되돌릴 수 없습니다.</p>
 						</div>

pages/bots/[id]/index.tsx

@@ -95,7 +95,7 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 										className='w-full rounded-full'
 									/>
 								</div>
-								<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
+								<div className='grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
 									<Tag
 										circular
 										text={
@@ -318,7 +318,7 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 									{
 										checkBotFlag(data.flags, 'hackerthon') ? <Segment className='mt-10'>
 											<h1 className='text-3xl font-semibold'>
-												<i className='fas fa-trophy mr-4 my-2 text-yellow-300' /> 해당 봇은 한국 디스코드 리스트 해커톤 수상작품입니다!
+												<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>

pages/bots/index.tsx

@@ -30,7 +30,7 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 				<Paginator totalPage={votes.totalPage} currentPage={votes.currentPage} pathname='/bots/list/votes' />
 				<Advertisement />
 				<h1 className='text-3xl font-bold mb-2'>
-					<i className='fa fa-check mr-3 mt-10 text-green-500' /> 신뢰된 봇
+					<i className='fa fa-check mr-3 mt-10 text-emerald-500' /> 신뢰된 봇
 				</h1>
 				<p className='text-base'>한국 디스코드 리스트에서 인증받은 신뢰할 수 있는 봇들입니다!!</p>
 				<ResponsiveGrid>
@@ -39,7 +39,7 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 					}
 				</ResponsiveGrid>
 				<h1 className='text-3xl font-bold mt-20 mb-2'>
-					<i className='far fa-star mr-3 text-yellow-500' /> 새로운 봇
+					<i className='far fa-star mr-3 text-amber-500' /> 새로운 봇
 				</h1>
 				<p className='text-base'>최근에 한국 디스코드 리스트에 추가된 따끈따끈한 봇입니다.</p>
 				<ResponsiveGrid>

pages/calculator.tsx

@@ -18,7 +18,7 @@ const Calculator:NextPage<CalculatorProps> = ({ query }) => {
 				<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-yellow-500' : ''}`}>{name}</span>
+				<span className={`ml-2.5 text-lg ${yellow ? 'text-amber-500' : ''}`}>{name}</span>
 			</label>
 		</li>
 	
@@ -76,7 +76,7 @@ const Calculator:NextPage<CalculatorProps> = ({ query }) => {
 			</div>
 		</div>
 		<div className='py-10'>
-			<span className='text-yellow-500'>노란색 = 서버에 2단계 인증 필수가 활성화되어있다면, 봇 소유자는 <a href='https://support.discord.com/hc/ko/articles/219576828-2단계-인증-설정하기'>2단계 인증</a>이 완료되어있어야합니다.</span>
+			<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() || '',

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

@@ -93,7 +93,7 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme,
 					<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-green-400 text-white' : null}>{tokenCopied ? '복사됨' : '복사'}</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>

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

@@ -94,7 +94,7 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({ user, spec, serve
 							<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-green-400 text-white' : null}>{tokenCopied ? '복사됨' : '복사'}</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>

pages/developers/docs/[first]/[second].tsx

@@ -76,10 +76,10 @@ export async function getStaticProps () {
 
 function code({ children }:{ children: string }):JSX.Element {
 	const methods = {
-		get: 'text-green-400',
+		get: 'text-emerald-400',
-		post: 'text-yellow-400',
+		post: 'text-amber-400',
 		put: 'text-blue-500',
-		patch: 'text-yellow-400',
+		patch: 'text-amber-400',
 		delete: 'text-red-500'
 	}
 	return <code className={`${methods[String(children).toLowerCase()]}`}>

pages/pendingBots/[id]/[date].tsx

@@ -82,7 +82,7 @@ const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
 				</LongButton>
 				<LongButton onClick={setCopied}>
 					<h4>
-						{ isCopied ? <><i className='fas fa-check text-green-400' /> 복사됨</> : <><i className='far fa-copy'/> 설명 마크다운 복사하기</>}
+						{ isCopied ? <><i className='fas fa-check text-emerald-400' /> 복사됨</> : <><i className='far fa-copy'/> 설명 마크다운 복사하기</>}
 					</h4>
 				</LongButton>
 			</div>

pages/servers/[id]/edit.tsx

@@ -129,7 +129,7 @@ const ManageServerPage:NextPage<ManageServerProps> = ({ server, user, owners, cs
 				<p className='text-gray-400 mb-3'>관리자 추가나 소유권 이전은 웹사이트에서 진행하실 수 없습니다. 디스코드 서버 내에서 "관리자" 권한을 부여하시거나 서버의 소유권을 이전하시면 됩니다.</p>
 				<Segment>
 					<div className='lg:flex items-center'>
-						<div className='flex-grow py-1'>
+						<div className='grow py-1'>
 							<h3 className='text-lg font-semibold'>서버 삭제하기</h3>
 							<p className='text-gray-400'>서버를 삭제하게 되면 되돌릴 수 없습니다.</p>
 						</div>

pages/servers/[id]/index.tsx

@@ -98,7 +98,7 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
 									className='w-full rounded-full'
 								/>
 							</div>
-							<div className='flex-grow px-5 py-12 w-full text-center lg:w-5/12 lg:text-left'>
+							<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') ? (

pages/servers/index.tsx

@@ -28,7 +28,7 @@ const ServerIndex: NextPage<ServerIndexProps> = ({ votes, trusted }) => {
 			<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-green-500' /> 신뢰된 서버
+				<i className='fa fa-check mr-3 mt-10 text-emerald-500' /> 신뢰된 서버
 			</h1>
 			<p className='text-base'>한국 디스코드 리스트에서 인증받은 신뢰할 수 있는 서버들입니다!!</p>
 			<ResponsiveGrid>

pages/users/[id]/index.tsx

@@ -56,7 +56,7 @@ const Users: NextPage<UserProps> = ({ user, data }) => {
 						className='w-full rounded-full'
 					/>
 				</div>
-				<div className='flex-grow px-5 py-10 w-full text-center lg:w-5/12 lg:text-left'>
+				<div className='grow px-5 py-10 w-full text-center lg:w-5/12 lg:text-left'>
 					<div>
 						{
 							(data.tag !== '0') ? <div className='lg:flex mt-3 mb-1 '>
@@ -77,7 +77,7 @@ const Users: NextPage<UserProps> = ({ user, data }) => {
 							)}
 							{checkUserFlag(data.flags, 'bughunter') && (
 								<Tooltip text='버그를 많이 제보해주신 분입니다.' direction='left'>
-									<div className='pr-5 text-green-500 text-2xl'>
+									<div className='pr-5 text-emerald-500 text-2xl'>
 										<i className='fas fa-bug' />
 									</div>
 								</Tooltip>

tailwind.config.js

@@ -3,14 +3,10 @@ module.exports = {
 		removeDeprecatedGapUtilities: true,
 		purgeLayersByDefault: true,
 	},
-	purge: {
+	content: [
-		content: [
+		'./**/*.{ts,tsx}',
-			'./**/*.{ts,tsx}',
+	],
-		],
+	safelist: ['text-emerald-400', 'text-amber-300', 'text-red-500', 'text-gray-500', 'text-violet-500', 'bg-koreanbots-blue', 'bg-very-black'],
-		options: {
-			safelist: ['text-green-400', 'text-yellow-300', 'text-red-500', 'text-gray-500', 'text-purple-500', 'bg-koreanbots-blue', 'bg-very-black'],
-		}
-	},
 	darkMode: 'class', // or 'media' or 'class'
 	theme: {
 		extend: {
@@ -42,10 +38,7 @@ module.exports = {
 			'3': '30rem'
 		}
 	},
-	variants: {
+	plugins: [require('@tailwindcss/forms')({
-		extend: {
+		strategy: 'class',
-			inset: ['checked']
+	})],
-		},
-	},
-	plugins: [require('@tailwindcss/custom-forms')],
 }

utils/Constants.ts

@@ -14,11 +14,11 @@ export const BUG_REPORT_GROUPS = ['경북소프트웨어고등학교 해킹방
 export const Status = {
 	online: {
 		text: '온라인',
-		color: 'green-400',
+		color: 'emerald-400',
 	},
 	idle: {
 		text: '자리 비움',
-		color: 'yellow-300',
+		color: 'amber-300',
 	},
 	dnd: {
 		text: '다른 용무중',
@@ -30,7 +30,7 @@ export const Status = {
 	},
 	streaming: {
 		text: '방송중',
-		color: 'purple-500'
+		color: 'violet-500'
 	},
 	null: {
 		text: '알 수 없음',
@@ -178,9 +178,9 @@ export const imageSafeHost = [
 ]
 
 export const MessageColor = {
-	success: 'bg-green-200 text-green-800',
+	success: 'bg-emerald-200 text-emerald-800',
 	error: 'bg-red-200 text-red-800',
-	warning: 'bg-yellow-50 text-yellow-700',
+	warning: 'bg-amber-50 text-amber-700',
 	info: 'bg-blue-200 text-blue-800'
 }