feat: 네비게이션 바 UI 개선 (#679)

feat: 네비게이션 바 UI 개선

components/Navbar.tsx

@@ -2,8 +2,10 @@
 /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import dynamic from 'next/dynamic'
+import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
+import Logo from 'public/logo-transparent.png'
 import { useEffect, useState } from 'react'
 
 import { Nullable, User, UserCache } from '@types'
@@ -49,9 +51,12 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 			setUserCache(null)
 		}
 	}, [token])
+	
 	return (
-		<>
+		<div className='fixed top-0 left-0 right-0 z-50'>
-			<nav className='fixed top-0 z-40 flex w-full flex-wrap items-center justify-between bg-discord-blurple px-2 py-3 text-gray-100 dark:bg-discord-black'>
+			<nav className={`fixed top-0 z-40 flex w-full flex-wrap items-center justify-between px-2 py-2 text-gray-100 transition-colors duration-300 backdrop-blur-sm ${
+    dev ? 'bg-discord-blurple dark:bg-discord-black' : 'bg-discord-blurple/30 dark:bg-discord-black/30'
+  } lg:absolute`}>
 				<div className='container mx-auto flex flex-wrap items-center justify-between px-4'>
 					<div className='relative flex w-full justify-between lg:w-auto lg:justify-start'>
 						<Link
@@ -65,7 +70,13 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
                 <i className='fas fa-tools mr-1' /> DEVELOPERS
               </>
               ) : (
-								'KOREANLIST'
+                <Image
+                  src={Logo}
+                  alt='Koreanbots'
+                  width={100}
+                  height={100}
+                  className='h-10 w-10'
+                />
               )}
 						</Link>
 						<button
@@ -160,7 +171,7 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 							</li>
 						</ul>
 					</div>
-					<div className='hidden grow items-center bg-white lg:flex lg:bg-transparent lg:shadow-none'>
+					<div className='hidden  lg:flex lg:items-center lg:bg-transparent lg:shadow-none'>
 						<ul className='flex list-none flex-col lg:ml-auto lg:flex-row'>
 							<li
 								className='flex items-center outline-none'
@@ -368,7 +379,7 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 					)}
 				</div>
 			</div>
-		</>
+		</div>
 	)
 }
 

components/Search.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
+import { Bot, ResponseProps, Server } from '@types'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import dynamic from 'next/dynamic'
-import { makeBotURL, makeServerURL, redirectTo } from '@utils/Tools'
 import Fetch from '@utils/Fetch'
-import { Bot, Server, ResponseProps } from '@types'
+import { makeBotURL, makeServerURL, redirectTo } from '@utils/Tools'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useRef, useState } from 'react'
 
 import Day from '@utils/Day'
 import useOutsideClick from '@utils/useOutsideClick'
@@ -12,7 +12,11 @@ import useOutsideClick from '@utils/useOutsideClick'
 const DiscordAvatar = dynamic(() => import('@components/DiscordAvatar'))
 const ServerIcon = dynamic(() => import('@components/ServerIcon'))
 
