chore: prepare analytics ui

package.json

@@ -20,6 +20,7 @@
 		"@tailwindcss/forms": "^0.5.3",
 		"autoprefixer": "^10.4.14",
 		"badgen": "3.2.2",
+		"chart.js": "^4.3.0",
 		"cookie": "0.5.0",
 		"csrf": "3.1.0",
 		"dataloader": "2.2.2",

pages/developers/applications/bots/[id].tsx

@@ -21,6 +21,7 @@ import Input from '@components/Form/Input'
 import Tooltip from '@components/Tooltip'
 
 const Button = dynamic(() => import('@components/Button'))
+const Divider = dynamic(() => import('@components/Divider'))
 const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout'))
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 const Message = dynamic(() => import('@components/Message'))
@@ -66,7 +67,7 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme,
 		</Link>
 		<h1 className='text-3xl font-bold'>봇 설정</h1>
 		<p className='text-gray-400'>한국 디스코드 리스트 API에 사용할 정보를 이곳에서 설정하실 수 있습니다.</p>
-		<div className='lg:flex pt-6'>
+		<div className='lg:flex py-6'>
 			<div className='lg:w-1/5'>
 				<DiscordAvatar userID={bot.id} />
 			</div>
@@ -137,6 +138,8 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme,
 				</div>
 			</div>
 		</div>
+		<Divider />
+		<h1 className='text-3xl font-bold pt-6'>봇 통계</h1>
 	</DeveloperLayout>
 
 }

pages/developers/applications/servers/[id].tsx

@@ -20,6 +20,7 @@ import Tooltip from '@components/Tooltip'
 import Input from '@components/Form/Input'
 
 const Button = dynamic(() => import('@components/Button'))
+const Divider = dynamic(() => import('@components/Divider'))
 const DeveloperLayout = dynamic(() => import('@components/DeveloperLayout'))
 const ServerIcon = dynamic(() => import('@components/ServerIcon'))
 const Message = dynamic(() => import('@components/Message'))
@@ -67,7 +68,7 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({ user, spec, serve
 		<p className='text-gray-400'>한국 디스코드 리스트 API에 사용할 정보를 이곳에서 설정하실 수 있습니다.</p>
 		{
 			spec ? <>
-				<div className='lg:flex pt-6'>
+				<div className='lg:flex py-6'>
 					<div className='lg:w-1/5'>
 						<ServerIcon id={server.id} />
 					</div>
@@ -145,6 +146,8 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({ user, spec, serve
 				</Message>
 			</div>
 		}
+		<Divider />
+		<h1 className='text-3xl font-bold pt-6'>서버 통계</h1>
 	</DeveloperLayout>
 
 }

yarn.lock

@@ -2283,6 +2283,11 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@kurkle/color@^0.3.0":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
+  integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
+
 "@next/env@12.3.4":
   version "12.3.4"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.4.tgz#c787837d36fcad75d72ff8df6b57482027d64a47"
@@ -3891,6 +3896,13 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.0.tgz#ac363030ab3fec572850d2d872956f32a46326a1"
+  integrity sha512-ynG0E79xGfMaV2xAHdbhwiPLczxnNNnasrmPEXriXsPJGjmhOBYzFVEsB65w2qMDz+CaBJJuJD0inE/ab/h36g==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"