feat: Add descriptions for bot categories (#650)

* feat: make select option show description

* feat: add category descriptions of bot

components/Form/Selects.tsx

@@ -1,5 +1,10 @@
 import React, { MouseEventHandler } from 'react'
-import ReactSelect, { components, MultiValueProps, MultiValueRemoveProps } from 'react-select'
+import ReactSelect, {
+	components,
+	MultiValueProps,
+	MultiValueRemoveProps,
+	OptionProps,
+} from 'react-select'
 import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core'
 import { restrictToParentElement } from '@dnd-kit/modifiers'
 import {
@@ -43,6 +48,17 @@ const MultiValueRemove = (props: MultiValueRemoveProps<Option>) => {
 	)
 }
 
+const Option = ({ ...props }: OptionProps<Option>) => {
+	return (
+		<components.Option {...props}>
+			<div className='flex flex-col'>
+				<span>{props.data.label}</span>
+				<span className='text-sm font-light opacity-90'>{props.data.description}</span>
+			</div>
+		</components.Option>
+	)
+}
+
 const Select: React.FC<SelectProps> = ({
 	placeholder,
 	options,
@@ -97,6 +113,7 @@ const Select: React.FC<SelectProps> = ({
 					components={{
 						MultiValue,
 						MultiValueRemove,
+						Option,
 					}}
 					closeMenuOnSelect={false}
 				/>
@@ -117,6 +134,7 @@ interface SelectProps {
 interface Option {
 	value: string
 	label: string
+	description?: string
 }
 
 export default Select

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, library } from '@utils/Constants'
+import { botCategories, botCategoryDescription, library } from '@utils/Constants'
 import { getToken } from '@utils/Csrf'
 import Fetch from '@utils/Fetch'
 import { ResponseProps, SubmittedBot, Theme, User } from '@types'
@@ -235,7 +235,11 @@ const AddBot: NextPage<AddBotProps> = ({ logged, user, csrfToken, theme }) => {
 							error={errors.category && touched.category ? (errors.category as string) : null}
 						>
 							<Selects
-								options={botCategories.map((el) => ({ label: el, value: el }))}
+								options={botCategories.map((el) => ({
+									label: el,
+									value: el,
+									description: botCategoryDescription[el],
+								}))}
 								handleChange={(value) => {
 									setFieldValue(
 										'category',

pages/bots/[id]/edit.tsx

@@ -11,7 +11,7 @@ import { getJosaPicker } from 'josa'
 import { get } from '@utils/Query'
 import { checkUserFlag, cleanObject, makeBotURL, parseCookie, redirectTo } from '@utils/Tools'
 import { ManageBot, ManageBotSchema } from '@utils/Yup'
-import { botCategories, library } from '@utils/Constants'
+import { botCategories, botCategoryDescription, library } from '@utils/Constants'
 import { Bot, Theme, User } from '@types'
 import { getToken } from '@utils/Csrf'
 import Fetch from '@utils/Fetch'
@@ -161,7 +161,7 @@ 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 }))}
+								options={botCategories.map((el) => ({ label: el, value: el, description: botCategoryDescription[el] }))}
 								handleChange={(value) => {
 									setFieldValue(
 										'category',

utils/Constants.ts

@@ -96,6 +96,30 @@ export const botCategories = [
 	'마인크래프트',
 ]
 
+export const botCategoryDescription = {
+	관리: '유저 관리, 서버 관리 등 디스코드 서버를 직접적으로 관리할 수 있습니다.',
+	뮤직: '디스코드 음성 채널을 통해 음악을 재생할 수 있습니다.',
+	전적: '게임 유저 전적이나 게임 정보 등 여러 전적에 대해 다룹니다.',
+	게임: '봇에 자체적인 게임 컨텐츠가 있습니다.',
+	도박: '봇 내 가상 재화를 이용해 도박을 할 수 있습니다.',
+	로깅: '유저의 출입, 메시지 수정 / 삭제 등을 로그로 남길 수 있습니다.',
+	'빗금 명령어': '메시지 기반이 아닌 빗금 명령어를 사용합니다.',
+	'웹 대시보드': '웹사이트를 통해 봇을 조작할 수 있습니다.',
+	밈: '각종 밈을 다루고 있습니다.',
+	레벨링: '디스코드 서버 안에서 채팅 등을 통해 레벨을 올릴 수 있는 기능을 제공합니다.',
+	유틸리티: '여러 편리한 기능들을 제공합니다.',
+	대화: '봇이 학습하거나 인공지능을 통해 대화할 수 있습니다.',
+	NSFW: 'NotSafeForWork(후방주의)의 약자로 위험하거나 불쾌감을 포함할 수 있는 컨텐츠를 다룹니다.',
+	검색: '봇으로 검색을 수행할 수 있습니다.',
+	학교: '급식이나 시간표 정보 등 학교와 관련된 기능을 제공합니다.',
+	코로나19: '코로나19와 관련된 기능을 제공합니다.',
+	번역: '번역을 할 수 있습니다.',
+	오버워치: '게임 "오버워치"에 관련된 기능을 다룹니다.',
+	'리그 오브 레전드': '게임 "리그 오브 레전드"에 관련된 기능을 다룹니다.',
+	배틀그라운드: '게임 "배틀그라운드"에 관련된 기능을 다룹니다.',
+	마인크래프트: '게임 "마인크래프트"에 관련된 기능을 다룹니다.',
+}
+
 export const botCategoryIcon = {
 	관리: 'fas fa-cogs',
 	뮤직: 'fas fa-music',