diff --git a/components/Application.tsx b/components/Application.tsx index 75d2b26..90f9df2 100644 --- a/components/Application.tsx +++ b/components/Application.tsx @@ -5,16 +5,18 @@ const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar')) const ServerIcon = dynamic(() => import('@components/ServerIcon')) const Application: React.FC = ({ type, id, name }) => { - return -
- { - type === 'bot' ? - : - - } -

{name}

-
- + return ( + +
+ { + type === 'bot' ? + : + + } +

{name}

+
+ + ) } diff --git a/components/BotCard.tsx b/components/BotCard.tsx index cafd397..468518c 100644 --- a/components/BotCard.tsx +++ b/components/BotCard.tsx @@ -10,107 +10,113 @@ const Tag = dynamic(() => import('@components/Tag')) const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar')) const BotCard: React.FC = ({ manage = false, bot }) => { - return
-
-
-
-
- -
-
-
-
- -
-
- - {formatNumber(bot.votes)} - - } - dark - /> - {formatNumber(bot.servers)} 서버 : 'N/A'} - dark - /> -
-
-
-
-

- - {Status[bot.status]?.text} -

-

{bot.name}

-
-

- {bot.intro} -

+ return ( +
+
+
+
+
+
-
- {bot.category.slice(0, 3).map(el => ( - - ))}{' '} - {bot.category.length > 3 && } +
+
+
+ +
+
+ + {formatNumber(bot.votes)} + + } + dark + /> + {formatNumber(bot.servers)} 서버 : 'N/A'} + dark + /> +
+
+
+
+

+ + {Status[bot.status]?.text} +

+

{bot.name}

+
+

+ {bot.intro} +

+
+
+ {bot.category.slice(0, 3).map(el => ( + + ))}{' '} + {bot.category.length > 3 && } +
-
- - -
-
- - - 보기 - - - {manage ? ( - - - 관리하기 - + + +
+
+ + + 보기 + - ) : bot.state !== 'ok' ? - 초대하기 - : - + + 관리하기 + + + ) : bot.state !== 'ok' ? - 초대하기 - - } + 초대하기 + : + + 초대하기 + + } +
-
+ ) } diff --git a/components/Button.tsx b/components/Button.tsx index 7a588d9..44cafe3 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -9,13 +9,13 @@ const Button: React.FC = ({ disabled=false, onClick, }) => { - return href ? - - {children} - + return href ? + + {children} + : onClick ?
+ ) } interface DeveloperLayout { diff --git a/components/Footer.tsx b/components/Footer.tsx index a08075f..93b2e06 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -16,9 +16,9 @@ const Footer: React.FC = ({ theme, setTheme }) => { 2020-2023 한국 디스코드 리스트, All rights reserved.
- - - + + + @@ -33,18 +33,18 @@ const Footer: React.FC = ({ theme, setTheme }) => {

한국 디스코드 리스트

 @@ -53,23 +53,23 @@ const Footer: React.FC = ({ theme, setTheme }) => {

정책

@@ -83,8 +83,8 @@ const Footer: React.FC = ({ theme, setTheme }) => { */}
  • - - 인증 + + 인증
    • diff --git a/components/Form/Select.tsx b/components/Form/Select.tsx index 54ad56b..a1f4bb0 100644 --- a/components/Form/Select.tsx +++ b/components/Form/Select.tsx @@ -15,6 +15,18 @@ const Select: React.FC = ({ placeholder, options, handleChange, han }, } }, + placeholder: provided => { + return { + ...provided, + position: 'absolute' + } + }, + singleValue: provided => { + return { + ...provided, + position: 'absolute' + } + } }} className='border-grey-light border dark:border-transparent rounded' classNamePrefix='outline-none text-black dark:bg-very-black dark:text-white ' diff --git a/components/Form/Selects.tsx b/components/Form/Selects.tsx index 308cf2d..8ea889c 100644 --- a/components/Form/Selects.tsx +++ b/components/Form/Selects.tsx @@ -1,60 +1,92 @@ -import { ComponentType } from 'react' -import ReactSelect, { components, GroupTypeBase, MultiValueProps, OptionTypeBase } from 'react-select' +import React, { MouseEventHandler } from 'react' +import ReactSelect, { + components, + MultiValueProps, + MultiValueRemoveProps, +} from 'react-select' +import { closestCenter, DndContext, DragEndEvent } from '@dnd-kit/core' +import { restrictToParentElement } from '@dnd-kit/modifiers' import { - SortableContainer, - SortableElement, - SortableHandle, -} from 'react-sortable-hoc' + arrayMove, + horizontalListSortingStrategy, + SortableContext, + useSortable, +} from '@dnd-kit/sortable' +import { CSS } from '@dnd-kit/utilities' -function arrayMove(array, from, to) { - array = array.slice() - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]) - return array -} - -const SortableMultiValue = SortableElement(props => { - // this prevents the menu from being opened/closed when the user clicks - // on a value to begin dragging it. ideally, detecting a click (instead of - // a drag) would still focus the control and toggle the menu, but that - // requires some magic with refs that are out of scope for this example - const onMouseDown = e => { +const MultiValue = (props: MultiValueProps