diff --git a/components/Form/Selects.tsx b/components/Form/Selects.tsx index b75e15c32d..b4118aab5e 100644 --- a/components/Form/Selects.tsx +++ b/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) => { ) } +const Option = ({ ...props }: OptionProps) => { + return ( + + + {props.data.label} + {props.data.description} + + + ) +} + const Select: React.FC = ({ placeholder, options, @@ -97,6 +113,7 @@ const Select: React.FC = ({ components={{ MultiValue, MultiValueRemove, + Option, }} closeMenuOnSelect={false} /> @@ -117,6 +134,7 @@ interface SelectProps { interface Option { value: string label: string + description?: string } export default Select diff --git a/pages/addbot.tsx b/pages/addbot.tsx index c13de24d4a..da86d1c166 100644 --- a/pages/addbot.tsx +++ b/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 = ({ logged, user, csrfToken, theme }) => { error={errors.category && touched.category ? (errors.category as string) : null} > ({ label: el, value: el }))} + options={botCategories.map((el) => ({ + label: el, + value: el, + description: botCategoryDescription[el], + }))} handleChange={(value) => { setFieldValue( 'category', diff --git a/pages/bots/[id]/edit.tsx b/pages/bots/[id]/edit.tsx index 74789799da..7cf4628233 100644 --- a/pages/bots/[id]/edit.tsx +++ b/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 = ({ bot, user, csrfToken, theme } error={errors.category && touched.category ? (errors.category as string) : null} > ({ label: el, value: el }))} + options={botCategories.map((el) => ({ label: el, value: el, description: botCategoryDescription[el] }))} handleChange={(value) => { setFieldValue( 'category', diff --git a/utils/Constants.ts b/utils/Constants.ts index 639300ed24..de5877f725 100644 --- a/utils/Constants.ts +++ b/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',