chore: added NSFW

components/NSFW.tsx

@@ -0,0 +1,24 @@
+import dynamic from 'next/dynamic'
+
+const Button = dynamic(() => import('@components/Button'))
+const Container = dynamic(() => import('@components/Container'))
+
+const NSFW = ({ onClick }:NSFWProps): JSX.Element => {
+	return <Container>
+		<div className='flex items-center h-screen select-none'>
+			<div className='px-10'>
+				<h1 className='text-2xl font-bold'>해당 컨텐츠는 만19세 이상의 성인만 열람할 수 있습니다.</h1>
+				<p className='text-lg mb-3'>계속하시겠습니까?</p>
+				<Button onClick={onClick}>
+					<i className='fas fa-arrow-right' />  계속하기
+				</Button>
+			</div>
+		</div>
+	</Container>
+}
+
+interface NSFWProps {
+  onClick(): void
+}
+
+export default NSFW

pages/bots/[id]/index.tsx

@@ -34,10 +34,12 @@ const Message = dynamic(() => import('@components/Message'))
 const Button = dynamic(() => import('@components/Button'))
 const TextArea = dynamic(() => import('@components/Form/TextArea'))
 const Modal = dynamic(() => import('@components/Modal'))
+const NSFW = dynamic(() => import('@components/NSFW'))
 
 const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken }) => {
 	const bg = checkBotFlag(data?.flags, 'trusted') && data?.banner
 	const router = useRouter()
+	const [ nsfw, setNSFW ] = useState(localStorage.nsfw)
 	const [ reportModal, setReportModal ] = useState(false)
 	const [ reportRes, setReportRes ] = useState<ResponseProps<null>>(null)
 	function toLogin() {
@@ -63,7 +65,10 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken }) => {
 						<h2 className='text-lg font-black'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
 					</Message>
 				</div>
-					: <>
+					: data.category.includes('NSFW') && !nsfw ? <NSFW onClick={() => {
+						localStorage.nsfw = true
+						setNSFW(true)
+					}} /> : <>
 						<div className='w-full pb-2'>
 							{
 								data.state === 'private' ? <Message type='info'>
@@ -113,7 +118,7 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken }) => {
 										newTab
 										href={
 											data.url ||
-							`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
+					`https://discordapp.com/oauth2/authorize?client_id=${data.id}&scope=bot&permissions=0`
 										}
 									>
 										<h4 className='whitespace-nowrap'>
@@ -190,7 +195,7 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken }) => {
 										else setReportModal(true)
 									}} aria-hidden='true'>
 										<i className='far fa-flag' />
-								신고하기
+						신고하기
 									</a>
 									<Modal header={`${data.name}#${data.tag} 신고하기`} closeIcon isOpen={reportModal} onClose={() => {
 										setReportModal(false)
@@ -258,7 +263,7 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken }) => {
 											href={`https://discord.gg/${data.discord}`}
 										>
 											<i className='fab fa-discord' />
-								디스코드 서버
+						디스코드 서버
 										</a>
 									)}
 									{data.web && (
@@ -269,7 +274,7 @@ const Bots: NextPage<BotsProps> = ({ data, date, user, theme, csrfToken }) => {
 											href={data.web}
 										>
 											<i className='fas fa-globe' />
-								웹사이트
+						웹사이트
 										</a>
 									)}
 									{data.git && (

pages/categories/[category].tsx

@@ -6,6 +6,7 @@ import { get } from '@utils/Query'
 import { BotList } from '@types'
 import { botCategoryListArgumentSchema } from '@utils/Yup'
 import NotFound from 'pages/404'
+import { useState } from 'react'
 
 const Hero = dynamic(() => import('@components/Hero'))
 const Advertisement = dynamic(() => import('@components/Advertisement'))
@@ -14,23 +15,29 @@ const ResponsiveGrid = dynamic(() => import('@components/ResponsiveGrid'))
 const BotCard = dynamic(() => import('@components/BotCard'))
 const Container = dynamic(() => import('@components/Container'))
 const Paginator = dynamic(() => import('@components/Paginator'))
+const NSFW = dynamic(() => import('@components/NSFW'))
 
 const Category: NextPage<CategoryProps> = ({ data, query }) => {
+	const [ nsfw, setNSFW ] = useState(localStorage.nsfw)
 	if(!data || data.data.length === 0 || data.totalPage < Number(query.page)) return <NotFound />
 	return <>
 		<Hero header={`${query.category} 카테고리 봇들`} description={`다양한 "${query.category}" 카테고리의 봇들을 만나보세요.`} />
 		<SEO title={`${query.category} 카테고리 봇들`} description={`다양한 ${query.category} 카테고리의 봇들을 만나보세요.`} />
-
+		{
-		<Container>
+			query.category === 'NSFW' && !nsfw ? <NSFW onClick={() => {
-			<Advertisement />
+				localStorage.nsfw = true
-			<ResponsiveGrid>
+				setNSFW(true)
-				{
+			}} /> : <Container>
-					data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
+				<Advertisement />
-				}
+				<ResponsiveGrid>
-			</ResponsiveGrid>
+					{
-			<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/categories/${query.category}`} />
+						data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
-			<Advertisement />
+					}
-		</Container>
+				</ResponsiveGrid>
+				<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/categories/${query.category}`} />
+				<Advertisement />
+			</Container>
+		}
 	</>
 }