motaju/msgapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

헤더수정

Browse Source
This commit is contained in:
mota
2025-10-13 09:45:53 +09:00
parent da4a555d2f
commit 8414512709
2 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/components/AppHeader.tsx
View File

@@ -17,14 +17,14 @@ export function AppHeader() {
.catch(() => setCategories([]));
}, []);
return (
<header className="flex items-center justify-between px-4 py-3 bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60">
<div className="flex items-center gap-3">
<header className="relative flex items-center justify-between px-4 py-3 border-b bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60">
<div className="flex items-center gap-3 z-[100]">
<button
aria-label="메뉴 열기"
aria-expanded={mobileOpen}
aria-controls="mobile-menu"
onClick={() => setMobileOpen((v) => !v)}
className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-neutral-200 xl:hidden"
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 xl:hidden"
>
<span className="flex flex-col items-center justify-center gap-1">
<span className="block h-0.5 w-4 bg-neutral-800" />
@@ -33,7 +33,7 @@ export function AppHeader() {
</span>
</button>
<Link href="/" aria-label="홈" className="shrink-0">
<Image src="/logo.png" alt="logo" width={120} height={28} priority />
<Image src="/logo.png" alt="logo" width={120} height={28} priority className="w-20 md:w-28 xl:w-[120px] h-auto" />
</Link>
</div>
<nav className="flex items-center gap-4">
@@ -86,13 +86,11 @@ export function AppHeader() {
</div>
</nav>
{mobileOpen && (
<div id="mobile-menu" role="dialog" aria-modal="true" className="fixed inset-0 z-50 bg-black/40" onClick={() => setMobileOpen(false)}>
<div className="absolute left-0 top-0 h-full w-4/5 max-w-sm bg-white p-4 shadow-xl" onClick={(e) => e.stopPropagation()}>
<div className="mb-3 flex items-center justify-between">
<strong>메뉴</strong>
<button aria-label="닫기" className="text-sm text-neutral-600 hover:text-neutral-900" onClick={() => setMobileOpen(false)}>닫기</button>
<div className="fixed inset-0 h-[100vh] z-40 bg-black/60 backdrop-blur-sm" onClick={() => setMobileOpen(false)}>
<div className="absolute left-0 xl:top-0 h-[100vh] w-4/5 max-w-sm bg-white p-4 shadow-xl overflow-y-auto" onClick={(e) => e.stopPropagation()}>
<div className="mb-3 h-10 flex items-center justify-between">
</div>
<div className="hiddenflex-col gap-3">
<div className="flex flex-col gap-3">
<SearchBar />
{categories.map((cat) => (
<div key={cat.id}>