docs(ai): allow LNB only and prohibit sidebars in GNB and Dashboard

This commit is contained in:
shkim4 committed 2026-10-08 19:14:28 +09:00
1 parent 4f0b39c673
commit 4a37430903
2 files changed
+26 -24

No files matched your search

+6 -6
View File
@@ -9,7 +9,7 @@
3. **Pattern 검색**: `packages/ui/src/patterns/`, `src/patterns/`, `packages/ui/src/index.ts`와 `docs/patterns/`에서 맞는 Pattern·공개 API를 찾아 구조와 상태 규칙을 따른다.
4. **Storybook 확인**: `src/components/`, `src/patterns/`, `src/theme/`의 대표 `All` Story와 관련 문서를 확인한다. `verification` 전용 Story는 일반 화면의 기준으로 쓰지 않는다. Storybook을 실행할 수 없으면 Story 소스와 문서만 확인하고 시각 동작은 추측하지 않는다.
5. **Theme 연결**: `themes/default.json`, `packages/ui/src/theme.css`, Runtime 계약과 Token 가이드를 확인해 기존 CSS Custom Properties 구조를 사용한다.
6. **화면 구성**: Component와 Pattern을 조합하고 아래 단일 Navigation 정책을 지킨다. 신규 AI Production 업무 화면에는 사용자 요청 여부와 관계없이 Sidebar·GNB 내부 Sidebar Composition·좌측 사이드 메뉴 형태의 LNB를 생성·적용하지 않는다. 허용 범위에서 요청에 명시된 Navigation만 사용하며, 미지정이면 Sidebar 없이 기존 화면 구조에 콘텐츠를 배치한다. Sidebar 대신 다른 Navigation을 임의로 추가하지 않는다. 기존 구성으로 해결되지 않을 때만 새 Component를 검토한다.
6. **화면 구성**: Component와 Pattern을 조합하고 아래 단일 Navigation 정책을 지킨다. 신규 AI Production 업무 화면에서 LNB ONLY는 기존 공식 LNB 메뉴와 좌측 LNB Navigation을 정상 생성·사용한다. GNB ONLY는 기존 공식 GNB를 사용하되 Sidebar·GNB Sidebar Composition을 자동·수동 요청 모두 적용하지 않으며, DASHBOARD ONLY는 Sidebar/LNB를 생성하지 않는다. Navigation 미지정 시 기존 모드 선택 규칙을 따르며 임의 Sidebar·Drawer·대체 메뉴를 추가하지 않는다. 기존 구성으로 해결되지 않을 때만 새 Component를 검토한다.
7. **결과 확인 및 보고**: 실제 적용한 Component·Pattern, Theme 연결, Navigation Mode, 실행/화면 확인 결과와 미검증 항목을 보고한다.
**Storybook / 화면 생성 분리**: Storybook은 기존 Component·Pattern·Theme·Variant·State·Interaction을 확인하는 Reference 환경이다. 일반 업무 화면 생성은 Storybook Story·사이드바에 등록하지 않고, 기존 대표 Story를 생성 화면으로 교체하지 않으며, Storybook 실행을 필수 확인 경로로 요구하지 않는다. 별도의 React 화면과 독립 미리보기를 만들고 화면별 빌드·필요한 검증을 수행한다. H-2(AI 생성 화면의 자동 빌드·캡처·검증, Storybook 배포와 별도이며 구현 완료 여부는 현재 파일로 확인)나 유사 자동화가 사용 가능한 경우에도 `preview.html`·desktop/mobile 이미지 같은 독립 미리보기 산출에만 사용하며 Storybook 등록과 혼동하지 않는다. Storybook 수정은 Component/Pattern 추가·수정, 대표/Verification Story 작성 또는 Storybook Reference 개선을 사용자가 명시한 경우에만 허용한다. Storybook 전용 helper/CSS는 운영 화면에 사용하지 않는다.
@@ -20,7 +20,7 @@
**Story 구분**: 운영 기준은 대표 `All` Story이고 `verification`·Compatibility·Fixture Story는 운영 예제가 아니다. Storybook 문서 화면은 `StoryPage` 공통 Inner를 사용하며, 이는 Storybook 표현용으로 `@hm-design/ui` 공개 API가 아니다.
**화면 생성 시 필수 확인**: Navigation을 지정받으면 AI 신규 Production 화면의 Sidebar 절대 금지 범위에서 기존 공식 Component·Composition으로 적용하고, 미지정이면 Sidebar 없이 기존 화면 구조를 유지하며 그 근거를 기록한다([선택 기준](docs/guidelines/navigation-single-mode.md#선택-근거)). 요청에 Sidebar·GNB 내부 Sidebar·좌측 사이드 메뉴 형태의 LNB가 포함되면 금지 규칙을 안내하고 해당 기능을 구현하지 않으며, 대체 Navigation을 임의로 추가하지 않는다. GNB는 Desktop 메뉴와 `GNBMobileMenu`를 함께 구성한다([GNB 모바일](docs/patterns/gnb.md#8-desktop--mobile)). Dashboard 운영 화면에는 Sidebar를 생성하지 않는다. `DashboardSidebar` 공개 Export와 선택적 `sidebar` slot은 기존 호환성·검증용이며 운영 허용을 뜻하지 않는다. Dashboard 상태는 Theme 다음에 공개 Status CSS를 로드하고 기존 Badge mapping을 소비한다([상태 예제](docs/patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)). FilterBar의 입력 조건과 조회 적용 조건·초기화 책임을 구분한다([조회 예제](docs/patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제)). `REACT_VITE` 독립 화면은 bootstrap에서 기존 앱 CSS entry(`@/index.css` → `@/hm-theme.css` → 필요 시 공개 상태 CSS)를 로드하며, `@hm-design/ui/tailwind.css`만 단독 import하지 않는다. 빌드 후 `.flex`, `.grid` 등 대표 utility의 생성·실제 적용과 캡처 레이아웃을 확인하고, 빌드 성공만으로 화면 검증을 PASS 처리하지 않는다. React 소비자는 Tailwind 검색 범위와 HM package source를 확인하고([Tailwind](docs/guidelines/runtime-portability.md#21-tailwind-v4-소비자-검색-범위)), 폰트·Asset 경로는 실행 위치별로 확인한다([Asset](docs/guidelines/runtime-portability.md#4-asset과-실행-위치)).
**화면 생성 시 필수 확인**: Navigation을 지정받으면 아래 모드별 정책에 따라 기존 공식 Component를 적용하고, 미지정이면 기존 모드 선택 규칙을 따르며 그 근거를 기록한다([선택 기준](docs/guidelines/navigation-single-mode.md#선택-근거)). LNB ONLY의 정상적인 공식 LNB 생성은 Sidebar 금지 대상에서 명시적으로 제외한다. GNB ONLY의 Sidebar·GNB Sidebar Composition 또는 DASHBOARD ONLY의 Sidebar/LNB가 요청되면 금지 규칙을 안내하고 해당 기능을 구현하지 않으며, 대체 Navigation을 임의로 추가하지 않는다. GNB는 Desktop 메뉴와 `GNBMobileMenu`를 함께 구성한다([GNB 모바일](docs/patterns/gnb.md#8-desktop--mobile)). Dashboard 운영 화면에는 Sidebar를 생성하지 않는다. `DashboardSidebar` 공개 Export와 선택적 `sidebar` slot은 기존 호환성·검증용이며 운영 허용을 뜻하지 않는다. Dashboard 상태는 Theme 다음에 공개 Status CSS를 로드하고 기존 Badge mapping을 소비한다([상태 예제](docs/patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)). FilterBar의 입력 조건과 조회 적용 조건·초기화 책임을 구분한다([조회 예제](docs/patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제)). `REACT_VITE` 독립 화면은 bootstrap에서 기존 앱 CSS entry(`@/index.css` → `@/hm-theme.css` → 필요 시 공개 상태 CSS)를 로드하며, `@hm-design/ui/tailwind.css`만 단독 import하지 않는다. 빌드 후 `.flex`, `.grid` 등 대표 utility의 생성·실제 적용과 캡처 레이아웃을 확인하고, 빌드 성공만으로 화면 검증을 PASS 처리하지 않는다. React 소비자는 Tailwind 검색 범위와 HM package source를 확인하고([Tailwind](docs/guidelines/runtime-portability.md#21-tailwind-v4-소비자-검색-범위)), 폰트·Asset 경로는 실행 위치별로 확인한다([Asset](docs/guidelines/runtime-portability.md#4-asset과-실행-위치)).
## AI Implementation Defaults
@@ -32,7 +32,7 @@
- Storybook은 구현 Reference Catalog다. 대표/PRIMARY Story의 시각 언어와 공통 상태 mapping을 재사용하고 검증 전용 Story를 운영 예제로 삼지 않는다. 신규 업무 화면의 등록 대상이 아니며, 생성 결과는 별도 React 화면·독립 미리보기로 제공한다.
- Theme은 구현 시작부터 적용한다. 기존 Semantic Token → 해당 Component Token → 기존 CSS Variable을 먼저 확인하고, 없을 때만 필요한 최소 Semantic 확장을 검토한다. 기존 Token이 있는 색상·spacing·값을 하드코딩하거나 같은 Token을 여러 파일에 중복 정의하지 않는다.
- Theme 사용은 별도 승인 없이 기본 적용한다. Theme Source/값 수정은 명시적 필요성과 영향 범위를 확인한다. `themes/*.json` → Runtime Loader → CSS Custom Properties → Semantic → Component Mapping과 Primary / On Accent의 독립 fallback을 유지한다.
- 한 페이지에 `GNB | LNB | DASHBOARD` 중 하나만 사용한다. 신규 AI Production 업무 화면에는 아래 Sidebar 절대 금지를 우선 적용하며 좌측 사이드 메뉴 형태의 LNB를 선택하지 않는다. 반응형도 같은 Navigation Mode를 유지한다.
- 한 페이지에 `GNB | LNB | DASHBOARD` 중 하나만 사용한다. 신규 AI Production 업무 화면에서 LNB ONLY의 공식 LNB는 허용하고 GNB ONLY·DASHBOARD ONLY의 Sidebar는 금지한다. 반응형도 같은 Navigation Mode를 유지한다.
- 화면 구현 순서는 Quick Start를 따른다. 변경 작업 범위(STORYBOOK_ONLY | PRODUCTION_UI | BOTH)는 구현 전에 정한다.
- package exports, public props/types, package entry, Story ID, `meta.title`을 불필요하게 변경하지 않는다. 필요한 변경은 소비처·호환성 영향을 먼저 확인한다. Storybook 표현 문제와 Production 동작 문제는 해당 범위에서 해결한다.
- Badge/Button/FilterBar를 재사용하더라도 동일한 상태 ID·라벨·필터 매칭이 반복되면 화면별 helper로 남기지 말고 Runtime-neutral 상태 계약을 먼저 검토한다. 계약은 React 구현과 분리하고 `data-status`, 독립 flag attribute, `aria-pressed` 등 다른 Runtime이 재현할 수 있는 상태 vocabulary를 정의한다.
@@ -59,13 +59,13 @@
**ONE PAGE = ONE NAVIGATION MODE = ONE HEADER/NAVIGATION EXPERIENCE**
- 페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 선택한다. 신규 AI Production 업무 화면에는 아래 Sidebar 절대 금지를 우선 적용하며 좌측 사이드 메뉴 형태의 LNB를 선택하지 않는다.
- 기존 Navigation 계약의 허용 모드: GNB ONLY, LNB ONLY, DASHBOARD ONLY. 신규 AI Production 업무 화면의 GNB ONLY는 Sidebar 없는 구성으로 사용하며 DASHBOARD ONLY의 기존 계약을 유지한다.
- 페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 선택한다. 신규 AI Production 업무 화면에서 LNB ONLY의 공식 LNB는 허용하고 GNB ONLY·DASHBOARD ONLY의 Sidebar는 금지한다.
- 허용 모드: GNB ONLY, LNB ONLY, DASHBOARD ONLY. 신규 AI Production 업무 화면의 LNB ONLY는 기존 공식 LNB 메뉴와 좌측 LNB Navigation을 정상 생성·사용한다. GNB ONLY는 기존 공식 GNB와 Sidebar 없는 구성으로 사용하고, DASHBOARD ONLY는 전용 48px Header·기존 최소 폭·스크롤 계약을 유지하며 Sidebar/LNB를 생성하지 않는다.
- 기존 GNB ONLY 내부 Sidebar는 LNB 부품을 재사용하는 Composition이며 독립 LNB Mode가 아니다. 이 계약은 기존 Component·Pattern·Storybook 보존용이며 신규 AI Production 업무 화면에서는 사용을 금지한다. 기존 구성의 브랜드·사용자와 모바일 Header/Sheet는 GNB 하나가 담당한다([상세 범위](docs/guidelines/navigation-single-mode.md#gnb-only-내부-sidebar)).
- 금지: GNB + LNB, GNB + Dashboard, LNB + Dashboard, GNB + LNB + Dashboard.
- 이 정책은 AI 기반 코드 생성·제안, 신규 페이지 구현, 기존 화면 수정, 프로토타입, Storybook, 실제 Production 구현 전체에 동일하게 적용한다.
- AI는 별도 요청이 없는 한 Navigation 조합을 생성하거나 제안하지 않는다. 별도 요청이 있더라도 기존 단일 모드 정책과 충돌함을 알리고 정책 변경인지 기술 검증인지 구분한다.
- 신규 AI Production 업무 화면에서는 사용자 요청 여부와 관계없이 Sidebar 생성·사용을 절대 금지한다. 기존 GNB Sidebar Composition과 좌측 사이드 메뉴 형태의 LNB도 생성·적용하지 않는다. 임의 Drawer·Collapsible Sidebar 및 Sidebar 전용 Component·CSS·Width 규칙을 생성하지 않는다. 요청에 Sidebar가 포함되면 금지 규칙을 안내하고 해당 기능을 구현하지 않으며, Sidebar 대신 다른 Navigation을 임의로 추가하거나 메뉴를 추측하지 않는다. 이 정책은 AI의 신규 Production 업무 화면 생성에만 적용하고, 기존 HMDesign Component·Pattern·Storybook의 Sidebar/LNB 기능과 API·Variant는 삭제하거나 변경하지 않는다. 상세 기준은 [AI Sidebar 생성 정책](docs/guidelines/navigation-single-mode.md#ai-sidebar-생성-정책)을 따른다.
- 신규 AI Production 업무 화면에서 GNB ONLY·DASHBOARD ONLY의 Sidebar는 사용자 요청 여부와 관계없이 생성·사용을 금지한다. GNB Sidebar Composition은 자동·수동 요청 모두 적용하지 않으며, DASHBOARD ONLY에는 LNB도 생성하지 않는다. LNB ONLY의 기존 공식 LNB 메뉴·좌측 LNB Navigation의 정상 생성·사용은 금지 대상에서 명시적으로 제외한다. 임의 Sidebar·Drawer·Collapsible Sidebar·대체 메뉴와 이를 위한 전용 Component·CSS·Width 규칙을 생성하지 않는다. 금지된 구성이 요청되면 금지 규칙을 안내하고 해당 기능을 구현하지 않으며, 다른 Navigation을 임의로 추가하거나 메뉴를 추측하지 않는다. Navigation 미지정 시 기존 모드 선택 규칙을 따른다. 이 정책은 AI의 신규 Production 업무 화면 생성에만 적용하고, 기존 HMDesign Component·Pattern·Storybook의 Sidebar/LNB 기능과 API·Variant는 삭제하거나 변경하지 않는다. 상세 기준은 [AI Sidebar 생성 정책](docs/guidelines/navigation-single-mode.md#ai-sidebar-생성-정책)을 따른다.
- 반응형에서도 선택한 체계를 유지한다. LNB Desktop(≥1024px) → LNB Mobile Header(≤1023px)는 같은 LNB Mode이며 GNB로 전환하지 않는다.
- Dashboard 운영 화면은 전용 Header/Menu와 Content만 사용하며 Sidebar는 금지한다. 외부 GNB나 일반 LNB를 slot에 넣지 않는다. 기존 `DashboardSidebar`와 `sidebar` slot은 호환성·검증용으로 유지하며 신규 운영 화면에 사용하지 않는다.
- Dashboard Header는 GNB가 아니다. Dashboard 화면은 Dashboard Pattern과 대표 Story를 따르고, Header의 역할을 GNB로 대체하지 않는다.
+20 -18
View File
@@ -1,6 +1,6 @@
# Navigation Single Mode Policy
2026-10-07 사용자 확정 정책. 이전 GNB/LNB/Dashboard 조합 기준을 대체한다. 2026-10-08 AI 신규 Production 업무 화면의 Sidebar 절대 금지로 정정했다. 기존 Component·Pattern·Storybook의 Sidebar/LNB 계약과 DASHBOARD ONLY의 기존 운영 계약은 유지한다.
2026-10-07 사용자 확정 정책. 이전 GNB/LNB/Dashboard 조합 기준을 대체한다. 2026-10-08 AI 신규 Production 업무 화면에서 LNB ONLY의 공식 LNB 생성을 허용하고 GNB ONLY·DASHBOARD ONLY의 Sidebar를 금지하는 최종 정책으로 정정했다. 기존 Component·Pattern·Storybook의 Sidebar/LNB 계약과 DASHBOARD ONLY의 기존 운영 계약은 유지한다.
**ONE PAGE = ONE NAVIGATION SYSTEM = ONE HEADER/NAVIGATION EXPERIENCE**
@@ -10,31 +10,31 @@ AI 기반 코드 생성과 제안, 신규 페이지 구현, 기존 화면 수정
## 모드 선택
페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 결정한다. 이 표기는 페이지 설계 계약이며 현재 공통 Page 컴포넌트의 prop이 아니다. 아래 표는 기존 Navigation 계약이며, AI 신규 Production 업무 화면에는 [AI Sidebar 생성 정책](#ai-sidebar-생성-정책)을 우선 적용한다. 이 범위에서 GNB ONLY는 Sidebar 없는 구성으로 사용하고 좌측 사이드 메뉴 형태의 LNB는 선택하지 않는다.
페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 결정한다. 이 표기는 페이지 설계 계약이며 현재 공통 Page 컴포넌트의 prop이 아니다. 아래 표는 AI 신규 Production 업무 화면의 허용 구조이며 [AI Sidebar 생성 정책](#ai-sidebar-생성-정책)을 함께 적용한다. LNB ONLY의 정상적인 공식 LNB 생성은 Sidebar 금지 대상에서 명시적으로 제외한다. GNB ONLY는 Sidebar 없는 구성으로 사용하며 DASHBOARD ONLY는 기존 계약을 유지한다.
| 선택 | 허용 구조 | 함께 사용하지 않는 체계 |
|---|---|---|
| GNB | Page → GNB Header + Content, 또는 GNB Header + 내부 Sidebar + Content | 독립 LNB Mode, Dashboard |
| LNB | Page → LNB + Content | GNB, Dashboard |
| GNB | Page → 기존 공식 GNB Header + Content, Sidebar 없음 | 모든 Sidebar 및 GNB Sidebar Composition, 독립 LNB Mode, Dashboard |
| LNB | Page → 기존 공식 LNB 메뉴·좌측 LNB Navigation + Content | GNB, Dashboard |
| DASHBOARD | Page → Dashboard 전용 Header(48px)·업무 상태 필터 + Content, Sidebar 없음 | 모든 Sidebar, 외부 GNB, 일반 LNB |
독립 Navigation Mode를 결합하는 GNB + LNB, GNB + Dashboard, LNB + Dashboard, GNB + LNB + Dashboard는 모두 금지한다. 기존 GNB ONLY 내부 Sidebar의 구현 부품 재사용 계약은 보존하되, AI 신규 Production 업무 화면의 사용은 금지한다. 콘텐츠의 Breadcrumb, Filter Bar, 사용자 Dropdown 등은 새로운 페이지 Navigation Mode가 아니다.
## AI Sidebar 생성 정책
AI의 신규 Production 업무 화면 생성에만 적용한다. 사용자 요청이나 기존 공식 Composition 사용에 따른 허용 예외는 없다. 기존 HMDesign Component·Pattern·Storybook에서 제공하는 Sidebar/LNB 기능과 API·Variant는 삭제하거나 변경하지 않는다.
AI의 신규 Production 업무 화면 생성에만 적용한다. LNB ONLY의 정상적인 공식 LNB 생성·사용은 Sidebar 금지 대상에서 명시적으로 제외한다. GNB ONLY·DASHBOARD ONLY의 Sidebar 금지는 사용자 요청이나 기존 공식 Composition 사용으로 해제되지 않는다. 기존 HMDesign Component·Pattern·Storybook에서 제공하는 Sidebar/LNB 기능과 API·Variant는 삭제하거나 변경하지 않는다.
- 사용자 요청 여부와 관계없이 Sidebar 생성·사용을 절대 금지한다.
- 기존 GNB Sidebar Composition도 사용하지 않으며, 좌측 사이드 메뉴 형태의 LNB를 생성·적용하지 않는다.
- 임의 Drawer·Collapsible Sidebar를 생성하지 않는다. Sidebar 전용 Component·CSS·Width 규칙도 생성하지 않는다.
- 요청에 Sidebar·GNB 내부 Sidebar·좌측 사이드 메뉴 형태의 LNB가 포함되면 금지 규칙을 안내하고 해당 기능을 구현하지 않는다.
- Sidebar 대신 다른 Navigation을 임의로 추가하지 않는다. Drawer·Hamburger Menu 등 대체 Navigation이나 업무 메뉴를 추측하여 구성하지 않는다.
- 허용 범위에서 요청에 명시된 Navigation만 사용한다. Navigation 명세가 없으면 Sidebar 없이 기존 화면 구조에 콘텐츠를 배치하고 기존 Production Layout 계약을 따른다. Storybook의 Navigation Reference는 계약 확인용이며 Sidebar/LNB 예제를 신규 업무 화면에 적용하지 않는다. Sidebar 없는 GNB ONLY의 기존 모바일 Header·`GNBMobileMenu`와 DASHBOARD ONLY의 기존 계약은 유지한다.
- **LNB ONLY**: 기존 공식 LNB 메뉴와 좌측 LNB Navigation을 정상 생성·사용한다. GNB 또는 Dashboard와 혼합하지 않는다.
- **GNB ONLY**: 기존 공식 GNB를 사용하며 Sidebar를 생성하지 않는다. GNB Sidebar Composition은 자동·수동 요청 모두 AI 신규 화면에 적용하지 않는다. 기존 모바일 Header·`GNBMobileMenu` 계약은 유지한다.
- **DASHBOARD ONLY**: 기존 전용 48px Header·업무 상태 필터·Content를 사용하며 Sidebar/LNB를 생성하지 않는다. 기존 960px 최소 폭과 그 이하의 Dashboard 내부 가로 스크롤 계약을 유지한다.
- **공통**: 세 Navigation 모드를 혼합하지 않는다. 임의 Sidebar·Drawer·Collapsible Sidebar·대체 메뉴와 이를 위한 전용 Component·CSS·Width 규칙을 생성하지 않는다. 공식 LNB ONLY의 Component·CSS·Width 및 모바일 Header·Sheet는 기존 계약을 사용한다.
- 금지된 구성이 요청되면 금지 규칙을 안내하고 해당 기능을 구현하지 않는다. Sidebar 대신 다른 Navigation을 임의로 추가하거나 Drawer·Hamburger Menu 등 대체 Navigation·업무 메뉴를 추측하여 구성하지 않는다.
- Navigation 모드가 지정되지 않았다면 아래 기존 [선택 근거](#선택-근거)를 따르며 임의로 Sidebar를 추가하지 않는다. Storybook의 Navigation Reference는 계약 확인용으로 사용하고, 공식 LNB ONLY Reference는 재사용하되 GNB Sidebar 예제는 AI 신규 화면에 적용하지 않는다.
## 선택 근거
1. 사용자 요청에 모드가 있으면 허용 범위에서 적용한다. AI 신규 Production 화면에 Sidebar·GNB 내부 Sidebar·좌측 사이드 메뉴 형태의 LNB가 요청되면 절대 금지를 안내하고 해당 기능을 구현하지 않는다. 다른 Navigation으로 임의 대체하지 않는다. 요청이 독립 모드 혼합을 포함하면 이 정책과의 충돌을 기록하고 정책 변경인지 기술 검증인지 확인한다.
2. 미지정이면 제공된 화면의 Navigation 구조와 현재 대표 Story를 대조하되, 신규 AI Production 화면은 위 [AI Sidebar 생성 정책](#ai-sidebar-생성-정책)에 따라 Sidebar 없이 기존 구조에 콘텐츠를 배치하고 새 Navigation 영역을 자동 추가하지 않는다. 기존 화면·Reference의 모드 판단 기준은 서비스 전역 상단 메뉴·브랜드·사용자 영역 중심의 [GNB](../patterns/gnb.md), 현재 영역의 계층 메뉴·독립 Sidebar와 모바일 Header 중심의 [LNB](../patterns/lnb.md), Dashboard 내부 Header/상태 메뉴·최소 폭 프레임 중심의 [Dashboard](../patterns/dashboard-layout.md)이며, LNB 기준은 AI 신규 Production 화면의 적용 허용을 뜻하지 않는다.
1. 사용자 요청에 모드가 있으면 해당 단일 모드의 기존 공식 Component와 계약을 적용한다. LNB ONLY의 공식 LNB 생성은 허용한다. AI 신규 Production 화면에서 GNB ONLY의 Sidebar·GNB Sidebar Composition 또는 DASHBOARD ONLY의 Sidebar/LNB가 요청되면 금지 규칙을 안내하고 해당 기능을 구현하지 않는다. 다른 Navigation으로 임의 대체하지 않는다. 요청이 독립 모드 혼합을 포함하면 이 정책과의 충돌을 기록하고 정책 변경인지 기술 검증인지 확인한다.
2. 미지정이면 제공된 화면의 Navigation 구조와 현재 대표 Story를 대조하고 기존 모드 선택 규칙을 따른다. 서비스 전역 상단 메뉴·브랜드·사용자 영역이 중심이면 [GNB](../patterns/gnb.md), 현재 영역의 계층 메뉴·좌측 LNB Navigation과 모바일 Header가 중심이면 [LNB](../patterns/lnb.md), Dashboard 내부 Header/상태 메뉴·최소 폭 프레임이 중심이면 [Dashboard](../patterns/dashboard-layout.md)를 선택한다. 선택된 단일 모드의 공식 구조로 콘텐츠를 배치하며 임의 Sidebar·Drawer·대체 메뉴를 추가하지 않는다.
3. 일반 업무 목록이나 DataTable 사용 여부만으로 GNB/LNB를 확정하지 않는다. AI 신규 Production 화면에서는 GNB 내부 Sidebar Composition도 사용하지 않는다. Dashboard Header는 GNB가 아니다.
4. 선택 근거가 부족하면 가정한 모드와 이유를 보고한다. 기존 화면과의 일관성을 판단할 정보가 없으면 사용자 확인 필요 사항으로 남긴다. 모든 일반 화면에 적용하는 기본 모드는 없다.
@@ -49,7 +49,7 @@ AI의 신규 Production 업무 화면 생성에만 적용한다. 사용자 요
## Responsive
아래 Sidebar/LNB Responsive 설명은 기존 Component·Pattern·Storybook 계약 보존용이다. AI 신규 Production 화면에는 모든 viewport에서 Sidebar 절대 금지를 적용한다.
아래 GNB Sidebar Responsive 설명은 기존 Component·Pattern·Storybook 계약 보존용이며 AI 신규 Production 화면에 적용하지 않는다. LNB ONLY는 기존 공식 LNB의 Desktop/Mobile 계약을 정상 사용한다. GNB ONLY·DASHBOARD ONLY의 Sidebar 금지는 모든 viewport에서 유지한다.
- GNB는 자체 Responsive / Mobile Header를 사용한다.
- GNB Sidebar는 ≥1024px에서 표시하고 ≤1023px에서 숨긴다. 모바일은 기존 GNB Header의 메뉴 버튼 하나와 Sheet 하나에 LNB 모바일 링크/그룹을 재사용한다. `LNBMobileHeader`나 두 번째 Sheet를 추가하지 않는다. Sheet 기본 배경, 링크 높이·폰트·선택 동작, Escape·포커스 복귀를 유지한다. 그룹은 기존 모바일 링크 목록이며 새 disclosure 동작을 만들지 않는다.
@@ -63,19 +63,21 @@ Navigation 간 height/width 계산이나 CSS 변수·breakpoint·spacing 교차
`DashboardSidebar` 공개 Export와 선택적 `sidebar` slot은 기존 소비자 호환성·검증을 위해 유지하는 API다. 존재가 운영 허용을 뜻하지 않으며 신규 Dashboard 운영 화면에는 사용하지 않는다. Sidebar 포함 1232px 규칙은 해당 호환성·검증 구성에만 남는 값으로 현재 운영 기준이 아니다. 기능 제거·런타임 차단은 소비처 영향 조사와 사용자 결정을 거치는 별도 작업이다.
기존 Component·Pattern·Storybook의 GNB 내부 Sidebar Composition은 LNB 구현을 재사용하기 위해 `--hm-lnb-width / --hm-lnb-join`과 LNB 부품의 토큰을 소비할 수 있다. AI 신규 Production 화면에는 이 Composition과 Sidebar 전용 Width 규칙을 적용하지 않는다. 이는 독립 Navigation 간 결합이 아니다. 높이는 소비자 프레임의 Grid 행으로 배분하고 GNB/LNB/Dashboard의 토큰 정의나 breakpoint를 서로 수정하지 않는다. 기존 사용 구조는 [GNB §15](../patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08)를 따른다.
기존 Component·Pattern·Storybook의 GNB 내부 Sidebar Composition은 LNB 구현을 재사용하기 위해 `--hm-lnb-width / --hm-lnb-join`과 LNB 부품의 토큰을 소비할 수 있다. AI 신규 Production 화면에는 이 GNB Sidebar Composition과 이를 위한 전용 Width 규칙을 적용하지 않는다. LNB ONLY는 공식 LNB의 기존 Width·토큰 계약을 정상 사용한다. 이는 독립 Navigation 간 결합이 아니다. 높이는 소비자 프레임의 Grid 행으로 배분하고 GNB/LNB/Dashboard의 토큰 정의나 breakpoint를 서로 수정하지 않는다. 기존 사용 구조는 [GNB §15](../patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08)를 따른다.
대표/PRIMARY Story는 선택된 모드의 운영 예제만 보여준다. 기존 혼합 Story와 Dashboard Sidebar Story가 기술 검증에 필요한 경우에만 `verification` 태그와 화면·Story 이름의 **VERIFICATION ONLY — 운영 사용 금지** 표시로 유지한다. 운영 예제, 신규 코드 생성의 근거로 사용하지 않는다. 과거 검증 기록은 HISTORICAL로 보존하며 현재 운영 계약으로 재해석하지 않는다.
## 구현·리뷰 완료 조건
- 신규 AI Production 화면에 사용자 요청 여부와 관계없이 Sidebar·GNB Sidebar Composition·좌측 사이드 메뉴 형태의 LNB·임의 Drawer·Collapsible Sidebar 및 Sidebar 전용 Component·CSS·Width 규칙을 생성·적용하지 않았는가?
- 요청에 Sidebar가 포함되면 금지 규칙을 안내하고 해당 기능을 구현하지 않았으며, 대체 Navigation·추측한 메뉴를 임의로 추가하지 않고 Navigation 미지정 시 Sidebar 없이 기존 Production Layout에 콘텐츠를 배치했는가?
- 신규 AI Production 화면에서 LNB ONLY의 기존 공식 LNB 메뉴·좌측 LNB Navigation을 정상 생성·사용하도록 허용하고 Sidebar 금지 대상에서 명시적으로 제외했는가?
- GNB ONLY의 Sidebar·GNB Sidebar Composition을 자동·수동 요청 모두 적용하지 않았으며 DASHBOARD ONLY의 Sidebar/LNB도 생성하지 않았는가?
- 임의 Sidebar·Drawer·Collapsible Sidebar·대체 메뉴 및 이를 위한 전용 Component·CSS·Width 규칙을 생성하지 않았는가?
- 금지된 구성이 요청되면 금지 규칙을 안내하고 해당 기능을 구현하지 않았으며, 대체 Navigation·추측한 메뉴를 임의로 추가하지 않고 Navigation 미지정 시 기존 모드 선택 규칙을 따랐는가?
- 페이지 모드가 하나로 결정되어 있고 다른 Navigation 체계를 추가하지 않았는가?
- 모바일도 같은 모드의 Responsive Variant이며 Navigation 두 종류가 동시에 보이지 않는가?
- LNB의 1024/1023 경계와 Sidebar 없는 Dashboard의 48px Header·업무 상태 필터·960px 최소 폭·내부 스크롤 계약을 지키는가?
- Navigation 간 CSS 변수 및 조합 전용 breakpoint/spacing 의존성을 추가하지 않았는가?
- 기존 Component·Pattern·Storybook의 Sidebar/LNB 기능을 삭제하거나 변경하지 않고, AI 신규 Production 화면의 Sidebar 절대 금지와 기존 Reference 계약의 범위를 구분했는가?
- 기존 Component·Pattern·Storybook의 Sidebar/LNB 기능을 삭제하거나 변경하지 않고, AI 신규 Production 화면의 모드별 허용·금지와 기존 Reference 계약의 범위를 구분했는가?
- 기존 Reference의 GNB Sidebar가 기존 LNB 부품·단일 현재 경로를 재사용하며 모바일 Header/Sheet/메뉴 버튼이 중복되지 않는가? 이 항목은 AI 신규 Production 화면의 Sidebar 사용 허용을 뜻하지 않는다.
관련 구현: [GNB](../patterns/gnb.md), [LNB](../patterns/lnb.md), [Dashboard](../patterns/dashboard-layout.md).