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

package/AGENTS.md

@@ -46,7 +46,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회) |
@@ -89,7 +89,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` |
@@ -577,7 +577,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 |
@@ -1561,7 +1561,7 @@ tableRef.current.scrollToRow(row);                  // 복원
 
 **직접 띄우지 않는다.** 런처 버튼에 붙여 여는 것은 `SGnb` 의 `launcher` 가 맡는다 — 목록만 넘기면 버튼 아래로 · 버튼 왼쪽 끝에 맞춰 뜨고, 서비스를 고르거나 바깥을 누르면 닫힌다. 고른 서비스는 **새 탭에서 열린다** — 이동도 앱이 만들지 않는다.
 
-**앱이 넘기는 것은 서비스 키와 갈 주소 둘뿐이다.** 로고·서비스 표기·이름·상태 태그는 디자인 시스템의 카탈로그가 서비스마다 정해 두므로 앱이 만들지 않는다.
+**앱이 넘기는 것은 서비스 키와 갈 주소, 그리고 셀메이트 콘솔 주소뿐이다.** 로고·서비스 표기·이름·상태 태그와 콘솔 줄의 문구·아이콘은 디자인 시스템이 정해 두므로 앱이 만들지 않는다.
 
 ```tsx
 <SGnb
@@ -1574,12 +1574,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 }
@@ -1597,6 +1598,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 이 없다** — 다른 서비스로 넘어가는 자리라는 신호는 화면마다 달라지면 안 된다. 갈 수 없는 줄은 얹어도 반응하지 않는다.
 - **폭을 늘리지 않는다.** 로고 길이에 따라 패널이 출렁이지 않도록 고정 폭이다.
@@ -2036,25 +2044,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 는 검증 경계다
@@ -2247,7 +2256,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/components/SGnb/README.md

