sellmate-design-system-react 9.0.0-beta.71 → 9.0.0-beta.72

package/dist/llms-full.txt

@@ -54,7 +54,7 @@
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SLauncherListBox`(런처 버튼을 눌러 뜨는 서비스 목록) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
-| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(브랜드 로고를 아이콘처럼 — size 는 높이다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
+| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(셀메이트·서비스 로고를 아이콘처럼 — name 으로 서비스, mode 로 배경, size 는 높이다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
@@ -97,7 +97,7 @@ AI 에이전트는 코드를 생성하기 전에 이 목록을 반드시 지킨
 | 직접 만든 탭/페이지네이션/스텝퍼 | `STabs`, `SPagination`, `SStepper` |
 | `<ul>`/`<li>` 로 만든 목록 UI | `SList` + `SListItem` (드래그 정렬은 `SDraggableItem`) |
 | 직접 만든 섹션 카드(제목 바 + 본문 박스) | `SSectionHeaderCard` 의 `title` / `padding` props |
-| `<svg>` 직접 삽입, 이모지 아이콘 | `SIcon` (셀메이트 로고는 `SLogo`) |
+| `<svg>` 직접 삽입, 이모지 아이콘 | `SIcon` (셀메이트·서비스 로고는 `SLogo`) |
 | `<hr>` | `SDivider` |
 | `<details>` / `<summary>` | `SExpansionItem` |
 | `<progress>` | `SLinearProgress`, `SCircleProgress` |
@@ -585,7 +585,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
 | 아이콘을 넣는다 | `SIcon` | |
-| 셀메이트 로고를 넣는다 | `SLogo` (`SIcon` 과 달리 `size` 가 **높이**이고, 색을 주지 않으면 브랜드색이다) | §3-7-14 |
+| 셀메이트·서비스 로고를 넣는다 | `SLogo` (`name` 에 서비스, 어두운 면이면 `mode="dark"`. `size` 는 **높이**이고, 색을 주지 않으면 브랜드 색이다) | §3-7-14 |
 | 사진·썸네일을 보여준다 (로딩·실패 상태 포함) | `SImage` | §3-7-12 |
 | 작은 썸네일을 호버해서 크게 확인하게 한다 | `SImage previewOnHover` | 툴팁·팝오버로 직접 만들지 않는다 — 미리보기는 마우스를 통과시키고 원본의 로딩·실패도 스스로 표현한다. §3-7-12 |
 | 문장 안에서 다른 화면으로 보낸다 | `STextLink` | §3-5-6 |
@@ -1569,7 +1569,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 
 **직접 띄우지 않는다.** 런처 버튼에 붙여 여는 것은 `SGnb` 의 `launcher` 가 맡는다 — 목록만 넘기면 버튼 아래로 · 버튼 왼쪽 끝에 맞춰 뜨고, 서비스를 고르거나 바깥을 누르면 닫힌다. 고른 서비스는 **새 탭에서 열린다** — 이동도 앱이 만들지 않는다.
 
-**앱이 넘기는 것은 서비스 키와 갈 주소 둘뿐이다.** 로고·서비스 표기·이름·상태 태그는 디자인 시스템의 카탈로그가 서비스마다 정해 두므로 앱이 만들지 않는다.
+**앱이 넘기는 것은 서비스 키와 갈 주소, 그리고 셀메이트 콘솔 주소뿐이다.** 로고·서비스 표기·이름·상태 태그와 콘솔 줄의 문구·아이콘은 디자인 시스템이 정해 두므로 앱이 만들지 않는다.
 
 ```tsx
 <SGnb
@@ -1582,12 +1582,13 @@ tableRef.current.scrollToRow(row);                  // 복원
       { service: 'account', href: env.ACCOUNT_URL },
       { service: 'crm', href: env.CRM_URL },
     ],
+    consoleHref: env.CONSOLE_URL,                       // 필수 — 목록 아래 "셀메이트 콘솔로 이동" 링크
   }}
 />
 ```
 
 - **`launcher` 를 주지 않으면 런처 버튼 자체가 렌더되지 않는다.** 옮겨 갈 서비스가 없는 앱은 이 슬롯을 비워 둔다 — 눌러도 아무것도 없는 버튼을 상단바에 남기지 않는다.
-- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `'sellmate' | 'wms' | 'account' | 'crm'`(`SLauncherService`)이고, 로고 오른쪽 표기(`WMS`·`Account`·`CRM`)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
+- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `SLogo` 가 로고를 가진 서비스 전부(`'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos'` — `SLauncherService`)이고, 서비스 로고(워드마크와 `WMS`·`Account`·`CRM` … 표기가 한 덩어리인 브랜드 로고)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
 
   ```tsx
   ✅ { service: 'wms', href: env.WMS_URL }
