style: suggestions at review

app.css

@@ -152,10 +152,7 @@ button {
   height: 100%;
   box-shadow: 0 0 10px #3366FF, 0 0 5px #3366FF;
   opacity: 1.0;
-
+  transform: rotate(3deg) translate(0px, -4px);
-  -webkit-transform: rotate(3deg) translate(0px, -4px);
-      -ms-transform: rotate(3deg) translate(0px, -4px);
-          transform: rotate(3deg) translate(0px, -4px);
 }
 
 /* Remove these to get rid of the spinner */
@@ -176,9 +173,7 @@ button {
   border-top-color: #3366FF;
   border-left-color: #3366FF;
   border-radius: 50%;
-
+	animation: nprogress-spinner 400ms linear infinite;
-  -webkit-animation: nprogress-spinner 400ms linear infinite;
-          animation: nprogress-spinner 400ms linear infinite;
 }
 
 .nprogress-custom-parent {
@@ -191,10 +186,6 @@ button {
   position: absolute;
 }
 
-@-webkit-keyframes nprogress-spinner {
-  0%   { -webkit-transform: rotate(0deg); }
-  100% { -webkit-transform: rotate(360deg); }
-}
 @keyframes nprogress-spinner {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }

components/Advertisement.tsx

@@ -1,5 +1,5 @@
-import Logger from '@utils/Logger'
 import { useEffect } from 'react'
+import Logger from '@utils/Logger'
 
 const Advertisement = ({ size = 'short' }: AdvertisementProps): JSX.Element => {
 	useEffect(() => {

components/Application.tsx

@@ -1,5 +1,7 @@
+import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import DiscordAvatar from './DiscordAvatar'
+
+const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 
 const Application = ({ type, id, name }: ApplicationProps): JSX.Element => {
 	return (

components/BotCard.tsx

@@ -1,12 +1,13 @@
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
 
 import { checkBotFlag, formatNumber, makeBotURL } from '@utils/Tools'
 import { Status } from '@utils/Constants'
 import { Bot } from '@types'
 
-import Divider from '@components/Divider'
+const Divider = dynamic(() => import('@components/Divider'))
-import Tag from '@components/Tag'
+const Tag = dynamic(() => import('@components/Tag'))
-import DiscordAvatar from '@components/DiscordAvatar'
+const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 
 const BotCard = ({ manage = false, bot }: BotProps): JSX.Element => {
 	return (

components/Captcha.tsx

@@ -1,5 +1,6 @@
-import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { Ref } from 'react'
+import HCaptcha from '@hcaptcha/react-hcaptcha'
+
 
 const Captcha = ({ dark, onVerify }:CaptchaProps):JSX.Element => {
 	return <HCaptcha sitekey='43e556b4-cc90-494f-b100-378b906bb736' theme={dark ? 'dark' : 'light'} onVerify={onVerify}/>

components/DiscordAvatar.tsx

@@ -11,39 +11,39 @@ const DiscordAvatar = (props: {
 }) => {
 	const fallback = '/img/default.png'
 	const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>()
+	
 	useEffect(()=> {
 		setWebpUnavailable(localStorage.webp === 'false')
 	}, [])
-	return (
+	
-		<img
+	return <img
-			alt={props.alt ?? 'Image'}
+		alt={props.alt ?? 'Image'}
-			loading='lazy'
+		loading='lazy'
-			className={props.className}
+		className={props.className}
-			src={
+		src={
-				KoreanbotsEndPoints.CDN.avatar(props.userID, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
+			KoreanbotsEndPoints.CDN.avatar(props.userID, { format: !webpUnavailable ? 'webp' : 'png', size: props.size ?? 256})
-			}
+		}
-			onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> {
+		onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> {
-				if(webpUnavailable) {
+			if(webpUnavailable) {
-					(e.target as ImageTarget).onerror = (event) => {
+				(e.target as ImageTarget).onerror = (event) => {
-						// All Fails
+					// All Fails
-						(event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
+					(event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
-						(event.target as ImageTarget).src = fallback
+					(event.target as ImageTarget).src = fallback
 					
-					}
 				}
-				else {
+			}
-					(e.target as ImageTarget).onerror = (event) => {
+			else {
-						// All Fails
+				(e.target as ImageTarget).onerror = (event) => {
-						(event.target as ImageTarget).onerror = ()=> { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
+					// All Fails
-						(event.target as ImageTarget).src = fallback
+					(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 = KoreanbotsEndPoints.CDN.avatar(props.userID, { size: props.size ?? 256})
-					if(!supportsWebP()) localStorage.setItem('webp', 'false')
 				}
-			}}
+				// Webp Load Fail
-		/>	
+				(e.target as ImageTarget).src = KoreanbotsEndPoints.CDN.avatar(props.userID, { size: props.size ?? 256})
-	)
+				if(!supportsWebP()) localStorage.setItem('webp', 'false')
+			}
+		}}
+	/>
 }
 
 export default DiscordAvatar

components/Docs.tsx

@@ -1,7 +1,7 @@
-import Container from '@components/Container'
+import dynamic from 'next/dynamic'
-import Wave from '@components/Wave'
-import SEO from './SEO'
 
+const Container = dynamic(() => import('@components/Container'))
+const SEO = dynamic(() => import('@components/SEO'))
 const Docs = ({ title, header, description, subheader, children }: DocsProps): JSX.Element => {
 	return (
 		<>

components/Footer.tsx

@@ -1,9 +1,11 @@
 import Link from 'next/link'
-import Container from '@components/Container'
+import dynamic from 'next/dynamic'
 
-import Toggle from './Toggle'
 import { Theme } from '@types'
 
+const Container = dynamic(() => import('@components/Container'))
+const Toggle = dynamic(() => import('@components/Toggle'))
+
 const Footer = ({ theme, setTheme }: FooterProps): JSX.Element => {
 	return (
 		<div className='releative z-30'>

components/Form/Selects.tsx

@@ -1,4 +1,5 @@
-import ReactSelect, { components } from 'react-select'
+import { ComponentType } from 'react'
+import ReactSelect, { components, GroupTypeBase, MultiValueProps, OptionTypeBase } from 'react-select'
 import {
 	SortableContainer,
 	SortableElement,
@@ -49,8 +50,7 @@ const Select = ({ placeholder, options, values, setValues, handleChange, handleT
 		}} 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={{
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			MultiValue: SortableMultiValue as ComponentType<MultiValueProps<OptionTypeBase, GroupTypeBase<{ label: string, value: string}>>>,
-			MultiValue: SortableMultiValue as any,
 			MultiValueLabel: SortableMultiValueLabel,
 		}}
 		closeMenuOnSelect={false}

components/Hero.tsx

@@ -3,7 +3,6 @@ import dynamic from 'next/dynamic'
 import { categories, categoryIcon } from '@utils/Constants'
 
 const Container = dynamic(()=> import('@components/Container'))
-const Wave  = dynamic(()=> import('@components/Wave'))
 const Tag = dynamic(()=> import('@components/Tag'))
 const Search = dynamic(()=> import('@components/Search'))
 

components/Redirect.tsx

@@ -11,7 +11,7 @@ const Redirect = ({ to, text=true, children }:RedirectProps):JSX.Element => {
 	if(!to) throw new Error('No Link')
 	useEffect(() => {
 		redirectTo(router, to)
-	}, [])
+	})
 	if(children) return <>
 		{children}
 	</>

components/Search.tsx

@@ -59,7 +59,7 @@ const Search = (): JSX.Element => {
 			if(d.findIndex(n => n.value === query) !== -1) d.splice(d.findIndex(n => n.value === query), 1)
 			d.push({
 				value: query,
-				date: new Date().getTime()
+				date: Date.now()
 			})
 			d.reverse()
 			setRecentSearch(d.slice(0, 10))
@@ -67,7 +67,7 @@ const Search = (): JSX.Element => {
 		} catch {
 			setRecentSearch([{
 				value: query,
-				date: new Date().getTime()
+				date: Date.now()
 			}])
 			localStorage.recentSearch = JSON.stringify(recentSearch)
 		} finally {