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'>

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,14 +15,19 @@ 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={() => {
+				localStorage.nsfw = true
+				setNSFW(true)
+			}} /> : <Container>
 				<Advertisement />
 				<ResponsiveGrid>
 					{
@@ -31,6 +37,7 @@ const Category: NextPage<CategoryProps> = ({ data, query }) => {
 				<Paginator totalPage={data.totalPage} currentPage={data.currentPage} pathname={`/categories/${query.category}`} />
 				<Advertisement />
 			</Container>
+		}
 	</>
 }