@@ -1605,6 +1606,13 @@ tableRef.current.scrollToRow(row);                  // 복원
   ```
 - **갈 수 없는 서비스도 목록에서 빼지 않는다.** 그 서비스가 있다는 사실과 지금은 못 간다는 사실을 함께 알리는 것이 런처의 일이다. 지금 보고 있는 서비스를 빼면 사용자가 지금 어디에 있는지가 런처에서 사라진다.
 - **출시 전인 서비스는 앱이 할 일이 없다.** 카탈로그가 `출시예정` 태그와 함께 막아 두므로 주소를 줘도 열리지 않고, 열리는 날 디자인 시스템 릴리스 하나로 모든 앱에서 함께 열린다. **앱이 앞질러 열 수단은 없다.**
+- **셀메이트 콘솔 주소 `launcher.consoleHref` 는 필수다.** 목록 아래 구분선 밑에 `셀메이트 콘솔로 이동` 글자 링크(`STextLink`)가 **늘 서고**, 누르면 그 주소가 새 탭에서 열린다. 끄는 prop 은 없다 — 어느 서비스의 런처든 콘솔로 가는 길은 있어야 하고, 같은 곳을 같은 말로 안내해야 해서 문구·아이콘도 컴포넌트가 정한다. **`launcher.onConsoleClick` 도 이동을 하지 않는다**(`onSelect` 와 같다) — 누르면 목록은 스스로 닫힌다.
+
+  ```tsx
+  ✅ launcher={{ items: SERVICES, consoleHref: env.CONSOLE_URL }}
+  ❌ launcher={{ items: [...SERVICES, { service: 'console', href: … }] }}   // 콘솔은 서비스가 아니다
+  ❌ <SLauncherListBox …/><STextLink label="콘솔로 이동" … />               // 링크를 손으로 붙이지 않는다
+  ```
 - **목록 순서를 앱이 정하지 않는다.** 넘긴 순서가 아니라 카탈로그 순서(`LAUNCHER_SERVICES`)로 선다 — 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 정렬해서 넘기려 애쓰지 않는다.
 - **줄에 얹으면 "여기서 나간다"는 것이 드러난다** — 배경이 옅은 파랑으로 물들고 이름이 한 단계 진해지며, 오른쪽 끝에 페이지 이동 아이콘이 떠오른다. **앱이 켜고 끄는 prop 이 없다** — 다른 서비스로 넘어가는 자리라는 신호는 화면마다 달라지면 안 된다. 갈 수 없는 줄은 얹어도 반응하지 않는다.
 - **폭을 늘리지 않는다.** 로고 길이에 따라 패널이 출렁이지 않도록 고정 폭이다.
@@ -2044,25 +2052,26 @@ const [selectedId, setSelectedId] = useState<string>();
 
 #### 3-7-14. 로고 — SLogo
 
-셀메이트 워드마크는 `<svg>` 를 직접 붙이지 않고 `SLogo` 를 쓴다. **`SIcon` 과 같은 손맛(`name`·`size`·`color`)이지만 두 가지가 다르다.**
+셀메이트·서비스 로고는 `<svg>` 를 직접 붙이지 않고 `SLogo` 를 쓴다. **`SIcon` 과 같은 손맛(`name`·`size`·`color`)이지만 두 가지가 다르다.**
 
-- **`size` 는 높이다.** 로고는 가로로 긴 워드마크라 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다.
-- **색을 주지 않으면 브랜드색이다.** `SIcon` 과 달리 currentColor 를 상속하지 않는다 — 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라진다. **비활성처럼 물러나야 하는 자리에서만** `color` 를 준다. 주면 워드마크 전체가 그 한 색이 된다.
-- **담고 있는 로고는 셀메이트 워드마크 하나다.** 서비스별 표기(WMS · Account · CRM …)는 그 오른쪽에 **앱이 자기 텍스트나 자기 로고로 붙인다** — 서비스가 늘어날 때마다 디자인 시스템을 다시 배포하지 않으려는 것이다.
+- **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
+- **배경에 맞춰 `mode` 를 준다.** 밝은 면은 `light`(기본), 어두운 면(dark GNB 등)은 `dark`. 워드마크 색과 서비스 표기 색을 모드가 정하므로 색을 직접 주지 않는다.
+- **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다.
+- **색을 주지 않으면 브랜드 색이다.** `SIcon` 과 달리 currentColor 를 상속하지 않는다 — 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라진다. **비활성처럼 물러나야 하는 자리에서만** `color` 를 준다. 주면 워드마크와 서비스 표기가 모두 그 한 색이 된다(`mode` 보다 우선한다).
 - **`label` 은 로고가 그 자리의 유일한 이름일 때만 준다**(로그인 화면·상단바). 옆이나 아래에 서비스 이름이 이미 적혀 있으면(런처 목록의 한 줄) 주지 않는다 — 같은 이름이 두 번 읽힌다.
 
 ```tsx
