From 67694d16918242e4b135bf28afe65f5af7baa30b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Tue, 5 Jan 2021 21:41:17 +0900
Subject: [PATCH] feat: added Footer

---
 components/Footer.tsx | 74 +++++++++++++++++++++++++++++++++++++++++++
 pages/_app.tsx        | 22 +++++++------
 2 files changed, 87 insertions(+), 9 deletions(-)
 create mode 100644 components/Footer.tsx

diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..4fb03ce
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,74 @@
+import Link from 'next/link'
+import Container from './Container'
+import Wave from './Wave'
+
+const Footer = ():JSX.Element => {
+	return <>
+		<Wave color='currentColor' className='text-white dark:text-discord-dark bg-discord-black'/>
+		<div className='bottom-0 bg-discord-black text-white'>
+			<Container className='w-11/12 sm:w-3/5 pt-10 sm:pt-0 pb-20 sm:flex'>
+				<div className='w-full sm: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>
+					</div>
+				</div>
+				<div className='flex-col w-full sm:w-1/3'>
+					<h2 className='text-base text-koreanbots-blue font-bold'>한국 디스코드봇 리스트</h2>
+					<ul className='text-sm'>
+						<li>
+							<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>
+						</li>
+					</ul>
+				</div>
+				<div className='flex-col w-full sm:w-1/5'>
+					<h2 className='text-base text-koreanbots-blue font-bold'>커뮤니티</h2>
+					<ul className='text-sm'>
+						<li>
+							<Link href='/partners'>
+								<a className='hover:text-gray-300'>파트너</a>
+							</Link>
+						</li>
+						<li>
+							<Link href='/verification'>
+								<a className='hover:text-gray-300'>인증</a>
+							</Link>
+						</li>
+					</ul>
+				</div>
+				<div className='flex-col w-full sm:w-1/5'>
+					<h2 className='text-base text-koreanbots-blue font-bold'>약관</h2>
+					<ul className='text-sm'>
+						<li>
+							<Link href='/privacy'>
+								<a className='hover:text-gray-300'>개인정보취급방침</a>
+							</Link>
+						</li>
+						<li>
+							<Link href='/guidelines'>
+								<a className='hover:text-gray-300'>가이드라인</a>
+							</Link>
+						</li>
+					</ul>
+				</div>
+			</Container>
+		</div>
+	</>
+}
+
+export default Footer
\ No newline at end of file
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 17d883d..b4d21a0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,18 +11,19 @@ import 'core-js/es/map'
 import './app.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import { useEffect } from 'react'
+import Footer from '../components/Footer'
 
 let systemColor
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
-	console.log(
-		'%c' + 'KOREANBOTS',
-		'color: #3366FF; -webkit-text-stroke: 2px black; font-size: 72px; font-weight: bold;'
-	)
-	console.log(
-		'%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!',
-		'color: #ff0000; font-size: 20px; font-weight: bold;'
-	)
 	useEffect(() => {
+		console.log(
+			'%c' + 'KOREANBOTS',
+			'color: #3366FF; -webkit-text-stroke: 2px black; font-size: 72px; font-weight: bold;'
+		)
+		console.log(
+			'%c' + '이곳에 코드를 붙여넣으면 공격자에게 엑세스 토큰을 넘겨줄 수 있습니다!!',
+			'color: #ff0000; font-size: 20px; font-weight: bold;'
+		)
 		try {
 			systemColor = window.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light'
 		} catch (e) {
@@ -47,7 +48,10 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
 				<meta name="theme-color" content="#3366FF" />
 			</Head>
 			<Navbar />
-			<Component {...pageProps} />
+			<div className='iu h-screen'>
+				<Component {...pageProps} />
+			</div>
+			<Footer />
 		</ThemeProvider>
 	)
 }