diff --git a/.storybook/manager.js b/.storybook/manager.js index 59d1b9c..1ec5f23 100644 --- a/.storybook/manager.js +++ b/.storybook/manager.js @@ -44,7 +44,7 @@ const koreanLabels = { 'components-form-textarea': '여러 줄 입력창', 'components-form-select': '선택 목록', 'components-form-checkbox': '체크박스', - 'components-form-radio-group': '라디오 버튼 그룹', + 'components-form-radio-group': '라디오 버튼', 'components-form-switch': '스위치', 'components-form-slider': '슬라이더', 'components-form-toggle': '토글 버튼', @@ -87,6 +87,7 @@ const koreanLabels = { 'patterns-data-filter-bar': '필터 바', 'patterns-layout': '화면 구성', 'patterns-layout-gnb': '전체 메뉴 (GNB)', + 'patterns-layout-dashboard': '대시보드', 'patterns-layout-lnb': '좌측 메뉴 (LNB)', 'patterns-layout-dashboard-layout': '대시보드', 'patterns-layout-page-header': '페이지 헤더', diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 1f8613d..882840b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -44,7 +44,7 @@ const preview: Preview = { ["Alert", "Sonner"], ], "Patterns", - ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard Layout", "Loading Screen"]], + ["Data", ["Data Table", "Filter Bar"], "Layout", ["GNB", "LNB", "Dashboard", "Loading Screen"]], "Chart", ["Bar Chart", "Line Chart", "Donut Chart", "Pie Chart", "Radar Chart", "Area Chart", "Radial Chart"], "SW", diff --git a/.storybook/qa/STORY-INVENTORY.md b/.storybook/qa/STORY-INVENTORY.md index 0351b1d..381695b 100644 --- a/.storybook/qa/STORY-INVENTORY.md +++ b/.storybook/qa/STORY-INVENTORY.md @@ -16,7 +16,7 @@ This is a classification record. No Story IDs, exports or titles are renamed. HI - DELETE_CANDIDATE: 0 - Story files: 89 - Stories: 387 -- Hierarchy: Foundation → Components → Patterns → Center Graphic → Theme +- Hierarchy: Foundation → Components → Patterns → Chart → SW → 조직도 → 노선도 → Verification → Theme ## Full inventory diff --git a/.storybook/qa/generate-inventory.mjs b/.storybook/qa/generate-inventory.mjs index b1c7c45..049d681 100644 --- a/.storybook/qa/generate-inventory.mjs +++ b/.storybook/qa/generate-inventory.mjs @@ -24,7 +24,22 @@ const inventory = files.map(file => { return { file: path.relative(root, file).replaceAll('\\', '/'), title, metaTags, stories } }) const all = inventory.flatMap(f => f.stories) -const summary = { storyFiles: files.length, stories: all.length, categories: Object.fromEntries(['PRIMARY', 'VERIFICATION', 'UTILITY', 'LEGACY / DUPLICATE'].map(c => [c, all.filter(s => s.category === c).length])), decisions: Object.fromEntries(['KEEP', 'HIDE', 'MERGE_CANDIDATE', 'DELETE_CANDIDATE'].map(c => [c, all.filter(s => s.decision === c || s.candidate === c).length])), hierarchy: ['Foundation', 'Components', 'Patterns', 'Center Graphic', 'Theme'] } +// Top-level groups that actually exist, in the storySort order of .storybook/preview.tsx ("*" = unlisted groups). +function topLevelHierarchy() { + const groups = [...new Set(inventory.map(f => f.title.split('/')[0]))] + const source = fs.readFileSync(path.join(root, '.storybook/preview.tsx'), 'utf8').replace(/\/\/.*$/gm, '') + const start = source.indexOf('[', source.indexOf('order:')) + const order = [] + for (let i = start, depth = 0; i < source.length; i++) { + const ch = source[i] + if (ch === '[') depth++ + else if (ch === ']' && --depth === 0) break + else if (ch === '"') { const end = source.indexOf('"', i + 1); if (depth === 1) order.push(source.slice(i + 1, end)); i = end } + } + const unlisted = groups.filter(g => !order.includes(g)).sort() + return order.flatMap(g => g === '*' ? unlisted : groups.includes(g) ? [g] : []).concat(order.includes('*') ? [] : unlisted) +} +const summary = { storyFiles: files.length, stories: all.length, categories: Object.fromEntries(['PRIMARY', 'VERIFICATION', 'UTILITY', 'LEGACY / DUPLICATE'].map(c => [c, all.filter(s => s.category === c).length])), decisions: Object.fromEntries(['KEEP', 'HIDE', 'MERGE_CANDIDATE', 'DELETE_CANDIDATE'].map(c => [c, all.filter(s => s.decision === c || s.candidate === c).length])), hierarchy: topLevelHierarchy() } const output = path.join(root, '.storybook', 'qa') fs.mkdirSync(output, { recursive: true }) fs.writeFileSync(path.join(output, 'story-inventory.json'), JSON.stringify({ summary, inventory }, null, 2) + '\n') diff --git a/.storybook/qa/story-inventory.json b/.storybook/qa/story-inventory.json index dd61760..3601e38 100644 --- a/.storybook/qa/story-inventory.json +++ b/.storybook/qa/story-inventory.json @@ -18,7 +18,11 @@ "Foundation", "Components", "Patterns", - "Center Graphic", + "Chart", + "SW", + "조직도", + "노선도", + "Verification", "Theme" ] }, diff --git a/CLAUDE.md b/CLAUDE.md index 8a243e9..11ce5f9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -2,7 +2,7 @@ > 기준 우선순위: 2026-10-10 추가 수정 요청의 확정 사항 → 충돌하지 않는 D-01/D-02 → 현재 HM Component/Pattern/Theme → 현재 Storybook/구현 → 과거 문서. [현재 추가 수정 기준](docs/guidelines/publisher-additional-review-2026-10-10.md). 미확정 값은 임의 확정하지 않으며 과거 검증 기록은 보존합니다. -shadcn/ui(Radix, Tailwind v4, CVA) 기반 HM 디자인 시스템 시제품. React + TypeScript + Vite, 개발 Storybook 포트 6024(포터블 테스트 ZIP은 기본 6007, 충돌 시 자동 변경). 실행법과 파일 위치는 `README.md`를 따른다. +shadcn/ui(Radix, Tailwind v4, CVA) 기반 HM 디자인 시스템 시제품. React + TypeScript + Vite, 개발 Storybook 포트 6024(과거 포터블 테스트 ZIP의 6007은 당시 기록이며 현재 Git Clone에는 ZIP이 포함되지 않는다). 실행법과 파일 위치는 `README.md`를 따른다. ## 지침 문서 diff --git a/docs/ai/AI_GUIDE.md b/docs/ai/AI_GUIDE.md index d57ab5e..0857943 100644 --- a/docs/ai/AI_GUIDE.md +++ b/docs/ai/AI_GUIDE.md @@ -19,7 +19,7 @@ | 기타 | `@hm-design/center-graphic` | AI 지침 없음. 패키지 `README.md`만 | `@hm-design/center-graphic`, 선택 `@hm-design/center-graphic/reference`(Storybook 검토용 참고 데모, 컴포넌트 API 아님) | JS 진입점이 자동 import. 명시가 필요하면 `@hm-design/center-graphic/style.css` | | 기타 — 차트 | `@hm-design/chart`(+ Theme 토큰용 `@hm-design/ui` peer) | AI 지침 폴더 없음. 패키지 `README.md`(`node_modules/@hm-design/chart/README.md`)가 설치·차트 선택·Props·검증 지침 | `@hm-design/chart`, 예시 데이터 `@hm-design/chart/examples`(운영 데이터 아님) | Tailwind 앱에서 `@hm-design/chart/tailwind.css` + `@hm-design/ui/tailwind.css` + `@hm-design/ui/theme.css`(순서는 README). 차트 스타일은 JS 진입점이 자동 import | -모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 peer입니다. +모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 `@hm-design/ui`·`@hm-design/sw`·`@hm-design/center-graphic`·`@hm-design/chart`의 peer이고, `@hm-design/org-chart-react`는 React `^19`만 peer로 요구합니다. `@hm-design/org-chart`(Core)는 peer가 없습니다. ## 1단계. 사용 목적 확인 diff --git a/docs/guidelines/프로젝트-지침.md b/docs/guidelines/프로젝트-지침.md index 5a04853..947d6b8 100644 --- a/docs/guidelines/프로젝트-지침.md +++ b/docs/guidelines/프로젝트-지침.md @@ -88,7 +88,7 @@ HMDesignSystem/ ### 5.1 패키지 구성과 Storybook 통합 (구현됨 — 2026-10-02 패키지 분리) -**하나의 Git 저장소 + 두 개의 독립 배포 패키지 + 하나의 통합 Storybook**을 기본으로 한다. 2026-10-02에 npm workspaces(`packages/*`)로 분리했다. `packages/ui`(`@hm-design/ui`)에 Button·Input·Select·Card·Dialog와 Theme(`src/theme/*.css`, `theme.css`, `tailwind.css`)이 있고, `packages/center-graphic`(`@hm-design/center-graphic`)은 ui-viz CENTER Web Reference(제목·정보·노선/공간·시설물)를 이식해 구현했다(기준 문서 `docs/center-graphic/README.md`). 둘은 서로 의존하지 않는다. 루트는 Storybook(`.storybook/`, `src/**/*.stories.tsx`; UI는 `Components`, CENTER는 `Center Graphic` 최상위 그룹)과 Demo(`src/App.tsx`, `src/hm-theme.css`), 컴포넌트 문서(`docs/components/`)를 유지하며 Story와 Demo는 `@hm-design/ui`를 workspace 패키지로 import한다. 두 패키지는 `private: false`이며 ESM JS·타입 선언·CSS를 compiled `dist`에서 export한다. `npm run build:packages`가 library 산출물을 생성하며 HM 패키지는 npm Registry로 배포하지 않고 [Git Submodule + npm Workspace](external-install-submodule.md)로 연결한다. 소비 앱은 `@import "tailwindcss"; @import "@hm-design/ui/tailwind.css"; @import "@hm-design/ui/theme.css"`를 쓴다. UI dist에는 `fonts/`의 글꼴과 OFL이 포함되며 compiled `theme.css`는 상대 `./fonts/` 경로를 사용한다. Source `packages/ui/src/theme.css`는 `/fonts/NotoSansKR-variable.ttf`를 사용하므로 App/Storybook 개발 서버는 `public/fonts/`를 서빙한다. +**하나의 Git 저장소 + 여러 독립 배포 패키지 + 하나의 통합 Storybook**을 기본으로 한다(현재 패키지 목록은 `README.md`의 패키지 구성을 따른다). 2026-10-02에 npm workspaces(`packages/*`)로 분리했다. `packages/ui`(`@hm-design/ui`)에 Button·Input·Select·Card·Dialog와 Theme(`src/theme/*.css`, `theme.css`, `tailwind.css`)이 있고, `packages/center-graphic`(`@hm-design/center-graphic`)은 ui-viz CENTER Web Reference(제목·정보·노선/공간·시설물)를 이식해 구현했다(기준 문서 `docs/center-graphic/README.md`). 둘은 서로 의존하지 않는다. 루트는 Storybook(`.storybook/`, `src/**/*.stories.tsx`; UI는 `Components`, CENTER는 `노선도` 최상위 그룹(분리 당시 이름 `Center Graphic`))과 Demo(`src/App.tsx`, `src/hm-theme.css`), 컴포넌트 문서(`docs/components/`)를 유지하며 Story와 Demo는 `@hm-design/ui`를 workspace 패키지로 import한다. 두 패키지는 `private: false`이며 ESM JS·타입 선언·CSS를 compiled `dist`에서 export한다. `npm run build:packages`가 library 산출물을 생성하며 HM 패키지는 npm Registry로 배포하지 않고 [Git Submodule + npm Workspace](external-install-submodule.md)로 연결한다. 소비 앱은 `@import "tailwindcss"; @import "@hm-design/ui/tailwind.css"; @import "@hm-design/ui/theme.css"`를 쓴다. UI dist에는 `fonts/`의 글꼴과 OFL이 포함되며 compiled `theme.css`는 상대 `./fonts/` 경로를 사용한다. Source `packages/ui/src/theme.css`는 `/fonts/NotoSansKR-variable.ttf`를 사용하므로 App/Storybook 개발 서버는 `public/fonts/`를 서빙한다. 아래는 목표 구조다. @@ -109,7 +109,7 @@ HMDesignSystem/ - 두 패키지는 따로 설치하고 따로 버전을 올릴 수 있어야 한다. 그래픽만 필요한 프로젝트가 UI 패키지 전체를 설치하지 않도록 한다. - 의존성 방향: UI → Design Token / Theme, center-graphic → 자체 그래픽 리소스. `center-graphic → ui` 필수 의존은 만들지 않고, 공유가 필요하면 최소 수준의 Token만 공유한다. - `tokens` 또는 `theme` 패키지의 별도 분리는 규모가 커지거나 여러 제품이 테마를 독립적으로 공유해야 할 때 검토한다. 그 전에는 두 패키지로 운영한다. -- Storybook은 하나로 통합해 UI와 Center Graphic을 함께 검수한다. 메뉴 구조는 패키지 폴더 구조와 같을 필요가 없고 검토 편의를 기준으로 한다. 컴포넌트는 §6.3의 규칙대로 대표 Story가 바로 열리는 1뎁스 항목으로 두고, Playground·Compatibility·verification Story는 기본 메뉴에서 숨긴다. Center Graphic도 같은 원칙을 따른다. +- Storybook은 하나로 통합해 UI·SW·조직도·노선도(CENTER)를 함께 검수한다. 메뉴 구조는 패키지 폴더 구조와 같을 필요가 없고 검토 편의를 기준으로 한다. 컴포넌트는 §6.3의 규칙대로 대표 Story가 바로 열리는 1뎁스 항목으로 두고, Playground·Compatibility·verification Story는 기본 메뉴에서 숨긴다. 노선도(CENTER, 이전 이름 Center Graphic)도 같은 원칙을 따른다. - 다른 문서의 `@company/ui`는 `@hm-design/ui`의 자리표시자로 읽고, 이름 치환은 패키징 작업 때 한꺼번에 한다. Storybook 최상위 그룹은 CENTER 구현 시점에 `Center Graphic`만 추가했고 기존 `Components`는 이름을 바꾸지 않았다(`UI Components`로의 개명은 필요할 때 정한다). #### CENTER 규격의 적용 범위 @@ -314,8 +314,8 @@ packages/ui 구조에서 나머지 UI 컴포넌트 추가 ``` - **Card와 Dialog 완료를 패키지 분리 작업의 시작 기준점으로 한다.** 그 기준을 충족해 2026-10-02에 분리했다(§5.1). -- 현재 Storybook은 `Components`, `Patterns`, `Center Graphic`으로 통합 운영한다. `Theme`의 verification Story는 기본 sidebar에서 숨긴다. -- 패키지 구성은 §5.1을 따른다(하나의 Git 저장소, `@hm-design/ui`와 `@hm-design/center-graphic`, 독립 설치·버전 관리). +- 현재 Storybook 최상위 그룹은 `Foundation`, `Components`, `Patterns`, `Chart`, `SW`, `조직도`, `노선도`, `Verification`, `Theme`이다(정렬 기준 `.storybook/preview.tsx`). `verification`·`internal` 태그 Story(`Verification` 그룹과 `Theme`의 verification Story 포함)는 기본 sidebar에서 숨긴다. +- 패키지 구성은 §5.1을 따른다(하나의 Git 저장소, `@hm-design/ui`·`@hm-design/sw`·`@hm-design/org-chart`·`@hm-design/org-chart-react`·`@hm-design/center-graphic`·`@hm-design/chart`, 독립 설치·버전 관리. 역할·진입점은 `README.md`의 패키지 구성). - `center-graphic` 실제 작업을 시작할 때 CENTER 문서와 assets의 읽기 범위·우선순위를 별도로 확정한다. 그 전까지 §5.1의 CENTER 적용 범위를 따른다. 상세 적용 절차는 [개발 적용 가이드](개발-적용-가이드.md), 발행과 복구 절차는 [운영/배포 가이드](운영-배포-가이드.md)를 따른다. diff --git a/docs/patterns/dashboard-layout.md b/docs/patterns/dashboard-layout.md index 6321d2a..2973e0c 100644 --- a/docs/patterns/dashboard-layout.md +++ b/docs/patterns/dashboard-layout.md @@ -245,7 +245,7 @@ Compact / Sidebar mobile hide: NONE - 충분한 폭에서는 기존 배치를 사용한다. 작은 viewport에서는 내부 최소 폭을 유지하고 Dashboard 전용 root에서만 가로 스크롤한다. Sidebar slot은 항상 렌더링된다. - 960px 근거: KPI 4 × 200px + 간격 3 × 24px + padding 2 × 34px + 세로 scrollbar 여유 20px. Compact 상태 바 실측 약 549px, 브랜드 약 125px, 날개 35px도 이 폭에서 겹치지 않는다. -- Sidebar 구성은 콘텐츠 최소 폭에 LNB 폭을 더한다. Desktop은 기존 `--hm-lnb-width`를 읽고, ≤1023px에서는 Dashboard 내부에만 `--hm-lnb-width: var(--hm-dashboard-sidebar-width, 272px)`와 LNB `display:flex`를 적용한다. 공통 `lnb.css`의 모바일 숨김은 유지된다. +- Sidebar 구성의 최소 폭은 콘텐츠 최소 폭에 `--hm-dashboard-sidebar-width`(기본 272px)를 더한 값이다(`[data-sidebar]`일 때 `min-width: calc(var(--hm-dashboard-min-width) + var(--hm-dashboard-sidebar-width))`). `DashboardSidebar` 폭도 같은 토큰을 직접 쓴다. Dashboard CSS는 `--hm-lnb-width` 등 GNB/LNB CSS 변수와 반응형 분기를 읽지 않는다(`dashboard-layout.css` 첫 줄). - 기본 콘텐츠 최소 폭은 `--hm-dashboard-min-width`로 조정할 수 있다. 기본값 960px은 현재 Desktop 구성 측정 기준이며 별도 콘텐츠를 넣으면 그 구성을 기준으로 조정한다. - Compact 메뉴는 숨기거나 wrap하지 않는다. Dashboard 안 Filter Bar도 한 줄과 기존 control 폭을 유지하며 공통 Filter Bar 모바일 정책은 변경하지 않는다. 본문 텍스트는 자연스럽게 줄바꿈한다. - GNB의 전역 메뉴·모바일 Sheet와 일반 LNB의 공통 responsive 정책, Theme/Color Token, Story ID/hierarchy는 변경하지 않는다. diff --git a/packages/org-chart-react/ai/AI_GUIDE.md b/packages/org-chart-react/ai/AI_GUIDE.md index d57ab5e..0857943 100644 --- a/packages/org-chart-react/ai/AI_GUIDE.md +++ b/packages/org-chart-react/ai/AI_GUIDE.md @@ -19,7 +19,7 @@ | 기타 | `@hm-design/center-graphic` | AI 지침 없음. 패키지 `README.md`만 | `@hm-design/center-graphic`, 선택 `@hm-design/center-graphic/reference`(Storybook 검토용 참고 데모, 컴포넌트 API 아님) | JS 진입점이 자동 import. 명시가 필요하면 `@hm-design/center-graphic/style.css` | | 기타 — 차트 | `@hm-design/chart`(+ Theme 토큰용 `@hm-design/ui` peer) | AI 지침 폴더 없음. 패키지 `README.md`(`node_modules/@hm-design/chart/README.md`)가 설치·차트 선택·Props·검증 지침 | `@hm-design/chart`, 예시 데이터 `@hm-design/chart/examples`(운영 데이터 아님) | Tailwind 앱에서 `@hm-design/chart/tailwind.css` + `@hm-design/ui/tailwind.css` + `@hm-design/ui/theme.css`(순서는 README). 차트 스타일은 JS 진입점이 자동 import | -모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 peer입니다. +모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 `@hm-design/ui`·`@hm-design/sw`·`@hm-design/center-graphic`·`@hm-design/chart`의 peer이고, `@hm-design/org-chart-react`는 React `^19`만 peer로 요구합니다. `@hm-design/org-chart`(Core)는 peer가 없습니다. ## 1단계. 사용 목적 확인 diff --git a/packages/org-chart/ai/AI_GUIDE.md b/packages/org-chart/ai/AI_GUIDE.md index d57ab5e..0857943 100644 --- a/packages/org-chart/ai/AI_GUIDE.md +++ b/packages/org-chart/ai/AI_GUIDE.md @@ -19,7 +19,7 @@ | 기타 | `@hm-design/center-graphic` | AI 지침 없음. 패키지 `README.md`만 | `@hm-design/center-graphic`, 선택 `@hm-design/center-graphic/reference`(Storybook 검토용 참고 데모, 컴포넌트 API 아님) | JS 진입점이 자동 import. 명시가 필요하면 `@hm-design/center-graphic/style.css` | | 기타 — 차트 | `@hm-design/chart`(+ Theme 토큰용 `@hm-design/ui` peer) | AI 지침 폴더 없음. 패키지 `README.md`(`node_modules/@hm-design/chart/README.md`)가 설치·차트 선택·Props·검증 지침 | `@hm-design/chart`, 예시 데이터 `@hm-design/chart/examples`(운영 데이터 아님) | Tailwind 앱에서 `@hm-design/chart/tailwind.css` + `@hm-design/ui/tailwind.css` + `@hm-design/ui/theme.css`(순서는 README). 차트 스타일은 JS 진입점이 자동 import | -모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 peer입니다. +모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 `@hm-design/ui`·`@hm-design/sw`·`@hm-design/center-graphic`·`@hm-design/chart`의 peer이고, `@hm-design/org-chart-react`는 React `^19`만 peer로 요구합니다. `@hm-design/org-chart`(Core)는 peer가 없습니다. ## 1단계. 사용 목적 확인 diff --git a/packages/sw/ai/AI_GUIDE.md b/packages/sw/ai/AI_GUIDE.md index d57ab5e..0857943 100644 --- a/packages/sw/ai/AI_GUIDE.md +++ b/packages/sw/ai/AI_GUIDE.md @@ -19,7 +19,7 @@ | 기타 | `@hm-design/center-graphic` | AI 지침 없음. 패키지 `README.md`만 | `@hm-design/center-graphic`, 선택 `@hm-design/center-graphic/reference`(Storybook 검토용 참고 데모, 컴포넌트 API 아님) | JS 진입점이 자동 import. 명시가 필요하면 `@hm-design/center-graphic/style.css` | | 기타 — 차트 | `@hm-design/chart`(+ Theme 토큰용 `@hm-design/ui` peer) | AI 지침 폴더 없음. 패키지 `README.md`(`node_modules/@hm-design/chart/README.md`)가 설치·차트 선택·Props·검증 지침 | `@hm-design/chart`, 예시 데이터 `@hm-design/chart/examples`(운영 데이터 아님) | Tailwind 앱에서 `@hm-design/chart/tailwind.css` + `@hm-design/ui/tailwind.css` + `@hm-design/ui/theme.css`(순서는 README). 차트 스타일은 JS 진입점이 자동 import | -모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 peer입니다. +모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 `@hm-design/ui`·`@hm-design/sw`·`@hm-design/center-graphic`·`@hm-design/chart`의 peer이고, `@hm-design/org-chart-react`는 React `^19`만 peer로 요구합니다. `@hm-design/org-chart`(Core)는 peer가 없습니다. ## 1단계. 사용 목적 확인 diff --git a/packages/ui/ai/AI_GUIDE.md b/packages/ui/ai/AI_GUIDE.md index d57ab5e..0857943 100644 --- a/packages/ui/ai/AI_GUIDE.md +++ b/packages/ui/ai/AI_GUIDE.md @@ -19,7 +19,7 @@ | 기타 | `@hm-design/center-graphic` | AI 지침 없음. 패키지 `README.md`만 | `@hm-design/center-graphic`, 선택 `@hm-design/center-graphic/reference`(Storybook 검토용 참고 데모, 컴포넌트 API 아님) | JS 진입점이 자동 import. 명시가 필요하면 `@hm-design/center-graphic/style.css` | | 기타 — 차트 | `@hm-design/chart`(+ Theme 토큰용 `@hm-design/ui` peer) | AI 지침 폴더 없음. 패키지 `README.md`(`node_modules/@hm-design/chart/README.md`)가 설치·차트 선택·Props·검증 지침 | `@hm-design/chart`, 예시 데이터 `@hm-design/chart/examples`(운영 데이터 아님) | Tailwind 앱에서 `@hm-design/chart/tailwind.css` + `@hm-design/ui/tailwind.css` + `@hm-design/ui/theme.css`(순서는 README). 차트 스타일은 JS 진입점이 자동 import | -모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 peer입니다. +모든 패키지는 서로 독립입니다(`@hm-design/org-chart-react`만 Core에 의존, `@hm-design/ui`는 `/hm-dialog`를 쓸 때만 선택 peer, `@hm-design/chart`는 `@hm-design/ui`의 Theme CSS 토큰만 peer로 사용). React·React DOM `^19`는 `@hm-design/ui`·`@hm-design/sw`·`@hm-design/center-graphic`·`@hm-design/chart`의 peer이고, `@hm-design/org-chart-react`는 React `^19`만 peer로 요구합니다. `@hm-design/org-chart`(Core)는 peer가 없습니다. ## 1단계. 사용 목적 확인 diff --git a/packages/ui/ai/COMPONENT_CATALOG.md b/packages/ui/ai/COMPONENT_CATALOG.md index 85ff456..a7edaad 100644 --- a/packages/ui/ai/COMPONENT_CATALOG.md +++ b/packages/ui/ai/COMPONENT_CATALOG.md @@ -88,7 +88,7 @@ | 컴포넌트 (Export) | 용도 | HM Props | |---|---|---| | `Calendar` | 달력(react-day-picker) | react-day-picker Props | -| `DatePicker` / 타입 `DatePickerSize` | 날짜 입력 | `value`·`defaultValue`(Date), `onValueChange`, `controlled`, `placeholder`, `size`: `medium` · `large`(기본), `format`(기본 `YYYY.MM.DD`), `calendarProps`(disabled·startMonth·endMonth·locale·captionLayout·weekStartsOn·today) | +| `DatePicker` / 타입 `DatePickerSize` | 날짜 입력 | `value`·`defaultValue`(Date), `onValueChange`, `controlled`, `placeholder`, `size`: `medium` · `large`(기본), `format`(`(date: Date) => string`, 기본 출력 `YYYY.MM.DD`), `calendarProps`(disabled·startMonth·endMonth·locale·captionLayout·weekStartsOn·today) | | `Combobox` / 타입 `ComboboxOption`, `ComboboxSize` | 검색 가능한 선택 | `options: { value, label, disabled? }[]`(필수), `value`·`defaultValue`, `onValueChange`, `controlled`, `placeholder`, `searchPlaceholder`, `emptyText`, `size`: `medium` · `large`(기본) | | `Command`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` | 명령 검색(cmdk) | 없음 | diff --git a/packages/ui/ai/DESIGN_RULES.md b/packages/ui/ai/DESIGN_RULES.md index b404720..0e5ece6 100644 --- a/packages/ui/ai/DESIGN_RULES.md +++ b/packages/ui/ai/DESIGN_RULES.md @@ -4,7 +4,7 @@ - 토큰 범위: `:root, [data-hm-theme]`. Runtime Theme(`@hm-design/ui/theme`)가 같은 변수를 바꿉니다. - Light/Dark 분기 없음. 컴포넌트 CSS에 `html`·`body`·`*` 규칙을 추가하지 않습니다. -- 이름을 추측하지 않습니다. 특히 `--hm-sem-text-*`, `--hm-sem-border-*`, `--hm-sem-stroke-divider`는 **선언되어 있지 않습니다**(아래 표의 이름을 씀). 없는 토큰을 fallback 색으로 감추지 않습니다. +- 이름을 추측하지 않습니다. 특히 `--hm-sem-text-*`, `--hm-sem-stroke-divider`는 **선언되어 있지 않고**, `--hm-sem-border-*`는 Button 내부용 `--hm-sem-border-action-primary` 외에는 **선언되어 있지 않습니다**(아래 표의 이름을 씀). 없는 토큰을 fallback 색으로 감추지 않습니다. - Tailwind utility로는 shadcn 매핑 utility(`bg-card`, `text-primary`, `text-muted-foreground` 등)를 쓸 수 있습니다. HM 값과 다를 수 있는 임의 utility 색(`bg-green-700` 등)은 쓰지 않습니다. ## 1. 기본 팔레트 (primitives → `--hm-sem-palette-*`)