-✅ <SLogo size={20} />                                    {/* 상단바 로고 — 브랜드색 */}
+✅ <SLogo size={20} />                                    {/* 상단바 로고 — 브랜드 색 */}
+✅ <SLogo name="wms" size={20} />                         {/* 서비스 로고 */}
+✅ <SLogo name="wms" mode="dark" size={20} />             {/* 어두운 면 위 */}
 ✅ <SLogo size={32} label="Sellmate" />                   {/* 로고가 그 자리의 유일한 이름일 때 */}
-✅ <span className="inline-flex items-center gap-sd-2">   {/* 서비스별 표기는 앱이 잇는다 */}
-     <SLogo size={12} />
-     <span className="typo-body-xs-default text-(--sys-color-fg-success)">WMS</span>
-   </span>
-✅ <SLogo size={12} color="grey_45" />                    {/* 아직 못 쓰는 서비스 */}
+✅ <SLogo name="crm" size={12} color="grey_45" />         {/* 아직 못 쓰는 서비스 — 로고 전체가 한 색 */}
 
-❌ <svg viewBox="0 0 276 40">…</svg>                       {/* 워드마크를 손으로 붙이지 않는다 */}
+❌ <span><SLogo /><span>WMS</span></span>                 {/* 표기를 잇지 않는다 — name="wms" */}
+❌ <SLogo name="wms" color="white" />                     {/* 어두운 면이면 mode="dark" — 표기 색까지 흰색이 된다 */}
+❌ <svg viewBox="0 0 347 50">…</svg>                       {/* 로고를 손으로 붙이지 않는다 */}
 ❌ <SLogo size={24} style={{ width: 120 }} />              {/* 폭은 비율이 정한다 — 찌그러진다 */}
-❌ <SLogo color="grey_45" />                               {/* 물러날 이유가 없으면 브랜드색 그대로 둔다 */}
+❌ <SLogo color="grey_45" />                               {/* 물러날 이유가 없으면 브랜드 색 그대로 둔다 */}
 ```
 
 #### 3-7-13. 숫자 — SNumberInput 의 min·max 는 검증 경계다
@@ -2255,7 +2264,7 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 - 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
 - `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
 - `launcher` 를 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
-- **런처 버튼은 서비스 목록의 트리거다.** `launcher.items` 에 옮겨 갈 서비스를 **키와 주소로** 넘기면 버튼 아래로 목록이 뜨고, 고른 서비스가 새 탭에서 열린다 — 팝오버도 이동도 손으로 만들지 않는다 (§3-5-9).
+- **런처 버튼은 서비스 목록의 트리거다.** `launcher.items` 에 옮겨 갈 서비스를 **키와 주소로** 넘기면 버튼 아래로 목록이 뜨고, 고른 서비스가 새 탭에서 열린다. 셀메이트 콘솔로 가는 줄은 `launcher.consoleHref` 로 붙는다 — 팝오버도 이동도 손으로 만들지 않는다 (§3-5-9).
 
 ```tsx
 <SLayout type="box" header="full">
@@ -6562,6 +6571,17 @@ export interface SGnbLauncher {
    * 닫힌다(`onOpenChange(false)` 도 함께 온다).
    */
   onSelect?: (service: SLauncherService) => void;
+  /**
+   * 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크가 누르면 이 주소를
+   * 새 탭에서 연다(`SLauncherListBox` 의 `consoleHref`). **필수다** — 콘솔로 가는 길은 어느
+   * 서비스의 런처에나 있어야 한다. 목록(`items`)이 비면 목록째 뜨지 않으므로 이 링크도 뜨지 않는다.
+   */
+  consoleHref: string;
+  /**
+   * 콘솔 링크를 누름. `onSelect` 와 같이 **화면을 옮기지 않는다** — 컴포넌트가 새 탭으로 이미 연다.
+   * 누르면 목록은 스스로 닫힌다.
+   */
+  onConsoleClick?: () => void;
   /**
    * 목록이 열리고 닫힐 때. 여닫는 것은 런처 버튼이 스스로 하므로 **그 사실을 알아야 할 때만** 준다
    * (연 김에 목록을 다시 불러오거나, 열려 있는 동안 다른 층을 접어 두는 화면).
@@ -7153,6 +7173,7 @@ export type SKeyValueFieldValue = string | number | boolean | string[];
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `items?` | `SLauncherListBoxItem[]` | — | 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다. **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다. |
+| `consoleHref` | `string` | — | 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크(`STextLink`)가 누르면 이 주소를 새 탭에서 연다. **필수다** — 어느 서비스의 런처든 콘솔로 가는 길은 있어야 한다. 문구·아이콘은 컴포넌트가 정한다 — 어느 서비스의 런처든 같은 곳을 같은 말로 안내해야 한다. 주소는 서비스 줄의 `href` 처럼 앱마다 QA·실서버가 달라 앱이 넘긴다. |
 | `ariaLabel?` | `string` | — | 목록(ul)의 접근성 레이블 |
 
 #### Events
@@ -7160,6 +7181,7 @@ export type SKeyValueFieldValue = string | number | boolean | string[];
 | Event | Type | Description |
 |-------|------|-------------|
 | `onSelect` | `(service: SLauncherService) => void` | 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로 여기로 오지 않는다. |
+| `onConsoleClick` | `() => void` | 콘솔 링크를 누름. **가는 것은 이 콜백이 하지 않는다** — 컴포넌트가 `consoleHref` 를 새 탭으로 이미 연다. 누른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. |
 
 ## Types
 
@@ -7187,18 +7209,15 @@ export interface SLauncherListBoxItem {
 
 ### SLauncherService
 
-```ts
-export type SLauncherService = (typeof LAUNCHER_SERVICES)[number];
-```
-
-### LAUNCHER_SERVICES
-
 ```ts
 /**
- * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다.**
- * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
+ * 런처에 설 수 있는 서비스 키 — **`SLogo` 가 로고를 가진 서비스 전부다(통합 콘솔 제외).**
+ *
+ * 문서에서 바로 읽히도록 키를 풀어 쓴다(`Exclude<SLogoName, …>` 로 두면 README·Storybook 에 무엇이
+ * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
  */