@@ -108,6 +108,17 @@ export interface SGnbLauncher {
    * 닫힌다(`onOpenChange(false)` 도 함께 온다).
    */
   onSelect?: (service: SLauncherService) => void;
+  /**
+   * 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크가 누르면 이 주소를
+   * 새 탭에서 연다(`SLauncherListBox` 의 `consoleHref`). **필수다** — 콘솔로 가는 길은 어느
+   * 서비스의 런처에나 있어야 한다. 목록(`items`)이 비면 목록째 뜨지 않으므로 이 링크도 뜨지 않는다.
+   */
+  consoleHref: string;
+  /**
+   * 콘솔 링크를 누름. `onSelect` 와 같이 **화면을 옮기지 않는다** — 컴포넌트가 새 탭으로 이미 연다.
+   * 누르면 목록은 스스로 닫힌다.
+   */
+  onConsoleClick?: () => void;
   /**
    * 목록이 열리고 닫힐 때. 여닫는 것은 런처 버튼이 스스로 하므로 **그 사실을 알아야 할 때만** 준다
    * (연 김에 목록을 다시 불러오거나, 열려 있는 동안 다른 층을 접어 두는 화면).

package/dist/components/SGnb/SGnb.d.ts

@@ -62,6 +62,17 @@ export interface SGnbLauncher {
      * 닫힌다(`onOpenChange(false)` 도 함께 온다).
      */
     onSelect?: (service: SLauncherService) => void;
+    /**
+     * 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크가 누르면 이 주소를
+     * 새 탭에서 연다(`SLauncherListBox` 의 `consoleHref`). **필수다** — 콘솔로 가는 길은 어느
+     * 서비스의 런처에나 있어야 한다. 목록(`items`)이 비면 목록째 뜨지 않으므로 이 링크도 뜨지 않는다.
+     */
+    consoleHref: string;
+    /**
+     * 콘솔 링크를 누름. `onSelect` 와 같이 **화면을 옮기지 않는다** — 컴포넌트가 새 탭으로 이미 연다.
+     * 누르면 목록은 스스로 닫힌다.
+     */
+    onConsoleClick?: () => void;
     /**
      * 목록이 열리고 닫힐 때. 여닫는 것은 런처 버튼이 스스로 하므로 **그 사실을 알아야 할 때만** 준다
      * (연 김에 목록을 다시 불러오거나, 열려 있는 동안 다른 층을 접어 두는 화면).

package/dist/components/SLauncherListBox/README.md

@@ -9,6 +9,7 @@
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `items?` | `SLauncherListBoxItem[]` | — | 목록에 세울 서비스. 비어 있으면 아무것도 렌더하지 않는다. **순서는 넘긴 대로가 아니라 카탈로그 순서다**(`LAUNCHER_SERVICES`) — 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다. 같은 서비스를 두 번 넘기면 처음 것만 선다. |
+| `consoleHref` | `string` | — | 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크(`STextLink`)가 누르면 이 주소를 새 탭에서 연다. **필수다** — 어느 서비스의 런처든 콘솔로 가는 길은 있어야 한다. 문구·아이콘은 컴포넌트가 정한다 — 어느 서비스의 런처든 같은 곳을 같은 말로 안내해야 한다. 주소는 서비스 줄의 `href` 처럼 앱마다 QA·실서버가 달라 앱이 넘긴다. |
 | `ariaLabel?` | `string` | — | 목록(ul)의 접근성 레이블 |
 
 #### Events
@@ -16,6 +17,7 @@
 | Event | Type | Description |
 |-------|------|-------------|
 | `onSelect` | `(service: SLauncherService) => void` | 서비스를 고름. **가는 것은 이 콜백이 하지 않는다** — 줄이 링크라 브라우저가 `href` 를 새 탭으로 연다. 고른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. 갈 수 없는 줄(주소가 없거나 카탈로그가 아직 출시 전으로 든 서비스)은 눌리지 않으므로 여기로 오지 않는다. |
+| `onConsoleClick` | `() => void` | 콘솔 링크를 누름. **가는 것은 이 콜백이 하지 않는다** — 컴포넌트가 `consoleHref` 를 새 탭으로 이미 연다. 누른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다. |
 
 ## Types
 
@@ -43,18 +45,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
@@ -68,6 +67,7 @@ export const LAUNCHER_SERVICES = ['sellmate', 'wms', 'account', 'crm'] as const;
 - [SIcon](../SIcon)
 - [SLogo](../SLogo)
 - [STag](../STag)
+- [STextLink](../STextLink)
 
 ### Graph
 
@@ -76,6 +76,7 @@ graph TD;
   SLauncherListBox --> SIcon
   SLauncherListBox --> SLogo
   SLauncherListBox --> STag
+  SLauncherListBox --> STextLink
   SGnb --> SLauncherListBox
   style SLauncherListBox fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SLauncherListBox/SLauncherListBox.d.ts

@@ -33,6 +33,19 @@ export interface SLauncherListBoxProps extends Omit<HTMLAttributes<HTMLDivElemen
      * 여기로 오지 않는다.
      */
     onSelect?: (service: SLauncherService) => void;
+    /**
+     * 셀메이트 콘솔 주소. 목록 아래에 **늘 서는** "셀메이트 콘솔로 이동" 글자 링크(`STextLink`)가
+     * 누르면 이 주소를 새 탭에서 연다. **필수다** — 어느 서비스의 런처든 콘솔로 가는 길은 있어야 한다.
+     *
+     * 문구·아이콘은 컴포넌트가 정한다 — 어느 서비스의 런처든 같은 곳을 같은 말로 안내해야 한다.
+     * 주소는 서비스 줄의 `href` 처럼 앱마다 QA·실서버가 달라 앱이 넘긴다.
+     */
+    consoleHref: string;
+    /**
+     * 콘솔 링크를 누름. **가는 것은 이 콜백이 하지 않는다** — 컴포넌트가 `consoleHref` 를 새 탭으로
+     * 이미 연다. 누른 것을 앱이 알아야 할 때만(기록·목록 닫기) 준다.
+     */
+    onConsoleClick?: () => void;
     /** 목록(ul)의 접근성 레이블 */
     ariaLabel?: string;
 }
@@ -41,7 +54,7 @@ export interface SLauncherListBoxProps extends Omit<HTMLAttributes<HTMLDivElemen
  *
  * 한 줄이 서비스 하나다: 위에 브랜드 로고(+ 상태 태그), 아래에 한글 이름.
  *
