feat: added show more

pages/panel.tsx

@@ -1,4 +1,5 @@
 import { NextPage, NextPageContext } from 'next'
+import { useState } from 'react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 
@@ -7,13 +8,14 @@ import { parseCookie, redirectTo } from '@utils/Tools'
 import { Bot, SubmittedBot, User } from '@types'
 import BotCard from '@components/BotCard'
 import SubmittedBotCard from '@components/SubmittedBotCard'
+import Button from '@components/Button'
 
 const Container = dynamic(() => import('@components/Container'))
 const SEO = dynamic(() => import('@components/SEO'))
 
 const Panel:NextPage<PanelProps> = ({ logged, user, submits }) => {
-  
 	const router = useRouter()
+	const [ submitLimit, setSubmitLimit ] = useState(8)
 	function toLogin() {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
@@ -22,7 +24,7 @@ const Panel:NextPage<PanelProps> = ({ logged, user, submits }) => {
 		toLogin()
 		return <SEO title='관리 패널' />
 	}
-	return <Container paddingTop>
+	return <Container paddingTop className='pt-5 pb-10'>
 		<SEO title='관리 패널' />
 		<h1 className='text-3xl font-bold'>관리 패널</h1>
 		<div className='mt-6'>
@@ -38,9 +40,14 @@ const Panel:NextPage<PanelProps> = ({ logged, user, submits }) => {
 			<p className='text-left text-gray-400 text-sm font-medium'>자세히 보려면 카드를 클릭하세요.</p>
 			<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-12'>
 				{
-					submits.map(el=> <SubmittedBotCard key={el.date} href={`/pendingBots/${el.id}/${el.date}`} submit={el} />)
+					submits.slice(0, submitLimit).map(el=> <SubmittedBotCard key={el.date} href={`/pendingBots/${el.id}/${el.date}`} submit={el} />)
 				}
 			</div>
+			{
+				submitLimit < submits.length && <div className='text-center pt-4'>
+					<Button onClick={() => setSubmitLimit(submitLimit+8)}>더보기</Button>
+				</div>
+			}
 		</div>
 	</Container>
 }