feat: add enforcements field

components/Form/Label.tsx

@@ -21,7 +21,7 @@ const Label: React.FC<LabelProps> = ({
 							<span className='align-text-top text-base font-semibold text-red-500'> *</span>
 						)}
 					</h3>
-					{labelDesc}
+					<span className='whitespace-pre-line'>{labelDesc}</span>
 				</div>
 			)}
 			<div className={short ? 'col-span-1' : 'col-span-3'}>

components/Form/Selects.tsx

@@ -109,7 +109,10 @@ const Select: React.FC<SelectProps> = ({
 					onChange={handleChange}
 					onBlur={handleTouch}
 					noOptionsMessage={() => '검색 결과가 없습니다.'}
-					value={values.map((el) => ({ label: el, value: el }))}
+					value={values.map((el) => ({
+						label: Object.values(options).find(({ value }) => value === el)?.label || el,
+						value: el,
+					}))}
 					components={{
 						MultiValue,
 						MultiValueRemove,

pages/addbot.tsx

@@ -10,7 +10,7 @@ import HCaptcha from '@hcaptcha/react-hcaptcha'
 import { get } from '@utils/Query'
 import { cleanObject, parseCookie, redirectTo } from '@utils/Tools'
 import { AddBotSubmit, AddBotSubmitSchema } from '@utils/Yup'
-import { botCategories, botCategoryDescription, library } from '@utils/Constants'
+import { botCategories, botCategoryDescription, botEnforcements, library } from '@utils/Constants'
 import { getToken } from '@utils/Csrf'
 import Fetch from '@utils/Fetch'
 import { ResponseProps, SubmittedBot, Theme, User } from '@types'
@@ -57,6 +57,7 @@ const AddBot: NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 - 어떤
 - 기능
 - 있나요?`,
+		enforcements: [],
 		_csrf: csrfToken,
 		_captcha: 'captcha',
 	}
@@ -356,6 +357,34 @@ const AddBot: NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 							</Segment>
 						</Label>
 						<Divider />
+						<Label
+							For='enforcements'
+							label='필수 고지 내용'
+							labelDesc='내용에 해당하는 경우 필수로 선택해야 합니다.'
+							required
+							error={
+								errors.enforcements && touched.enforcements ? (errors.enforcements as string) : null
+							}
+						>
+							<Selects
+								options={Object.entries(botEnforcements).map(([k, v]) => ({
+									label: k,
+									value: v,
+								}))}
+								handleChange={(value) => {
+									setFieldValue(
+										'enforcements',
+										value.map((v) => v.value)
+									)
+								}}
+								handleTouch={() => setFieldTouched('enforcements', true)}
+								values={values.enforcements ?? ([] as string[])}
+								setValues={(value) => {
+									setFieldValue('enforcements', value)
+								}}
+							/>
+						</Label>
+						<Divider />
 						<p className='mb-5 mt-2 text-base'>
 							<span className='font-semibold text-red-500'> *</span> = 필수 항목
 						</p>

pages/api/v2/bots/[id]/index.ts

@@ -289,6 +289,7 @@ const Bots = RequestHandler()
 					category: JSON.stringify(bot.category),
 					vanity: bot.vanity,
 					banner: bot.banner,
+					enforcements: JSON.stringify(bot.enforcements),
 					bg: bot.bg,
 				},
 				{
@@ -302,6 +303,7 @@ const Bots = RequestHandler()
 					category: JSON.stringify(validated.category),
 					vanity: validated.vanity,
 					banner: validated.banner,
+					enforcements: JSON.stringify(validated.enforcements),
 					bg: validated.bg,
 				}
 			)

pages/bots/[id]/edit.tsx

@@ -9,9 +9,16 @@ import { ParsedUrlQuery } from 'querystring'
 import { getJosaPicker } from 'josa'
 
 import { get } from '@utils/Query'
-import { checkBotFlag, checkUserFlag, cleanObject, makeBotURL, parseCookie, redirectTo } from '@utils/Tools'
+import {
+	checkBotFlag,
+	checkUserFlag,
+	cleanObject,
+	makeBotURL,
+	parseCookie,
+	redirectTo,
+} from '@utils/Tools'
 import { ManageBot, getManageBotSchema } from '@utils/Yup'
-import { botCategories, botCategoryDescription, library } from '@utils/Constants'
+import { botCategories, botCategoryDescription, botEnforcements, library } from '@utils/Constants'
 import { Bot, Theme, User } from '@types'
 import { getToken } from '@utils/Csrf'
 import Fetch from '@utils/Fetch'
@@ -71,6 +78,7 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 	)
 		return <Forbidden />
 	const isPerkAvailable = checkBotFlag(bot.flags, 'trusted') || checkBotFlag(bot.flags, 'partnered')
+	console.log(bot.enforcements)
 	return (
 		<Container paddingTop className='pb-10 pt-5'>
 			<NextSeo title={`${bot.name} 수정하기`} description='봇의 정보를 수정합니다.' />
@@ -82,6 +90,7 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 					prefix: bot.prefix,
 					library: bot.lib,
 					category: bot.category,
+					enforcements: bot.enforcements,
 					intro: bot.intro,
 					desc: bot.desc,
 					website: bot.web,
@@ -98,8 +107,12 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 			>
 				{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
 					<Form>
-						<div className='text-center md:flex md:text-left'>
-							<DiscordAvatar userID={bot.id} className='mx-auto rounded-full md:mx-1' hash={bot.avatar}/>
+						<div className='text-ceznter md:flex md:text-left'>
+							<DiscordAvatar
+								userID={bot.id}
+								className='mx-auto rounded-full md:mx-1'
+								hash={bot.avatar}
+							/>
 							<div className='px-8 py-6 md:w-2/3'>
 								<h1 className='text-3xl font-bold'>
 									{bot.name}#{bot.tag}
@@ -165,7 +178,11 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 							error={errors.category && touched.category ? (errors.category as string) : null}
 						>
 							<Selects
-								options={botCategories.map((el) => ({ label: el, value: el, description: botCategoryDescription[el] }))}
+								options={botCategories.map((el) => ({
+									label: el,
+									value: el,
+									description: botCategoryDescription[el],
+								}))}
 								handleChange={(value) => {
 									setFieldValue(
 										'category',
@@ -273,24 +290,26 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 								<Markdown text={values.desc} />
 							</Segment>
 						</Label>
-						{
-							isPerkAvailable && (
-								<>
+						{isPerkAvailable && (
+							<>
 								<Divider />
-								<h2 className='pt-2 text-2xl font-semibold text-koreanbots-green'>신뢰된 봇 특전 설정</h2>
-								<span className='mt-1 text-sm text-gray-400'>신뢰된 봇의 혜택을 만나보세요. (커스텀 URL과 배너/배경 이미지는 이용약관 및 가이드라인을 준수해야하며 위반 시 신뢰된 봇 자격이 박탈될 수 있습니다.)</span>
+								<h2 className='pt-2 text-2xl font-semibold text-koreanbots-green'>
+									신뢰된 봇 특전 설정
+								</h2>
+								<span className='mt-1 text-sm text-gray-400'>
+									신뢰된 봇의 혜택을 만나보세요. (커스텀 URL과 배너/배경 이미지는 이용약관 및
+									가이드라인을 준수해야하며 위반 시 신뢰된 봇 자격이 박탈될 수 있습니다.)
+								</span>
 								<Label
 									For='vanity'
 									label='한디리 커스텀 URL'
 									labelDesc='고유한 커스텀 URL을 설정해주세요.'
 									error={errors.vanity && touched.vanity ? errors.vanity : null}
-									
 								>
 									<div className='flex items-center'>
 										koreanbots.dev/bots/
 										<Input name='vanity' placeholder='koreanbots' />
 									</div>
-									
 								</Label>
 								<Label
 									For='banner'
@@ -308,9 +327,36 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 								>
 									<Input name='bg' placeholder='https://koreanbots.dev/logo.png' />
 								</Label>
-								</>
-							)
-						}
+							</>
+						)}
+						<Divider />
+						<Label
+							For='enforcements'
+							label='필수 고지 내용'
+							labelDesc='내용에 해당하는 경우 필수로 선택해야 합니다.'
+							required
+							error={
+								errors.enforcements && touched.enforcements ? (errors.enforcements as string) : null
+							}
+						>
+							<Selects
+								options={Object.entries(botEnforcements).map(([k, v]) => ({
+									label: k,
+									value: v,
+								}))}
+								handleChange={(value) => {
+									setFieldValue(
+										'enforcements',
+										value.map((v) => v.value)
+									)
+								}}
+								handleTouch={() => setFieldTouched('enforcements', true)}
+								values={values.enforcements ?? ([] as string[])}
+								setValues={(value) => {
+									setFieldValue('enforcements', value)
+								}}
+							/>
+						</Label>
 						<Divider />
 						<p className='mb-5 mt-2 text-base'>
 							<span className='font-semibold text-red-500'> *</span> = 필수 항목
@@ -320,7 +366,6 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 								<i className='far fa-save' /> 저장
 							</>
 						</Button>
-						
 					</Form>
 				)}
 			</Formik>

types/index.ts

@@ -1,3 +1,4 @@
+import { botEnforcements } from '@utils/Constants'
 import type { GuildFeature } from 'discord.js'
 import type { IncomingMessage } from 'http'
 import type { NextPageContext } from 'next'
@@ -25,11 +26,14 @@ export interface Bot {
 	url: string | null
 	discord: string | null
 	vanity: string | null
+	enforcements: BotEnforcementKeys[]
 	bg: string
 	banner: string
 	owners: User[] | string[]
 }
 
+export type BotEnforcementKeys = 'JOIN_ENFORCED' | 'JOIN_PARTIALLY_ENFORCED'
+
 export interface RawGuild {
 	id: string
 	name: string

utils/Constants.ts

@@ -120,6 +120,11 @@ export const botCategoryDescription = {
 	마인크래프트: '게임 "마인크래프트"에 관련된 기능을 다룹니다.',
 }
 
+export const botEnforcements = {
+	'서버 참여가 강제되는 명령어가 있습니다': 'JOIN_PARTIALLY_ENFORCED',
+	'서버 참여 없이는 봇을 사용할 수 없습니다': 'JOIN_ENFORCED',
+}
+
 export const botCategoryIcon = {
 	관리: 'fas fa-cogs',
 	뮤직: 'fas fa-music',

utils/Query.ts

@@ -62,6 +62,7 @@ async function getBot(id: string, topLevel = true): Promise<Bot> {
 			'bots.status',
 			'bots.trusted',
 			'bots.partnered',
+			'bots.enforcements',
 			'bots.discord',
 			'bots.state',
 			'bots.vanity',
@@ -102,7 +103,7 @@ async function getBot(id: string, topLevel = true): Promise<Bot> {
 		res.owners = JSON.parse(res.owners)
 		res.banner = res.banner ? camoUrl(res.banner) : null
 		res.bg = res.bg ? camoUrl(res.bg) : null
-
+		res.enforcements = JSON.parse(res.enforcements ?? '"[]"')
 		if (discordBot.flags.bitfield & UserFlags.BotHTTPInteractions) {
 			res.status = 'online'
 		} else if (botMember) {
@@ -448,6 +449,7 @@ async function getBotSubmit(id: string, date: number): Promise<SubmittedBot> {
 			'id',
 			'date',
 			'category',
+			'enforcements',
 			'lib',
 			'prefix',
 			'intro',
@@ -463,6 +465,7 @@ async function getBotSubmit(id: string, date: number): Promise<SubmittedBot> {
 		.where({ id, date })
 	if (res.length === 0) return null
 	res[0].category = JSON.parse(res[0].category)
+	res[0].enforcements = JSON.parse(res[0].enforcements || '"[]"')
 	res[0].owner = await get.user.load(res[0].owner)
 	return res[0]
 }
@@ -474,6 +477,7 @@ async function getBotSubmits(id: string): Promise<SubmittedBot[]> {
 			'id',
 			'date',
 			'category',
+			'enforcements',
 			'lib',
 			'prefix',
 			'intro',
@@ -492,6 +496,7 @@ async function getBotSubmits(id: string): Promise<SubmittedBot[]> {
 	res = await Promise.all(
 		res.map(async (el) => {
 			el.category = JSON.parse(el.category)
+			el.enforcements = JSON.parse(el.enforcements)
 			el.owner = owner
 			return el
 		})
@@ -636,6 +641,7 @@ async function submitBot(
 		git: data.git,
 		url: data.url,
 		category: JSON.stringify(data.category),
+		enforcements: JSON.stringify(data.enforcements),
 		discord: data.discord,
 		state: 0,
 	})
@@ -745,6 +751,7 @@ async function updateBot(id: string, data: ManageBot): Promise<number> {
 			intro: data.intro,
 			desc: data.desc,
 			vanity: data.vanity,
+			enforcements: JSON.stringify(data.enforcements),
 			banner: data.banner,
 			bg: data.bg,
 		})
@@ -1134,6 +1141,7 @@ async function approveBotSubmission(id: string, date: number) {
 			'id',
 			'date',
 			'category',
+			'enforcements',
 			'lib',
 			'prefix',
 			'intro',
@@ -1160,6 +1168,7 @@ async function approveBotSubmission(id: string, date: number) {
 		web: data.web,
 		git: data.git,
 		category: data.category,
+		enforcements: data.enforcements,
 		discord: data.discord,
 		token: sign({ id }),
 	})

utils/Yup.ts

@@ -3,6 +3,7 @@ import YupKorean from 'yup-locales-ko'
 import { ListType } from '@types'
 import {
 	botCategories,
+	botEnforcements,
 	library,
 	reportCats,
 	reservedVanityBypass,
@@ -174,6 +175,7 @@ export const AddBotSubmitSchema: Yup.SchemaOf<AddBotSubmit> = Yup.object({
 		.min(100, '봇 설명은 최소 100자여야합니다.')
 		.max(1500, '봇 설명은 최대 1500자여야합니다.')
 		.required('봇 설명은 필수 항목입니다.'),
+	enforcements: Yup.array(Yup.string().oneOf(Object.values(botEnforcements))),
 	_csrf: Yup.string().required(),
 	_captcha: Yup.string().required(),
 })
@@ -190,6 +192,7 @@ export interface AddBotSubmit {
 	category: string | string[]
 	intro: string
 	desc: string
+	enforcements: string[]
 	_csrf: string
 	_captcha: string
 }
@@ -303,6 +306,7 @@ export function getManageBotSchema(perkAvailable = false) {
 			.min(100, '봇 설명은 최소 100자여야합니다.')
 			.max(1500, '봇 설명은 최대 1500자여야합니다.')
 			.required('봇 설명은 필수 항목입니다.'),
+		enforcements: Yup.array(Yup.string().oneOf(Object.values(botEnforcements))),
 		_csrf: Yup.string().required(),
 	}
 
@@ -349,6 +353,7 @@ export interface ManageBot {
 	desc: string
 	vanity: string
 	banner: string
+	enforcements: string[]
 	bg: string
 	_csrf: string
 }