chore: updated main page paginator margin style

pages/bots/[id]/vote.tsx

@@ -1,14 +1,20 @@
+import { NextPage, NextPageContext } from 'next'
+import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import { useRouter } from 'next/router'
+
 import { Bot, User } from '@types'
 import { get } from '@utils/Query'
-import { parseCookie } from '@utils/Tools'
-import { NextPage, NextPageContext } from 'next'
-import { useRouter } from 'next/router'
+import { makeBotURL, parseCookie, checkBotFlag } from '@utils/Tools'
+
 import { ParsedUrlQuery } from 'querystring'
 
+import NotFound from 'pages/404'
+
+
 const Container = dynamic(() => import('@components/Container'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
-const Divider = dynamic(() => import('@components/Divider'))
+const Button = dynamic(() => import('@components/Button'))
 const Tag = dynamic(() => import('@components/Tag'))
 const Owner = dynamic(() => import('@components/Owner'))
 const Segment = dynamic(() => import('@components/Segment'))
@@ -18,18 +24,32 @@ const Advertisement = dynamic(() => import('@components/Advertisement'))
 const Tooltip = dynamic(() => import('@components/Tooltip'))
 const Markdown = dynamic(() => import ('@components/Markdown'))
 
-const VoteBot: NextPage<VoteBotProps> = ({ vote, data }) => {
+const VoteBot: NextPage<VoteBotProps> = ({ data }) => {
 	const router = useRouter()
-	if(!vote) router.push(`/bots/${router.query.id}`)
+	if(!data?.id) return <NotFound />
+	if((checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}`)
 	return <Container paddingTop className='py-10'>
-		<SEO title={data.name} image={
+		<SEO title={data.name} description={`한국 디스코드봇 리스트에서 ${data.name}에 투표하세요`} image={
 			data.avatar
 				? `https://cdn.discordapp.com/avatars/${data.id}/${data.avatar}.png?size=1024`
 				: `https://cdn.discordapp.com/embed/avatars/${Number(data.tag) % 5}.png?size=1024`
 		} />
-		<div className='my-auto text-center h-screen'>
-			<h1>sadf</h1>
-		</div>
+		<Advertisement />
+		<Link href={makeBotURL(data)}>
+			<a className='text-blue-500 hover:opacity-80'><i className='fas fa-arrow-left mt-3 mb-3' /> <strong>{data.name}</strong>으로 돌아가기</a>
+		</Link>
+		<Segment className='mb-10 py-8'>
+			<div className='text-center'>
+				<DiscordAvatar userID={data.id} className='mx-auto w-52 h-52 bg-white mb-4' />
+				<Tag text={<span><i className='fas fa-heart text-red-600' /> {data.votes}</span>} dark />
+				<h1 className='text-3xl font-bold mt-3'>{data.name}</h1>
+				<h4 className='text-md mt-1'>12시간 뒤에 다시 투표하실 수 있습니다.</h4>
+				<Button>
+					<><i className='far fa-heart text-red-600'/> 하트 추가</>
+				</Button>
+			</div>
+		</Segment>
+		<Advertisement />
 	</Container>
 }
 

pages/index.tsx

@@ -21,7 +21,7 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 					<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹
 				</h1>
 				<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
-				<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
+				<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-10 -mb-10'>
 					{
 						votes.data.map(bot=> <BotCard key={bot.id} bot={bot} />)
 					}