-export const LAUNCHER_SERVICES = ['sellmate', 'wms', 'account', 'crm'] as const;
+export type SLauncherService =
+  'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
 ```
 
 ## Dependencies
@@ -7212,6 +7231,7 @@ export const LAUNCHER_SERVICES = ['sellmate', 'wms', 'account', 'crm'] as const;
 - [SIcon](../SIcon)
 - [SLogo](../SLogo)
 - [STag](../STag)
+- [STextLink](../STextLink)
 
 ### Graph
 
@@ -7676,9 +7696,10 @@ export type SLoadingModalState = 'loading' | 'error';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `name?` | `SLogoName` | `'sellmate'` | 로고명 |
-| `size?` | `number \| string` | `LOGO_DEFAULT_SIZE` | **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 워드마크 비율에서 저절로 나온다. `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다). |
-| `color?` | `SColor` | — | 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **로고 전체가 이 한 색이 된다.** 미지정 시 **브랜드 기본색**이다 — `SIcon` 과 달리 currentColor 를 상속하지 않는다. 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라지기 때문이다. 비활성처럼 물러나야 하는 자리에서만 색을 준다. |
+| `name?` | `SLogoName` | `'sellmate'` | 로고명 — 셀메이트 본체(`sellmate`) 또는 서비스(`wms` · `account` · `crm` …). 서비스 로고는 [셀메이트 워드마크 + 서비스 표기]가 한 덩어리로 나온다 — 앱이 표기를 잇지 않는다. |
+| `mode?` | `SLogoMode` | `'light'` | 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크). 서비스 표기 색도 원본이 모드마다 정한 값으로 바뀐다. |
+| `size?` | `number \| string` | `LOGO_DEFAULT_SIZE` | **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 로고 비율에서 저절로 나온다. `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다). |
+| `color?` | `SColor` | — | 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **워드마크와 서비스 표기가 모두 이 한 색이 된다.** 미지정 시 **브랜드 색**(`mode` 가 정한 워드마크 색 + 서비스 색)이다 — `SIcon` 과 달리 currentColor 를 상속하지 않는다. 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라지기 때문이다. 비활성처럼 물러나야 하는 자리에서만 색을 준다. |
 | `label?` | `string` | — | 접근성 라벨. 없으면 `aria-hidden` 이다 — 로고 옆에 서비스 이름이 이미 적혀 있는 자리 (런처 목록의 한 줄 등)에서는 이름이 두 번 읽히지 않도록 그대로 둔다. 로고가 그 자리의 유일한 이름이면(로그인 화면·상단바) 브랜드명을 넘긴다. |
 | `className?` | `string` | — |  |
 | `style?` | `CSSProperties` | — |  |
@@ -7691,6 +7712,12 @@ export type SLoadingModalState = 'loading' | 'error';
 export type SLogoName = (typeof LOGO_NAMES)[number];
 ```
 