- * **앱이 넘기는 것은 서비스 키와 주소 둘뿐이다.** 로고·서비스 표기·이름·상태 태그는 카탈로그
+ * **앱이 넘기는 것은 서비스 키와 주소 둘뿐이다.** 로고는 서비스 키가, 이름·상태 태그는 카탈로그
  * (`LAUNCHER_SERVICE_CATALOG`)가 서비스마다 한 모습으로 정해 두므로 앱이 넘기지 않는다 —
  * 넘기게 하면 같은 서비스가 앱마다 다른 이름·색·문구로 선다.
  *

package/dist/components/SLauncherListBox/index.d.ts

@@ -1,2 +1,2 @@
 export { SLauncherListBox, type SLauncherListBoxProps, type SLauncherListBoxItem, } from './SLauncherListBox';
-export { LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, type SLauncherService, type SLauncherServiceEntry, } from './launcherListBox.config';
+export { LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, type SLauncherService, type SLauncherServiceEntry, } from './launcherListBox.config';

package/dist/components/SLauncherListBox/launcherListBox.config.d.ts

@@ -1,4 +1,5 @@
 import type { SIconName } from '../SIcon';
+import type { SLogoName } from '../SLogo/logo.config';
 import type { STagColor } from '../STag';
 /**
  * 패널 고정 폭(px, 시안 — 전용 토큰 없음).
@@ -12,10 +13,19 @@ export declare const LAUNCHER_LIST_BOX_WIDTH = 320;
  */
 export declare const LAUNCHER_LIST_BOX_LOGO_HEIGHT = 12;
 /**
- * 워드마크 ↔ 서비스 표기 간격(px, 시안 — 전용 토큰 없음).
- * 토큰의 `logo.gap` 은 [워드마크+표기] 묶음과 태그 사이의 간격이라 여기 쓸 값이 아니다.
+ * 하단 "셀메이트 콘솔로 이동" 줄의 높이(px, 시안 — 전용 토큰 없음).
+ * 글자 한 줄(20)을 가운데 둔 띠라 여백이 아니라 높이로 정한다.
  */
-export declare const LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP = 8;
+export declare const LAUNCHER_LIST_BOX_CONSOLE_HEIGHT = 40;
+/**
+ * 하단 콘솔 줄의 문구. **앱이 바꾸지 않는다** — 모든 서비스의 런처가 같은 곳(통합 콘솔)으로
+ * 같은 말로 안내해야 하기 때문이다.
+ */
+export declare const LAUNCHER_LIST_BOX_CONSOLE_LABEL = "\uC140\uBA54\uC774\uD2B8 \uCF58\uC194\uB85C \uC774\uB3D9";
+/**
+ * 콘솔 링크 앞 아이콘(시안의 글리프와 같다). 뒤의 chevron 은 `STextLink` 의 `rightArrow` 가 그린다.
+ */
+export declare const LAUNCHER_LIST_BOX_CONSOLE_ICON: SIconName;
 /**
  * hover 때 줄 오른쪽 끝에 나타나는 아이콘 — "여기서 다른 서비스로 옮겨 간다"는 표시.
  * 크기·색은 토큰이 정하지만 **어떤 글리프인지는 토큰에 없어** 뜻이 가장 가까운 것을 골랐다.
@@ -23,18 +33,34 @@ export declare const LAUNCHER_LIST_BOX_LOGO_SERVICE_GAP = 8;
  */
 export declare const LAUNCHER_LIST_BOX_TRAILING_ICON: SIconName;
 /**
- * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다.**
+ * 런처에 설 수 있는 서비스 키 — **`SLogo` 가 로고를 가진 서비스 전부다(통합 콘솔 제외).**
+ *
+ * 문서에서 바로 읽히도록 키를 풀어 쓴다(`Exclude<SLogoName, …>` 로 두면 README·Storybook 에 무엇이
+ * 있는지 보이지 않는다). 대신 아래 `LOGO_COVERAGE` 가 로고 목록과 어긋나지 않는지 타입으로 지킨다.
+ */
+export type SLauncherService = 'sellmate' | 'wms' | 'chat' | 'plm' | 'account' | 'people' | 'crm' | 'work' | 'pos';
+/**
+ * 런처에 설 수 있는 서비스 — **목록의 순서이기도 하다**(로고 순서와 같다).
  * 앱이 넘긴 순서가 아니라 이 순서로 선다: 같은 런처가 앱마다 다른 순서로 뜨면 사용자가 매번 다시 찾는다.
  */
