사내 콘솔에 사이드바 내비게이션을 만들어요. 세 화면(개요·리포트·설정) 어디에서나 사이드바가 보이고, 메뉴를 누르면 그 화면으로 이동해요. 사이드바는 접기 버튼으로 접었다 펼 수 있고, 지금 보고 있는 화면의 메뉴는 강조돼요. Sidebar 컴포넌트를 만들어 세 화면에 적용하세요. 메뉴 항목은 lib/nav.ts 의 NAV_ITEMS 에 준비돼 있어요. (세 페이지의 본문 내용은 완성돼 있어요.) Note: Next.js App Router 프로젝트입니다. 접기/펼치기와 현재 메뉴 강조가 동작해야 해요.
Next.js 앱 라우터로 만든 사내 콘솔에 사이드바 내비게이션을 붙이는 문제입니다. 개요·리포트·설정 세 화면 어디에서나 사이드바가 보이고, 접기 버튼과 현재 화면 메뉴 강조가 동작해야 합니다. 여러 화면에서 함께 쓰이는 화면 요소를 어떻게 구성하는지 검증하는 능력을 연습합니다.
사이드바·헤더처럼 어느 화면에나 나오는 요소는 모든 앱에 있습니다. 한 화면에서는 멀쩡히 동작하는 코드라도, 화면이 늘어나고 이동이 잦아지면 그 요소를 어디에 두었는지가 사용 경험과 유지보수를 좌우합니다. 이 문제는 함께 쓰는 내비게이션을 갖춘 여러 화면 콘솔을 다루며, 화면 간 이동까지 포함해 확인하는 습관을 연습합니다.