모바일 빌링 내비게이션 프런트엔드 핸드오프

구조

• Layout: src/views/billing/_core/LineLayoutView.vue
• Header/trigger: src/components/billing/_core/shell/LineHeaderOrg.vue
• Desktop navigation: LineAsideOrg.vue
• Mobile sheet: LineSheetAsideOrg.vue
• Navigation SSOT: src/composables/billingLines.js

64rem 이상에서는 LineLayoutView의 aside가 보이고 header menu trigger는 숨는다. 64rem 미만에서는 aside가 숨고 menu trigger가 보인다.

trigger와 close 버튼은 native command invoker를 사용한다. LineSheetAsideOrg는 별도 메뉴를 정의하지 않고 LineAsideOrg를 재사용한다. close-target이 전달된 경우 각 라우트 버튼에 command="close"와 commandfor를 부여해 이동 후 sheet를 닫는다.

디자인 정본

• leysys-design/docs/decisions/RESPONSIVE-APP-SHELL-NAV-2026-07-11.md
• leysys-design/docs/decisions/MOBILE-APP-SIDEBAR-8PX-INSET-2026-07-19.md
• leysys-design/src/components/pattern-app/layout/MainOrg.vue

로컬 CSS·viewport JS·별도 open 상태를 추가하지 않는다. breakpoint를 바꿀 때는 aside와 trigger의 상보 조건을 함께 바꾼다.

회귀

LineResponsiveNavigation.spec.js가 trigger/sheet target, sheet-body-flush, SidebarBody > SidebarGroup > SidebarGroupContent > SidebarMenu(flush), route button close 배선을 잠근다. 전체 route integrity와 빌드도 함께 실행한다.