-export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "account", "crm"];
-export type SLauncherService = (typeof LAUNCHER_SERVICES)[number];
-/** 카탈로그 한 줄 — 그 서비스가 런처에서 갖는 고정된 모습 */
+export declare const LAUNCHER_SERVICES: readonly ["sellmate", "wms", "chat", "plm", "account", "people", "crm", "work", "pos"];
+/**
+ * 서비스가 아닌 로고 — 런처의 서비스 줄로 세우지 않는다.
+ * `console` 은 통합 콘솔이라 목록 아래 "셀메이트 콘솔로 이동" 링크가 늘 맡는다. 줄로도 세우면 같은 곳이 두 번 선다.
+ */
+type NonServiceLogo = 'console';
+/**
+ * 로고 ↔ 서비스 키 대조. **로고를 더했는데 위 키에 적지 않았거나, 로고가 없는 키를 적으면 이 줄이
+ * 타입 에러가 된다** — "로고가 있는 서비스는 모두 런처에 설 수 있다"를 손으로 기억하지 않게 한다.
+ * (키를 더하면 `LAUNCHER_SERVICES` 와 아래 카탈로그도 함께 채워야 한다 — 카탈로그는 Record 라 타입이 막는다.)
+ */
+type Uncovered = Exclude<SLogoName, SLauncherService | NonServiceLogo> | Exclude<SLauncherService, SLogoName> | Exclude<SLauncherService, (typeof LAUNCHER_SERVICES)[number]>;
+export declare const LOGO_COVERAGE: [Uncovered] extends [never] ? true : Uncovered;
+/**
+ * 카탈로그 한 줄 — 그 서비스가 런처에서 갖는 고정된 모습.
+ * 로고는 여기 적지 않는다 — 서비스 키를 그대로 `SLogo` 의 `name` 으로 넘겨 그 서비스 로고를 그린다.
+ */
 export interface SLauncherServiceEntry {
-    /**
-     * 워드마크 오른쪽에 잇는 서비스 표기(`WMS` · `Account` · `CRM`). 셀메이트 본체처럼 표기가
-     * 없는 서비스는 비운다 — 워드마크만 선다.
-     */
-    mark?: string;
     /** 로고 아래 줄에 적히는 서비스 이름 */
     name: string;
     /**
@@ -95,10 +121,8 @@ export declare const LAUNCHER_LIST_BOX_LAYOUT: {
     readonly nameColorHover: string;
     /** 로고 줄의 위아래 여백 */
     readonly logoPaddingY: string;
-    /** [워드마크 + 서비스 표기] ↔ 태그 간격 */
+    /** 서비스 로고 ↔ 태그 간격 */
     readonly logoTagGap: string;
-    /** 워드마크 ↔ 서비스 표기 간격 */
-    readonly logoServiceGap: "8px";
     /** hover 아이콘 크기 */
     readonly trailingIconSize: string;
     /** hover 아이콘 색 */
@@ -109,10 +133,22 @@ export declare const LAUNCHER_LIST_BOX_LAYOUT: {
      */
     readonly nameDisabledColor: string;
     /**
-     * 아직 못 쓰는 서비스의 로고 색 — 워드마크와, 글자로 온 서비스 표기에 함께 건다.
-     * 둘 다 색만 갈아끼우면 되므로 그래픽 마크에 거는 필터(회색화)를 태우지 않는다 — 태우면
-     * 밝은 accentLight 가 워드마크보다 더 옅어져 둘이 따로 논다. 로고는 글자가 아니라 그림에
+     * 아직 못 쓰는 서비스의 로고 색 — 워드마크와 서비스 표기를 함께 이 한 색으로 덮는다.
+     * 필터(회색화)를 태우지 않는다 — 태우면 밝은 서비스 색이 워드마크보다 더 옅어져 둘이
+     * 따로 논다. 로고는 글자가 아니라 그림에
      * 가까우므로 글자색(disabled-text)이 아니라 아이콘 비활성색을 쓴다.
      */
     readonly logoDisabledColor: string;
+    /** 목록 ↔ 콘솔 줄 구분선 */
+    readonly consoleDivider: string;
+    /** 콘솔 줄 배경 */
+    readonly consoleBg: string;
+    /**
+     * 콘솔 링크 글자색. STextLink 기본(`--cmp-textLink-content-default`)보다 한 단계 옅다(시안).
+     * 크기·간격·hover(밑줄)는 STextLink `sm` 이 정한다.
+     */
+    readonly consoleColor: string;
+    /** 콘솔 링크 앞 아이콘 색. STextLink 기본(파랑)이 아니라 회색이다(시안) */
+    readonly consoleIconColor: string;
 };
+export {};

package/dist/components/SLogo/README.md

@@ -8,9 +8,10 @@
 
 | 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` | — |  |
@@ -23,6 +24,12 @@
 export type SLogoName = (typeof LOGO_NAMES)[number];
 ```
 
+### SLogoMode
+
+```ts
+export type SLogoMode = (typeof LOGO_MODES)[number];
+```
+
 ### LOGO_NAMES
 
 ```ts
@@ -33,8 +40,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

package/dist/components/SLogo/SLogo.d.ts

@@ -1,20 +1,29 @@
 import { type CSSProperties } from 'react';
 import { type SColor } from '../../lib/color';
-import { type SLogoName } from './logo.config';
+import { type SLogoMode, type SLogoName } from './logo.config';
 export interface SLogoProps {
-    /** 로고명 */
+    /**
+     * 로고명 — 셀메이트 본체(`sellmate`) 또는 서비스(`wms` · `account` · `crm` …).
+     * 서비스 로고는 [셀메이트 워드마크 + 서비스 표기]가 한 덩어리로 나온다 — 앱이 표기를 잇지 않는다.
+     */
     name?: SLogoName;
     /**
-     * **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 워드마크 비율에서 저절로 나온다.
+     * 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크).
+     * 서비스 표기 색도 원본이 모드마다 정한 값으로 바뀐다.
+     */
+    mode?: SLogoMode;
+    /**
+     * **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 로고 비율에서 저절로 나온다.
      * `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다).
      */
     size?: number | string;
     /**
-     * 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **로고 전체가 이 한 색이 된다.**
+     * 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **워드마크와 서비스 표기가 모두
+     * 이 한 색이 된다.**
      *
-     * 미지정 시 **브랜드 기본색**이다 — `SIcon` 과 달리 currentColor 를 상속하지 않는다.
-     * 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라지기 때문이다.
-     * 비활성처럼 물러나야 하는 자리에서만 색을 준다.
+     * 미지정 시 **브랜드 색**(`mode` 가 정한 워드마크 색 + 서비스 색)이다 — `SIcon` 과 달리
+     * currentColor 를 상속하지 않는다. 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다
+     * 달라지기 때문이다. 비활성처럼 물러나야 하는 자리에서만 색을 준다.
      */
     color?: SColor;
     /**
@@ -30,17 +39,19 @@ export interface SLogoProps {
  * SLogo — 브랜드 로고를 아이콘처럼 쓰는 컴포넌트.
  *
  * `SIcon` 과 같은 손맛(`name` · `size` · `color`)이지만 두 가지가 다르다.
- * - **`size` 는 높이다.** 로고는 가로로 긴 워드마크라 정사각으로 그리면 찌그러진다 — 폭은 비율에서 나온다.
- * - **색을 주지 않으면 브랜드 기본색이다.** currentColor 를 상속하지 않는다(위 `color` 참고).
+ * - **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 나온다.
+ * - **색을 주지 않으면 브랜드 색이다.** currentColor 를 상속하지 않는다(위 `color` 참고).
+ *
+ * **서비스 이름을 넣으면 그 서비스 로고가 나온다.** 워드마크 오른쪽에 표기를 앱이 따로 잇지 않는다 —
+ * 원본 로고의 자간·색이 서비스마다 달라서, 이어 붙이면 원본과 어긋난다.
  *
- * **서비스 로고는 `sellmate` 하나뿐이다.** 서비스별 표기(WMS · Account · CRM …)는 이 워드마크
- * 오른쪽에 소비 앱이 자기 텍스트나 자기 로고로 붙인다 — 서비스가 늘어날 때마다 디자인 시스템을
- * 다시 배포하지 않으려는 것이다.
+ * 배경이 어두우면 `mode="dark"` 를 준다 — 워드마크가 흰색이 되고 서비스 표기도 원본의 dark 색으로 바뀐다.
  *
  * ```tsx
- * <SLogo />                                  // 브랜드색, 높이 24
- * <SLogo size={12} />                        // 런처 목록의 한 줄
- * <SLogo size={12} color="grey_45" />        // 아직 못 쓰는 서비스
+ * <SLogo />                                  // 셀메이트, 브랜드 색, 높이 24
+ * <SLogo name="wms" size={12} />             // 런처 목록의 한 줄
+ * <SLogo name="account" mode="dark" />       // 어두운 면 위
+ * <SLogo name="crm" color="grey_45" />       // 아직 못 쓰는 서비스 — 로고 전체가 한 색
  * <SLogo size={32} label="Sellmate" />       // 로고가 그 자리의 유일한 이름일 때
  * ```
  */

