sellmate-design-system-react 0.8.4 → 0.10.0

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

@@ -32,6 +32,21 @@ export interface SGnbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>
     onLauncherClick?: () => void;
     /** 상단바 로고 영역 (slot) */
     logo?: ReactNode;
+    /**
+     * 레일 하단 고정 슬롯. 레일 아이템이 많아 넘치면 아이템 목록(ul)만 스크롤되고
+     * 이 슬롯은 레일 하단에 붙어 고정된다. useRail 일 때만 렌더된다.
+     */
+    railFooter?: ReactNode;
+    /**
+     * 메뉴 하단 고정 슬롯. 메뉴 아이템이 많아 넘치면 메뉴 목록(ul)만 스크롤되고
+     * 이 슬롯은 메뉴 하단에 붙어 고정된다. 메뉴가 렌더될 때만(showMenu) 나타난다.
+     */
+    menuFooter?: ReactNode;
+    /**
+     * 접힘(fix 레일) 하단 고정 슬롯. 접으면 본문이 빠져나가며 rail/menu footer 도 사라지므로,
+     * 48px 폴드 레일 바닥에 붙는 별도 슬롯이다. header="fix" 로 접혔을 때만 나타난다.
+     */
+    foldedFooter?: ReactNode;
     /** 메뉴 landmark(nav) 의 접근성 레이블. 한 화면에 nav 가 여럿일 때 구분한다. */
     ariaLabel?: string;
 }

package/dist/components/SGnb/SGnb.js

@@ -16,6 +16,10 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/lib/scrollbar.ts
+var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
+var SCROLLBAR_CLASS = `${FIREFOX_SCROLLBAR_CLASS} [&::-webkit-scrollbar]:h-[12px] [&::-webkit-scrollbar]:w-[12px] [&::-webkit-scrollbar]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-thumb]:bg-clip-padding`;
+
 // src/lib/floating-anim.ts
 var FLOATING_SLIDE_ANIM = [
   "data-[state=open]:data-[side=top]:animate-floating-in-top",
@@ -3292,6 +3296,9 @@ var SGnb = forwardRef(function SGnb2({
   onFoldChange,
   onLauncherClick,
   logo,
+  railFooter,
+  menuFooter,
+  foldedFooter,
   ariaLabel = "global navigation",
   className,
   style,
@@ -3445,7 +3452,7 @@ var SGnb = forwardRef(function SGnb2({
                   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: [
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap flex items-center", children: [
                 depth > 1 && iconBranch ? /* @__PURE__ */ jsx(
                   "div",
                   {
@@ -3656,42 +3663,77 @@ var SGnb = forwardRef(function SGnb2({
               transition: `transform ${GNB_FOLD_MS}ms ease-out, ${hideAfterSlide(folded)}`
             },
             children: [
-              useRail && // 레일도 내비게이션 landmark — nav 로 세워야 aria-label(레일)이 스크린리더에 노출된다
-              // (role 없는 ul 의 aria-label 은 영역명으로 읽히지 않는다). 메뉴 nav 와는 레이블로 구분된다.
-              /* @__PURE__ */ jsx(
-                "nav",
+              useRail && // 레일 컬럼 — 스크롤되는 아이템 목록(nav)과 하단 고정 footer 를 한 컬럼에 담는다.
+              // footer 는 내비게이션이 아니므로 nav(landmark) 밖에 두고, 컬럼 폭·구분선·배경은 이 래퍼가
+              // 전체 높이에 걸쳐 책임진다(그래야 footer 자리까지 배경·오른쪽 선이 이어진다).
+              /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  "aria-label": `${ariaLabel} rail`,
-                  className: "flex shrink-0 flex-col overflow-y-auto",
+                  className: "flex shrink-0 flex-col overflow-hidden",
                   style: {
                     width: GNB_RAIL_WIDTH,
-                    padding: GNB_RAIL.padding,
                     borderRight: `1px solid ${C.topBorder}`,
                     backgroundColor: C.panelBg,
                     pointerEvents: "auto"
                   },
-                  children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "nav",
+                      {
+                        "aria-label": `${ariaLabel} rail`,
+                        className: cn(
+                          "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                          SCROLLBAR_CLASS
+                        ),
+                        style: { padding: GNB_RAIL.padding },
+                        children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", style: { gap: GNB_RAIL.gap }, children: railItems.map(renderRailItem) })
+                      }
+                    ),
+                    railFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: railFooter })
+                  ]
                 }
               ),
-              showMenu && /* @__PURE__ */ jsx(
-                "nav",
+              showMenu && /* @__PURE__ */ jsxs(
+                "div",
                 {
-                  "aria-label": ariaLabel,
-                  className: "flex shrink-0 flex-col overflow-y-auto",
+                  className: "flex shrink-0 flex-col overflow-hidden",
                   style: {
                     width: GNB_MENU_WIDTH,
-                    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)) })
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "nav",
+                      {
+                        "aria-label": ariaLabel,
+                        className: cn(
+                          "flex min-h-0 flex-1 flex-col overflow-x-hidden overflow-y-auto",
+                          SCROLLBAR_CLASS
+                        ),
+                        style: {
+                          paddingTop: M.bodyPaddingY,
+                          paddingBottom: M.bodyPaddingY
+                        },
+                        children: /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col p-0", children: menuItems.map((item) => renderItem(item, 1)) })
+                      }
+                    ),
+                    menuFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: menuFooter })
+                  ]
                 }
               )
             ]
           }
+        ),
+        railFolded && foldedFooter && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex shrink-0 items-center justify-center mb-[24px]",
+            style: { pointerEvents: "auto" },
+            children: foldedFooter
+          }
         )
       ]
     }