fix(nav): 모바일 드로어 접근성 (aria-expanded·Esc·dialog role) + hover 클래스화

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-11 01:48:24 +09:00
parent 6d6d6f353a
commit 89dc5364d1

View File

@@ -58,6 +58,13 @@ export default function TopNav() {
} }
}, [open]); }, [open]);
useEffect(() => {
if (!open) return;
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open]);
const isActive = (href: string) => { const isActive = (href: string) => {
if (href === '/') return pathname === '/'; if (href === '/') return pathname === '/';
return pathname === href || pathname.startsWith(href + '/'); return pathname === href || pathname.startsWith(href + '/');
@@ -143,15 +150,13 @@ export default function TopNav() {
)} )}
<Link <Link
href="/outsourcing#contact" href="/outsourcing#contact"
className="hidden sm:inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold transition-colors duration-150" className="hidden sm:inline-flex items-center px-4 py-2 rounded-lg text-sm font-semibold transition-colors duration-150 hover:bg-[var(--jsm-accent-hover)]"
style={{ style={{
background: 'var(--jsm-accent)', background: 'var(--jsm-accent)',
color: '#ffffff', color: '#ffffff',
textDecoration: 'none', textDecoration: 'none',
letterSpacing: '-0.01em', letterSpacing: '-0.01em',
}} }}
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent-hover)'; }}
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--jsm-accent)'; }}
> >
</Link> </Link>
@@ -160,6 +165,7 @@ export default function TopNav() {
<button <button
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
aria-label="메뉴 열기" aria-label="메뉴 열기"
aria-expanded={open}
className="md:hidden p-2 rounded-lg transition-colors duration-150" className="md:hidden p-2 rounded-lg transition-colors duration-150"
style={{ color: 'var(--jsm-ink)' }} style={{ color: 'var(--jsm-ink)' }}
> >
@@ -182,6 +188,9 @@ export default function TopNav() {
className="absolute top-0 right-0 h-full w-72 flex flex-col shadow-xl" className="absolute top-0 right-0 h-full w-72 flex flex-col shadow-xl"
style={{ background: 'var(--jsm-surface)' }} style={{ background: 'var(--jsm-surface)' }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
role="dialog"
aria-modal="true"
aria-label="메뉴"
> >
{/* 드로어 헤더 */} {/* 드로어 헤더 */}
<div <div