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

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`(셀메이트·서비스 로고를 아이콘처럼 — name 으로 서비스, mode 로 배경, size 는 높이다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
+| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(셀메이트·서비스 로고를 아이콘처럼 — name 으로 서비스, mode 로 배경, direction 으로 가로·세로, size 는 높이다 — `"auto"` 면 부모 폭을 채운다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
@@ -585,7 +585,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
 | 아이콘을 넣는다 | `SIcon` | |
-| 셀메이트·서비스 로고를 넣는다 | `SLogo` (`name` 에 서비스, 어두운 면이면 `mode="dark"`. `size` 는 **높이**이고, 색을 주지 않으면 브랜드 색이다) | §3-7-14 |
+| 셀메이트·서비스 로고를 넣는다 | `SLogo` (`name` 에 서비스, 어두운 면이면 `mode="dark"`, 표기를 아래에 두려면 `direction="vertical"`. `size` 는 **높이**이고(`"auto"` 면 부모 폭을 채운다), 색을 주지 않으면 브랜드 색이다) | §3-7-14 |
 | 사진·썸네일을 보여준다 (로딩·실패 상태 포함) | `SImage` | §3-7-12 |
 | 작은 썸네일을 호버해서 크게 확인하게 한다 | `SImage previewOnHover` | 툴팁·팝오버로 직접 만들지 않는다 — 미리보기는 마우스를 통과시키고 원본의 로딩·실패도 스스로 표현한다. §3-7-12 |
 | 문장 안에서 다른 화면으로 보낸다 | `STextLink` | §3-5-6 |
@@ -2056,7 +2056,9 @@ const [selectedId, setSelectedId] = useState<string>();
 
 - **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
 - **배경에 맞춰 `mode` 를 준다.** 밝은 면은 `light`(기본), 어두운 면(dark GNB 등)은 `dark`. 워드마크 색과 서비스 표기 색을 모드가 정하므로 색을 직접 주지 않는다.
-- **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다.
+- **표기를 워드마크 아래에 두려면 `direction="vertical"` 을 준다**(로그인 카드처럼 폭이 좁고 로고가 가운데 서는 자리). 워드마크 아래에 표기를 앱이 따로 쌓지 않는다. 모든 서비스 로고가 세로를 가진다(`sellmate` 는 표기가 없어 어느 쪽이든 같다). 세로의 표기 색도 원본이 정하므로 색을 직접 맞추지 않는다.
+- **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다. `vertical` 에서는 두 줄 전체의 높이라, 같은 `size` 면 워드마크가 가로보다 작다.
+- **로고 자리의 폭이 정해져 있으면 `size="auto"` 로 그 폭을 채운다**(`SGnb` `header="fix"` 의 로고 칸). 높이는 비율에서 나온다. 폭을 채우려고 `className`·`style` 로 svg 를 덮지 않는다. **부모에 폭이 없는 자리에는 쓰지 않는다** — 기준을 잃어 브라우저 기본 크기(300px)로 그려진다. `header="full"` 의 로고 칸(140px 고정)에서도 쓰지 않는다 — 거기서는 높이로 주고 칸 안에 들어가는 크기를 고른다.
 - **색을 주지 않으면 브랜드 색이다.** `SIcon` 과 달리 currentColor 를 상속하지 않는다 — 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라진다. **비활성처럼 물러나야 하는 자리에서만** `color` 를 준다. 주면 워드마크와 서비스 표기가 모두 그 한 색이 된다(`mode` 보다 우선한다).
 - **`label` 은 로고가 그 자리의 유일한 이름일 때만 준다**(로그인 화면·상단바). 옆이나 아래에 서비스 이름이 이미 적혀 있으면(런처 목록의 한 줄) 주지 않는다 — 같은 이름이 두 번 읽힌다.
 
@@ -2064,13 +2066,18 @@ const [selectedId, setSelectedId] = useState<string>();
 ✅ <SLogo size={20} />                                    {/* 상단바 로고 — 브랜드 색 */}
 ✅ <SLogo name="wms" size={20} />                         {/* 서비스 로고 */}
 ✅ <SLogo name="wms" mode="dark" size={20} />             {/* 어두운 면 위 */}
+✅ <SLogo name="wms" direction="vertical" size={48} />    {/* 워드마크 아래에 표기 — 로그인 카드 */}
 ✅ <SLogo size={32} label="Sellmate" />                   {/* 로고가 그 자리의 유일한 이름일 때 */}
+✅ <SGnb header="fix" logo={<SLogo name="account" mode="dark" size="auto" />} … />  {/* fix 로고 칸을 채운다 */}
 ✅ <SLogo name="crm" size={12} color="grey_45" />         {/* 아직 못 쓰는 서비스 — 로고 전체가 한 색 */}
 
 ❌ <span><SLogo /><span>WMS</span></span>                 {/* 표기를 잇지 않는다 — name="wms" */}
+❌ <div><SLogo /><div>WMS</div></div>                     {/* 아래로 쌓지도 않는다 — direction="vertical" */}
 ❌ <SLogo name="wms" color="white" />                     {/* 어두운 면이면 mode="dark" — 표기 색까지 흰색이 된다 */}
 ❌ <svg viewBox="0 0 347 50">…</svg>                       {/* 로고를 손으로 붙이지 않는다 */}
 ❌ <SLogo size={24} style={{ width: 120 }} />              {/* 폭은 비율이 정한다 — 찌그러진다 */}
+❌ <SLogo className="w-full [&>svg]:w-full!" />            {/* 폭을 채우려면 size="auto" */}
+❌ <SGnb header="full" logo={<SLogo size="auto" />} … />  {/* full 로고 칸(140px)에서는 높이로 준다 */}
 ❌ <SLogo color="grey_45" />                               {/* 물러날 이유가 없으면 브랜드 색 그대로 둔다 */}
 ```
 
