sellmate-design-system-react 0.5.0 → 0.6.1

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

@@ -3,7 +3,10 @@ import { type SGnbType, type SGnbHeader, type SGnbColor, type SGnbMenuItem } fro
 export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     /** 메뉴 스타일: box(라운드) / belt(풀폭 행). 미지정 시 SLayout 의 type 을 따른다. */
     type?: SGnbType;
-    /** 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다. */
+    /**
+     * 상단바 구조: fix(GNB 폭 고정) / full(레이아웃 전폭). 미지정 시 SLayout 의 header 를 따른다.
+     * 단, useRail 이고 레일에 children 없는 아이템이 있으면 메뉴 폭이 출렁이므로 full 로 강제된다.
+     */
     header?: SGnbHeader;
     /** 색상 테마: light / dark */
     color?: SGnbColor;
@@ -12,6 +15,7 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     /**
      * 좌측 레일 사용 여부. 켜면 items 의 첫 depth 가 아이콘+라벨 버튼의 세로 레일로 서고,
      * 선택된 레일 아이템의 children 이 오른쪽 메뉴 패널에 깔린다. 미지정 시 SLayout 의 useRail 을 따른다.
+     * children 없는 레일 아이템이 활성이면 메뉴 패널은 렌더되지 않고 레일만 남는다.
      */
     useRail?: boolean;
     /** 현재 선택된 아이템 value */
@@ -42,6 +46,8 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
  *
  * useRail 이면 items 의 첫 depth 가 좌측 레일(아이콘+라벨 68px)로 서고, 선택된 레일 아이템의
  * children 이 메뉴 패널의 depth1 이 된다 — 트리는 그대로 두고 어디부터 그릴지만 바뀐다.
+ * children 없는 레일 아이템은 자기 자신이 선택(리프)이라 메뉴 패널을 렌더하지 않는다. 이런 리프가
+ * 하나라도 있으면 활성에 따라 메뉴 폭이 출렁이므로 header 는 full 로 강제해 상단바를 전폭에 고정한다.
  *
  * 접힘/펼침은 GNB_FOLD_MS 동안의 슬라이드다 — 레일·메뉴가 함께 왼쪽으로 빠져나가고 펼치면 오른쪽에서 들어온다.
  * 페이지 쪽 폭은 fix 면 이 컴포넌트의 폭 전환이, full 이면 SLayout 의 메뉴 열 전환이 같은 길이로 맞춘다.

package/dist/components/SGnb/SGnb.js

