feat: error customize

components/Notice.tsx

@@ -0,0 +1,21 @@
+const Notice = ({ header, desc }:NoticeProps) => {
+	return (
+		<div className='py-48 px-10 mx-auto my-auto h-screen text-center'>
+			<h1 className='text-3xl font-bold'>KOREANBOTS</h1>
+			<br />
+			<div>
+				<h1 className='text-2xl font-bold'>{header}</h1>
+	
+				<h2 className='text-lg font-semibold'>{desc}</h2>
+				<br />
+			</div>
+		</div>
+	)
+}
+
+export default Notice
+
+interface NoticeProps {
+	header: string
+	desc: string
+}

pages/404.tsx

@@ -1,12 +1,10 @@
 import { NextPage } from 'next'
 import Container from '../components/Container'
+import Notice from '../components/Notice'
+import { ErrorText } from '../utils/Constants'
 
 const NotFound: NextPage = () => {
-	return (
-		<Container paddingTop>
-			<h1>Not Found</h1>
-		</Container>
-	)
+	return <Notice header='404' desc={ErrorText[404]} />
 }
 
 export default NotFound

pages/_app.tsx

@@ -15,11 +15,10 @@ import 'core-js/es/map'
 import '../app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '../github-markdown.css'
-
-let systemColor
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
 	const [ betaKey, setBetaKey ] = useState('')
 	const [ theme, setDefaultTheme ] = useState<string|undefined>(undefined)
+	let systemColor:string
 
 	useEffect(() => {
 		setBetaKey(localStorage.betaKey)
@@ -37,6 +36,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
 			systemColor = 'dark'
 		}
 		if (!localStorage.theme || !['dark', 'light'].includes(localStorage.theme)) {
+			console.log(`[THEME] ${systemColor.toUpperCase()} THEME DETECTED`)
 			localStorage.setItem('theme', systemColor)
 			setDefaultTheme(systemColor)
 		}

pages/_error.tsx

@@ -0,0 +1,34 @@
+import { NextPage, NextPageContext } from 'next'
+import Notice from '../components/Notice'
+import { ErrorText } from '../utils/Constants'
+
+const CustomError:NextPage<ErrorProps> = ({ statusCode, statusText }) => {
+	return <Notice header={String(statusCode)} desc={statusText} />
+}
+
+export const getServerSideProps = ({ res, err }:NextPageContext) => {
+	let statusCode:number
+	// If the res variable is defined it means nextjs
+	// is in server side
+	if (res) {
+		statusCode = res.statusCode
+	} else if (err) {
+		// if there is any error in the app it should
+		// return the status code from here
+		statusCode = err.statusCode
+	} else {
+		// Something really bad/weird happen and status code
+		// cannot be determined.
+		statusCode = null
+	}
+	const statusText:string = ErrorText[statusCode] ?? ErrorText.DEFAULT
+	return { props: { statusCode, statusText } }
+}
+
+export default CustomError
+
+
+interface ErrorProps {
+  statusCode: number
+  statusText: string
+}

utils/Constants.ts

@@ -105,3 +105,18 @@ export const DiscordEnpoints = {
 }
 
 export const git = { 'github.com': { icon: 'github', text: 'Github' },  'gitlab.com':  { icon: 'gitlab', text: 'Gitlab' }}
+
+export const ErrorText = {
+	DEFAULT: '예상치 못한 에러가 발생하였습니다.',
+	200: '문제가 없는데 여기를 어떻게 오셨죠?',
+	400: '올바르지 않은 요청입니다.',
+	401: '로그인이 필요합니다.',
+	402: '결제가 필요합니다.',
+	403: '권한이 없습니다.',
+	404: '페이지가 존재하지 않습니다.',
+	405: '해당 요청 방법은 허용되지 않습니다.',
+	406: '연결을 받아드릴 수 없습니다.',
+	429: '지정된 시간에 너무 많은 요청을 보내셨습니다.',
+	500: '서버 내부 오류가 발생하였습니다.',
+	502: '올바르지 않은 게이트웨이입니다.'
+}