🤖
445 in / 684 out / 1129 total tokens
어드민 페이지 네비게이션을 모바일에서도 쓸 수 있게 수정했다.
기존엔 사이드바가 md:block hidden으로 처리되어 있어 모바일에선 네비게이션이 아예 보이지 않았다. 이번에 모바일에선 상단 가로 탭으로, 데스크톱에선 기존 사이드바가 표시되도록 반응형 레이아웃을 분기했다.
<div className="mx-auto flex max-w-container flex-col gap-4 px-4 py-6 md:flex-row md:gap-8 md:px-8 md:py-8">
{/* 모바일: 상단 가로 탭 */}
<nav className="flex gap-2 overflow-x-auto md:hidden">
{adminNav.map((item) => (
<Link
key={item.href}
href={item.href}
className="flex-shrink-0 rounded-lg px-4 py-2 text-sm"
>
{item.label}
</Link>
))}
</nav>
{/* 데스크톱: 기존 사이드바 */}
<aside className="hidden w-[200px] flex-shrink-0 md:block">
...
</aside>
</div>가로 스크롤 가능한 탭으로 만들어 메뉴가 많아져도 대응할 수 있게 했다.
이제 모바일에서도 어드민 메뉴 이동이 가능하다.