From e31021af2d5d1593e822f88a1013ed8d1cdc8a7f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Tue, 20 Oct 2026 18:18:01 +0900 Subject: [PATCH] docs: Noto Sans KR SW default font and Bold scope in AI guides and README SW AI usage / design rules / composition / viewer docs, example J and the shared AI_GUIDE (synced to every package with sync:ai-docs) state the Noto Sans KR default and the 2026-10-20 weight scope. --- README.md | 2 +- docs/ai/AI_GUIDE.md | 2 +- packages/org-chart-react/ai/AI_GUIDE.md | 2 +- packages/org-chart/ai/AI_GUIDE.md | 2 +- packages/sw/ai/AI_GUIDE.md | 2 +- packages/sw/ai/AI_USAGE.md | 6 +++--- packages/sw/ai/COMPOSITION_PATTERNS.md | 2 +- packages/sw/ai/DESIGN_RULES.md | 6 +++--- packages/sw/ai/VIEWER.md | 2 +- packages/sw/ai/examples/ExampleJ-Theme.tsx | 4 ++-- packages/ui/ai/AI_GUIDE.md | 2 +- 11 files changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 648c5fb..20e9fa3 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,7 @@ import { OrgChart } from "@hm-design/org-chart-react" // Core: @hm-design/org-ch 별도 React 앱은 [Tailwind v4 검색 범위 가이드](docs/guidelines/runtime-portability.md#21-tailwind-v4-소비자-검색-범위)를 확인합니다. `source("./")`는 CSS 위치에 따라 범위가 달라지며 HM `tailwind.css`의 명시 source를 유지해야 합니다. 공개 package Theme는 동봉된 `dist/fonts/`를 상대 URL로 참조합니다. 개발 저장소·포터블 ZIP·React 소비자·단일 HTML의 차이는 [폰트·Asset 경로](docs/guidelines/runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)를 따릅니다. -SW는 Tailwind 없이 앱 진입점에서 `import "@hm-design/sw/styles.css"`를 한 번 추가합니다. 한 화면에서는 SW 일반 모드와 뷰어 모드 중 하나를 고르고, 글꼴 등 토큰은 가장 바깥 ``에서 바꿉니다([SW 사용 안내](packages/sw/ai/AI_USAGE.md)). SW 기본 글꼴은 돋움(Dotum, 설치된 시스템 글꼴)이고 Web UI 기본 글꼴은 Noto Sans KR입니다. 서로의 글꼴 설정을 복사하지 않습니다. OrgChart는 Core CSS 두 개(`@hm-design/org-chart/engine.css`, `/style.css`)의 URL을 `stylesheetUrls`로 전달합니다(Shadow DOM, [OrgChart React README](packages/org-chart-react/README.md)). +SW는 Tailwind 없이 앱 진입점에서 `import "@hm-design/sw/styles.css"`를 한 번 추가합니다. 한 화면에서는 SW 일반 모드와 뷰어 모드 중 하나를 고르고, 글꼴 등 토큰은 가장 바깥 ``에서 바꿉니다([SW 사용 안내](packages/sw/ai/AI_USAGE.md)). SW와 Web UI의 기본 글꼴은 모두 Noto Sans KR입니다(SW는 2026-10-20 Dotum 기본값을 철회하고 확정). 글꼴 토큰은 패키지마다 따로 쓰며 서로의 글꼴 설정을 복사하지 않습니다. OrgChart는 Core CSS 두 개(`@hm-design/org-chart/engine.css`, `/style.css`)의 URL을 `stylesheetUrls`로 전달합니다(Shadow DOM, [OrgChart React README](packages/org-chart-react/README.md)). 화면 생성 Reference: [Navigation 선택 근거](docs/guidelines/navigation-single-mode.md#선택-근거), [GNB Desktop·Mobile 구성](docs/patterns/gnb.md#8-desktop--mobile)과 [내부 Sidebar](docs/patterns/gnb.md#15-gnb-only-sidebar-composition-2026-10-08), [FilterBar 조회·초기화 소비 예제](docs/patterns/filter-bar.md#61-조회-버튼으로-적용하는-소비-예제). 일반 업무 목록의 모드를 임의 확정하거나 FilterBar에 조회 API가 있다고 가정하지 않습니다. diff --git a/docs/ai/AI_GUIDE.md b/docs/ai/AI_GUIDE.md index 5fd7e42..a9a6b58 100644 --- a/docs/ai/AI_GUIDE.md +++ b/docs/ai/AI_GUIDE.md @@ -138,7 +138,7 @@ 혼합 규칙: -1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다. +1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 Noto Sans KR(`--hm-sw-header-font-family`, 2026-10-20 확정, Dotum 기본값 철회), Web 기본 글꼴도 Noto Sans KR(`--hm-font-family-base`)이지만 토큰은 각자 쓰고, OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 토큰·값을 다른 영역에 복사하지 않습니다. 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다. - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`) - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4) diff --git a/packages/org-chart-react/ai/AI_GUIDE.md b/packages/org-chart-react/ai/AI_GUIDE.md index 5fd7e42..a9a6b58 100644 --- a/packages/org-chart-react/ai/AI_GUIDE.md +++ b/packages/org-chart-react/ai/AI_GUIDE.md @@ -138,7 +138,7 @@ 혼합 규칙: -1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다. +1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 Noto Sans KR(`--hm-sw-header-font-family`, 2026-10-20 확정, Dotum 기본값 철회), Web 기본 글꼴도 Noto Sans KR(`--hm-font-family-base`)이지만 토큰은 각자 쓰고, OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 토큰·값을 다른 영역에 복사하지 않습니다. 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다. - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`) - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4) diff --git a/packages/org-chart/ai/AI_GUIDE.md b/packages/org-chart/ai/AI_GUIDE.md index 5fd7e42..a9a6b58 100644 --- a/packages/org-chart/ai/AI_GUIDE.md +++ b/packages/org-chart/ai/AI_GUIDE.md @@ -138,7 +138,7 @@ 혼합 규칙: -1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다. +1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 Noto Sans KR(`--hm-sw-header-font-family`, 2026-10-20 확정, Dotum 기본값 철회), Web 기본 글꼴도 Noto Sans KR(`--hm-font-family-base`)이지만 토큰은 각자 쓰고, OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 토큰·값을 다른 영역에 복사하지 않습니다. 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다. - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`) - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4) diff --git a/packages/sw/ai/AI_GUIDE.md b/packages/sw/ai/AI_GUIDE.md index 5fd7e42..a9a6b58 100644 --- a/packages/sw/ai/AI_GUIDE.md +++ b/packages/sw/ai/AI_GUIDE.md @@ -138,7 +138,7 @@ 혼합 규칙: -1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다. +1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 Noto Sans KR(`--hm-sw-header-font-family`, 2026-10-20 확정, Dotum 기본값 철회), Web 기본 글꼴도 Noto Sans KR(`--hm-font-family-base`)이지만 토큰은 각자 쓰고, OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 토큰·값을 다른 영역에 복사하지 않습니다. 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다. - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`) - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4) diff --git a/packages/sw/ai/AI_USAGE.md b/packages/sw/ai/AI_USAGE.md index 871018d..e2ea9c6 100644 --- a/packages/sw/ai/AI_USAGE.md +++ b/packages/sw/ai/AI_USAGE.md @@ -102,9 +102,9 @@ import "@hm-design/sw/styles.css" // 앱 진입점에서 한 번 - **금지:** `@hm-design/sw/src/...`, `@hm-design/sw/dist/components/...` 같은 내부 경로 Import. `dist`에 내부 모듈의 `.d.ts`가 보여도 공개 API가 아니다. - Peer: `react`, `react-dom` `^19.0.0`. 런타임 dependency 없음. `@hm-design/ui`·조직도 패키지와 무관하다. - SVG·PNG 자산은 JS에 data URI로 포함되어 별도 설정이 없다. -- SW 기본 글꼴은 돋움(Dotum)이다(`--hm-sw-header-font-family: Dotum, "돋움", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif`, Figma와 같음). 설치된 시스템 글꼴(Windows)을 쓰며 패키지는 글꼴 파일을 포함하지 않는다. 돋움이 없는 환경은 Malgun Gothic → Apple SD Gothic Neo로 대체된다. 앱이 별도 글꼴 파일을 로드할 필요는 없다. -- SW 화면은 `SWTheme`(또는 SW 컴포넌트 루트)와 SW 토큰의 글꼴을 그대로 쓴다. Web UI의 기본 글꼴(Noto Sans KR, `--hm-font-family-base`)이나 Web `theme.css`의 글꼴 설정을 SW 화면에 복사하지 않고, SW 컴포넌트에 `font-family`를 개별 지정하지 않는다. 프로그램(사용자)이 다른 글꼴을 정한 경우에만 §3.1 방법으로 `--hm-sw-header-font-family`를 바꾸고 결과 보고에 "글꼴 변경"으로 적는다. -- 돋움에는 Bold 글꼴이 없어 700은 브라우저가 합성 Bold로 그리며 글자당 약 1px 넓어진다. Header 필드 값은 Figma 텍스트 속성대로 400(Dotum Regular)이라 기본 값(`0_Layer_Cludmark`, `Standard`, `1.00` 등)이 잘리지 않는다(2026-10-20). Figma 고정 폭 칸(예: 가중치·스케일 38px)에 그보다 긴 값(예: `ByLayer`)이 들어가면 말줄임 + `title`이 된다. Figma 레이어 이름의 `Dotum/bold/14`를 보고 700으로 바꾸거나 겹침·외곽선을 따로 만들지 않는다. +- SW 기본 글꼴은 Noto Sans KR이다(`--hm-sw-header-font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif`, 2026-10-20 확정 — 같은 날의 Dotum 기본값은 철회, Figma의 Dotum은 의도적으로 대체). 패키지는 글꼴 파일을 포함하지 않으며 앱이 Noto Sans KR(400/500/700)을 로드한다. 없으면 Malgun Gothic → Apple SD Gothic Neo로 대체된다. Dotum을 기본값으로 다시 넣지 않는다. +- SW 화면은 `SWTheme`(또는 SW 컴포넌트 루트)와 SW 토큰의 글꼴을 그대로 쓴다. Web UI도 Noto Sans KR이지만 Web 토큰(`--hm-font-family-base`)이나 Web `theme.css`의 글꼴 설정을 SW 화면에 복사하지 않고, SW 컴포넌트에 `font-family`를 개별 지정하지 않는다. 프로그램(사용자)이 다른 글꼴을 정한 경우에만 §3.1 방법으로 `--hm-sw-header-font-family`를 바꾸고 결과 보고에 "글꼴 변경"으로 적는다. +- Weight 범위(2026-10-20 사용자 확정): SWHeader 안의 필드 값은 400, Composed Controls(SWHeader 밖에 단독 배치한 `SWHeaderLayerMenu` 등)의 필드 값은 700. 파일명·Footer 보조기능/명령어 제목·Footer 분류 탭·Viewer Header 파일명/버튼 라벨/Model·Layout·최근파일 이름/경로/미리보기 제목은 700, Footer `전체보기`·Model/Layout 탭(Footer)·명령·보조기능 라벨은 400. 임의로 일괄 변경하지 않는다. Figma 고정 폭 칸(예: 가중치·스케일 38px)에 그보다 긴 값(예: `ByLayer`)이 들어가면 말줄임 + `title`이 된다. Figma 레이어 이름의 `Dotum/bold/14`를 보고 700으로 바꾸거나 겹침·외곽선을 따로 만들지 않는다. - CSS는 전역(`html`, `body`, `*`)을 건드리지 않는다. `body` margin 등 페이지 기본값은 소비 앱이 정한다. - 스크롤바: SW 전용 스크롤바 디자인은 없다. 기존 SW 컴포넌트는 브라우저 기본 스크롤바를 쓰며(속성Bar만 `scrollbar-width: thin`), Popup 본문 스크롤은 `SWPopup`이 처리한다. 새 스크롤 영역에 임의 스크롤바 색·두께를 만들지 않는다. - TypeScript에서 CSS side-effect import 오류가 나면 Vite의 `vite/client` 타입을 포함한다. diff --git a/packages/sw/ai/COMPOSITION_PATTERNS.md b/packages/sw/ai/COMPOSITION_PATTERNS.md index ad08596..d69728e 100644 --- a/packages/sw/ai/COMPOSITION_PATTERNS.md +++ b/packages/sw/ai/COMPOSITION_PATTERNS.md @@ -246,7 +246,7 @@ const appSWTheme = { "--hm-sw-header-font-family": '"Malgun Gothic", sans-serif' ``` - 일반 모드도 같습니다: `` 안의 `SWHeader`(Dropdown·창 이동 Tooltip)·`SWFooter`(`SWFooterCommandLine`·명령 등록 안내)가 같은 값을 씁니다. -- 기본 글꼴은 돋움(Dotum)입니다. 기본값을 쓸 때는 글꼴 토큰을 지정하지 않습니다. Web UI 글꼴(Noto Sans KR)을 SW 화면에 넣지 않습니다. +- 기본 글꼴은 Noto Sans KR입니다(2026-10-20 확정). 기본값을 쓸 때는 글꼴 토큰을 지정하지 않습니다. Web UI 글꼴 토큰(`--hm-font-family-base`)을 SW 화면에 넣지 않습니다. - `hm-sw-*` class 선택자로 토큰을 덮거나 `!important`, 컴포넌트마다 같은 값 반복 지정을 하지 않습니다. ## 9. 하지 말 것 diff --git a/packages/sw/ai/DESIGN_RULES.md b/packages/sw/ai/DESIGN_RULES.md index 0198807..6724025 100644 --- a/packages/sw/ai/DESIGN_RULES.md +++ b/packages/sw/ai/DESIGN_RULES.md @@ -44,9 +44,9 @@ | 항목 | 값 | |---|---| -| 글꼴 | 돋움(Dotum) → Malgun Gothic → Apple SD Gothic Neo (`--hm-sw-header-font-family: Dotum, "돋움", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif`, Figma와 같음, 2026-10-20). 설치된 시스템 글꼴을 쓰며 글꼴 파일은 포함하지 않음. Web UI 기본 글꼴(Noto Sans KR)과 별개. 다른 글꼴은 프로그램이 정한 경우에만 [AI_USAGE.md](./AI_USAGE.md) §3.1 방법으로 변경. 돋움 700은 합성 Bold(글자당 약 +1px) | +| 글꼴 | Noto Sans KR → Malgun Gothic → Apple SD Gothic Neo (`--hm-sw-header-font-family`, 2026-10-20 확정 — Dotum 기본값 철회, Figma Dotum은 의도적 대체). 글꼴 파일은 앱이 로드. Web UI와 같은 글꼴이지만 토큰은 별개. 다른 글꼴은 프로그램이 정한 경우에만 [AI_USAGE.md](./AI_USAGE.md) §3.1 방법으로 변경 | | 기본 / 라벨 | 14px / 12px (`--hm-sw-header-font-size` / `--hm-sw-header-label-size`) | -| Weight | 400, 500, 700만 사용(600 없음). Header 필드 값(레이어·색상·선스타일·가중치·스케일·문자/치수스타일 값)은 400(Figma Dotum Regular 14 · 자간 0.56px, 2026-10-20), 제목·토글·버튼·메뉴 글자 700 | +| Weight | 400, 500, 700만 사용(600 없음). SWHeader 안의 필드 값(레이어·색상·선스타일·가중치·스케일·문자/치수스타일 값)은 400(14px · 자간 0.56px), Composed Controls(SWHeader 밖 단독 메뉴)의 필드 값은 700(2026-10-20). 파일명·제목·토글·버튼·메뉴 글자 700 | | 자간 | 값 0.04em, 라벨 0.02em, 파일명 0.06em | | Text Stroke | Figma Stroke가 있는 텍스트만 검정 외곽선: 14·16px `--hm-sw-header-text-outline`(1.3px), 12px `--hm-sw-header-label-outline`(1px). 자기 색 Stroke 없음. More·Tooltip·`+ New`/`Open` 제외 | | 말줄임 | 값은 한 줄 `ellipsis`, `title`로 전체 표시 | @@ -180,7 +180,7 @@ Container `hm-sw-header` 기준 Breakpoint: **< 1800** 선/문자/치수스타 ## 13. Footer (`SWFooter*`, Figma 26:10097) — SW 일반 모드 전용 -원본 `src/theme/sw-footer.css`. 토큰은 `--hm-sw-footer-*`(`.hm-sw-header`, `.hm-sw-theme` 범위). 값은 Figma Plugin API로 읽은 값입니다(2026-10-20). 글꼴은 Header와 같은 SW 기본 글꼴(돋움), 글자 외곽선은 Header 토큰(`--hm-sw-header-text-outline` 1.3px / `--hm-sw-header-label-outline` 1px)을 공유하고, Figma의 자기 색 0.3 / 0.4px stroke는 Header 2026-10-16 수정과 같이 그리지 않습니다. +원본 `src/theme/sw-footer.css`. 토큰은 `--hm-sw-footer-*`(`.hm-sw-header`, `.hm-sw-theme` 범위). 값은 Figma Plugin API로 읽은 값입니다(2026-10-20). 글꼴은 Header와 같은 SW 기본 글꼴(Noto Sans KR), 글자 외곽선은 Header 토큰(`--hm-sw-header-text-outline` 1.3px / `--hm-sw-header-label-outline` 1px)을 공유하고, Figma의 자기 색 0.3 / 0.4px stroke는 Header 2026-10-16 수정과 같이 그리지 않습니다. | 항목 | 값 | 토큰 | |---|---|---| diff --git a/packages/sw/ai/VIEWER.md b/packages/sw/ai/VIEWER.md index 4fdae42..3e8da58 100644 --- a/packages/sw/ai/VIEWER.md +++ b/packages/sw/ai/VIEWER.md @@ -101,7 +101,7 @@ const groups: SWViewerHeaderGroup[] = [ | 뷰어 Header를 `div` + `button`으로 다시 만들기, `hm-sw-viewer-*` class를 소비 코드에 붙이기 | 데이터(`groups`)와 `custom` / `trailing`으로 구성 | | Header 버튼 글자에 `-webkit-text-stroke`·`border`로 외곽선 만들기 | 외곽선은 패키지 토큰이 이미 적용합니다 | | 메뉴 색·간격을 `#123456`, `margin` 등 임의 값으로 덮기 | 토큰 `--hm-sw-viewer-*` / `--hm-sw-header-*`만 가장 바깥 SW 범위(`` 또는 단독 컴포넌트 루트)의 `style`로 조정(기본값 유지 권장, [AI_USAGE.md](./AI_USAGE.md) §3.1) | -| Header·Dropdown·More·Panel의 글꼴을 각각 따로 지정, `.hm-sw-viewer-menu` 등 class로 덮기 | 화면을 `` 하나로 감싸면 Header·Dropdown·More·Panel이 같은 값을 상속합니다. 글꼴 기본값은 돋움(Dotum)이며 Web UI 글꼴(Noto Sans KR)을 복사하지 않습니다 | +| Header·Dropdown·More·Panel의 글꼴을 각각 따로 지정, `.hm-sw-viewer-menu` 등 class로 덮기 | 화면을 `` 하나로 감싸면 Header·Dropdown·More·Panel이 같은 값을 상속합니다. 글꼴 기본값은 Noto Sans KR이며 Web UI 글꼴 토큰을 복사하지 않습니다 | | 존재하지 않는 Props 추측(`items`, `content`, `renderBody` …) | 위 표와 `dist/index.d.ts`가 전부 | | 일반 모드 화면에서 `SWViewerHeader` 사용, 뷰어에서 `SWHeader` 재스타일 | 모드별 Header를 바꿔 끼웁니다 | | 기능 없는 메뉴를 가짜 동작으로 연결 | 항목 제외 또는 `disabled` + 미연결 보고 | diff --git a/packages/sw/ai/examples/ExampleJ-Theme.tsx b/packages/sw/ai/examples/ExampleJ-Theme.tsx index 91bc5e9..583a25e 100644 --- a/packages/sw/ai/examples/ExampleJ-Theme.tsx +++ b/packages/sw/ai/examples/ExampleJ-Theme.tsx @@ -1,8 +1,8 @@ // Example J — SW theme tokens (both modes). The only official way to change SW tokens: `style` (or the program's own // class) on the OUTERMOST SW scope. Here one wraps the viewer screen, so the header, its dropdowns, More, // and every panel read the same value. Portals leave the DOM tree: wrap their content in with the same style. -// The font below is a placeholder for a program decision: the SW default is Dotum (2026-10-20) and needs no token, -// so only set it when the program has decided on another font. Never copy the Web UI font (Noto Sans KR) here. +// The font below is a placeholder for a program decision: the SW default is Noto Sans KR (2026-10-20) and needs no +// token, so only set it when the program has decided on another font. Never copy the Web UI font token here. import { useState, type CSSProperties } from "react" import { createPortal } from "react-dom" import { diff --git a/packages/ui/ai/AI_GUIDE.md b/packages/ui/ai/AI_GUIDE.md index 5fd7e42..a9a6b58 100644 --- a/packages/ui/ai/AI_GUIDE.md +++ b/packages/ui/ai/AI_GUIDE.md @@ -138,7 +138,7 @@ 혼합 규칙: -1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 돋움(Dotum, `--hm-sw-header-font-family`), Web 기본 글꼴은 Noto Sans KR(`--hm-font-family-base`), OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 값을 다른 영역에 복사하지 않습니다. +1. 영역마다 하나의 패키지를 정하고 그 영역의 신규 UI는 그 패키지의 토큰만 읽습니다. Web 토큰(`--hm-sem-*`)을 SW 영역에, SW 토큰(`--hm-sw-*`)을 Web 영역에 쓰지 않습니다. OrgChart 내부는 `--hm-orgchart-*`만 씁니다. 글꼴도 같습니다: SW 기본 글꼴은 Noto Sans KR(`--hm-sw-header-font-family`, 2026-10-20 확정, Dotum 기본값 철회), Web 기본 글꼴도 Noto Sans KR(`--hm-font-family-base`)이지만 토큰은 각자 쓰고, OrgChart는 자기 설정을 유지합니다. 한 패키지의 글꼴 토큰·값을 다른 영역에 복사하지 않습니다. 2. 다른 패키지 컴포넌트는 **문서에 허용된 지점에서만** 씁니다. - SW 일반 모드 `SWPopup`의 `children` 안 Web 컨트롤(SW 카탈로그가 허용, 예: Popup 하단 `Button`) - SW 뷰어 모드 `SWViewerPanel`의 `children` 안 Web 컨트롤 — `SWViewer*` 컨트롤로 안 될 때만(SW `AI_USAGE.md` §0.4)