+### SLogoMode
+
+```ts
+export type SLogoMode = (typeof LOGO_MODES)[number];
+```
+
 ### LOGO_NAMES
 
 ```ts
@@ -7701,8 +7728,32 @@ export type SLogoName = (typeof LOGO_NAMES)[number];
  * 하고, 워드마크의 비율은 자산 자체가 정한다. 그래서 이 파일의 값은 토큰 참조가 아니다.
  */
 
-/** 담고 있는 로고. 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다 */
-export const LOGO_NAMES = ['sellmate'] as const;
+/**
+ * 담고 있는 로고 — 셀메이트 본체와 서비스들, 그리고 통합 콘솔. 로고 한 벌은 [셀메이트 워드마크 + 표기]다.
+ * 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다.
+ */
+export const LOGO_NAMES = [
+  'sellmate',
+  'wms',
+  'chat',
+  'plm',
+  'account',
+  'people',
+  'crm',
+  'work',
+  'pos',
+  'console',
+] as const;
+```
+
+### LOGO_MODES
+
+```ts
+/**
+ * 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크).
+ * 서비스 표기 색도 모드마다 원본이 정한 값으로 바뀐다(Account·POS 는 dark 에서 더 밝다).
+ */
+export const LOGO_MODES = ['light', 'dark'] as const;
 ```
 
 ## Dependencies
@@ -9886,6 +9937,7 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
 
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
+ - [SLauncherListBox](../SLauncherListBox)
  - [SPopover](../SPopover)
  - [STable](../STable)
 

package/dist/llms.txt

@@ -55,7 +55,7 @@
 | **레이아웃** | `SLayout` `SGnb` `SGnbSystem` `SSystemActionButton`(GNB system 패널에 한 줄씩 쌓는 액션 행 — 버튼 고르기는 §3-5) `SAccountListBox`(계정 행을 눌러 뜨는 계정 패널) `SLauncherListBox`(런처 버튼을 눌러 뜨는 서비스 목록) `SPage` `SPageHeader`(페이지 제목 영역 — `SLayout` 안에서 `SPage` 앞에 둔다) `SSectionHeaderCard` `SCard` `SLoginCard`(통합 계정 로그인 화면의 카드) `SDivider` `SSplitter` `SScrollArea` `SExpansionItem` |
 | **내비게이션** | `STabs` `SPagination` `SStepper` |
 | **차트** | `SBarChart`(막대 그래프 — 항목끼리 크기를 견준다. `stacked` 로 항목 안의 구성까지) `SLineChart`(꺾은선 그래프 — 순서가 있는 항목의 추이를 본다. `area` 로 크기까지, `stacked` 로 구성까지) `SPieChart`(원그래프 — 한 시점의 전체를 몇 개의 몫으로 나눈다) `SDonutChart`(도넛 그래프 — 가운데가 빈 원그래프. 구멍에 글자를 두지 않는다) |
-| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(브랜드 로고를 아이콘처럼 — size 는 높이다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
+| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(셀메이트·서비스 로고를 아이콘처럼 — name 으로 서비스, mode 로 배경, size 는 높이다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
@@ -98,7 +98,7 @@ AI 에이전트는 코드를 생성하기 전에 이 목록을 반드시 지킨
 | 직접 만든 탭/페이지네이션/스텝퍼 | `STabs`, `SPagination`, `SStepper` |
 | `<ul>`/`<li>` 로 만든 목록 UI | `SList` + `SListItem` (드래그 정렬은 `SDraggableItem`) |
 | 직접 만든 섹션 카드(제목 바 + 본문 박스) | `SSectionHeaderCard` 의 `title` / `padding` props |
-| `<svg>` 직접 삽입, 이모지 아이콘 | `SIcon` (셀메이트 로고는 `SLogo`) |
+| `<svg>` 직접 삽입, 이모지 아이콘 | `SIcon` (셀메이트·서비스 로고는 `SLogo`) |
 | `<hr>` | `SDivider` |
 | `<details>` / `<summary>` | `SExpansionItem` |
 | `<progress>` | `SLinearProgress`, `SCircleProgress` |
@@ -586,7 +586,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
 | 아이콘을 넣는다 | `SIcon` | |
-| 셀메이트 로고를 넣는다 | `SLogo` (`SIcon` 과 달리 `size` 가 **높이**이고, 색을 주지 않으면 브랜드색이다) | §3-7-14 |
+| 셀메이트·서비스 로고를 넣는다 | `SLogo` (`name` 에 서비스, 어두운 면이면 `mode="dark"`. `size` 는 **높이**이고, 색을 주지 않으면 브랜드 색이다) | §3-7-14 |
 | 사진·썸네일을 보여준다 (로딩·실패 상태 포함) | `SImage` | §3-7-12 |
 | 작은 썸네일을 호버해서 크게 확인하게 한다 | `SImage previewOnHover` | 툴팁·팝오버로 직접 만들지 않는다 — 미리보기는 마우스를 통과시키고 원본의 로딩·실패도 스스로 표현한다. §3-7-12 |
 | 문장 안에서 다른 화면으로 보낸다 | `STextLink` | §3-5-6 |
@@ -1570,7 +1570,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 
 **직접 띄우지 않는다.** 런처 버튼에 붙여 여는 것은 `SGnb` 의 `launcher` 가 맡는다 — 목록만 넘기면 버튼 아래로 · 버튼 왼쪽 끝에 맞춰 뜨고, 서비스를 고르거나 바깥을 누르면 닫힌다. 고른 서비스는 **새 탭에서 열린다** — 이동도 앱이 만들지 않는다.
 
-**앱이 넘기는 것은 서비스 키와 갈 주소 둘뿐이다.** 로고·서비스 표기·이름·상태 태그는 디자인 시스템의 카탈로그가 서비스마다 정해 두므로 앱이 만들지 않는다.
+**앱이 넘기는 것은 서비스 키와 갈 주소, 그리고 셀메이트 콘솔 주소뿐이다.** 로고·서비스 표기·이름·상태 태그와 콘솔 줄의 문구·아이콘은 디자인 시스템이 정해 두므로 앱이 만들지 않는다.
 
 ```tsx
 <SGnb
@@ -1583,12 +1583,13 @@ tableRef.current.scrollToRow(row);                  // 복원
       { service: 'account', href: env.ACCOUNT_URL },
       { service: 'crm', href: env.CRM_URL },
     ],
+    consoleHref: env.CONSOLE_URL,                       // 필수 — 목록 아래 "셀메이트 콘솔로 이동" 링크
   }}
 />
 ```
 
 - **`launcher` 를 주지 않으면 런처 버튼 자체가 렌더되지 않는다.** 옮겨 갈 서비스가 없는 앱은 이 슬롯을 비워 둔다 — 눌러도 아무것도 없는 버튼을 상단바에 남기지 않는다.
-- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `'sellmate' | 'wms' | 'account' | 'crm'`(`SLauncherService`)이고, 로고 오른쪽 표기(`WMS`·`Account`·`CRM`)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
+- **서비스는 키(`service`)로 고른다 — 보이는 것은 아무것도 넘기지 않는다.** 쓸 수 있는 키는 `SLogo` 가 로고를 가진 서비스 전부(`'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos'` — `SLauncherService`)이고, 서비스 로고(워드마크와 `WMS`·`Account`·`CRM` … 표기가 한 덩어리인 브랜드 로고)·아래 줄 한글 이름·상태 태그(`NEW`·`출시예정`)·출시 여부를 카탈로그(`LAUNCHER_SERVICE_CATALOG`)가 그 키로 정한다. 앱이 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다. **서비스가 늘거나 이름·상태가 바뀌면 디자인 시스템 릴리스로 따라온다** — 앱은 고칠 것이 없다.
 
   ```tsx
   ✅ { service: 'wms', href: env.WMS_URL }
@@ -1606,6 +1607,13 @@ tableRef.current.scrollToRow(row);                  // 복원
   ```
 - **갈 수 없는 서비스도 목록에서 빼지 않는다.** 그 서비스가 있다는 사실과 지금은 못 간다는 사실을 함께 알리는 것이 런처의 일이다. 지금 보고 있는 서비스를 빼면 사용자가 지금 어디에 있는지가 런처에서 사라진다.
 - **출시 전인 서비스는 앱이 할 일이 없다.** 카탈로그가 `출시예정` 태그와 함께 막아 두므로 주소를 줘도 열리지 않고, 열리는 날 디자인 시스템 릴리스 하나로 모든 앱에서 함께 열린다. **앱이 앞질러 열 수단은 없다.**
+- **셀메이트 콘솔 주소 `launcher.consoleHref` 는 필수다.** 목록 아래 구분선 밑에 `셀메이트 콘솔로 이동` 글자 링크(`STextLink`)가 **늘 서고**, 누르면 그 주소가 새 탭에서 열린다. 끄는 prop 은 없다 — 어느 서비스의 런처든 콘솔로 가는 길은 있어야 하고, 같은 곳을 같은 말로 안내해야 해서 문구·아이콘도 컴포넌트가 정한다. **`launcher.onConsoleClick` 도 이동을 하지 않는다**(`onSelect` 와 같다) — 누르면 목록은 스스로 닫힌다.
+
+  ```tsx
+  ✅ launcher={{ items: SERVICES, consoleHref: env.CONSOLE_URL }}
+  ❌ launcher={{ items: [...SERVICES, { service: 'console', href: … }] }}   // 콘솔은 서비스가 아니다
+  ❌ <SLauncherListBox …/><STextLink label="콘솔로 이동" … />               // 링크를 손으로 붙이지 않는다
+  ```
 - **목록 순서를 앱이 정하지 않는다.** 넘긴 순서가 아니라 카탈로그 순서(`LAUNCHER_SERVICES`)로 선다 — 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 정렬해서 넘기려 애쓰지 않는다.
 - **줄에 얹으면 "여기서 나간다"는 것이 드러난다** — 배경이 옅은 파랑으로 물들고 이름이 한 단계 진해지며, 오른쪽 끝에 페이지 이동 아이콘이 떠오른다. **앱이 켜고 끄는 prop 이 없다** — 다른 서비스로 넘어가는 자리라는 신호는 화면마다 달라지면 안 된다. 갈 수 없는 줄은 얹어도 반응하지 않는다.
 - **폭을 늘리지 않는다.** 로고 길이에 따라 패널이 출렁이지 않도록 고정 폭이다.
@@ -2045,25 +2053,26 @@ const [selectedId, setSelectedId] = useState<string>();
 
 #### 3-7-14. 로고 — SLogo
 
-셀메이트 워드마크는 `<svg>` 를 직접 붙이지 않고 `SLogo` 를 쓴다. **`SIcon` 과 같은 손맛(`name`·`size`·`color`)이지만 두 가지가 다르다.**
+셀메이트·서비스 로고는 `<svg>` 를 직접 붙이지 않고 `SLogo` 를 쓴다. **`SIcon` 과 같은 손맛(`name`·`size`·`color`)이지만 두 가지가 다르다.**
 
-- **`size` 는 높이다.** 로고는 가로로 긴 워드마크라 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다.
-- **색을 주지 않으면 브랜드색이다.** `SIcon` 과 달리 currentColor 를 상속하지 않는다 — 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라진다. **비활성처럼 물러나야 하는 자리에서만** `color` 를 준다. 주면 워드마크 전체가 그 한 색이 된다.
-- **담고 있는 로고는 셀메이트 워드마크 하나다.** 서비스별 표기(WMS · Account · CRM …)는 그 오른쪽에 **앱이 자기 텍스트나 자기 로고로 붙인다** — 서비스가 늘어날 때마다 디자인 시스템을 다시 배포하지 않으려는 것이다.
+- **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
+- **배경에 맞춰 `mode` 를 준다.** 밝은 면은 `light`(기본), 어두운 면(dark GNB 등)은 `dark`. 워드마크 색과 서비스 표기 색을 모드가 정하므로 색을 직접 주지 않는다.
+- **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다.
+- **색을 주지 않으면 브랜드 색이다.** `SIcon` 과 달리 currentColor 를 상속하지 않는다 — 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라진다. **비활성처럼 물러나야 하는 자리에서만** `color` 를 준다. 주면 워드마크와 서비스 표기가 모두 그 한 색이 된다(`mode` 보다 우선한다).
 - **`label` 은 로고가 그 자리의 유일한 이름일 때만 준다**(로그인 화면·상단바). 옆이나 아래에 서비스 이름이 이미 적혀 있으면(런처 목록의 한 줄) 주지 않는다 — 같은 이름이 두 번 읽힌다.
 
 ```tsx
-✅ <SLogo size={20} />                                    {/* 상단바 로고 — 브랜드색 */}
+✅ <SLogo size={20} />                                    {/* 상단바 로고 — 브랜드 색 */}
+✅ <SLogo name="wms" size={20} />                         {/* 서비스 로고 */}
+✅ <SLogo name="wms" mode="dark" size={20} />             {/* 어두운 면 위 */}
 ✅ <SLogo size={32} label="Sellmate" />                   {/* 로고가 그 자리의 유일한 이름일 때 */}
-✅ <span className="inline-flex items-center gap-sd-2">   {/* 서비스별 표기는 앱이 잇는다 */}
-     <SLogo size={12} />
-     <span className="typo-body-xs-default text-(--sys-color-fg-success)">WMS</span>
-   </span>
-✅ <SLogo size={12} color="grey_45" />                    {/* 아직 못 쓰는 서비스 */}
+✅ <SLogo name="crm" size={12} color="grey_45" />         {/* 아직 못 쓰는 서비스 — 로고 전체가 한 색 */}
 
-❌ <svg viewBox="0 0 276 40">…</svg>                       {/* 워드마크를 손으로 붙이지 않는다 */}
+❌ <span><SLogo /><span>WMS</span></span>                 {/* 표기를 잇지 않는다 — name="wms" */}
+❌ <SLogo name="wms" color="white" />                     {/* 어두운 면이면 mode="dark" — 표기 색까지 흰색이 된다 */}
+❌ <svg viewBox="0 0 347 50">…</svg>                       {/* 로고를 손으로 붙이지 않는다 */}
 ❌ <SLogo size={24} style={{ width: 120 }} />              {/* 폭은 비율이 정한다 — 찌그러진다 */}
-❌ <SLogo color="grey_45" />                               {/* 물러날 이유가 없으면 브랜드색 그대로 둔다 */}
+❌ <SLogo color="grey_45" />                               {/* 물러날 이유가 없으면 브랜드 색 그대로 둔다 */}
 ```
 
 #### 3-7-13. 숫자 — SNumberInput 의 min·max 는 검증 경계다
@@ -2256,7 +2265,7 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 - 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
 - `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
 - `launcher` 를 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
-- **런처 버튼은 서비스 목록의 트리거다.** `launcher.items` 에 옮겨 갈 서비스를 **키와 주소로** 넘기면 버튼 아래로 목록이 뜨고, 고른 서비스가 새 탭에서 열린다 — 팝오버도 이동도 손으로 만들지 않는다 (§3-5-9).
+- **런처 버튼은 서비스 목록의 트리거다.** `launcher.items` 에 옮겨 갈 서비스를 **키와 주소로** 넘기면 버튼 아래로 목록이 뜨고, 고른 서비스가 새 탭에서 열린다. 셀메이트 콘솔로 가는 줄은 `launcher.consoleHref` 로 붙는다 — 팝오버도 이동도 손으로 만들지 않는다 (§3-5-9).
 
 ```tsx
 <SLayout type="box" header="full">

package/dist/styles.css

@@ -2910,9 +2910,6 @@
   .bg-\(--sab-icon-bg\) {
     background-color: var(--sab-icon-bg);
   }
-  .bg-\(--sys-color-bg-deep\) {
-    background-color: var(--sys-color-bg-deep);
-  }
   .bg-\(--sys-color-bg-frame\) {
     background-color: var(--sys-color-bg-frame);
   }
@@ -2928,6 +2925,9 @@
   .bg-\(--sys-color-bg-tableHeader\) {
     background-color: var(--sys-color-bg-tableHeader);
   }
+  .bg-\(--sys-color-navigation-gnb-bg-dark\) {
+    background-color: var(--sys-color-navigation-gnb-bg-dark);
+  }
   .bg-\[\#\.\.\.\] {
     background-color: #...;
   }
@@ -4087,6 +4087,9 @@
   .text-\(--gsb-text\) {
     color: var(--gsb-text);
   }
+  .text-\(--llb-console-fg\) {
+    color: var(--llb-console-fg);
+  }
   .text-\(--llb-name\) {
     color: var(--llb-name);
   }
@@ -4282,9 +4285,6 @@
   .text-fg-accent {
     color: var(--color-fg-accent);
   }
-  .text-fg-accentLight {
-    color: var(--color-fg-accentLight);
-  }
   .text-fg-danger {
     color: var(--color-fg-danger);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "9.0.0-beta.71",
+  "version": "9.0.0-beta.72",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [

package/dist/components/SLogo/sellmate-wordmark.d.ts

@@ -1,20 +0,0 @@
-import type { CSSProperties } from 'react';
-/**
- * Sellmate 브랜드 색. **브랜드 자산의 일부라 토큰을 거치지 않는다** — 대응하는 색 토큰이 없고
- * (가장 가까운 `--color-primary-90` 도 `#002B5E` 로 다른 색이다), 있더라도 로고 색은 테마를
- * 따라 바뀌면 안 되는 값이다. `scripts/check-hardcoded.mjs` 의 ALLOW 에 등록해 둔다.
- */
-export declare const SELLMATE_NAVY = "#00275F";
-/**
- * @internal
- * Sellmate 워드마크 — `SLogo` 가 그리는 유일한 글리프. 밖으로 내보내지 않는다(앱은 SLogo 로 닿는다).
- *
- * **`fill` 을 갖지 않는다** — 색은 `SLogo` 가 감싸는 span 의 `color` 로 내려주고 여기서는
- * `currentColor` 를 상속한다. 그래야 `SLogo` 의 `color` 하나로 워드마크 전체가 한 색이 된다.
- * 브랜드 기본색은 `SELLMATE_NAVY` 로, 색을 주지 않았을 때 SLogo 가 그 값을 내려준다.
- *
- * 크기도 갖지 않는다 — 높이만 SLogo 가 주고 폭은 viewBox 비율(276:40)에서 나온다.
- */
-export declare function SellmateWordmark({ style }: {
-    style?: CSSProperties;
-}): import("react").JSX.Element;