feat: 강제사항 명시 UX 개선 (#689)

* feat: add none to enforcement entries

* chore: clarify join enforced description

* feat: add constant for enforcements

* fix: do not filter none

* fix: do not show message when none is set

* style: fix lint

* chore: explicit next of dd-trace

* chore: improve wordings for join enforcements

* chore: clarify join enforced

Author: skinmaker1345

instrumentation.ts

@@ -7,5 +7,6 @@ export async function register() {
 			version: packageJson.version,
 			env: process.env.DD_ENV,
 		})
+		tracer.use('next')
 	}
 }

pages/addbot.tsx

@@ -367,20 +367,30 @@ const AddBot: NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 							}
 						>
 							<Selects
-								options={Object.entries(botEnforcements).map(([k, v]) => ({
-									label: v.label,
-									value: k,
-								}))}
-								handleChange={(value) => {
-									setFieldValue(
-										'enforcements',
-										value.map((v) => v.value)
-									)
+								options={Object.entries(botEnforcements)
+									.filter(([k]) => k === 'NONE' || !values.enforcements.includes('NONE'))
+									.map(([k, v]) => ({
+										label: v.label,
+										value: k,
+									}))}
+								handleChange={(values) => {
+									if (values.some((i) => i.value === 'NONE')) {
+										setFieldValue('enforcements', ['NONE'])
+									} else {
+										setFieldValue(
+											'enforcements',
+											values.map((v) => v.value)
+										)
+									}
 								}}
 								handleTouch={() => setFieldTouched('enforcements', true)}
 								values={values.enforcements ?? ([] as string[])}
-								setValues={(value) => {
-									setFieldValue('enforcements', value)
+								setValues={(values) => {
+									if (values.includes('NONE')) {
+										setFieldValue('enforcements', ['NONE'])
+									} else {
+										setFieldValue('enforcements', values)
+									}
 								}}
 							/>
 						</Label>

pages/bots/[id]/edit.tsx

@@ -339,20 +339,30 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
 							}
 						>
 							<Selects
-								options={Object.entries(botEnforcements).map(([k, v]) => ({
-									label: v.label,
-									value: k,
-								}))}
-								handleChange={(value) => {
-									setFieldValue(
-										'enforcements',
-										value.map((v) => v.value)
-									)
+								options={Object.entries(botEnforcements)
+									.filter(([k]) => k === 'NONE' || !values.enforcements.includes('NONE'))
+									.map(([k, v]) => ({
+										label: v.label,
+										value: k,
+									}))}
+								handleChange={(values) => {
+									if (values.some((i) => i.value === 'NONE')) {
+										setFieldValue('enforcements', ['NONE'])
+									} else {
+										setFieldValue(
+											'enforcements',
+											values.map((v) => v.value)
+										)
+									}
 								}}
 								handleTouch={() => setFieldTouched('enforcements', true)}
 								values={values.enforcements ?? ([] as string[])}
-								setValues={(value) => {
-									setFieldValue('enforcements', value)
+								setValues={(values) => {
+									if (values.includes('NONE')) {
+										setFieldValue('enforcements', ['NONE'])
+									} else {
+										setFieldValue('enforcements', values)
+									}
 								}}
 							/>
 						</Label>

pages/bots/[id]/index.tsx

@@ -116,13 +116,15 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
 										로 문의해주세요.
 									</p>
 								</Message>
-							) : data.enforcements.length > 0 ? (
+							) : data.enforcements.filter((i) => i !== 'NONE').length > 0 ? (
 								<Message type='warning'>
 									<h2 className='text-lg font-extrabold'>이 봇은 기능에 제한을 두고 있습니다.</h2>
 									<p>
-										{data.enforcements.map((i) => (
-											<li key={i}>{botEnforcements[i].description}</li>
-										))}
+										{data.enforcements
+											.filter((i) => i !== 'NONE')
+											.map((i) => (
+												<li key={i}>{botEnforcements[i].description}</li>
+											))}
 									</p>
 								</Message>
 							) : (

utils/Constants.ts

@@ -121,13 +121,17 @@ export const botCategoryDescription = {
 }
 
 export const botEnforcements = {
+	NONE: {
+		label: '해당사항이 없습니다.',
+		description: '',
+	},
 	JOIN_PARTIALLY_ENFORCED: {
-		label: '서버 참여가 필요한 기능이 있습니다',
-		description: '봇의 일부 명령어는 봇의 디스코드 서버에 참여해야 사용할 수 있습니다.',
+		label: '지정된 서버에 참여해야만 사용이 가능한 기능이 있습니다',
+		description: '봇의 일부 명령어는 봇이 지정한 특정 디스코드 서버에 참여해야 사용할 수 있습니다.',
 	},
 	JOIN_ENFORCED: {
-		label: '서버 참여 없이는 봇의 핵심 기능을 사용할 수 없습니다',
-		description: '봇의 핵심 기능은 봇의 디스코드 서버에 참여해야 사용할 수 있습니다.',
+		label: '지정된 서버에 참여하지 않으면 봇의 핵심 기능을 사용할 수 없습니다',
+		description: '봇의 핵심 기능은 봇이 지정한 특정 디스코드 서버에 참여해야 사용할 수 있습니다.',
 	},
 	LICENSE_PARTIALLY_ENFORCED: {
 		label: '유료 구매가 필요한 기능이 있습니다',

utils/Yup.ts

@@ -175,7 +175,10 @@ export const AddBotSubmitSchema: Yup.SchemaOf<AddBotSubmit> = Yup.object({
 		.min(100, '봇 설명은 최소 100자여야합니다.')
 		.max(1500, '봇 설명은 최대 1500자여야합니다.')
 		.required('봇 설명은 필수 항목입니다.'),
-	enforcements: Yup.array(Yup.string().oneOf(Object.keys(botEnforcements))),
+	enforcements: Yup.array(Yup.string().oneOf(Object.keys(botEnforcements)))
+		.min(1, '최소 한 개의 선택지를 선택해주세요.')
+		.unique('선택지는 중복될 수 없습니다.')
+		.required('강제사항 명시는 필수 선택사항입니다.'),
 	_csrf: Yup.string().required(),
 	_captcha: Yup.string().required(),
 })
@@ -306,7 +309,10 @@ export function getManageBotSchema(perkAvailable = false) {
 			.min(100, '봇 설명은 최소 100자여야합니다.')
 			.max(1500, '봇 설명은 최대 1500자여야합니다.')
 			.required('봇 설명은 필수 항목입니다.'),
-		enforcements: Yup.array(Yup.string().oneOf(Object.keys(botEnforcements))),
+		enforcements: Yup.array(Yup.string().oneOf(Object.keys(botEnforcements)))
+			.min(1, '최소 한 개의 선택지를 선택해주세요.')
+			.unique('선택지는 중복될 수 없습니다.')
+			.required('강제사항 명시는 필수 선택사항입니다.'),
 		_csrf: Yup.string().required(),
 	}