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

사이드바 수정
All checks were successful
deploy-on-main / deploy (push) Successful in 27s
Details

Browse Source
This commit is contained in:
koreacomp5
2025-11-05 23:45:13 +09:00
parent a646dfd09f
commit c7d5679788
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -353,15 +353,15 @@ export function AppHeader() {
aria-expanded={mobileOpen}
aria-controls="mobile-menu"
onClick={() => setMobileOpen((v) => !v)}
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 xl:hidden"
className="group inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 hover:border-neutral-300 hover:bg-neutral-100 transition-colors cursor-pointer xl:hidden"
>
<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" />
<span className="block h-0.5 w-4 bg-neutral-800" />
<span className="block h-0.5 w-4 bg-neutral-800 group-hover:bg-[var(--red-50,#F94B37)] transition-colors" />
<span className="block h-0.5 w-4 bg-neutral-800 group-hover:bg-[var(--red-50,#F94B37)] transition-colors" />
<span className="block h-0.5 w-4 bg-neutral-800 group-hover:bg-[var(--red-50,#F94B37)] transition-colors" />
</span>
</button>
<Link href="/" aria-label="홈" className="shrink-0">
<Link href="/" aria-label="홈" className="shrink-0 flex items-center">
<SinglePageLogo width={120} height={28} className="w-20 xl:w-[120px] h-auto" />
</Link>
</div>
@@ -477,9 +477,17 @@ export function AppHeader() {
</Link>
</div>
</nav>
{mobileOpen && (
<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-11/12 max-w-md bg-white p-4 shadow-xl overflow-y-auto" onClick={(e) => e.stopPropagation()}>
<div
className={`fixed inset-0 h-[100vh] z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${mobileOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
onClick={() => setMobileOpen(false)}
aria-hidden={!mobileOpen}
>
<div
className={`absolute left-0 xl:top-0 h-[100vh] w-11/12 max-w-md bg-white p-4 shadow-xl overflow-y-auto transition-transform duration-300 ${mobileOpen ? "translate-x-0" : "-translate-x-full"}`}
onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
>
<div className="mb-3 h-10 flex items-center justify-between">
</div>
<div className="flex flex-col gap-4">
@@ -497,7 +505,13 @@ export function AppHeader() {
</div>
</div>
) : (
<div className="text-sm text-neutral-600">로그인 정보를 불러오는 중...</div>
<div className="flex items-center gap-3 animate-pulse">
<div className="w-12 h-12 rounded-full bg-neutral-200" />
<div className="flex-1 min-w-0">
<div className="h-3 w-1/2 bg-neutral-200 rounded" />
<div className="mt-2 h-3 w-1/3 bg-neutral-200 rounded" />
</div>
</div>
)}
<div className="grid grid-cols-3 gap-2 mt-3">
<Link href="/my-page?tab=points" onClick={() => setMobileOpen(false)} className="h-9 rounded-md border border-neutral-300 text-xs flex items-center justify-center hover:bg-neutral-100">포인트 히스토리</Link>
@@ -530,8 +544,7 @@ export function AppHeader() {
</div>
</div>
</div>
</div>
)}
</div>
</header>
);
}