@@ -2256,13 +2263,14 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 
 | `header` | 상단바 배치 | 로고 폭 | `topContent` |
 | --- | --- | --- | --- |
-| `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 내용 폭 | **렌더되지 않는다** (놓을 자리가 없다) |
+| `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 런처와 폴드 사이 남은 폭 (메뉴 폭을 따른다) | **렌더되지 않는다** (놓을 자리가 없다) |
 | `"full"` | `[런처 · 폴드 · 로고 · topContent … system]` — 상단바가 화면 전폭이고 `system` 은 오른쪽 끝 | **140px 고정** (런처 없으면 172px) | 로고 오른쪽 남는 폭 전체 |
 
 - `topContent` 는 상단바 로고 오른쪽 슬롯이다. 전역 검색처럼 **모든 페이지에 공통인 것만** 넣는다. 페이지별 액션은 여기가 아니라 §4-2 의 `STableBar` 로 간다.
 - **계정·알림·설정·도메인·서비스 전환은 `topContent` 에 손으로 만들지 않는다.** `header="full"` 이면 `system` 슬롯의 조각들이 상단바 오른쪽 끝으로 올라오므로, 그것들은 전부 `SGnbSystem` 이 그린다 (바로 아래 절).
 - 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
-- `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
+- `header="fix"` 에서 로고 자리는 런처와 폴드 버튼 사이의 남은 폭이다. **`SLogo size="auto"` 를 넣으면 그 폭을 채운다** — 메뉴 폭을 바꾸거나 로고 종류가 바뀌어도 폭에 맞춰진다. 높이(`size`)로 준 로고가 그보다 넓으면 잘린다.
+- `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다. **여기서는 `SLogo size="auto"` 를 쓰지 않는다** — 높이(`size`)로 주고 140px 안에 들어가는 크기를 고른다.
 - `launcher` 를 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
 - **런처 버튼은 서비스 목록의 트리거다.** `launcher.items` 에 옮겨 갈 서비스를 **키와 주소로** 넘기면 버튼 아래로 목록이 뜨고, 고른 서비스가 새 탭에서 열린다. 셀메이트 콘솔로 가는 줄은 `launcher.consoleHref` 로 붙는다 — 팝오버도 이동도 손으로 만들지 않는다 (§3-5-9).
 
