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 = ({ type = 'all', header, description }) => { + const [showAllCategories, setShowAllCategories] = useState(false) const link = `/${type}/categories` return ( <> @@ -110,32 +112,36 @@ const Hero: React.FC = ({ type = 'all', header, description }) => { bigger href={type === 'bots' ? '/bots/list/votes' : '/servers/list/votes'} /> - {(type === 'bots' ? botCategories : serverCategories).slice(0, 4).map((t) => ( - - {' '} - {t} - - } - dark - bigger - href={`${link}/${t}`} - /> - ))} + {(type === 'bots' ? botCategories : serverCategories) + .slice(0, showAllCategories ? undefined : 4) + .map((t) => ( + + {' '} + {t} + + } + dark + bigger + href={`${link}/${t}`} + /> + ))} - 카테고리 더보기 + {' '} + {showAllCategories ? '간략히 보기' : '카테고리 더보기'} } dark bigger - href={link} + onClick={() => setShowAllCategories(!showAllCategories)} /> )}