@@ -3,7 +3,7 @@ import { createContext, forwardRef, useState, useCallback, useMemo, useContext,
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import * as RPopover from '@radix-ui/react-popover';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var twMerge = extendTailwindMerge({
   extend: {
@@ -3233,15 +3233,30 @@ forwardRef(function SLayout2({
     },
     [isControlled, onFoldedChange]
   );
-  const ctx = useMemo(
-    () => ({ type, header, useRail, folded: currentFolded, setFolded }),
-    [type, header, useRail, currentFolded, setFolded]
+  const [gnbState, setGnbState] = useState({ forceFull: false, menuVisible: true });
+  const reportGnbState = useCallback(
+    (next) => setGnbState(
+      (prev) => prev.forceFull === next.forceFull && prev.menuVisible === next.menuVisible ? prev : next
+    ),
+    []
   );
-  const isFullHeader = header === "full";
-  const gnbColumnWidth = useRail ? GNB_RAIL_WIDTH + GNB_MENU_WIDTH : GNB_MENU_WIDTH;
+  const effectiveHeader = header === "full" || gnbState.forceFull ? "full" : "fix";
+  const ctx = useMemo(
+    () => ({
+      type,
+      header: effectiveHeader,
+      useRail,
+      folded: currentFolded,
+      setFolded,
+      reportGnbState
+    }),
+    [type, effectiveHeader, useRail, currentFolded, setFolded, reportGnbState]
+  );
+  const isFullHeader = effectiveHeader === "full";
+  const gnbColumnWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (gnbState.menuVisible ? GNB_MENU_WIDTH : 0);
   const frameStyle = isFullHeader ? {
     gridTemplateColumns: `${currentFolded ? 0 : gnbColumnWidth}px 1fr`,
-    gridTemplateRows: `${GNB_HEADER[header].topHeight} 1fr`,
+    gridTemplateRows: `${GNB_HEADER[effectiveHeader].topHeight} 1fr`,
     // 메뉴가 미끄러지는 동안 페이지 열도 같은 길이로 따라와야 한 덩어리로 읽힌다.
     // (fix 는 SGnb 가 제 폭을 직접 전환하므로 프레임이 손댈 게 없다)
     transition: `grid-template-columns ${GNB_FOLD_MS}ms ease-out`
@@ -3251,7 +3266,7 @@ forwardRef(function SLayout2({
     {
       ref,
       "data-type": type,
-      "data-header": header,
+      "data-header": effectiveHeader,
       className: cn(
         "box-border h-full overflow-hidden",
         isFullHeader ? "grid" : "flex flex-row",
@@ -3284,9 +3299,10 @@ var SGnb = forwardRef(function SGnb2({
 }, ref) {
   const layout = useContext(SLayoutContext);
   const type = typeProp ?? layout?.type ?? "box";
-  const header = headerProp ?? layout?.header ?? "fix";
   const folded = foldedProp ?? layout?.folded ?? false;
   const useRail = useRailProp ?? layout?.useRail ?? false;
+  const railHasLeaf = useRail && items.some((item) => !item.children || item.children.length === 0);
+  const header = railHasLeaf ? "full" : headerProp ?? layout?.header ?? "fix";
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
   const C = GNB_COLORS[color];
@@ -3420,9 +3436,24 @@ var SGnb = forwardRef(function SGnb2({
             onMouseEnter: () => setHoveredKey(item.value),
             onMouseLeave: () => setHoveredKey((prev) => prev === item.value ? null : prev),
             children: [
-              depth === 1 && item.icon && /* @__PURE__ */ jsx(SIcon, { name: item.icon, size: M.depth1Icon, color: C.itemIcon, className: "shrink-0" }),
+              depth === 1 && item.icon && /* @__PURE__ */ jsx(
+                SIcon,
+                {
+                  name: item.icon,
+                  size: M.depth1Icon,
+                  color: isSelected ? C.itemColorActive : C.itemIcon,
+                  className: "shrink-0"
+                }
+              ),
               /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex flex-no-wrap items-center", children: [
-                depth > 1 && iconBranch ? /* @__PURE__ */ jsx("div", { className: "w-[20px] h-[24px] flex items-center justify-center mr-[8px]", children: "-" }) : null,
+                depth > 1 && iconBranch ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "w-[20px] flex items-center justify-center mr-[8px]",
+                    style: { height: M.itemLineHeight },
+                    children: "-"
+                  }
+                ) : null,
                 item.label
               ] }),
               item.tag !== void 0 && item.tag !== "" && /* @__PURE__ */ jsx(
@@ -3474,16 +3505,28 @@ var SGnb = forwardRef(function SGnb2({
   };
   const railItems = useRail ? items : [];
   const menuItems = useRail ? items.find((item) => item.value === activeRail)?.children ?? [] : items;
-  const bodyWidth = useRail ? GNB_RAIL_WIDTH + GNB_MENU_WIDTH : GNB_MENU_WIDTH;
+  const showMenu = !useRail || menuItems.length > 0;
+  const bodyWidth = (useRail ? GNB_RAIL_WIDTH : 0) + (showMenu ? GNB_MENU_WIDTH : 0);
+  useEffect(() => {
+    layout?.reportGnbState({ forceFull: railHasLeaf, menuVisible: showMenu });
+  }, [layout, railHasLeaf, showMenu]);
   const railFolded = folded && header === "fix";
   const rootWidth = header === "full" ? "100%" : folded ? GNB_COMMON.foldWidth : bodyWidth;
+  const rightBorder = color === "light" ? `1px solid ${C.topBorder}` : void 0;
   const rootStyle = {
     width: rootWidth,
     transition: `width ${GNB_FOLD_MS}ms ease-out`,
-    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg },
+    ...header === "full" ? { gridArea: "1 / 1 / -1 / -1", pointerEvents: "none" } : { backgroundColor: C.panelBg, borderRight: rightBorder },
     ...style
   };
   const hideAfterSlide = (hidden) => `visibility 0s linear ${hidden ? `${GNB_FOLD_MS}ms` : "0s"}`;
+  const foldInline = !!logo;
+  const sideFoldStyle = {
+    opacity: railFolded ? 0 : 1,
+    position: railFolded ? "absolute" : "static",
+    visibility: railFolded ? "hidden" : "visible",
+    transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}`
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3495,12 +3538,14 @@ var SGnb = forwardRef(function SGnb2({
       "data-color": color,
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             className: "relative box-border flex shrink-0 items-center overflow-hidden",
             style: {
               height: H.topHeight,
+              // 인라인 간격은 컨테이너 gap 대신 각 요소 margin 으로 준다 — 런처↔폴드(8px)와
+              // 폴드↔로고(top-gap)를 다르게 두기 위함. 접히면 런처·로고가 흐름에서 빠져 margin 도 무의미해진다.
               padding: `0 ${railFolded ? GNB_RAIL.padding : H.topPaddingX}`,
               borderBottom: `1px solid ${C.topBorder}`,
               backgroundColor: C.panelBg,
@@ -3509,49 +3554,90 @@ var SGnb = forwardRef(function SGnb2({
               // 아이콘 버튼은 자체 ghostButton 토큰을 쓰므로, 이 색은 logo 슬롯 상속용
               color: C.itemColorDefault
             },
-            children: [
-              (onLauncherClick || logo) && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: "absolute inset-y-0 flex items-center",
-                  style: {
-                    left: H.topPaddingX,
-                    gap: H.topGap,
-                    opacity: railFolded ? 0 : 1,
-                    transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}, transform ${GNB_FOLD_MS}ms ease-out`,
-                    // 메뉴와 같은 방향으로 빠지되, 좁은 레일 안에서 꼬리가 비치지 않게 페이드가 거리를 대신한다
-                    transform: railFolded ? `translateX(-${H.topPaddingX})` : "none",
-                    visibility: railFolded ? "hidden" : "visible"
-                  },
-                  children: [
-                    onLauncherClick && /* @__PURE__ */ jsx(
-                      SGhostButton,
-                      {
-                        icon: "launcher",
-                        size: "xs",
-                        intent: color === "dark" ? "inverse" : "default",
-                        ariaLabel: "app launcher",
-                        onClick: onLauncherClick,
-                        className: "shrink-0"
-                      }
-                    ),
-                    logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                SGhostButton,
-                {
-                  icon: "sidebar",
-                  size: "xs",
-                  intent: color === "dark" ? "inverse" : "default",
-                  ariaLabel: "toggle navigation",
-                  ariaPressed: folded,
-                  onClick: handleFoldToggle,
-                  className: "ml-auto shrink-0"
-                }
-              )
-            ]
+            children: foldInline ? (
+              // 런처(있을 때)·폴드·로고를 흐름에 나란히 둔다 → 폴드 버튼이 (런처와) 로고 사이에 선다.
+              // 접히면 런처·로고가 페이드하며 흐름에서 빠지고(sideFoldStyle), 폴드 버튼만 남아 레일 가운데에 선다.
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                onLauncherClick && /* @__PURE__ */ jsx(
+                  SGhostButton,
+                  {
+                    icon: "launcher",
+                    size: "xs",
+                    intent: color === "dark" ? "inverse" : "default",
+                    ariaLabel: "app launcher",
+                    onClick: onLauncherClick,
+                    className: "shrink-0",
+                    style: { ...sideFoldStyle, marginRight: "8px" }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SGhostButton,
+                  {
+                    icon: "sidebar",
+                    size: "xs",
+                    intent: color === "dark" ? "inverse" : "default",
+                    ariaLabel: "toggle navigation",
+                    ariaPressed: folded,
+                    onClick: handleFoldToggle,
+                    className: "shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "flex shrink-0 items-center",
+                    style: { height: H.logoHeight, marginLeft: H.topGap, ...sideFoldStyle },
+                    children: logo
+                  }
+                )
+              ] })
+            ) : (
+              // 런처·로고는 좌측 그룹(흐름에서 빼 폭 축소 중 폴드 버튼을 밀어내지 않는다),
+              // 폴드 버튼은 우측 끝(ml-auto)이라 폭·패딩이 줄면 저절로 레일 가운데에 선다.
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                (onLauncherClick || logo) && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "absolute inset-y-0 flex items-center",
+                    style: {
+                      left: H.topPaddingX,
+                      gap: H.topGap,
+                      opacity: railFolded ? 0 : 1,
+                      transition: `opacity ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(railFolded)}, transform ${GNB_FOLD_MS}ms ease-out`,
+                      // 메뉴와 같은 방향으로 빠지되, 좁은 레일 안에서 꼬리가 비치지 않게 페이드가 거리를 대신한다
+                      transform: railFolded ? `translateX(-${H.topPaddingX})` : "none",
+                      visibility: railFolded ? "hidden" : "visible"
+                    },
+                    children: [
+                      onLauncherClick && /* @__PURE__ */ jsx(
+                        SGhostButton,
+                        {
+                          icon: "launcher",
+                          size: "xs",
+                          intent: color === "dark" ? "inverse" : "default",
+                          ariaLabel: "app launcher",
+                          onClick: onLauncherClick,
+                          className: "shrink-0"
+                        }
+                      ),
+                      logo && /* @__PURE__ */ jsx("div", { className: "flex items-center", style: { height: H.logoHeight }, children: logo })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  SGhostButton,
+                  {
+                    icon: "sidebar",
+                    size: "xs",
+                    intent: color === "dark" ? "inverse" : "default",
+                    ariaLabel: "toggle navigation",
+                    ariaPressed: folded,
+                    onClick: handleFoldToggle,
+                    className: "ml-auto shrink-0"
+                  }
+                )
+              ] })
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -3587,7 +3673,7 @@ var SGnb = forwardRef(function SGnb2({
                   children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
                 }
               ),
-              /* @__PURE__ */ jsx(
+              showMenu && /* @__PURE__ */ jsx(
                 "nav",
                 {
                   "aria-label": ariaLabel,
@@ -3597,6 +3683,8 @@ var SGnb = forwardRef(function SGnb2({
                     paddingTop: M.bodyPaddingY,
                     paddingBottom: M.bodyPaddingY,
                     backgroundColor: C.panelBg,
+                    // full 은 상단바가 전폭이라 루트가 오른쪽 선을 못 그린다 → 메뉴 오른쪽(페이지 경계)이 대신 그린다.
+                    borderRight: header === "full" ? rightBorder : void 0,
                     pointerEvents: "auto"
                   },
                   children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })