docs(ai): prohibit sidebar generation in production screens

2026-10-08 19:09:56 +09:00
1 parent 811f51f0fe
commit 4f0b39c673
@@ -1,6 +1,6 @@
 # Navigation Single Mode Policy

-2026-10-07 사용자 확정 정책. 이전 GNB/LNB/Dashboard 조합 기준을 대체한다. 2026-10-08 GNB ONLY 내부 Sidebar 허용 및 DASHBOARD ONLY Sidebar 운영 사용 금지를 명확히 했다.
+2026-10-07 사용자 확정 정책. 이전 GNB/LNB/Dashboard 조합 기준을 대체한다. 2026-10-08 AI 신규 Production 업무 화면의 Sidebar 절대 금지로 정정했다. 기존 Component·Pattern·Storybook의 Sidebar/LNB 계약과 DASHBOARD ONLY의 기존 운영 계약은 유지한다.

 **ONE PAGE = ONE NAVIGATION SYSTEM = ONE HEADER/NAVIGATION EXPERIENCE**

@@ -10,7 +10,7 @@ AI 기반 코드 생성과 제안, 신규 페이지 구현, 기존 화면 수정

 ## 모드 선택

-페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 결정한다. 이 표기는 페이지 설계 계약이며 현재 공통 Page 컴포넌트의 prop이 아니다.
+페이지 구현 전에 `navigationMode = GNB | LNB | DASHBOARD` 중 정확히 하나를 결정한다. 이 표기는 페이지 설계 계약이며 현재 공통 Page 컴포넌트의 prop이 아니다. 아래 표는 기존 Navigation 계약이며, AI 신규 Production 업무 화면에는 [AI Sidebar 생성 정책](#ai-sidebar-생성-정책)을 우선 적용한다. 이 범위에서 GNB ONLY는 Sidebar 없는 구성으로 사용하고 좌측 사이드 메뉴 형태의 LNB는 선택하지 않는다.

 | 선택 | 허용 구조 | 함께 사용하지 않는 체계 |
 |---|---|---|
@@ -18,33 +18,39 @@ AI 기반 코드 생성과 제안, 신규 페이지 구현, 기존 화면 수정
 | LNB | Page → LNB + 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의 구현 부품 재사용은 아래 범위에서 허용한다. 콘텐츠의 Breadcrumb, Filter Bar, 사용자 Dropdown 등은 새로운 페이지 Navigation Mode가 아니다.
+독립 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 업무 화면 생성에 적용한다. 기존 Navigation Component·Pattern·Variant를 제거하거나 비활성화하는 정책이 아니다.
+AI의 신규 Production 업무 화면 생성에만 적용한다. 사용자 요청이나 기존 공식 Composition 사용에 따른 허용 예외는 없다. 기존 HMDesign Component·Pattern·Storybook에서 제공하는 Sidebar/LNB 기능과 API·Variant는 삭제하거나 변경하지 않는다.

- 사용자 요청에 명시된 Navigation만 사용한다. 요청하지 않은 별도 왼쪽 Sidebar나 기존 GNB 외의 새로운 Navigation 영역을 자동 구성하지 않고, 업무 메뉴를 추측하여 추가하지 않는다. Sidebar 대신 Drawer·Hamburger Menu 등 대체 Navigation을 임의로 만들지 않는다.
- Navigation 명세가 없으면 Sidebar 없이 기존 화면 구조에 콘텐츠를 배치하고 기존 Production Layout 계약을 따른다. Storybook의 Navigation Reference는 계약 확인용이며, 그대로 복사하여 신규 업무 화면에 자동 적용하지 않는다.
- 사용자가 GNB/LNB 또는 Sidebar를 명시적으로 요청하면 요청 범위에서 기존 공식 Navigation Component·Composition을 사용한다. GNB 요청만으로 내부 Sidebar를 자동 추가하지 않는다. 명시적으로 요청한 GNB 내부 Sidebar Composition과 LNB ONLY는 기존 계약대로 사용할 수 있으며, DASHBOARD ONLY의 Sidebar 운영 사용 금지는 유지한다.
- 임의의 Sidebar 전용 React Component·CSS·Width 규칙을 추가하지 않으며, 기존 공식 GNB/LNB 구조를 변경하지 않는다. 요청된 공식 Navigation의 모바일 Header·메뉴 버튼·Sheet는 기존 Responsive 계약을 따르는 표현으로 유지한다.
+- 사용자 요청 여부와 관계없이 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의 기존 계약은 유지한다.

 ## 선택 근거

-1. 사용자 요청에 모드가 있으면 우선 적용한다. 요청이 독립 모드 혼합을 포함하면 이 정책과의 충돌을 기록하고 정책 변경인지 기술 검증인지 확인한다.
-2. 미지정이면 제공된 화면의 Navigation 구조와 현재 대표 Story를 대조하되, 신규 AI Production 화면은 위 [AI Sidebar 생성 정책](#ai-sidebar-생성-정책)에 따라 기존 구조를 유지하고 Sidebar나 새 Navigation 영역을 자동 추가하지 않는다. 서비스 전역 상단 메뉴·브랜드·사용자 영역이 중심이면 [GNB](../patterns/gnb.md), 현재 영역의 계층 메뉴·독립 Sidebar와 모바일 Header가 중심이면 [LNB](../patterns/lnb.md), Dashboard 내부 Header/상태 메뉴·최소 폭 프레임이 중심이면 [Dashboard](../patterns/dashboard-layout.md)를 선택한다.
-3. 일반 업무 목록이나 DataTable 사용 여부만으로 GNB/LNB를 확정하지 않는다. GNB에서도 명시적으로 요청한 내부 Sidebar Composition을 사용할 수 있고, Dashboard Header는 GNB가 아니다.
+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 화면의 적용 허용을 뜻하지 않는다.
+3. 일반 업무 목록이나 DataTable 사용 여부만으로 GNB/LNB를 확정하지 않는다. AI 신규 Production 화면에서는 GNB 내부 Sidebar Composition도 사용하지 않는다. Dashboard Header는 GNB가 아니다.
 4. 선택 근거가 부족하면 가정한 모드와 이유를 보고한다. 기존 화면과의 일관성을 판단할 정보가 없으면 사용자 확인 필요 사항으로 남긴다. 모든 일반 화면에 적용하는 기본 모드는 없다.

 ## GNB ONLY 내부 Sidebar

+아래는 기존 HMDesign Component·Pattern·Storybook의 Composition 계약을 보존하기 위한 설명이다. AI 신규 Production 업무 화면에서는 사용자 명시적 요청에도 이 Composition을 사용하지 않는다.
+
 - GNB Sidebar는 GNB ONLY의 하위 화면 구성이다. 공개 `LNB / LNBNav / LNBGroup / LNBItem`과 필요한 모바일 부품을 재사용해도 독립 LNB ONLY Mode를 추가한 것이 아니다.
 - 메뉴 DOM/data-slot, 폭, 폰트, 아이콘, 간격, Depth, Hover/Current, 그룹 펼침·접힘과 메뉴 스크롤은 기존 LNB 계약을 유지한다. Sidebar 범위의 `--hm-lnb-background`만 `var(--hm-sem-palette-green-light-2)`로 지정한다. 공통 Theme 값과 LNB 기본 스타일은 변경하지 않는다.
 - 브랜드·사용자 영역은 GNB가 담당한다. 기본 Sidebar에는 `LNBBrand / LNBProfile`을 넣지 않는다. Desktop/Mobile 모두 현재 경로는 하나로 관리하며, Sidebar 그룹과 GNB 팝업의 열림 상태는 독립적이다. 선택에 따른 새로운 자동 펼침·접힘은 추가하지 않는다.
- 이 허용은 GNB 내부 Sidebar에 한정한다. 독립 LNB Header/브랜드 체계의 동시 추가, Dashboard와의 조합, 기존 혼합 verification Story의 운영 승격은 허용하지 않는다. Dashboard Header는 GNB가 아니다.
+- 이 기존 Composition 계약은 GNB 내부 Sidebar에 한정하며 AI 신규 Production 화면에는 적용하지 않는다. 독립 LNB Header/브랜드 체계의 동시 추가, Dashboard와의 조합, 기존 혼합 verification Story의 운영 승격은 허용하지 않는다. Dashboard Header는 GNB가 아니다.

 ## Responsive

+아래 Sidebar/LNB Responsive 설명은 기존 Component·Pattern·Storybook 계약 보존용이다. AI 신규 Production 화면에는 모든 viewport에서 Sidebar 절대 금지를 적용한다.
+
 - GNB는 자체 Responsive / Mobile Header를 사용한다.
 - GNB Sidebar는 ≥1024px에서 표시하고 ≤1023px에서 숨긴다. 모바일은 기존 GNB Header의 메뉴 버튼 하나와 Sheet 하나에 LNB 모바일 링크/그룹을 재사용한다. `LNBMobileHeader`나 두 번째 Sheet를 추가하지 않는다. Sheet 기본 배경, 링크 높이·폰트·선택 동작, Escape·포커스 복귀를 유지한다. 그룹은 기존 모바일 링크 목록이며 새 disclosure 동작을 만들지 않는다.
 - LNB는 ≥1024px에서 Desktop LNB만, ≤1023px에서 LNB Mobile Header만 표시한다. Mobile Header와 Sheet는 같은 메뉴·선택 상태를 공유하는 LNB의 모바일 표현이며 별도의 GNB가 아니다.
@@ -57,18 +63,19 @@ Navigation 간 height/width 계산이나 CSS 변수·breakpoint·spacing 교차

 `DashboardSidebar` 공개 Export와 선택적 `sidebar` slot은 기존 소비자 호환성·검증을 위해 유지하는 API다. 존재가 운영 허용을 뜻하지 않으며 신규 Dashboard 운영 화면에는 사용하지 않는다. Sidebar 포함 1232px 규칙은 해당 호환성·검증 구성에만 남는 값으로 현재 운영 기준이 아니다. 기능 제거·런타임 차단은 소비처 영향 조사와 사용자 결정을 거치는 별도 작업이다.

-GNB 내부 Sidebar의 Composition은 기존 LNB 구현을 재사용하기 위해 `--hm-lnb-width / --hm-lnb-join`과 LNB 부품의 토큰을 소비할 수 있다. 이는 독립 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 화면에는 이 Composition과 Sidebar 전용 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·대체 Navigation·추측한 메뉴와 Sidebar 전용 React Component·CSS·Width 규칙을 추가하지 않았으며, Navigation 미지정 시 Sidebar 없이 기존 Production Layout에 콘텐츠를 배치했는가?
+- 신규 AI Production 화면에 사용자 요청 여부와 관계없이 Sidebar·GNB Sidebar Composition·좌측 사이드 메뉴 형태의 LNB·임의 Drawer·Collapsible Sidebar 및 Sidebar 전용 Component·CSS·Width 규칙을 생성·적용하지 않았는가?
+- 요청에 Sidebar가 포함되면 금지 규칙을 안내하고 해당 기능을 구현하지 않았으며, 대체 Navigation·추측한 메뉴를 임의로 추가하지 않고 Navigation 미지정 시 Sidebar 없이 기존 Production Layout에 콘텐츠를 배치했는가?
 - 페이지 모드가 하나로 결정되어 있고 다른 Navigation 체계를 추가하지 않았는가?
 - 모바일도 같은 모드의 Responsive Variant이며 Navigation 두 종류가 동시에 보이지 않는가?
 - LNB의 1024/1023 경계와 Sidebar 없는 Dashboard의 48px Header·업무 상태 필터·960px 최소 폭·내부 스크롤 계약을 지키는가?
 - Navigation 간 CSS 변수 및 조합 전용 breakpoint/spacing 의존성을 추가하지 않았는가?
- 대표 Story 및 AI 생성 지침이 같은 정책을 따르는가?
- GNB Sidebar가 기존 LNB 부품·단일 현재 경로를 재사용하며 모바일 Header/Sheet/메뉴 버튼이 중복되지 않는가?
+- 기존 Component·Pattern·Storybook의 Sidebar/LNB 기능을 삭제하거나 변경하지 않고, AI 신규 Production 화면의 Sidebar 절대 금지와 기존 Reference 계약의 범위를 구분했는가?
+- 기존 Reference의 GNB Sidebar가 기존 LNB 부품·단일 현재 경로를 재사용하며 모바일 Header/Sheet/메뉴 버튼이 중복되지 않는가? 이 항목은 AI 신규 Production 화면의 Sidebar 사용 허용을 뜻하지 않는다.

 관련 구현: [GNB](../patterns/gnb.md), [LNB](../patterns/lnb.md), [Dashboard](../patterns/dashboard-layout.md).