-const Search: React.FC = () => {
+interface SearchProps {
+	compact?: boolean
+}
+
+const Search: React.FC<SearchProps> = ({ compact = false }) => {
 	const router = useRouter()
 	const ref = useRef()
 	const [query, setQuery] = useState('')
@@ -101,12 +105,13 @@ const Search: React.FC = () => {
 	}
 
 	return (
+		<div className={`relative w-full z-10 ${compact ? '' : 'mt-5'}`}>
 			<div onFocus={() => setHidden(false)} ref={ref}>
-			<div className='relative z-10 mt-5 flex w-full rounded-lg bg-white text-black dark:bg-very-black dark:text-gray-100'>
+				<div className={`relative z-10 flex w-full items-center bg-white text-black dark:bg-very-black dark:text-gray-100 ${compact ? 'h-10 px-3 rounded-md' : 'rounded-lg'}`}>
 				<input
 					type='search'
 					maxLength={50}
-					className='h-16 grow border-0 border-none bg-transparent px-7 py-3 pr-20 text-xl shadow outline-none'
+					className={`grow border-0 border-none bg-transparent pr-20 shadow outline-none ${compact ? 'h-10 text-sm' : 'h-16 px-7 py-3 text-xl'}`}
 					placeholder='검색...'
 					value={query}
 					onChange={(e) => {
@@ -119,14 +124,14 @@ const Search: React.FC = () => {
 					}}
 				/>
 				<button
-					className='cusor-pointer absolute right-0 top-0 mr-5 mt-5 outline-none'
+					className='absolute right-4 top-1/2 -translate-y-1/2 outline-none'
 					onClick={onSubmit}
 				>
-					<i className='fas fa-search text-2xl text-gray-600 hover:text-gray-700' />
+					<i className={`fas fa-search text-gray-600 hover:text-gray-700 ${compact ? 'text-sm' : 'text-2xl'}`} />
 				</button>
 			</div>
 			<div className={`relative ${hidden ? 'hidden' : 'block'} z-50`}>
-				<div className='pin-t pin-l absolute my-2 h-60 w-full overflow-y-scroll rounded bg-white text-black shadow-md dark:bg-very-black dark:text-gray-100 md:h-80'>
+				<div className='absolute top-full mt-2 max-h-60 w-full overflow-y-auto rounded bg-white text-black shadow-md dark:bg-very-black dark:text-gray-100 md:h-80'>
 					<ul>
 						{data && data.code === 200 ? (
 							<div className='grid lg:grid-cols-2'>
@@ -172,7 +177,7 @@ const Search: React.FC = () => {
 								<li className='px-3 py-3.5'>검색중입니다...</li>
 							</ul>
 						) : (
-							<ul>
+							<ul className='px-3 py-3.5'>
 								{query && data ? (
 									data.message?.includes('문법') ? (
 										<li className='px-3 py-3.5'>
@@ -194,10 +199,10 @@ const Search: React.FC = () => {
 									)
 								) : query.length === 0 ? (
 									!recentSearch || !Array.isArray(recentSearch) || recentSearch.length === 0 ? (
-										<li className='px-3 py-3.5'>최근 검색 기록이 없습니다.</li>
+										<li >최근 검색 기록이 없습니다.</li>
 									) : (
 										<>
-											<li className='h-15 cursor-pointer px-3 py-2 font-semibold'>
+											<li className='h-15 cursor-pointer font-semibold'>
 												최근 검색어
 												<button
 													className='absolute right-0 pr-10 text-sm text-red-500 hover:opacity-90'
@@ -236,6 +241,7 @@ const Search: React.FC = () => {
 				</div>
 			</div>
 		</div>
+    </div>
 	)
 }
 

package.json

@@ -32,7 +32,6 @@
 		"difflib": "0.2.4",
 		"discord.js": "^14.12.1",
 		"emoji-mart": "3.0.1",
-		"erlpack": "0.1.4",
 		"express-rate-limit": "^5.3.0",
 		"firebase": "^11.2.0",
 		"firebase-admin": "^13.0.2",
@@ -101,5 +100,6 @@
 	"resolutions": {
 		"@types/react": "^17.0.15"
 	},
-	"license": "AGPL-3.0"
+	"license": "AGPL-3.0",
+	"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

pages/_app.tsx

@@ -1,28 +1,28 @@
-import Head from 'next/head'
+import { DefaultSeo } from 'next-seo'
 import App, { AppContext, AppProps } from 'next/app'
 import dynamic from 'next/dynamic'
+import Head from 'next/head'
 import { Router, useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import { DefaultSeo } from 'next-seo'
-import { GlobalHotKeys } from 'react-hotkeys'
 import NProgress from 'nprogress'
-import Package from '../package.json'
+import { useEffect, useState } from 'react'
 import ReactGA from 'react-ga'
+import { GlobalHotKeys } from 'react-hotkeys'
+import Package from '../package.json'
 
+import { Theme } from '@types'
+import { DESCRIPTION, shortcutKeyMap, THEME_COLOR, TITLE } from '@utils/Constants'
 import Logger from '@utils/Logger'
 import { handlePWA, parseCookie, parseDockerhubTag, systemTheme } from '@utils/Tools'
-import { DESCRIPTION, shortcutKeyMap, THEME_COLOR, TITLE } from '@utils/Constants'
-import { Theme } from '@types'
 
 const Footer = dynamic(() => import('@components/Footer'))
 const Navbar = dynamic(() => import('@components/Navbar'))
 const Modal = dynamic(() => import('@components/Modal'))
 
+import PlatformDisplay from '@components/PlatformDisplay'
+import '@fortawesome/fontawesome-free/css/all.css'
+import 'rc-tooltip/assets/bootstrap_white.css'
 import '../app.css'
 import '../github-markdown.css'
-import 'rc-tooltip/assets/bootstrap_white.css'
-import '@fortawesome/fontawesome-free/css/all.css'
-import PlatformDisplay from '@components/PlatformDisplay'
 
 // Progress Bar
 NProgress.configure({ showSpinner: false })

yarn.lock

@@ -4613,13 +4613,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-bindings@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
-  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
-  dependencies:
-    file-uri-to-path "1.0.0"
-
 body-scroll-lock@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
@@ -5547,14 +5540,6 @@ env-paths@^2.2.0:
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
   integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==
 
-erlpack@0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/erlpack/-/erlpack-0.1.4.tgz#018758a53206b8e9ba1f6c58a6766e3ba261a113"
-  integrity sha512-CJYbkEvsB5FqCCu2tLxF1eYKi28PvemC12oqzJ9oO6mDFrFO9G9G7nNJUHhiAyyL9zfXTOJx/tOcrQk+ncD65w==
-  dependencies:
-    bindings "^1.5.0"
-    nan "^2.15.0"
-
 err-code@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
@@ -6062,11 +6047,6 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-uri-to-path@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
-  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
-
 filelist@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.4.tgz#f78978a1e944775ff9e62e744424f215e58352b5"
@@ -8321,7 +8301,7 @@ mz@^2.7.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nan@^2.15.0, nan@^2.17.0:
+nan@^2.17.0:
   version "2.17.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==