From 4eaad063947be511c26ba854b71f7c72ac6c87e4 Mon Sep 17 00:00:00 2001
From: wonderlandpark <wonderbotsupport@naver.com>
Date: Wed, 7 Apr 2021 10:14:08 +0900
Subject: [PATCH] fix: localStorage called before render

---
 pages/bots/[id]/index.tsx       | 7 +++++--
 pages/categories/[category].tsx | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/pages/bots/[id]/index.tsx b/pages/bots/[id]/index.tsx
index 1dfa25f..620699c 100644
--- a/pages/bots/[id]/index.tsx
+++ b/pages/bots/[id]/index.tsx
@@ -2,7 +2,7 @@ import { NextPage, NextPageContext } from 'next'
 import { useRouter } from 'next/router'
 import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Field, Form, Formik } from 'formik'
 
 import { SnowflakeUtil } from 'discord.js'
@@ -39,13 +39,16 @@ 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 [ nsfw, setNSFW ] = useState<boolean>()
 	const [ reportModal, setReportModal ] = useState(false)
 	const [ reportRes, setReportRes ] = useState<ResponseProps<null>>(null)
 	function toLogin() {
 		localStorage.redirectTo = window.location.href
 		redirectTo(router, 'login')
 	}
+	useEffect(() => {
+		setNSFW(localStorage.nsfw)
+	}, [])
 	if (!data?.id) return <NotFound />
 	if((checkBotFlag(data.flags, 'trusted') || checkBotFlag(data.flags, 'partnered')) && data.vanity && data.vanity !== router.query.id) router.push(`/bots/${data.vanity}`)
 	return <div style={bg ? { background: `linear-gradient(to right, rgba(34, 36, 38, 0.68), rgba(34, 36, 38, 0.68)), url("${data.bg}") center top / cover no-repeat fixed` } : {}}>
diff --git a/pages/categories/[category].tsx b/pages/categories/[category].tsx
index 22bb815..3277b8c 100644
--- a/pages/categories/[category].tsx
+++ b/pages/categories/[category].tsx
@@ -6,7 +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'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 
 const Hero = dynamic(() => import('@components/Hero'))
@@ -21,8 +21,11 @@ const Markdown = dynamic(() => import('@components/Markdown'))
 const NSFW = dynamic(() => import('@components/NSFW'))
 
 const Category: NextPage<CategoryProps> = ({ data, query }) => {
-	const [ nsfw, setNSFW ] = useState(localStorage.nsfw)
+	const [ nsfw, setNSFW ] = useState<boolean>()
 	const router = useRouter()
+	useEffect(() => {
+		setNSFW(localStorage.nsfw)
+	}, [])
 	if(!data || data.data.length === 0 || data.totalPage < Number(query.page)) return <NotFound />
 	return <>
 		<Hero header={`${query.category} 카테고리 봇들`} description={`다양한 "${query.category}" 카테고리의 봇들을 만나보세요.`} />