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

feat: 네비게이션 바 UI 개선
2025-12-15 06:10:22 +00:00 · 2025-04-26 23:41:00 +09:00 · 2025-04-26 23:41:00 +09:00 · 14598019e8
commit 14598019e8
parent 6fad2e1369 e3e407af67
6 changed files with 57 additions and 60 deletions
--- a/components/Navbar.tsx
+++ b/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 (
-		<>
-			<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'>
+		<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 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
@ -60,13 +65,19 @@ const Navbar: React.FC<NavbarProps> = ({ token }) => {
 								dev ? 'dark:text-koreanbots-blue ' : ''
 							}logofont text-large whitespace-no-wrap mr-4 inline-block py-2 font-semibold uppercase leading-relaxed hover:text-gray-300 sm:text-2xl`}
 						>
-							{dev ? (
-								<>
-									<i className='fas fa-tools mr-1' /> DEVELOPERS
-								</>
-							) : (
-								'KOREANLIST'
-							)}
+              {dev ? (
+              <>
+                <i className='fas fa-tools mr-1' /> DEVELOPERS
+              </>
+              ) : (
+                <Image
+                  src={Logo}
+                  alt='Koreanbots'
+                  width={100}
+                  height={100}
+                  className='h-10 w-10'
+                />
+              )}
 						</Link>
 						<button
 							className='block cursor-pointer rounded border border-solid border-transparent bg-transparent px-3 py-1 text-xl leading-none outline-none focus:outline-none dark:text-gray-200 lg:hidden'
@ -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>
 	)
 }

--- a/components/Search.tsx
+++ b/components/Search.tsx
@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
-import { useRouter } from 'next/router'
-import Link from 'next/link'
-import dynamic from 'next/dynamic'
-import { makeBotURL, makeServerURL, redirectTo } from '@utils/Tools'
+import { Bot, ResponseProps, Server } from '@types'
 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 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 w-full z-10 ${compact ? '' : 'mt-5'}`}>
+			<div onFocus={() => setHidden(false)} ref={ref}>
+				<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>
 	)
 }

--- a/package.json
+++ b/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"
 }
--- a/pages/_app.tsx
+++ b/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 })
--- a/public/logo-transparent.png
+++ b/public/logo-transparent.png
--- a/yarn.lock
+++ b/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==