From 4416cb58b39c288365d3f66339eaec30fa6bd73b Mon Sep 17 00:00:00 2001
From: Soyoka <55011525+soy0ka@users.noreply.github.com>
Date: Fri, 11 Apr 2025 20:26:15 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=8D=94=EB=B3=B4=EA=B8=B0/=EC=A0=91?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B8=B0=EB=8A=A5=20(#675)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: implement collapse/expand UI for category tags

* chore: add cursor-pointer

---------

Co-authored-by: SKINMAKER <skinmaker1345@gmail.com>
---
 components/Hero.tsx | 44 +++++++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/Hero.tsx b/components/Hero.tsx
index f84a8da..fd12253 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -1,5 +1,6 @@
-import dynamic from 'next/dynamic'
 import { NextSeo } from 'next-seo'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
 
 import {
 	botCategories,
@@ -13,6 +14,7 @@ const Tag = dynamic(() => import('@components/Tag'))
 const Search = dynamic(() => import('@components/Search'))
 
 const Hero: React.FC<HeroProps> = ({ type = 'all', header, description }) => {
+	const [showAllCategories, setShowAllCategories] = useState(false)
 	const link = `/${type}/categories`
 	return (
 		<>
@@ -110,32 +112,36 @@ const Hero: React.FC<HeroProps> = ({ type = 'all', header, description }) => {
 									bigger
 									href={type === 'bots' ? '/bots/list/votes' : '/servers/list/votes'}
 								/>
-								{(type === 'bots' ? botCategories : serverCategories).slice(0, 4).map((t) => (
-									<Tag
-										key={t}
-										text={
-											<>
-												<i
-													className={(type === 'bots' ? botCategoryIcon : serverCategoryIcon)[t]}
-												/>{' '}
-												{t}
-											</>
-										}
-										dark
-										bigger
-										href={`${link}/${t}`}
-									/>
-								))}
+								{(type === 'bots' ? botCategories : serverCategories)
+									.slice(0, showAllCategories ? undefined : 4)
+									.map((t) => (
+										<Tag
+											key={t}
+											text={
+												<>
+													<i
+														className={(type === 'bots' ? botCategoryIcon : serverCategoryIcon)[t]}
+													/>{' '}
+													{t}
+												</>
+											}
+											dark
+											bigger
+											href={`${link}/${t}`}
+										/>
+									))}
 								<Tag
 									key='tag'
+									className='cursor-pointer'
 									text={
 										<>
-											<i className='fas fa-tag' /> 카테고리 더보기
+											<i className='fas fa-tag' />{' '}
+											{showAllCategories ? '간략히 보기' : '카테고리 더보기'}
 										</>
 									}
 									dark
 									bigger
-									href={link}
+									onClick={() => setShowAllCategories(!showAllCategories)}
 								/>
 							</>
 						)}