fix(sw): align header logo styles and refine viewer UI

packages/sw/src/components/sw-viewer/SWViewerHeader.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useEffect, useId, useLayoutEffect, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type KeyboardEvent, type ReactNode } from "react"
 import { moveRovingFocus } from "../shared/roving-focus"
 import { SWHeaderDocumentTitle } from "../sw-header/components/SWHeaderDocumentTitle"
+import { SWHeaderLogo } from "../sw-header/components/SWHeaderHome"
 import { SWHeaderMore } from "../sw-header/components/SWHeaderMore"
 import type { SWHeaderDocument } from "../sw-header/types"
 import { SWToolButton } from "../sw-tool/SWTool"
@@ -12,9 +13,10 @@ import "../../theme/sw-viewer.css"
 
 export interface SWViewerHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
   /**
-   * Logo image URL of the program (same prop as SWHeader), max 24px high on the slanted green cap.
-   * The logo belongs to each program: nothing is rendered when omitted (no default text or icon) and the cap
-   * shrinks to its slanted edge.
+   * Logo image URL of the program (same prop as SWHeader), contained in the SWHeader 32 x 17 logo slot, 12px from
+   * the header's left edge and vertically centered on the slanted green cap.
+   * The logo belongs to each program: nothing is rendered when omitted (no default text or icon) and there is no cap
+   * either (2026-10-23, also with `onHomeClick` / `logoMenu`, which then have no trigger).
    */
   logoSrc?: string
   /** Logo element (inline SVG, <img>, ...). Takes precedence over `logoSrc` (same prop as SWHeader). */
@@ -296,7 +298,6 @@ export const SWViewerHeader = forwardRef<HTMLElement, SWViewerHeaderProps>(funct
   const rootRef = useRef<HTMLElement | null>(null)
   // Header width: a resize re-renders, and the layout pass below measures again.
   const [, setWidth] = useState(1920)
-  const gradientId = `hm-sw-viewer-brand-${useId().replace(/:/g, "")}`
   useLayoutEffect(() => {
     const root = rootRef.current
     if (!root) return
@@ -374,27 +375,21 @@ export const SWViewerHeader = forwardRef<HTMLElement, SWViewerHeaderProps>(funct
     )
   }
   const name = documentTitle || documentPlaceholder
-  const mark = logo ?? (logoSrc ? <img src={logoSrc} alt="" /> : null)
+  // Same test as SWHeaderLogo (logo, else logoSrc). 2026-10-23: no logo => no cap at all (no slant, no empty box, no
+  // width), even with logoMenu / onHomeClick: both have no trigger then; the file part starts the row (sw-viewer.css).
+  const hasLogo = !!(logo ?? logoSrc)
+  // With a logo the cap is the SWHeader home shape (Figma header/btn_home: the shared 9-slice .hm-sw-header__home-bg)
+  // around the shared logo; no hover layer: the viewer keeps its own focus-only look.
   const brandContent = (
     <>
-      <svg className="hm-sw-viewer-header__brand-shape" viewBox="0 0 88 52" preserveAspectRatio="xMaxYMid slice" aria-hidden="true" focusable="false">
-        <defs>
-          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="0%" stopColor="var(--hm-sw-viewer-brand-top)" />
-            <stop offset="45%" stopColor="var(--hm-sw-viewer-brand-middle)" />
-            <stop offset="100%" stopColor="var(--hm-sw-viewer-brand-bottom)" />
-          </linearGradient>
-        </defs>
-        <path d="M 0 0 H 88 L 73 44 Q 70 52 62 52 H 0 Z" fill={`url(#${gradientId})`} />
-        <path d="M 88 0 L 73 44 Q 70 52 62 52 H 0" fill="none" stroke="var(--hm-sw-viewer-brand-middle)" vectorEffect="non-scaling-stroke" />
-      </svg>
-      {mark && <span className="hm-sw-viewer-header__brand-mark" aria-hidden="true">{mark}</span>}
+      <span className="hm-sw-header__home-bg" aria-hidden="true" />
+      <SWHeaderLogo logo={logo} logoSrc={logoSrc} className="hm-sw-viewer-header__brand-mark" />
     </>
   )
   return (
     <header ref={node => { rootRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node }}
       className={`hm-sw-theme hm-sw-viewer-header${className ? ` ${className}` : ""}`} {...rest}>
-      {logoItems.length > 0
+      {hasLogo && (logoItems.length > 0
         ? <SWHeaderMore className="hm-sw-viewer-header__logo-menu" align="start" title={logoMenu?.title} label={logoMenu?.title ?? (logoAlt ? `${logoAlt} 메뉴` : "메뉴")}
           open={openMenu === "logo"} onOpenChange={menuOpenChange("logo")}
           items={logoItems.map(item => ({
@@ -402,12 +397,12 @@ export const SWViewerHeader = forwardRef<HTMLElement, SWViewerHeaderProps>(funct
             onSelect: () => { item.onSelect?.(); command({ id: item.id, itemId: item.id }) },
           }))}
           renderTrigger={({ ref, ...trigger }) => (
-            <button ref={ref} type="button" className="hm-sw-viewer-header__brand" data-logo={mark ? "" : undefined} data-state={trigger["aria-expanded"] ? "open" : undefined}
+            <button ref={ref} type="button" className="hm-sw-viewer-header__brand" data-logo="" data-state={trigger["aria-expanded"] ? "open" : undefined}
               aria-label={logoAlt ? `${logoAlt} 메뉴` : "메뉴"} title={logoAlt} {...trigger}>{brandContent}</button>
           )} />
         : onHomeClick
-          ? <button type="button" className="hm-sw-viewer-header__brand" data-logo={mark ? "" : undefined} aria-label={logoAlt ? `${logoAlt} 홈` : "홈"} title={logoAlt} onClick={onHomeClick}>{brandContent}</button>
-          : <div className="hm-sw-viewer-header__brand" data-logo={mark ? "" : undefined} role={logoAlt ? "img" : undefined} aria-label={logoAlt}>{brandContent}</div>}
+          ? <button type="button" className="hm-sw-viewer-header__brand" data-logo="" aria-label={logoAlt ? `${logoAlt} 홈` : "홈"} title={logoAlt} onClick={onHomeClick}>{brandContent}</button>
+          : <div className="hm-sw-viewer-header__brand" data-logo="" role={logoAlt ? "img" : undefined} aria-label={logoAlt}>{brandContent}</div>)}
       {onDocumentOpen && (() => {
         const label = documentOpenLabel ?? "Open", iconOnly = compact.has(OPEN_ID)
         return (