@@ -2958,9 +2966,10 @@ export default function LoginPage() {
     // 여백은 카드가 최소 폭을 지킬 수 있는 값으로 둔다 — 카드 폭은 className 으로 박지 않는다
     <div className="flex h-screen items-stretch justify-center bg-bg-neutralLight p-sd-24">
       <SLoginCard
-        product="AI assistant"
-        title="셀메이트 AI 어시스턴트와 함께 자료 찾는 시간은 줄이고, 업무는 빠르게!"
-        description="(사내 답변은 사내 문서를 기반으로 답변합니다.)"
+        // 제품은 서비스 키로 고른다 — 카드가 그 서비스의 세로 로고를 그린다. 제품명을 글자로 넘기지 않는다
+        service="account"
+        title="쇼핑몰 대표님을 위한 정부·세무 도우미입니다."
+        description="(세금 신고 일정과 지원사업 소식을 한곳에서 챙겨 드립니다.)"
         // 로그인 버튼은 카드가 그린다 — 동작만 넘긴다
         onLogin={() => navigate('/auth/sso')}
         footerNote="계정이 없다면 담당자에게 문의를 요청해 주세요."
@@ -2988,7 +2997,7 @@ export default function LoginPage() {
 
 | Prop | 용도 |
 | --- | --- |
-| `product` | 로고 아래 제품명 (`AI assistant` · `account` · `chat`) |
+| `service` | 제품 — `SLogo` 의 로고명(`account` · `wms` · `chat` …, `SLogoName`). 카드 맨 위에 그 서비스의 세로 로고가 선다 |
 | `title` | 제품을 한 줄로 소개하는 문장 |
 | `description` | 소개 바로 아래 붙는 보조 설명. 소개와 한 문단으로 읽힌다 — 없으면 생략한다 |
 | `onLogin` | 로그인 버튼을 눌렀을 때. **버튼은 카드가 그리므로 동작만 넘긴다** — 문구·색·크기는 세 제품에서 같아야 한다 |
@@ -3001,7 +3010,12 @@ export default function LoginPage() {
 
 **크기는 부모가 정한다 — `className` 으로 폭을 박지 않는다.** 카드는 폭을 368~640px 사이에서 부모에 맞추고 높이도 부모가 준 만큼 채운다. 밖에서 고정하면 상하한이 무의미해져, 좁은 화면에서 함께 좁아져야 할 카드가 그대로 남아 넘친다. 좁게 세워야 하면 카드가 아니라 바깥 한 겹을 좁힌다.
 
-**Sellmate 워드마크와 로그인 버튼은 카드가 직접 그린다 — prop 이 없다.** 세 제품이 같은 로고·같은 버튼 문구(`통합 계정으로 로그인`)로 서므로 넘길 것도, 갈아 끼울 것도 없다. 앱이 주는 것은 문구와 `onLogin` 동작뿐이다.
+**로고와 로그인 버튼은 카드가 직접 그린다.** 로고는 `service` 키로 고르면 카드가 그 서비스의 세로 로고(`SLogo direction="vertical"`)를 크기·접근성 이름까지 정해 세운다 — **제품명을 글자로 넘기거나 로고를 따로 얹지 않는다.** 표기의 서체·자간·색은 원본 로고가 정한다. 버튼은 모든 제품이 같은 문구(`통합 계정으로 로그인`)로 서므로 넘길 것이 없다. 앱이 주는 것은 서비스 키·문구·`onLogin` 동작뿐이다.
+
+```tsx
+✅ <SLoginCard service="account" title="…" onLogin={login} />
+❌ <SLoginCard service="sellmate" title={<><b>Account</b> …</>} />   {/* 제품명을 글자로 잇지 않는다 — service="account" */}
+```
 
 **로그인 카드 옆에 다른 블록을 두지 않는다.** 이 화면에서 할 일은 로그인 하나이고, 옆에 공지·배너가 붙는 순간 그 뜻이 깨진다. 안내가 필요하면 `description` 이나 `footerNote` 로 넣는다.
 
@@ -6479,7 +6493,7 @@ export type SGhostButtonIntent = 'default' | 'danger' | 'action' | 'subAction' |
 | `value?` | `string` | `''` | 현재 선택된 아이템 value |
 | `folded?` | `boolean` | — | 접힘(레일) 상태. 미지정 시 SLayout 의 folded 를 따른다. |
 | `launcher?` | `SGnbLauncher` | — | 앱런처(그리드) 버튼. 미지정 시 런처 버튼을 렌더하지 않는다. 접힘 레일(fix)에는 폴드 버튼만 남으므로 표시되지 않는다. |
-| `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot). header="full" 이면 폭이 140px 로 고정된다. |
+| `logo?` | `ReactNode` | — | 상단바 로고 영역 (slot). - `header="fix"` : 런처와 폴드 버튼 사이의 남은 폭이 로고 칸이다. `SLogo size="auto"` 를 넣으면 그 폭을 채운다(메뉴 폭을 바꿔도 따라온다). 넘치는 로고는 잘린다. - `header="full"` : 폭이 140px 로 고정된다. 여기서는 `size="auto"` 를 쓰지 않는다 — 높이(`size`)로 주고 140px 안에 들어가는 크기를 고른다. |
 | `topContent?` | `ReactNode` | — | 상단바 로고 오른쪽 슬롯 (검색·액션 등). 로고와 16px 띄고 남는 폭을 모두 차지하므로 안에서 자유롭게 정렬한다. 상단바가 전폭인 header="full" 에서만 렌더된다 (fix 는 상단바가 좁은 GNB 컬럼 안이라 놓을 자리가 없다). |
 | `railTop?` | `ReactNode` | — | 레일 상단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 상단(상단바 바로 아래)에 붙어 고정된다. showRail 일 때만 렌더된다. |
 | `railFooter?` | `ReactNode` | — | 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고 이 슬롯은 레일 하단에 붙어 고정된다. showRail 일 때만 렌더된다. |
@@ -7663,7 +7677,7 @@ export type SLoadingModalState = 'loading' | 'error';
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `product` | `ReactNode` | — | 로고 아래 제품명 (예: `AI assistant` · `account` · `chat`) |
+| `service` | `SLogoName` | — | 제품 — 그 서비스의 **세로 로고**([셀메이트 워드마크 + 서비스 표기])가 카드 맨 위에 선다. 제품명을 글자로 넘기지 않는다 — 표기의 서체·자간·색은 원본 로고가 정한다. |
 | `title` | `ReactNode` | — | 제품을 한 줄로 소개하는 문장 |
 | `description?` | `ReactNode` | — | 소개 문장 바로 아래 붙는 보조 설명. 소개와 한 덩어리로 읽힌다 |
 | `footerNote?` | `ReactNode` | — | 버튼 아래 안내 문구 (예: 계정 발급 문의 안내) |
@@ -7698,7 +7712,8 @@ export type SLoadingModalState = 'loading' | 'error';
 |------|------|---------|-------------|
 | `name?` | `SLogoName` | `'sellmate'` | 로고명 — 셀메이트 본체(`sellmate`) 또는 서비스(`wms` · `account` · `crm` …). 서비스 로고는 [셀메이트 워드마크 + 서비스 표기]가 한 덩어리로 나온다 — 앱이 표기를 잇지 않는다. |
 | `mode?` | `SLogoMode` | `'light'` | 로고가 서는 배경. 밝은 면에는 `light`(남색 워드마크), 어두운 면에는 `dark`(흰 워드마크). 서비스 표기 색도 원본이 모드마다 정한 값으로 바뀐다. |
-| `size?` | `number \| string` | `LOGO_DEFAULT_SIZE` | **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 로고 비율에서 저절로 나온다. `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다). |
+| `direction?` | `SLogoDirection` | `'horizontal'` | 배치. `horizontal` 은 워드마크 오른쪽에 서비스 표기, `vertical` 은 워드마크 아래 가운데에 표기 (로그인 카드처럼 폭이 좁고 로고가 가운데 서는 자리). `sellmate` 는 표기가 없어 어느 쪽이든 같다. 표기 색이 가로와 다른 로고도 있다(POS 세로는 light 에서도 `#4886FF`) — 원본을 따른다. |
+| `size?` | `number \| 'auto' \| (string & {})` | `LOGO_DEFAULT_SIZE` | **높이**(px 또는 CSS 길이). 폭은 주지 않는다 — 로고 비율에서 저절로 나온다. `SIcon` 의 `size` 와 달리 정사각이 아니다(로고는 가로로 길다). `vertical` 은 두 줄 전체의 높이다 — 같은 `size` 면 워드마크가 가로보다 작게 선다. `'auto'` 면 높이를 정하지 않는다 — **부모 폭을 꽉 채우고 높이는 비율로 따라온다.** 로고 자리의 폭이 정해진 곳(`SGnb` `header="fix"` 의 로고 칸)에서 쓴다. 부모에 폭이 없으면 기준을 잃어 브라우저 기본 크기(300px)로 그려진다. |
 | `color?` | `SColor` | — | 색. 팔레트 키(`grey_45`, `red_95` …) 또는 임의 CSS 색상. **워드마크와 서비스 표기가 모두 이 한 색이 된다.** 미지정 시 **브랜드 색**(`mode` 가 정한 워드마크 색 + 서비스 색)이다 — `SIcon` 과 달리 currentColor 를 상속하지 않는다. 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라지기 때문이다. 비활성처럼 물러나야 하는 자리에서만 색을 준다. |
 | `label?` | `string` | — | 접근성 라벨. 없으면 `aria-hidden` 이다 — 로고 옆에 서비스 이름이 이미 적혀 있는 자리 (런처 목록의 한 줄 등)에서는 이름이 두 번 읽히지 않도록 그대로 둔다. 로고가 그 자리의 유일한 이름이면(로그인 화면·상단바) 브랜드명을 넘긴다. |
 | `className?` | `string` | — |  |
@@ -7718,6 +7733,12 @@ export type SLogoName = (typeof LOGO_NAMES)[number];
 export type SLogoMode = (typeof LOGO_MODES)[number];
 ```
 
+### SLogoDirection
+
+```ts
+export type SLogoDirection = (typeof LOGO_DIRECTIONS)[number];
+```
+
 ### LOGO_NAMES
 
 ```ts
@@ -7756,6 +7777,16 @@ export const LOGO_NAMES = [
 export const LOGO_MODES = ['light', 'dark'] as const;
 ```
 
+### LOGO_DIRECTIONS
+
+```ts
+/**
+ * 로고의 배치. `horizontal` 은 워드마크 오른쪽에 서비스 표기, `vertical` 은 워드마크 아래 가운데에 표기.
+ * 모든 서비스 로고가 세로 원본을 갖는다. 셀메이트 본체는 표기가 없어 세로여도 모양이 같다.
+ */
+export const LOGO_DIRECTIONS = ['horizontal', 'vertical'] as const;
+```
+
 ## Dependencies
 
 ### Used by

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`(셀메이트·서비스 로고를 아이콘처럼 — name 으로 서비스, mode 로 배경, size 는 높이다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
+| **표시·상태** | `STag` `SBadge` `SIcon` `SLogo`(셀메이트·서비스 로고를 아이콘처럼 — name 으로 서비스, mode 로 배경, direction 으로 가로·세로, size 는 높이다 — `"auto"` 면 부모 폭을 채운다) `SImage` `SCallout` `SContextAlert`(한 줄짜리 맥락 알림 — 오른쪽에 후속 동작 버튼) `SGuide` |
 | **진행·로딩** | `SLinearProgress` `SCircleProgress` `SLoadingContainer` `SLoadingModal` |
 | **오버레이** | `STooltip` `SPopover` `SPopup` `SDrawer` `SPortal` |
 | **모달** | `SModal.confirm()` `SModal.create()` + `SActionModal` `SConfirmModal` `SModalOutlet`(앱 루트 1회) |
@@ -586,7 +586,7 @@ Tailwind 유틸리티는 **토큰 스케일에 있는 값만** 사용한다.
 | 상태·분류를 라벨로 찍는다 | `STag` | §3-1 |
 | 색 점만으로 상태를 찍는다 | `SBadge` | §3-1 |
 | 아이콘을 넣는다 | `SIcon` | |
-| 셀메이트·서비스 로고를 넣는다 | `SLogo` (`name` 에 서비스, 어두운 면이면 `mode="dark"`. `size` 는 **높이**이고, 색을 주지 않으면 브랜드 색이다) | §3-7-14 |
+| 셀메이트·서비스 로고를 넣는다 | `SLogo` (`name` 에 서비스, 어두운 면이면 `mode="dark"`, 표기를 아래에 두려면 `direction="vertical"`. `size` 는 **높이**이고(`"auto"` 면 부모 폭을 채운다), 색을 주지 않으면 브랜드 색이다) | §3-7-14 |
 | 사진·썸네일을 보여준다 (로딩·실패 상태 포함) | `SImage` | §3-7-12 |
 | 작은 썸네일을 호버해서 크게 확인하게 한다 | `SImage previewOnHover` | 툴팁·팝오버로 직접 만들지 않는다 — 미리보기는 마우스를 통과시키고 원본의 로딩·실패도 스스로 표현한다. §3-7-12 |
 | 문장 안에서 다른 화면으로 보낸다 | `STextLink` | §3-5-6 |
@@ -2057,7 +2057,9 @@ const [selectedId, setSelectedId] = useState<string>();
 
 - **`name` 에 서비스를 넣으면 그 서비스 로고가 나온다**(`sellmate` · `wms` · `chat` · `plm` · `account` · `people` · `crm` · `work` · `pos` · `console` — `SLogoName`). [셀메이트 워드마크 + 서비스 표기]가 한 덩어리다. **워드마크 옆에 표기를 앱이 따로 잇지 않는다** — 표기의 서체·자간·색이 원본과 어긋난다.
 - **배경에 맞춰 `mode` 를 준다.** 밝은 면은 `light`(기본), 어두운 면(dark GNB 등)은 `dark`. 워드마크 색과 서비스 표기 색을 모드가 정하므로 색을 직접 주지 않는다.
-- **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다.
+- **표기를 워드마크 아래에 두려면 `direction="vertical"` 을 준다**(로그인 카드처럼 폭이 좁고 로고가 가운데 서는 자리). 워드마크 아래에 표기를 앱이 따로 쌓지 않는다. 모든 서비스 로고가 세로를 가진다(`sellmate` 는 표기가 없어 어느 쪽이든 같다). 세로의 표기 색도 원본이 정하므로 색을 직접 맞추지 않는다.
+- **`size` 는 높이다.** 로고는 가로로 길어 정사각으로 그리면 찌그러진다 — 폭은 비율에서 저절로 나오므로 주지 않는다. `vertical` 에서는 두 줄 전체의 높이라, 같은 `size` 면 워드마크가 가로보다 작다.
+- **로고 자리의 폭이 정해져 있으면 `size="auto"` 로 그 폭을 채운다**(`SGnb` `header="fix"` 의 로고 칸). 높이는 비율에서 나온다. 폭을 채우려고 `className`·`style` 로 svg 를 덮지 않는다. **부모에 폭이 없는 자리에는 쓰지 않는다** — 기준을 잃어 브라우저 기본 크기(300px)로 그려진다. `header="full"` 의 로고 칸(140px 고정)에서도 쓰지 않는다 — 거기서는 높이로 주고 칸 안에 들어가는 크기를 고른다.
 - **색을 주지 않으면 브랜드 색이다.** `SIcon` 과 달리 currentColor 를 상속하지 않는다 — 로고가 주변 글자색을 따라 물들면 브랜드 색이 화면마다 달라진다. **비활성처럼 물러나야 하는 자리에서만** `color` 를 준다. 주면 워드마크와 서비스 표기가 모두 그 한 색이 된다(`mode` 보다 우선한다).
 - **`label` 은 로고가 그 자리의 유일한 이름일 때만 준다**(로그인 화면·상단바). 옆이나 아래에 서비스 이름이 이미 적혀 있으면(런처 목록의 한 줄) 주지 않는다 — 같은 이름이 두 번 읽힌다.
 
@@ -2065,13 +2067,18 @@ const [selectedId, setSelectedId] = useState<string>();
 ✅ <SLogo size={20} />                                    {/* 상단바 로고 — 브랜드 색 */}
 ✅ <SLogo name="wms" size={20} />                         {/* 서비스 로고 */}
 ✅ <SLogo name="wms" mode="dark" size={20} />             {/* 어두운 면 위 */}
+✅ <SLogo name="wms" direction="vertical" size={48} />    {/* 워드마크 아래에 표기 — 로그인 카드 */}
 ✅ <SLogo size={32} label="Sellmate" />                   {/* 로고가 그 자리의 유일한 이름일 때 */}
+✅ <SGnb header="fix" logo={<SLogo name="account" mode="dark" size="auto" />} … />  {/* fix 로고 칸을 채운다 */}
 ✅ <SLogo name="crm" size={12} color="grey_45" />         {/* 아직 못 쓰는 서비스 — 로고 전체가 한 색 */}
 
 ❌ <span><SLogo /><span>WMS</span></span>                 {/* 표기를 잇지 않는다 — name="wms" */}
+❌ <div><SLogo /><div>WMS</div></div>                     {/* 아래로 쌓지도 않는다 — direction="vertical" */}
 ❌ <SLogo name="wms" color="white" />                     {/* 어두운 면이면 mode="dark" — 표기 색까지 흰색이 된다 */}
 ❌ <svg viewBox="0 0 347 50">…</svg>                       {/* 로고를 손으로 붙이지 않는다 */}
 ❌ <SLogo size={24} style={{ width: 120 }} />              {/* 폭은 비율이 정한다 — 찌그러진다 */}
+❌ <SLogo className="w-full [&>svg]:w-full!" />            {/* 폭을 채우려면 size="auto" */}
+❌ <SGnb header="full" logo={<SLogo size="auto" />} … />  {/* full 로고 칸(140px)에서는 높이로 준다 */}
 ❌ <SLogo color="grey_45" />                               {/* 물러날 이유가 없으면 브랜드 색 그대로 둔다 */}
 ```
 
@@ -2257,13 +2264,14 @@ import { SModalOutlet } from 'sellmate-design-system-react';
 
 | `header` | 상단바 배치 | 로고 폭 | `topContent` |
 | --- | --- | --- | --- |
-| `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 내용 폭 | **렌더되지 않는다** (놓을 자리가 없다) |
+| `"fix"` (기본) | `[런처 · 로고 … 폴드]` — 상단바가 GNB 컬럼 안에 있고 폴드가 컬럼 오른쪽 끝 | 런처와 폴드 사이 남은 폭 (메뉴 폭을 따른다) | **렌더되지 않는다** (놓을 자리가 없다) |
 | `"full"` | `[런처 · 폴드 · 로고 · topContent … system]` — 상단바가 화면 전폭이고 `system` 은 오른쪽 끝 | **140px 고정** (런처 없으면 172px) | 로고 오른쪽 남는 폭 전체 |
 
 - `topContent` 는 상단바 로고 오른쪽 슬롯이다. 전역 검색처럼 **모든 페이지에 공통인 것만** 넣는다. 페이지별 액션은 여기가 아니라 §4-2 의 `STableBar` 로 간다.
 - **계정·알림·설정·도메인·서비스 전환은 `topContent` 에 손으로 만들지 않는다.** `header="full"` 이면 `system` 슬롯의 조각들이 상단바 오른쪽 끝으로 올라오므로, 그것들은 전부 `SGnbSystem` 이 그린다 (바로 아래 절).
 - 슬롯이 남는 폭을 통째로 받으므로 **정렬은 안에서 직접 잡는다** (좌측 정렬 + 우측은 `ml-auto`).
-- `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다.
+- `header="fix"` 에서 로고 자리는 런처와 폴드 버튼 사이의 남은 폭이다. **`SLogo size="auto"` 를 넣으면 그 폭을 채운다** — 메뉴 폭을 바꾸거나 로고 종류가 바뀌어도 폭에 맞춰진다. 높이(`size`)로 준 로고가 그보다 넓으면 잘린다.
+- `header="full"` 에서 로고 자리는 140px 로 고정된다 — 로고 내용이 바뀌어도 `topContent` 시작점이 흔들리지 않게 하기 위함이다. 로고가 그보다 넓으면 잘리므로 이 폭에 맞춰 준비한다. **여기서는 `SLogo size="auto"` 를 쓰지 않는다** — 높이(`size`)로 주고 140px 안에 들어가는 크기를 고른다.
 - `launcher` 를 주지 않으면 런처가 렌더되지 않고, 그 자리(버튼 + 간격)를 로고 슬롯이 이어받아 172px 가 된다. `topContent` 시작점은 런처 유무와 관계없이 같은 자리다.
 - **런처 버튼은 서비스 목록의 트리거다.** `launcher.items` 에 옮겨 갈 서비스를 **키와 주소로** 넘기면 버튼 아래로 목록이 뜨고, 고른 서비스가 새 탭에서 열린다. 셀메이트 콘솔로 가는 줄은 `launcher.consoleHref` 로 붙는다 — 팝오버도 이동도 손으로 만들지 않는다 (§3-5-9).
 
@@ -2959,9 +2967,10 @@ export default function LoginPage() {
     // 여백은 카드가 최소 폭을 지킬 수 있는 값으로 둔다 — 카드 폭은 className 으로 박지 않는다
     <div className="flex h-screen items-stretch justify-center bg-bg-neutralLight p-sd-24">
       <SLoginCard
-        product="AI assistant"
-        title="셀메이트 AI 어시스턴트와 함께 자료 찾는 시간은 줄이고, 업무는 빠르게!"
-        description="(사내 답변은 사내 문서를 기반으로 답변합니다.)"
+        // 제품은 서비스 키로 고른다 — 카드가 그 서비스의 세로 로고를 그린다. 제품명을 글자로 넘기지 않는다
+        service="account"
+        title="쇼핑몰 대표님을 위한 정부·세무 도우미입니다."
+        description="(세금 신고 일정과 지원사업 소식을 한곳에서 챙겨 드립니다.)"
         // 로그인 버튼은 카드가 그린다 — 동작만 넘긴다
         onLogin={() => navigate('/auth/sso')}
         footerNote="계정이 없다면 담당자에게 문의를 요청해 주세요."
@@ -2989,7 +2998,7 @@ export default function LoginPage() {
 
 | Prop | 용도 |
 | --- | --- |
-| `product` | 로고 아래 제품명 (`AI assistant` · `account` · `chat`) |
+| `service` | 제품 — `SLogo` 의 로고명(`account` · `wms` · `chat` …, `SLogoName`). 카드 맨 위에 그 서비스의 세로 로고가 선다 |
 | `title` | 제품을 한 줄로 소개하는 문장 |
 | `description` | 소개 바로 아래 붙는 보조 설명. 소개와 한 문단으로 읽힌다 — 없으면 생략한다 |
 | `onLogin` | 로그인 버튼을 눌렀을 때. **버튼은 카드가 그리므로 동작만 넘긴다** — 문구·색·크기는 세 제품에서 같아야 한다 |
@@ -3002,7 +3011,12 @@ export default function LoginPage() {
 
 **크기는 부모가 정한다 — `className` 으로 폭을 박지 않는다.** 카드는 폭을 368~640px 사이에서 부모에 맞추고 높이도 부모가 준 만큼 채운다. 밖에서 고정하면 상하한이 무의미해져, 좁은 화면에서 함께 좁아져야 할 카드가 그대로 남아 넘친다. 좁게 세워야 하면 카드가 아니라 바깥 한 겹을 좁힌다.
 
-**Sellmate 워드마크와 로그인 버튼은 카드가 직접 그린다 — prop 이 없다.** 세 제품이 같은 로고·같은 버튼 문구(`통합 계정으로 로그인`)로 서므로 넘길 것도, 갈아 끼울 것도 없다. 앱이 주는 것은 문구와 `onLogin` 동작뿐이다.
+**로고와 로그인 버튼은 카드가 직접 그린다.** 로고는 `service` 키로 고르면 카드가 그 서비스의 세로 로고(`SLogo direction="vertical"`)를 크기·접근성 이름까지 정해 세운다 — **제품명을 글자로 넘기거나 로고를 따로 얹지 않는다.** 표기의 서체·자간·색은 원본 로고가 정한다. 버튼은 모든 제품이 같은 문구(`통합 계정으로 로그인`)로 서므로 넘길 것이 없다. 앱이 주는 것은 서비스 키·문구·`onLogin` 동작뿐이다.
+
+```tsx
+✅ <SLoginCard service="account" title="…" onLogin={login} />
+❌ <SLoginCard service="sellmate" title={<><b>Account</b> …</>} />   {/* 제품명을 글자로 잇지 않는다 — service="account" */}
+```
 
 **로그인 카드 옆에 다른 블록을 두지 않는다.** 이 화면에서 할 일은 로그인 하나이고, 옆에 공지·배너가 붙는 순간 그 뜻이 깨진다. 안내가 필요하면 `description` 이나 `footerNote` 로 넣는다.
 

package/dist/styles.css

@@ -1350,6 +1350,9 @@
   .w-\[72px\] {
     width: 72px;
   }
+  .w-\[140px\] {
+    width: 140px;
+  }
   .w-\[160px\] {
     width: 160px;
   }
@@ -1359,6 +1362,9 @@
   .w-\[180px\] {
     width: 180px;
   }
+  .w-\[196px\] {
+    width: 196px;
+  }
   .w-\[200px\] {
     width: 200px;
   }
@@ -3782,9 +3788,6 @@
   .text-\[18px\] {
     font-size: 18px;
   }
-  .text-\[24px\] {
-    font-size: 24px;
-  }
   .leading-5 {
     --tw-leading: calc(var(--spacing) * 5);
     line-height: calc(var(--spacing) * 5);
@@ -4465,13 +4468,32 @@
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
+  .outline-1 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .outline-2 {
     outline-style: var(--tw-outline-style);
     outline-width: 2px;
   }
+  .outline-\(--sys-color-border-default\) {
+    outline-color: var(--sys-color-border-default);
+  }
   .outline-\[var\(--color-border-accent\)\] {
     outline-color: var(--color-border-accent);
   }
+  .outline-white\/20 {
+    outline-color: color-mix(in srgb, #FFFFFF 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-white) 20%, transparent);
+    }
+  }
+  .outline-white\/40 {
+    outline-color: color-mix(in srgb, #FFFFFF 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      outline-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+    }
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -4556,6 +4578,10 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .outline-dashed {
+    --tw-outline-style: dashed;
+    outline-style: dashed;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -6381,6 +6407,11 @@
       flex: 1;
     }
   }
+  .\[\&\>svg\]\:w-full\! {
+    &>svg {
+      width: 100% !important;
+    }
+  }
   .\[\[data-drag-active\]_\&\]\:hover\:border-\(--cmp-listDraggableItem-border-default\) {
     [data-drag-active] & {
       &:hover {

package/package.json

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