diff --git a/AGENTS.md b/AGENTS.md index 6512fc6..d580748 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -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 정책을 지킨다. 기존 구성으로 해결되지 않을 때만 새 Component를 검토한다. +6. **화면 구성**: Component와 Pattern을 조합하고 아래 단일 Navigation 정책을 지킨다. 신규 AI Production 업무 화면에는 사용자 요청에 명시된 Navigation만 사용하며, 미지정이면 Sidebar 없이 기존 화면 구조에 콘텐츠를 배치한다. 기존 구성으로 해결되지 않을 때만 새 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을 지정받으면 우선 적용하고, 미지정이면 화면 구조·대표 Pattern에서 선택 근거를 기록한다([선택 기준](docs/guidelines/navigation-single-mode.md#선택-근거)). GNB는 Desktop 메뉴와 `GNBMobileMenu`를 함께 구성하며 내부 Sidebar도 모바일 Sheet 하나만 사용한다([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·Composition으로 적용하고, 미지정이면 기존 화면 구조를 유지하며 그 근거를 기록한다([선택 기준](docs/guidelines/navigation-single-mode.md#선택-근거)). GNB는 Desktop 메뉴와 `GNBMobileMenu`를 함께 구성하며, 요청된 내부 Sidebar도 모바일 Sheet 하나만 사용한다([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 @@ -65,6 +65,7 @@ - 금지: GNB + LNB, GNB + Dashboard, LNB + Dashboard, GNB + LNB + Dashboard. - 이 정책은 AI 기반 코드 생성·제안, 신규 페이지 구현, 기존 화면 수정, 프로토타입, Storybook, 실제 Production 구현 전체에 동일하게 적용한다. - AI는 별도 요청이 없는 한 Navigation 조합을 생성하거나 제안하지 않는다. 별도 요청이 있더라도 기존 단일 모드 정책과 충돌함을 알리고 정책 변경인지 기술 검증인지 구분한다. +- 신규 AI Production 업무 화면에 요청하지 않은 왼쪽 Sidebar나 기존 GNB 외의 Navigation 영역·Drawer·Hamburger Menu를 임의로 추가하거나 메뉴를 추측하지 않는다. Sidebar 전용 React Component·CSS·Width 규칙을 새로 만들거나 Storybook Navigation Reference를 그대로 복사해 자동 적용하지 않는다. 명시적으로 요청한 Navigation은 기존 공식 GNB/LNB Component·Composition과 Production Layout 계약을 따르며, 기존 Sidebar 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로 대체하지 않는다. diff --git a/docs/guidelines/navigation-single-mode.md b/docs/guidelines/navigation-single-mode.md index 2f53968..bb4d9a1 100644 --- a/docs/guidelines/navigation-single-mode.md +++ b/docs/guidelines/navigation-single-mode.md @@ -20,11 +20,20 @@ AI 기반 코드 생성과 제안, 신규 페이지 구현, 기존 화면 수정 독립 Navigation Mode를 결합하는 GNB + LNB, GNB + Dashboard, LNB + Dashboard, GNB + LNB + Dashboard는 모두 금지한다. GNB ONLY 내부 Sidebar의 구현 부품 재사용은 아래 범위에서 허용한다. 콘텐츠의 Breadcrumb, Filter Bar, 사용자 Dropdown 등은 새로운 페이지 Navigation Mode가 아니다. +## AI Sidebar 생성 정책 + +신규 AI Production 업무 화면 생성에 적용한다. 기존 Navigation Component·Pattern·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 계약을 따르는 표현으로 유지한다. + ## 선택 근거 1. 사용자 요청에 모드가 있으면 우선 적용한다. 요청이 독립 모드 혼합을 포함하면 이 정책과의 충돌을 기록하고 정책 변경인지 기술 검증인지 확인한다. -2. 미지정이면 제공된 화면의 Navigation 구조와 현재 대표 Story를 대조한다. 서비스 전역 상단 메뉴·브랜드·사용자 영역이 중심이면 [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가 아니다. +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가 아니다. 4. 선택 근거가 부족하면 가정한 모드와 이유를 보고한다. 기존 화면과의 일관성을 판단할 정보가 없으면 사용자 확인 필요 사항으로 남긴다. 모든 일반 화면에 적용하는 기본 모드는 없다. ## GNB ONLY 내부 Sidebar @@ -54,6 +63,7 @@ GNB 내부 Sidebar의 Composition은 기존 LNB 구현을 재사용하기 위해 ## 구현·리뷰 완료 조건 +- 신규 AI Production 화면에 요청하지 않은 Sidebar·대체 Navigation·추측한 메뉴와 Sidebar 전용 React Component·CSS·Width 규칙을 추가하지 않았으며, Navigation 미지정 시 Sidebar 없이 기존 Production Layout에 콘텐츠를 배치했는가? - 페이지 모드가 하나로 결정되어 있고 다른 Navigation 체계를 추가하지 않았는가? - 모바일도 같은 모드의 Responsive Variant이며 Navigation 두 종류가 동시에 보이지 않는가? - LNB의 1024/1023 경계와 Sidebar 없는 Dashboard의 48px Header·업무 상태 필터·960px 최소 폭·내부 스크롤 계약을 지키는가?