From 84af82938a3a43d2ed8b098c1d68fda3287ad2a9 Mon Sep 17 00:00:00 2001
From: wonderlandpark <wonderbotsupport@naver.com>
Date: Wed, 3 Mar 2021 14:25:09 +0900
Subject: [PATCH] feat: added ResponsiveGrid component

---
 components/BotCard.tsx          |  4 ++--
 components/ResponsiveGrid.tsx   |  9 +++++++++
 pages/categories/[category].tsx |  5 +++--
 pages/index.tsx                 | 21 +++++++++++----------
 pages/list/new.tsx              |  5 +++--
 pages/list/votes.tsx            |  5 +++--
 pages/search.tsx                |  5 +++--
 pages/users/[id].tsx            |  5 +++--
 8 files changed, 37 insertions(+), 22 deletions(-)
 create mode 100644 components/ResponsiveGrid.tsx

diff --git a/components/BotCard.tsx b/components/BotCard.tsx
index 994a25d..d96a011 100644
--- a/components/BotCard.tsx
+++ b/components/BotCard.tsx
@@ -28,7 +28,7 @@ const BotCard = ({ manage = false, bot }: BotProps): JSX.Element => {
 							<Link href={makeBotURL(bot)}>
 								<a className='cursor-pointer'>
 									<div className='flex h-44'>
-										<div className='w-2/3'>
+										<div className='w-3/5'>
 											<div className='flex justify-start'>
 												<DiscordAvatar
 													size={128}
@@ -46,7 +46,7 @@ const BotCard = ({ manage = false, bot }: BotProps): JSX.Element => {
 												<h1 className='mb-3 text-left text-2xl font-bold truncate'>{bot.name}</h1>
 											</div>
 										</div>
-										<div className='grid grid-cols-1 pr-5 py-5 w-1/3 h-0'>
+										<div className='grid grid-cols-1 pr-5 py-5 w-2/5 h-0'>
 											<Tag
 												text={
 													<>
diff --git a/components/ResponsiveGrid.tsx b/components/ResponsiveGrid.tsx
new file mode 100644
index 0000000..1fb62fc
--- /dev/null
+++ b/components/ResponsiveGrid.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from 'react'
+
+const ResponsiveGrid = ({ children }:{ children: ReactNode }):JSX.Element => {
+	return <div className='grid gap-x-4 grid-rows-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 mt-10 -mb-10'>
+		{children}
+	</div>
+}
+
+export default ResponsiveGrid
\ No newline at end of file
diff --git a/pages/categories/[category].tsx b/pages/categories/[category].tsx
index debfb5b..190fc4a 100644
--- a/pages/categories/[category].tsx
+++ b/pages/categories/[category].tsx
@@ -10,6 +10,7 @@ import NotFound from 'pages/404'
 const Hero = dynamic(() => import('@components/Hero'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const SEO = dynamic(() => import('@components/SEO'))
+const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const BotCard = dynamic(() => import('@components/BotCard'))
 const Container = dynamic(() => import('@components/Container'))
 const Paginator = dynamic(() => import('@components/Paginator'))
@@ -22,11 +23,11 @@ const Category: NextPage<CategoryProps> = ({ data, query }) => {
 
 		<Container>
 			<Advertisement />
-			<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
+			<ResponsiveGrid>
 				{
 					data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
 				}
-			</div>
+			</ResponsiveGrid>
 			<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/categories/${query.category}`} />
 			<Advertisement />
 		</Container>
diff --git a/pages/index.tsx b/pages/index.tsx
index 773bf8f..b5ef1fc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,10 +5,11 @@ import { BotList } from '@types'
 import * as Query from '@utils/Query'
 import LongButton from '@components/LongButton'
 
-const Advertisement = dynamic(()=> import('@components/Advertisement'))
-const Container = dynamic(()=> import('@components/Container'))
-const BotCard = dynamic(()=> import('@components/BotCard'))
-const Paginator = dynamic(()=> import('@components/Paginator'))
+const Advertisement = dynamic(() => import('@components/Advertisement'))
+const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
+const Container = dynamic(() => import('@components/Container'))
+const BotCard = dynamic(() => import('@components/BotCard'))
+const Paginator = dynamic(() => import('@components/Paginator'))
 const Hero = dynamic(() => import('@components/Hero'))
 
 const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
@@ -21,32 +22,32 @@ 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 -mb-10'>
+				<ResponsiveGrid>
 					{
 						votes.data.map(bot=> <BotCard key={bot.id} bot={bot} />)
 					}
-				</div>
+				</ResponsiveGrid>
 				<Paginator totalPage={votes.totalPage} currentPage={votes.currentPage} pathname='/list/votes' />
 				<Advertisement />
 				<h1 className='text-3xl font-bold mt-20 mb-2'>
 					<i className='far fa-star mr-3 text-yellow-500' /> 새로운 봇
 				</h1>
 				<p className='text-base'>최근에 한국 디스코드봇 리스트에 추가된 따끈따끈한 봇입니다.</p>
-				<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
+				<ResponsiveGrid>
 					{
 						newBots.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
 					}
-				</div>
+				</ResponsiveGrid>
 				<LongButton href='/list/new' center>더보기</LongButton>
 				<h1 className='text-3xl font-bold mb-2'>
 					<i className='fa fa-check mr-3 mt-10 text-green-500' /> 신뢰된 봇
 				</h1>
 				<p className='text-base'>KOREANBOTS에서 인증받은 신뢰할 수 있는 봇들입니다!!</p>
-				<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-10'>
+				<ResponsiveGrid>
 					{
 						trusted.data.slice(0, 4).map(bot=> <BotCard key={bot.id} bot={bot} />)
 					}
-				</div>
+				</ResponsiveGrid>
 				<Advertisement />
 			</Container>
 		</>
diff --git a/pages/list/new.tsx b/pages/list/new.tsx
index 9846bd0..59486d0 100644
--- a/pages/list/new.tsx
+++ b/pages/list/new.tsx
@@ -9,6 +9,7 @@ const Advertisement = dynamic(() => import('@components/Advertisement'))
 const SEO = dynamic(() => import('@components/SEO'))
 const BotCard = dynamic(() => import('@components/BotCard'))
 const Container = dynamic(() => import('@components/Container'))
+const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 
 const New:NextPage<NewProps> = ({ data }) => {
 	return <>
@@ -16,11 +17,11 @@ const New:NextPage<NewProps> = ({ data }) => {
 		<SEO title='새로운 봇' description='최근에 추가된 봇들입니다!' />
 		<Container>
 			<Advertisement />
-			<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
+			<ResponsiveGrid>
 				{
 					data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
 				}
-			</div>
+			</ResponsiveGrid>
 			<Advertisement />
 		</Container>
 	</>
diff --git a/pages/list/votes.tsx b/pages/list/votes.tsx
index 61b8c1b..24c8b59 100644
--- a/pages/list/votes.tsx
+++ b/pages/list/votes.tsx
@@ -13,6 +13,7 @@ const Hero = dynamic(() => import('@components/Hero'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const SEO = dynamic(() => import('@components/SEO'))
 const BotCard = dynamic(() => import('@components/BotCard'))
+const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const Container = dynamic(() => import('@components/Container'))
 const Paginator = dynamic(() => import('@components/Paginator'))
 
@@ -24,11 +25,11 @@ const Votes:NextPage<VotesProps> = ({ data }) => {
 		<SEO title='하트 랭킹' description='하트를 많이 받은 봇들의 순위입니다!'/>
 		<Container>
 			<Advertisement />
-			<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
+			<ResponsiveGrid>
 				{
 					data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
 				}
-			</div>
+			</ResponsiveGrid>
 			<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname='/list/votes' />
 			<Advertisement />
 		</Container>
diff --git a/pages/search.tsx b/pages/search.tsx
index 1a70213..edf2baa 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -14,6 +14,7 @@ const Advertisement = dynamic(() => import('@components/Advertisement'))
 const SEO = dynamic(() => import('@components/SEO'))
 const BotCard = dynamic(() => import('@components/BotCard'))
 const Container = dynamic(() => import('@components/Container'))
+const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const Paginator = dynamic(() => import('@components/Paginator'))
 
 const Search:NextPage<SearchProps> = ({ data, query }) => {
@@ -29,11 +30,11 @@ const Search:NextPage<SearchProps> = ({ data, query }) => {
 			<Advertisement />
 			{ !data || data.data.length === 0 ? <h1 className='text-3xl font-bold text-center py-20'>검색 결과가 없습니다.</h1> :
 				<>
-					<div className='grid gap-x-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
+					<ResponsiveGrid>
 						{
 							data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
 						}
-					</div>
+					</ResponsiveGrid>
 					<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/search?q=${query.q}`} />
 				</>
 			}
diff --git a/pages/users/[id].tsx b/pages/users/[id].tsx
index d6e07e7..bc6538f 100644
--- a/pages/users/[id].tsx
+++ b/pages/users/[id].tsx
@@ -15,6 +15,7 @@ const SEO = dynamic(() => import('@components/SEO'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 const Divider = dynamic(() => import('@components/Divider'))
 const BotCard = dynamic(() => import('@components/BotCard'))
+const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const Tag = dynamic(() => import('@components/Tag'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
 const Tooltip = dynamic(() => import('@components/Tooltip'))
@@ -83,11 +84,11 @@ const Users: NextPage<UserProps> = ({ data }) => {
 			</div>
 			<Divider />
 			<h2 className='mt-8 text-3xl font-bold'>제작한 봇</h2>
-			<div className='grid gap-x-4 mt-20 2xl:grid-cols-4 md:grid-cols-2'>
+			<ResponsiveGrid>
 				{(data.bots as Bot[]).map((bot: Bot) => (
 					<BotCard key={bot.id} bot={bot} />
 				))}
-			</div>
+			</ResponsiveGrid>
 			<Advertisement />
 		</Container>
 	)