From f95ea30a38a467e5d5d04835797a49a0d5983219 Mon Sep 17 00:00:00 2001
From: wonderlandpark <wonderbotsupport@naver.com>
Date: Wed, 24 Mar 2021 13:22:40 +0900
Subject: [PATCH] feat: paginator scroll to list

---
 components/Paginator.tsx |  6 +++---
 pages/list/votes.tsx     | 22 ++++++++++++----------
 pages/search.tsx         | 30 ++++++++++++++++--------------
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/components/Paginator.tsx b/components/Paginator.tsx
index c970931..f642a34 100644
--- a/components/Paginator.tsx
+++ b/components/Paginator.tsx
@@ -29,7 +29,7 @@ const Paginator = ({ currentPage, totalPage, pathname }: PaginatorProps): JSX.El
 	return (
 		<div className='flex flex-col items-center justify-center py-4 text-center'>
 			<div className='flex'>
-				<Link href={{ pathname, query: { page: currentPage - 1 } }}>
+				<Link href={{ pathname, hash: 'list', query: { page: currentPage - 1 } }}>
 					<a
 						className={`${
 							currentPage === 1 ? 'invisible' : ''
@@ -39,7 +39,7 @@ const Paginator = ({ currentPage, totalPage, pathname }: PaginatorProps): JSX.El
 					</a>
 				</Link>
 				{pages.map((el, i) => (
-					<Link key={i} href={{ pathname, query: { page: el } }}>
+					<Link key={i} href={{ pathname, hash: 'list', query: { page: el } }}>
 						<a
 							className={`w-12 flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in ${
 								i === 0 && i === pages.length - 1
@@ -59,7 +59,7 @@ const Paginator = ({ currentPage, totalPage, pathname }: PaginatorProps): JSX.El
 						</a>
 					</Link>
 				))}
-				<Link href={{ pathname, query: { page: currentPage + 1 } }}>
+				<Link href={{ pathname, hash: 'list', query: { page: currentPage + 1 } }}>
 					<a
 						className={`${
 							currentPage === totalPage ? 'invisible' : ''
diff --git a/pages/list/votes.tsx b/pages/list/votes.tsx
index 24c8b59..8c5f3bc 100644
--- a/pages/list/votes.tsx
+++ b/pages/list/votes.tsx
@@ -23,16 +23,18 @@ const Votes:NextPage<VotesProps> = ({ data }) => {
 	return <>
 		<Hero header='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
 		<SEO title='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
-		<Container>
-			<Advertisement />
-			<ResponsiveGrid>
-				{
-					data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
-				}
-			</ResponsiveGrid>
-			<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
-			<Advertisement />
-		</Container>
+		<section id='list'>
+			<Container>
+				<Advertisement />
+				<ResponsiveGrid>
+					{
+						data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
+					}
+				</ResponsiveGrid>
+				<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
+				<Advertisement />
+			</Container>
+		</section>
 	</>
 }
 export const getServerSideProps = async (ctx:Context) => {
diff --git a/pages/search.tsx b/pages/search.tsx
index 58678fa..09006c5 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -26,20 +26,22 @@ const Search:NextPage<SearchProps> = ({ data, query }) => {
 	return <>
 		<Hero header={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
 		<SEO title={`"${query.q}" 검색 결과`} description={`'${query.q}' 에 대한 검색 결과입니다.`} />
-		<Container>
-			<Advertisement />
-			{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
-				<>
-					<ResponsiveGrid>
-						{
-							data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
-						}
-					</ResponsiveGrid>
-					<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?q=${query.q}`} />
-				</>
-			}
-			<Advertisement />
-		</Container>
+		<section id='list'>
+			<Container>
+				<Advertisement />
+				{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
+					<>
+						<ResponsiveGrid>
+							{
+								data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
+							}
+						</ResponsiveGrid>
+						<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?q=${query.q}`} />
+					</>
+				}
+				<Advertisement />
+			</Container>
+		</section>
 	</>
 }