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([])); .catch(() => setCategories([]));
}, []); }, []);
return ( return (
<header className="flex items-center justify-between px-4 py-3 bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60"> <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"> <div className="flex items-center gap-3 z-[100]">
<button <button
aria-label="메뉴 열기" aria-label="메뉴 열기"
aria-expanded={mobileOpen} aria-expanded={mobileOpen}
aria-controls="mobile-menu" aria-controls="mobile-menu"
onClick={() => setMobileOpen((v) => !v)} 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="flex flex-col items-center justify-center gap-1">
<span className="block h-0.5 w-4 bg-neutral-800" /> <span className="block h-0.5 w-4 bg-neutral-800" />
@@ -33,7 +33,7 @@ export function AppHeader() {
</span> </span>
</button> </button>
<Link href="/" aria-label="홈" className="shrink-0"> <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> </Link>
</div> </div>
<nav className="flex items-center gap-4"> <nav className="flex items-center gap-4">
@@ -86,13 +86,11 @@ export function AppHeader() {
</div> </div>
</nav> </nav>
{mobileOpen && ( {mobileOpen && (
<div id="mobile-menu" role="dialog" aria-modal="true" className="fixed inset-0 z-50 bg-black/40" onClick={() => setMobileOpen(false)}> <div className="fixed inset-0 h-[100vh] z-40 bg-black/60 backdrop-blur-sm" 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="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 flex items-center justify-between"> <div className="mb-3 h-10 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> </div>
<div className="hiddenflex-col gap-3"> <div className="flex flex-col gap-3">
<SearchBar /> <SearchBar />
{categories.map((cat) => ( {categories.map((cat) => (
<div key={cat.id}> <div key={cat.id}>

2
src/app/layout.tsx
View File

@@ -23,7 +23,7 @@ export default function RootLayout({
<ToastProvider> <ToastProvider>
<div className="min-h-screen flex flex-col"> <div className="min-h-screen flex flex-col">
<div className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur"> <div className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur">
<div className="mx-auto px-4"> <div className="mx-auto">
<AppHeader /> <AppHeader />
</div> </div>
</div> </div>