package/dist/components/SLogo/index.d.ts

@@ -1,2 +1,2 @@
 export { SLogo, type SLogoProps } from './SLogo';
-export { LOGO_DEFAULT_SIZE, LOGO_NAMES, type SLogoName } from './logo.config';
+export { LOGO_DEFAULT_SIZE, LOGO_MODES, LOGO_NAMES, type SLogoMode, type SLogoName, } from './logo.config';

package/dist/components/SLogo/logo.config.d.ts

@@ -4,9 +4,18 @@
  * 로고는 브랜드 자산이라 **색·비율이 토큰을 따르지 않는다** — 테마가 바뀌어도 로고는 그대로여야
  * 하고, 워드마크의 비율은 자산 자체가 정한다. 그래서 이 파일의 값은 토큰 참조가 아니다.
  */
-/** 담고 있는 로고. 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다 */
-export declare const LOGO_NAMES: readonly ["sellmate"];
+/**
+ * 담고 있는 로고 — 셀메이트 본체와 서비스들, 그리고 통합 콘솔. 로고 한 벌은 [셀메이트 워드마크 + 표기]다.
+ * 늘어나면 여기와 `logos.tsx` 의 맵에 함께 추가한다.
+ */
+export declare const LOGO_NAMES: readonly ["sellmate", "wms", "chat", "plm", "account", "people", "crm", "work", "pos", "console"];
 export type SLogoName = (typeof LOGO_NAMES)[number];
