From 606f3cbc82919756fe7ac8691f1449857be4e1d5 Mon Sep 17 00:00:00 2001 From: SKINMAKER Date: Thu, 28 Sep 2023 23:22:46 +0900 Subject: [PATCH] deps: update next.js to 13 (#627) * deps: update next.js to 13 * chore: migrate to new Link component * chore: remove future option from next.config * chore: update react-select * chore: enable hideSourceMaps on sentry * chore: assert type as string * chore: make placeholder and value absolute * feat: set timeout for redirect * chore: ignore ts error * chore: add generics * chore: * chore: add ts comment * feat: use dnd-kit instead of react-sortable-hoc * fix: give absolute position to placeholder --- components/Application.tsx | 22 +- components/BotCard.tsx | 184 +++--- components/Button.tsx | 14 +- components/DeveloperLayout.tsx | 163 +++--- components/Footer.tsx | 38 +- components/Form/Select.tsx | 12 + components/Form/Selects.tsx | 122 ++-- components/Form/TextArea.tsx | 2 + components/Login.tsx | 2 +- components/LongButton.tsx | 12 +- components/Navbar.tsx | 487 ++++++++------- components/Owner.tsx | 24 +- components/Paginator.tsx | 71 +-- components/ResponsiveGrid.tsx | 2 +- components/Search.tsx | 9 +- components/ServerCard.tsx | 228 +++---- components/SubmittedBotCard.tsx | 58 +- components/Tag.tsx | 42 +- components/Tooltip.tsx | 90 +-- next.config.js | 6 +- package.json | 16 +- pages/_error.tsx | 40 +- pages/_offline.tsx | 40 +- pages/addbot.tsx | 274 +++++---- pages/addserver/[id].tsx | 242 ++++---- pages/bots/[id]/edit.tsx | 516 ++++++++-------- pages/bots/[id]/index.tsx | 554 +++++++++--------- pages/bots/[id]/report.tsx | 152 ++--- pages/bots/[id]/vote.tsx | 104 ++-- pages/developers/applications/bots/[id].tsx | 157 ++--- pages/developers/applications/index.tsx | 2 +- .../developers/applications/servers/[id].tsx | 173 +++--- pages/panel.tsx | 2 +- pages/pendingBots/[id]/[date].tsx | 284 ++++----- pages/servers/[id]/index.tsx | 418 ++++++------- pages/servers/[id]/report.tsx | 152 ++--- pages/servers/[id]/vote.tsx | 104 ++-- pages/users/[id]/index.tsx | 14 +- pages/users/[id]/report.tsx | 144 ++--- utils/Query.ts | 2 +- yarn.lock | 380 ++++++------ 41 files changed, 2805 insertions(+), 2553 deletions(-) diff --git a/components/Application.tsx b/components/Application.tsx index 75d2b2649f..90f9df2d6b 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 cafd3976eb..468518c34d 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 - /> + return ( +
+
+
+
+
+ +
+
+
+
+ +
+
+ + {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 && } +
+

+ + {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 7a588d9d06..44cafe3085 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 ? -
- -
-
+ +
+ + } + setNavbarOpen(false)} + className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> + + + 디스코드 서버 + + + setNavbarOpen(false)} + className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> + + + 소개 + + + { + setMobileAddDropdownOpen(!mobileAddDropdownOpen) + }} + className='flex items-center px-8 py-2 text-gray-100' + > + + 추가하기 + +
+ setNavbarOpen(false)} + className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> + + + 봇 추가하기 + + + setNavbarOpen(false)} + className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> + + + 서버 추가하기 + + +
+ + +
+ { + logged ? <> + setNavbarOpen(!navbarOpen)}> -
- { - logged ? <> - - setNavbarOpen(!navbarOpen)}> - - {userCache.username} - - - - setNavbarOpen(!navbarOpen)}> - - 관리패널 - - - { - setNavbarOpen(!navbarOpen) - localStorage.removeItem('userCache') - redirectTo(router, 'logout') - }} className='flex items-center px-8 py-2 text-red-500 hover:text-red-400'> - - 로그아웃 - - : { - localStorage.redirectTo = window.location.href - setNavbarOpen(false) - redirectTo(router, 'login') - }} className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> - 로그인 + {userCache.username} + + + setNavbarOpen(!navbarOpen)}> + + + 관리패널 + + + { + setNavbarOpen(!navbarOpen) + localStorage.removeItem('userCache') + redirectTo(router, 'logout') + }} className='flex items-center px-8 py-2 text-red-500 hover:text-red-400'> + + 로그아웃 - } -
+ : { + localStorage.redirectTo = window.location.href + setNavbarOpen(false) + redirectTo(router, 'login') + }} className='flex items-center px-8 py-2 text-gray-100 hover:text-gray-300'> + + 로그인 + + }
- - ) +
+ } interface NavbarProps { diff --git a/components/Owner.tsx b/components/Owner.tsx index 4592c256cb..3d2efb8a0b 100644 --- a/components/Owner.tsx +++ b/components/Owner.tsx @@ -3,17 +3,19 @@ import DiscordAvatar from '@components/DiscordAvatar' const Owner: React.FC = ({ id, globalName, username, tag, crown=false }) => { return ( - - -
- -
-
-

{ crown && }{tag === '0' ? globalName : username}

- {tag === '0' ? '@' + username : '#' + tag} -
- - + ( + +
+ +
+
+

{ crown && }{tag === '0' ? globalName : username}

+ {tag === '0' ? '@' + username : '#' + tag} +
+ + ) ) } diff --git a/components/Paginator.tsx b/components/Paginator.tsx index 8ecc7832cc..9beceb31f5 100644 --- a/components/Paginator.tsx +++ b/components/Paginator.tsx @@ -29,44 +29,45 @@ const Paginator: React.FC = ({ currentPage, totalPage, pathname, return (
- - - - + + + + {pages.map((el, i) => ( - - - {el} - - + ( + + {el} + + ) ))} - - - - + + + +
diff --git a/components/ResponsiveGrid.tsx b/components/ResponsiveGrid.tsx index e97db63d56..7033534dac 100644 --- a/components/ResponsiveGrid.tsx +++ b/components/ResponsiveGrid.tsx @@ -1,4 +1,4 @@ -const ResponsiveGrid: React.FC = ({ children }) => { +const ResponsiveGrid: React.FC = ({ children }) => { return
{children}
diff --git a/components/Search.tsx b/components/Search.tsx index 7533871159..1949de8825 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -115,7 +115,7 @@ const Search: React.FC = () => { data.data.bots.length === 0 ?
  • 검색 결과가 없습니다.
    • : data.data.bots.map(el => ( - +
  • @@ -133,7 +133,7 @@ const Search: React.FC = () => { data.data.servers.length === 0 ?
  • 검색 결과가 없습니다.
    • : data.data.servers.map(el => ( - +
  • @@ -177,7 +177,10 @@ const Search: React.FC = () => {
    • { recentSearch.slice(0, 10).map((el, n) => ( - +
  • {el?.value} diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx index 58b2ce2628..5292b6d0bb 100644 --- a/components/ServerCard.tsx +++ b/components/ServerCard.tsx @@ -11,131 +11,141 @@ const ServerIcon = dynamic(() => import('@components/ServerIcon')) const ServerCard: React.FC = ({ type, server }) => { const newServerLink = server.data ? `/addserver/${server.id}` : `${DiscordEnpoints.InviteApplication(DSKR_BOT_ID, {}, 'bot', null, server.id)}&disable_guild_select=true` - return
    -
    -
    -
    -
    - -
    -
    -
    -
    - + return ( +
    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    + + {formatNumber(server.votes)} + + } + dark + /> + {formatNumber(server.members)} 멤버 : 'N/A'} + dark + /> +
    -
    - - {formatNumber(server.votes)} - - } - dark - /> - {formatNumber(server.members)} 멤버 : 'N/A'} - dark - /> +
    +

    + 정보 갱신 불가 +

    +

    {server.name}

    -
    -

    - 정보 갱신 불가 -

    -

    {server.name}

    -
    -
    - -

    - {type === 'add' ? - server.data ? '지금 바로 서버를 등록할 수 있습니다.' : '봇을 초대해야 서버를 등록할 수 있습니다.' - : server.intro - } -

    -
    -
    - {server.category?.slice(0, 3).map(el => ( - - ))}{' '} - {server.category?.length > 3 && } + +

    + {type === 'add' ? + server.data ? '지금 바로 서버를 등록할 수 있습니다.' : '봇을 초대해야 서버를 등록할 수 있습니다.' + : server.intro + } +

    +
    +
    + {server.category?.slice(0, 3).map(el => ( + + ))}{' '} + {server.category?.length > 3 && } +
    -
    - - -
    -
    - { - type === 'add' ? - server.data ? - - 등록하기 - - : - + +
    +
    + { + type === 'add' ? + server.data ? + + 등록하기 + + : - 봇 초대하기 - - - : - <> - - - 보기 - + target='_blank'> + + 봇 초대하기 + - {type === 'manage' ? ( - - - 관리하기 - + : + <> + + + 보기 + - ) : !['ok', 'unreachable'].includes(server.state) ? - 참가하기 - : - + + 관리하기 + + + ) : !['ok', 'unreachable'].includes(server.state) ? - 참가하기 - - } - - - } + 참가하기 + : + + 참가하기 + + } + + + } +
    -
    + ) } diff --git a/components/SubmittedBotCard.tsx b/components/SubmittedBotCard.tsx index 904d9ee33b..c514e305bf 100644 --- a/components/SubmittedBotCard.tsx +++ b/components/SubmittedBotCard.tsx @@ -7,36 +7,38 @@ import Link from 'next/link' const SubmittedBotCard: React.FC = ({ href, submit }) => { return ( - - -
    -
    -
    -

    {submit.id}

    -
    -
    - - {' '} - {['대기중', '승인됨', '거부됨'][submit.state]} - - } - dark - /> -
    + ( + +     + + ) ) } diff --git a/components/Tag.tsx b/components/Tag.tsx index 683a141c23..2673e116dc 100644 --- a/components/Tag.tsx +++ b/components/Tag.tsx @@ -37,27 +37,27 @@ const Tag: React.FC = ({ {text} ) : ( - - - {text} - - + ( + + {text} + + ) ) ) : ( = ({ text, }) => { return href ? ( - - -
    -
    - {children} -
    - {text} - {direction === 'left' ? ( - - - - ) : direction === 'center' ? ( - - - - ) : ( - - - - )} -
    + ( + +     + + ) ) : (
    diff --git a/next.config.js b/next.config.js index e6ee49c646..e20b742007 100644 --- a/next.config.js +++ b/next.config.js @@ -20,7 +20,6 @@ const NextConfig = { NEXT_PUBLIC_RELEASE_VERSION: VERSION, SENTRY_SKIP_AUTO_RELEASE: true }, - future: {}, experimental: { scrollRestoration: true }, @@ -42,6 +41,9 @@ const NextConfig = { sentry: process.env.CI ? { disableServerWebpackPlugin: true, disableClientWebpackPlugin: true, - } : {} + hideSourceMaps: true, + } : { + hideSourceMaps: true, + }, } module.exports = withSentryConfig(withPWA(NextConfig)) \ No newline at end of file diff --git a/package.json b/package.json index 95c330cb4a..6da03720f1 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,10 @@ "docker": "docker-compose up -d --build" }, "dependencies": { + "@dnd-kit/core": "^6.0.8", + "@dnd-kit/modifiers": "^6.0.1", + "@dnd-kit/sortable": "^7.0.2", + "@dnd-kit/utilities": "^3.2.1", "@fortawesome/fontawesome-free": "5.15.4", "@hcaptcha/react-hcaptcha": "^1.8.1", "@sentry/nextjs": "^7.57.0", @@ -37,7 +41,7 @@ "knex": "^2.4.0", "mongoose": "6.11.3", "mysql": "2.18.1", - "next": "^12.3.2", + "next": "^13.5.2", "next-connect": "0.10.1", "next-pwa": "^5.6.0", "next-seo": "^6.1.0", @@ -46,15 +50,14 @@ "postcss": "^8.4.24", "postcss-preset-env": "8.5.1", "rc-tooltip": "5.1.1", - "react": "17.0.2", + "react": "^18.2.0", "react-adsense": "0.1.0", - "react-dom": "17.0.2", + "react-dom": "^18.2.0", "react-ga": "^3.3.1", "react-hotkeys": "2.0.0", "react-responsive-modal": "6.4.2", - "react-select": "4.3.1", + "react-select": "^5.7.5", "react-showdown": "2.3.1", - "react-sortable-hoc": "2.0.0", "react-use-clipboard": "1.0.9", "sanitize-html": "^2.11.0", "tailwindcss": "^3.3.2", @@ -75,8 +78,7 @@ "@types/node-fetch": "^2.5.12", "@types/nprogress": "0.2.0", "@types/rc-tooltip": "^3.7.4", - "@types/react": "^17.0.15", - "@types/react-select": "^4.0.17", + "@types/react": "^18.2.22", "@types/sanitize-html": "^2.8.0", "@types/url-regex-safe": "1.0.0", "@typescript-eslint/eslint-plugin": "^5.61.0", diff --git a/pages/_error.tsx b/pages/_error.tsx index 2cca7d47c2..544713a679 100644 --- a/pages/_error.tsx +++ b/pages/_error.tsx @@ -7,25 +7,31 @@ import { ErrorMessage } from '@utils/Constants' const Container = dynamic(() => import('@components/Container')) const MyError: NextPage = () => { - return + ) } export default MyError \ No newline at end of file diff --git a/pages/_offline.tsx b/pages/_offline.tsx index 80f3c4d3c1..b459275dd5 100644 --- a/pages/_offline.tsx +++ b/pages/_offline.tsx @@ -5,25 +5,31 @@ import dynamic from 'next/dynamic' const Container = dynamic(() => import('@components/Container')) const MyError: NextPage = () => { - return
    - -

    인터넷이 끊어졌나봐요...

    -

    인터넷 연결을 확인하시고 다시 시도 해주세요!

    - 상태 페이지 - +     +
    + ) } export default MyError \ No newline at end of file diff --git a/pages/addbot.tsx b/pages/addbot.tsx index 94e5087387..85273e4275 100644 --- a/pages/addbot.tsx +++ b/pages/addbot.tsx @@ -76,134 +76,154 @@ const AddBot:NextPage = ({ logged, user, csrfToken, theme }) => { title:'새로운 봇 추가하기', description: '자신의 봇을 한국 디스코드 리스트에 등록하세요.' }} /> - return - -

    새로운 봇 추가하기

    -
    - 안녕하세요, {user.tag === '0' ? `@${user.username}` : `${user.username}#${user.tag}`}님! 본인이 아니신가요? -
    - { - data ? data.code == 200 && data.data ? -

    봇 신청 성공!

    -

    봇을 성공적으로 신청했습니다! 심사 페이지로 리다이랙트됩니다. {redirectTo(router, `/pendingBots/${data.data.id}/${data.data.date}`)}

    -     : -

    {data.message || '오류가 발생했습니다.'}

    -
      - {data.errors?.map((el, n) =>
    • {el}
      • )} -
    - -     : <> - } - setCaptcha(true)}> - {({ errors, touched, values, isValid, setFieldTouched, setFieldValue }) => ( -
    -
    - -

    신청하시기 전에 다음 사항을 확인해 주세요!

    -
      -
    • 디스코드 서버에 참가하셨나요?
      • -
    • 봇이 가이드라인을 지키고 있나요?
      • -
    • 봇 소유자가 두 명 이상인가요? 봇 소유자는 봇이 승인된 뒤, 더 추가하실 수 있습니다.
      • -
    • 또한, 봇을 등록하게 되면 작성하신 모든 정보는 웹과 API에 공개됩니다.
      • -
    -     -
    - - - - - - - - - { - values.category.includes('빗금 명령어') && -

    해당 봇은 빗금 명령어(Slash Command) 카테고리가 선택되었습니다.

    -

    초대링크는 빗금 명령어 권한을 부여하지 않은 일반 봇 초대링크로 자동 생성됩니다. - 따라서 빗금 명령어 권한을 포함한 초대링크를 직접 설정해주세요.

    -     - } -