feat: set font to pretendard (#562)

* feat: apply font to pretendard

* feat: set word break to keep all

* chore: change font weight

* chore: add truncate to owner

* chore: change pretendard to pretendard variable

* feat: change markdown font to pretendard

app.css

@@ -10,6 +10,8 @@ html {
 }
 
 body {
+	font-family: Pretendard Variable;
+	word-break: keep-all;
 	min-height: 100vh;
 	width: 100%;
 }

components/BotCard.tsx

@@ -61,7 +61,7 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
 									</h2>
 									<h1 className='mb-3 text-left text-xl sm:text-2xl font-bold truncate'>{bot.name}</h1>
 								</div>
-								<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font-medium'>
+								<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm'>
 									{bot.intro}
 								</p>
 								<div>

components/Owner.tsx

@@ -9,7 +9,7 @@ const Owner: React.FC<OwnerProps> = ({ id, username, tag, crown=false }) => {
 					<DiscordAvatar userID={id} className='z-negative absolute inset-0 w-full h-full' />
 				</div>
 				<div className='flex-1 w-0 leading-snug'>
-					<h4 className='whitespace-nowrap'>{ crown && <i className='fas fa-crown text-yellow-300 text-xs' /> }{username}</h4>
+					<h4 className='whitespace-nowrap truncate'>{ crown && <i className='fas fa-crown text-yellow-300 text-xs' /> }{username}</h4>
 					<span className='text-gray-600 text-sm'>#{tag}</span>
 					
 				</div>

components/ServerCard.tsx

@@ -63,7 +63,7 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
 									</div>
 								</div>
 								
-								<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font-medium'>
+								<p className='mb-10 px-4 h-6 text-left text-gray-400 text-sm font'>
 									{type === 'add' ?
 										server.data ? '지금 바로 서버를 등록할 수 있습니다.' : '봇을 초대해야 서버를 등록할 수 있습니다.'
 										: server.intro

github-markdown.css

@@ -75,8 +75,6 @@
 	-webkit-text-size-adjust: 100%;
 	line-height: 1.5;
 	color: #24292e;
-	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
-		Apple Color Emoji, Segoe UI Emoji;
 	font-size: 16px;
 	line-height: 1.5;
 	word-wrap: break-word;

pages/_document.tsx

@@ -21,7 +21,8 @@ class MyDocument extends Document {
 					<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png' />
 					<link rel='icon' type='image/png' sizes='96x96' href='/favicon-96x96.png' />
 					<link rel='icon' type='image/png' sizes='16x16' href='/favicon-16x16.png' />
-
+					<link rel='stylesheet' as='style' crossOrigin='anonymous' href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css' />
+					
 					{/* iOS */}
 					<link rel='apple-touch-icon' sizes='57x57' href='/static/apple-icon-57x57.png' />
 					<link rel='apple-touch-icon' sizes='60x60' href='/static/apple-icon-60x60.png' />

pages/addbot.tsx

@@ -86,10 +86,10 @@ const AddBot:NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 		</div>
 		{
 			data ? data.code == 200 && data.data ? <Message type='success'>
-				<h2 className='text-lg font-black'>봇 신청 성공!</h2>
+				<h2 className='text-lg font-extrabold'>봇 신청 성공!</h2>
 				<p>봇을 성공적으로 신청했습니다! 심사 페이지로 리다이랙트됩니다. {redirectTo(router, `/pendingBots/${data.data.id}/${data.data.date}`)}</p>
 			</Message> : <Message type='error'>
-				<h2 className='text-lg font-black'>{data.message || '오류가 발생했습니다.'}</h2>
+				<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
 				<ul className='list-disc list-inside'>
 					{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
 				</ul>
@@ -103,7 +103,7 @@ const AddBot:NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 				<Form>
 					<div className='py-3'>
 						<Message type='warning'>
-							<h2 className='text-lg font-black'>신청하시기 전에 다음 사항을 확인해 주세요!</h2>
+							<h2 className='text-lg font-extrabold'>신청하시기 전에 다음 사항을 확인해 주세요!</h2>
 							<ul className='list-disc list-inside'>
 								<li><Link href='/discord'><a rel='noreferrer' target='_blank' className='text-blue-500 hover:text-blue-600'>디스코드 서버</a></Link>에 참가하셨나요?</li>
 								<li>봇이 <Link href='/guidelines'><a rel='noreferrer' target='_blank' className='text-blue-500 hover:text-blue-600'>가이드라인</a></Link>을 지키고 있나요?</li>

pages/addserver/[id].tsx

@@ -86,10 +86,10 @@ const AddServer:NextPage<AddServerProps> = ({ logged, user, csrfToken, server, s
 		</div>
 		{
 			data ? data.code == 200 && data.data ? <Message type='success'>
-				<h2 className='text-lg font-black'>서버 등록 성공!</h2>
+				<h2 className='text-lg font-extrabold'>서버 등록 성공!</h2>
 				<p>서버를 성공적으로 등록했습니다! 서버 페이지로 리다이랙트 됩니다! {redirectTo(router, `/servers/${router.query.id}`)}</p>
 			</Message> : <Message type='error'>
-				<h2 className='text-lg font-black'>{data.message || '오류가 발생했습니다.'}</h2>
+				<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
 				<ul className='list-disc list-inside'>
 					{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
 				</ul>
@@ -98,10 +98,10 @@ const AddServer:NextPage<AddServerProps> = ({ logged, user, csrfToken, server, s
 		}
 		{
 			server ? <Message type='warning'>
-				<h2 className='text-lg font-black'>이미 등록된 서버입니다.</h2>
+				<h2 className='text-lg font-extrabold'>이미 등록된 서버입니다.</h2>
 			</Message> :
 				!serverData ? <Message type='info'>
-					<h2 className='text-lg font-black'>서버에 봇이 초대되지 않았습니다.</h2>
+					<h2 className='text-lg font-extrabold'>서버에 봇이 초대되지 않았습니다.</h2>
 					<p>서버를 등록하시려면 먼저 봇을 초대해야합니다.</p>
 					<p>서버에 이미 봇이 초대되었다면 반영까지 최대 1분이 소요될 수 있습니다.</p>
 				</Message>
@@ -112,7 +112,7 @@ const AddServer:NextPage<AddServerProps> = ({ logged, user, csrfToken, server, s
 							<Form>
 								<div className='py-3'>
 									<Message type='warning'>
-										<h2 className='text-lg font-black'>등록하시기 전에 다음 사항을 확인해 주세요!</h2>
+										<h2 className='text-lg font-extrabold'>등록하시기 전에 다음 사항을 확인해 주세요!</h2>
 										<ul className='list-disc list-inside'>
 											<li><Link href='/discord'><a rel='noreferrer' target='_blank' className='text-blue-500 hover:text-blue-600'>디스코드 서버</a></Link>에 참여를 권장드립니다.</li>
 											<li>서버가 <Link href='/guidelines'><a rel='noreferrer' target='_blank' className='text-blue-500 hover:text-blue-600'>가이드라인</a></Link>을 지키고 있나요?</li>

pages/bots/[id]/edit.tsx

@@ -92,14 +92,14 @@ const ManageBotPage:NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme })
 						data ? data.code === 200 ? <div className='mt-4'>
 							<Redirect to={makeBotURL(bot)}>
 								<Message type='success'>
-									<h2 className='text-lg font-black'>정보를 저장했습니다.</h2>
+									<h2 className='text-lg font-extrabold'>정보를 저장했습니다.</h2>
 									<p>반영까지는 시간이 조금 걸릴 수 있습니다!</p>
 								</Message>
 							</Redirect>
 							
 						</div> : <div className='mt-4'>
 							<Message type='error'>
-								<h2 className='text-lg font-black'>{data.message || '오류가 발생했습니다.'}</h2>
+								<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
 								<ul className='list-disc list-inside'>
 									{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
 								</ul>

pages/bots/[id]/index.tsx

@@ -68,7 +68,7 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 			{
 				data.state === 'blocked' ? <div className='pb-40'>
 					<Message type='error'>
-						<h2 className='text-lg font-black'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
+						<h2 className='text-lg font-extrabold'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
 					</Message>
 				</div>
 					: data.category.includes('NSFW') && !nsfw ? <NSFW onClick={() => setNSFW(true)} onDisableClick={() => localStorage.nsfw = true} /> 
@@ -76,12 +76,12 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 							<div className='w-full pb-2'>
 								{
 									data.state === 'private' ? <Message type='info'>
-										<h2 className='text-lg font-black'>해당 봇은 특수목적 봇이므로 초대하실 수 없습니다.</h2>
+										<h2 className='text-lg font-extrabold'>해당 봇은 특수목적 봇이므로 초대하실 수 없습니다.</h2>
 										<p>해당 봇은 공개 사용이 목적이 아닌 특수목적봇입니다. 따라서 따로 초대하실 수 없습니다.</p>
 									</Message> :
 										data.state === 'reported' ?
 											<Message type='error'>
-												<h2 className='text-lg font-black'>해당 봇은 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
+												<h2 className='text-lg font-extrabold'>해당 봇은 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
 												<p>해당 봇 사용에 주의해주세요.</p>
 												<p>봇 소유자분은 <Link href='/guidelines'><a className='text-blue-500 hover:text-blue-400'>가이드라인</a></Link>에 대한 위반사항을 확인해주시고 <Link href='/discord'><a className='text-blue-500 hover:text-blue-400'>디스코드 서버</a></Link>로 문의해주세요.</p>
 											</Message> : ''

pages/bots/[id]/vote.tsx

@@ -62,7 +62,7 @@ const VoteBot: NextPage<VoteBotProps> = ({ data, user, theme, csrfToken }) => {
 		{
 			data.state === 'blocked' ? <div className='pb-40'>
 				<Message type='error'>
-					<h2 className='text-lg font-black'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
+					<h2 className='text-lg font-extrabold'>해당 봇은 관리자에 의해 삭제되었습니다.</h2>
 				</Message>
 			</div> : <>
 				<Advertisement />

pages/developers/applications/bots/[id].tsx

@@ -75,10 +75,10 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme,
 					{
 						!data ? '' : data.code === 200 ? 
 							<Message type='success'>
-								<h2 className='text-lg font-black'>수정 성공!</h2>
+								<h2 className='text-lg font-extrabold'>수정 성공!</h2>
 								<p>봇 정보를 저장했습니다.</p>
 							</Message> : <Message type='error'>
-								<h2 className='text-lg font-black'>{data.message}</h2>
+								<h2 className='text-lg font-extrabold'>{data.message}</h2>
 								<ul className='list-disc list-inside'>
 									{
 										data.errors?.map((el, i)=> <li key={i}>{el}</li>)

pages/developers/applications/servers/[id].tsx

@@ -76,10 +76,10 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({ user, spec, serve
 							{
 								!data ? '' : data.code === 200 ? 
 									<Message type='success'>
-										<h2 className='text-lg font-black'>수정 성공!</h2>
+										<h2 className='text-lg font-extrabold'>수정 성공!</h2>
 										<p>서버 정보를 저장했습니다.</p>
 									</Message> : <Message type='error'>
-										<h2 className='text-lg font-black'>{data.message}</h2>
+										<h2 className='text-lg font-extrabold'>{data.message}</h2>
 										<ul className='list-disc list-inside'>
 											{
 												data.errors?.map((el, i)=> <li key={i}>{el}</li>)
@@ -140,7 +140,7 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({ user, spec, serve
 				</div>
 			</> : <div className='mt-5'>
 				<Message type='error'>
-					<h2 className='text-lg font-black'>서버 정보를 불러올 수 없습니다.</h2>
+					<h2 className='text-lg font-extrabold'>서버 정보를 불러올 수 없습니다.</h2>
 					<p>서버에서 봇이 추방되었거나, 봇이 오프라인이여서 서버 정보를 갱신할 수 없습니다.</p>
 				</Message>
 			</div>

pages/pendingBots/[id]/[date].tsx

@@ -35,16 +35,16 @@ const PendingBot: NextPage<PendingBotProps> = ({ data }) => {
 			<div className='w-full lg:w-3/4 lg:pr-5 py-8 text-center lg:text-left'>
 				{
 					data.state === 0 ? <Message type='info'>
-						<h2 className='text-lg font-black'>승인 대기중</h2>
+						<h2 className='text-lg font-extrabold'>승인 대기중</h2>
 						<p>해당 봇은 아직 승인 대기 상태입니다.</p>
 						
 					</Message> 
 						: data.state === 1 ? <Message type='success'>
-							<h2 className='text-lg font-black'>승인됨</h2>
+							<h2 className='text-lg font-extrabold'>승인됨</h2>
 							<p>신청하신 해당 봇이 승인되었습니다!</p>
 							<p><Link href={`/bots/${data.id}`}><a className='text-blue-500 hover:text-blue-400'>봇 페이지</a></Link></p>
 						</Message> : <Message type='error'>
-							<h2 className='text-lg font-black'>거부됨</h2>
+							<h2 className='text-lg font-extrabold'>거부됨</h2>
 							<p>아쉽게도 신청하신 해당 봇은 거부되었습니다.</p>
 							{
 								data.reason && <>

pages/servers/[id]/edit.tsx

@@ -74,13 +74,13 @@ const ManageServerPage:NextPage<ManageServerProps> = ({ server, user, owners, cs
 						data ? data.code === 200 ? <div className='mt-4'>
 							<Redirect to={makeServerURL(server)}>
 								<Message type='success'>
-									<h2 className='text-lg font-black'>정보를 저장했습니다.</h2>
+									<h2 className='text-lg font-extrabold'>정보를 저장했습니다.</h2>
 									<p>반영까지는 시간이 조금 걸릴 수 있습니다!</p>
 								</Message>
 							</Redirect>
 						</div> : <div className='mt-4'>
 							<Message type='error'>
-								<h2 className='text-lg font-black'>{data.message || '오류가 발생했습니다.'}</h2>
+								<h2 className='text-lg font-extrabold'>{data.message || '오류가 발생했습니다.'}</h2>
 								<ul className='list-disc list-inside'>
 									{data.errors?.map((el, n) => <li key={n}>{el}</li>)}
 								</ul>

pages/servers/[id]/index.tsx

@@ -66,14 +66,14 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
 			{
 				data.state === 'blocked' ? <div className='pb-40'>
 					<Message type='error'>
-						<h2 className='text-lg font-black'>해당 서버는 관리자에 의해 삭제되었습니다.</h2>
+						<h2 className='text-lg font-extrabold'>해당 서버는 관리자에 의해 삭제되었습니다.</h2>
 					</Message>
 				</div>
 					: <>
 						<div className='w-full pb-2'>
 							{
 								data.state === 'unreachable' ? <Message type='error'>
-									<h2 className='text-lg font-black'>서버 정보를 갱신할 수 없습니다.</h2>
+									<h2 className='text-lg font-extrabold'>서버 정보를 갱신할 수 없습니다.</h2>
 									<p>서버에서 봇이 추방되었거나, 봇이 오프라인이여서 서버 정보를 갱신할 수 없습니다.</p>
 									{
 										owners?.find(el => el.id === user?.id) && <>
@@ -84,7 +84,7 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
 								</Message> :
 									data.state === 'reported' ?
 										<Message type='error'>
-											<h2 className='text-lg font-black'>해당 서버는 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
+											<h2 className='text-lg font-extrabold'>해당 서버는 신고가 접수되어, 관리자에 의해 잠금 상태입니다.</h2>
 											<p>해당 서버를 주의해주세요.</p>
 											<p>서버 관리자 분은 <Link href='/guidelines'><a className='text-blue-500 hover:text-blue-400'>가이드라인</a></Link>에 대한 위반사항을 확인해주시고 <Link href='/discord'><a className='text-blue-500 hover:text-blue-400'>디스코드 서버</a></Link>로 문의해주세요.</p>
 										</Message> : ''

pages/servers/[id]/vote.tsx

@@ -62,7 +62,7 @@ const VoteServer: NextPage<VoteServerProps> = ({ data, user, theme, csrfToken })
 		{
 			data.state === 'blocked' ? <div className='pb-40'>
 				<Message type='error'>
-					<h2 className='text-lg font-black'>해당 서버는 관리자에 의해 삭제되었습니다.</h2>
+					<h2 className='text-lg font-extrabold'>해당 서버는 관리자에 의해 삭제되었습니다.</h2>
 				</Message>
 			</div> : <>
 				<Advertisement />