+/**
+ * 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크).
+ * 서비스 표기 색도 모드마다 원본이 정한 값으로 바뀐다(Account·POS 는 dark 에서 더 밝다).
+ */
+export declare const LOGO_MODES: readonly ["light", "dark"];
+export type SLogoMode = (typeof LOGO_MODES)[number];
 /**
  * 기본 높이(px). `SIcon` 과 같은 값이라 나란히 쓸 때 손에 익은 크기가 같다.
  * 폭은 주지 않는다 — 로고마다 다른 비율에서 저절로 나온다.

package/dist/components/SLogo/logos.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+import type { SLogoMode, SLogoName } from './logo.config';
+interface LogoGlyphProps {
+    name: SLogoName;
+    mode: SLogoMode;
+    /** 로고 전체를 덮을 한 색. 비우면 원본 브랜드 색(워드마크 + 서비스 색)이다 */
+    color?: string;
+    style?: CSSProperties;
+}
+/**
+ * @internal
+ * 로고 글리프 하나. 높이는 `style` 로 받고 폭은 viewBox 비율에서 나온다. 접근성 이름은 `SLogo` 가 붙인다.
+ */
+export declare function LogoGlyph({ name, mode, color, style }: LogoGlyphProps): import("react").JSX.Element | null;
+export {};

package/dist/components/STextLink/README.md

@@ -46,6 +46,7 @@ export type STextLinkSize = 'sm' | 'md' | 'lg';
 
  - [SChipFilter](../SChipFilter)
  - [SChipInput](../SChipInput)
+ - [SLauncherListBox](../SLauncherListBox)
  - [SPopover](../SPopover)
  - [STable](../STable)
 
@@ -62,6 +63,7 @@ graph TD;
   STextLink --> STag
   SChipFilter --> STextLink
   SChipInput --> STextLink
+  SLauncherListBox --> STextLink
   SPopover --> STextLink
   STable --> STextLink
   style STextLink fill:#f9f,stroke:#333,stroke-width:4px