@wipco/sdui 1.4.2 → 1.5.0

package/dist/index.d.ts

@@ -738,6 +738,19 @@ interface RemotePageState {
  * 그래서 늦게 도착한 응답은 아래 `alive` 검사로 한 번 더 버린다.
  */
 declare function useRemoteSearchPage(endpoint: string, params: URLSearchParams): RemotePageState;
+interface RemoteSummaryState {
+    /** 합계 응답 객체 — 첫 응답 전·실패 시 null (직전 값은 재조회 중에도 유지) */
+    values: Record<string, unknown> | null;
+    isLoading: boolean;
+    error: Error | null;
+}
+/**
+ * 목록 위 합계 칸(`summary.endpoint`) 조회 — 응답은 `{ data, total }` 이 아니라 객체 하나라
+ * 목록 fetcher(toPage)를 거치지 않고 어댑터 fetch(없으면 same-origin fetch)로 직접 받는다.
+ * 목록과 같은 재조회 신호(invalidate 접두어·SSE)를 받도록 자기 endpoint 로 구독한다.
+ * endpoint 가 null 이면 아무것도 하지 않는다.
+ */
+declare function useRemoteSearchSummary(endpoint: string | null, params: URLSearchParams): RemoteSummaryState;
 
 /**
  * 검색 툴바 — ERP `app/components/search/SearchToolbar.tsx`의 계약(타입·헬퍼·동작)을
@@ -881,6 +894,22 @@ interface SearchFilter {
         value: string;
     }[];
 }
+/**
+ * 목록 맨 위의 구분 탭 — 한 쿼리 키의 값을 탭으로 고른다(전체/용역/상품/기타 같은).
+ *
+ * 필터 칩(leftFilters)과 같은 파라미터 규칙이다: 고른 탭의 `value` 가 `key` 파라미터가
+ * 되고, 빈 문자열 탭은 파라미터를 지운다(= 전체). 값에 쉼표를 넣으면 여러 값 중 하나
+ * (`기타,미수주`)라는 뜻이다 — 서버 `=` 필터와 로컬 재필터가 둘 다 그렇게 읽는다.
+ * 탭을 바꾸면 1페이지로 돌아간다.
+ */
+interface SearchTabs {
+    key: string;
+    items: {
+        value: string;
+        label: string;
+        icon?: string;
+    }[];
+}
 /**
  * 목록/카드 전환 버튼 한 칸.
  *
@@ -925,6 +954,10 @@ interface SearchResultsProps<T> {
     gridConfig?: GridCardConfig<T>;
     leftFilters?: SearchFilter[];
     rightFilters?: SearchFilter[];
+    /** 목록 맨 위(툴바 위)의 구분 탭 */
+    tabs?: SearchTabs;
+    /** 탭보다도 위에 놓이는 요약 영역 — 합계 칸(SearchSummaryCards) 자리 */
+    summary?: React__default.ReactNode;
     initialView?: 'grid' | 'list';
     /**
      * 노출할 보기 목록. 생략하면 목록/카드 두 칸이 기본값이고,
@@ -966,7 +999,7 @@ interface SearchResultsProps<T> {
 declare function normalizePageSizes(sizes: number[] | undefined): number[] | undefined;
 declare function SearchResults<T extends {
     id: string;
-}>({ item, columns, gridConfig, leftFilters, rightFilters, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields: rawAdvancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
+}>({ item, columns, gridConfig, leftFilters, rightFilters, tabs, summary, initialView, views, pageSizes, className, style, searchParams, onParamsChange, actions, disableGrid, disableList, onRowClick, title, headerActions, isLoading, hideHeader, advancedSearchFields: rawAdvancedSearchFields, searchPlaceholder, virtual, }: SearchResultsProps<T>): React__default.JSX.Element;
 
 /**
  * 셀 표현 어휘 — 목록 컬럼의 셀과 카드 행의 값이 **같은 규칙**을 쓴다.
@@ -1099,6 +1132,43 @@ declare function imageRenderer(cell: SduiImageCell, key: string, width?: number
  */
 declare function cellRenderer(cell: SduiCell | undefined, key: string, dispatch: SduiDispatch): ((row: SearchRow) => React__default.ReactNode) | undefined;
 
+/**
+ * 목록 위 합계 칸 — "지금 검색된 결과 전체"의 합(계약금액·공급가액·세액 같은)을 숫자 카드로.
+ *
+ * 값은 목록과 **같은 쿼리**로 따로 조회한다(`summary.endpoint`). 현재 페이지 행을 더하면
+ * 10건짜리 부분합이 전체 합처럼 보이므로 로컬 합산은 하지 않는다 — 합은 서버가 낸다.
+ * 쿼리에서 빠지는 것은 page/limit 둘뿐이다(`summaryParams`): 검색어·상세검색·필터·탭이
+ * 전부 합계에도 걸려야 "검색된 결과에 따른 합"이 된다.
+ */
+
+interface SduiSearchSummaryItem {
+    /** 응답 객체에서 읽을 필드 — 점 경로 허용 */
+    key: string;
+    label: string;
+    /** 값 뒤 단위 — "원", "건" */
+    unit?: string;
+    icon?: string;
+    /** 값 표현 — 컬럼 셀과 같은 어휘(주로 `{ type: 'number' }`). 생략하면 숫자는 천 단위 구분 */
+    cell?: SduiCell;
+}
+interface SduiSearchSummary {
+    /**
+     * 합계 endpoint — 목록의 쿼리(page/limit 제외)가 그대로 붙는다. 응답은 객체 하나이고
+     * 칸마다 `items[].key` 로 값을 꺼낸다.
+     */
+    endpoint: string;
+    items: SduiSearchSummaryItem[];
+}
+/** 합계 조회에 넘길 쿼리 — 목록 쿼리에서 페이지 축(page/limit)만 뺀다. */
+declare function summaryParams(params: URLSearchParams): URLSearchParams;
+interface SearchSummaryCardsProps {
+    items: SduiSearchSummaryItem[];
+    /** 합계 응답 객체 — 아직 없으면 값 자리에 '—' */
+    values: Record<string, unknown> | null | undefined;
+    dispatch: SduiDispatch;
+}
+declare function SearchSummaryCards({ items, values, dispatch }: SearchSummaryCardsProps): React__default.JSX.Element | null;
+
 /** JSON 컬럼 정의 — render 함수 대신 선언적 cell 스펙을 쓴다 */
 interface SduiSearchColumn {
     key: string;
@@ -1181,6 +1251,8 @@ interface SduiSearchCommonProps {
     fields?: SearchField[];
     leftFilters?: SearchFilter[];
     rightFilters?: SearchFilter[];
+    /** 목록 맨 위의 구분 탭 — 한 쿼리 키의 값을 탭으로 고른다. 빈 값 탭 = 전체 */
+    tabs?: SearchTabs;
     gridCard?: SduiGridCard;
     actions?: SduiSearchAction[];
     initialView?: 'grid' | 'list';
@@ -1235,6 +1307,11 @@ interface RemoteSearchResultsProps extends SduiSearchCommonProps {
     searchParams?: URLSearchParams;
     /** 파라미터 변경 통지 — searchParams 없이 쓰면 내부 상태를 유지한 채 관찰만 한다 */
     onParamsChange?: (next: URLSearchParams) => void;
+    /**
+     * 탭 위 합계 칸 — 목록과 같은 쿼리(page/limit 제외)로 `summary.endpoint` 를 조회해
+     * 응답 객체의 `items[].key` 값을 숫자 카드로 보인다. 검색·상세검색·탭을 바꾸면 따라 바뀐다.
+     */
+    summary?: SduiSearchSummary;
 }
 /** 바깥에서 온 `style`·`className`을 뿌리에 얹어 내보낸다. 까닭은 {@link ../boxed.tsx}에 있다. */
 declare const SduiSearchResults: React__default.FC<SduiSearchResultsProps & SduiBoxProps>;
@@ -2085,4 +2162,4 @@ interface ImageViewerProps {
  */
 declare function ImageViewer({ src, alt, open, onClose }: ImageViewerProps): React__default.ReactPortal | null;
 
-export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, CALC_OPS, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, ICON_NAMES, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RemotePageState, RemoteSearchResults, type RemoteSearchResultsProps, type ResolvedPatternSpec, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiContainerRoleProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchInvalidationProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchInvalidator, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIdCandidate, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, TimePickerProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, createSearchInvalidator, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, isValidSpecId, joinMultiValue, loadOptionalModule, mapActions, mapCardRows, mapColumns, mapGridCard, mapViews, matchesCondition, normalizePageSizes, normalizeSearchText, patternSpecCandidates, resolvePatternSpec, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, useOverlayLayer, useRemoteSearchPage, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec, withProps };
+export { Actions, type ActionsProps, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, CALC_OPS, Can, type CanProps, Card, type CardProps, type CascadingSearchOption, Checkbox, type CheckboxProps, Col, type ColProps, type CustomActionHandler, type CustomValidator, DatePickerProps, DateRangePickerProps, Dialog, type DialogProps, Divider, EmptyState, type EmptyStateProps, Field, type FieldProps, Grid, type GridCardConfig, type GridCardRow, type GridProps, ICON_NAMES, Icon, IconButton, type IconButtonProps, type IconProps, ImageViewer, type ImageViewerProps, Input, type InputProps, type Justify, type KeyValueItem, KeyValueList, type KeyValueListProps, type MeterTone, NodeErrorBoundary, OverlayContainerContext, OverlayLayer, PageHead, type PageHeadProps, Pagination, type PaginationProps, ProgressBar, type ProgressBarProps, Radio, type RadioProps, type RemotePageState, RemoteSearchResults, type RemoteSearchResultsProps, type RemoteSummaryState, type ResolvedPatternSpec, ResultTable, type ResultTableColumn, type ResultTableProps, Row, type RowProps, SduiAction, type SduiAdapter, type SduiAssetContext, type SduiAssetResolver, type SduiBadgeCell, SduiBoxProps, type SduiCanFn, type SduiCanQuery, type SduiCanSetting, type SduiCell, SduiColumnsScale, SduiContainerLayoutProps, type SduiContainerRoleProps, type SduiDateCell, SduiDialog, type SduiDispatch, SduiForm, type SduiFormConfig, type SduiFormProps, SduiGapScale, type SduiGridCard, type SduiGridCardAction, type SduiGridCardRow, type SduiIconCell, type SduiImageCell, type SduiLinkCell, type SduiNumberCell, SduiPage, SduiPermissionProvider, type SduiProgressCell, SduiPropValue, type SduiRegistry, SduiRenderer, type SduiRendererProps, type SduiRowCondition, SduiRule, type SduiRuntime, type SduiSearchAction, type SduiSearchColumn, SduiSearchDataProvider, SduiSearchInvalidationProvider, SduiSearchResults, type SduiSearchResultsProps, type SduiSearchSummary, type SduiSearchSummaryItem, type SduiTagCell, SduiTextAlignScale, type SduiTextCell, type SduiUseSpec, SduiWeightScale, type SearchAction, type SearchColumn, type SearchFetcher, type SearchField, type SearchFilter, type SearchInvalidator, type SearchOption, type SearchPage, SearchResults, type SearchResultsProps, type SearchRow, SearchSummaryCards, type SearchSummaryCardsProps, type SearchTabs, SearchToolbar, type SearchValues, type SearchViewItem, Section, type SectionProps, SegmentedControl, type SegmentedControlProps, type SegmentedItem, Select, type SelectOption, type SelectOptionRecord, type SelectProps, Show, type ShowProps, SidebarNav, type SidebarNavItem, type SidebarNavProps, type SidebarNavSection, type SortDir, SortHandle, type SortHandleProps, SortableList, type SortableListProps, Spacer, type SpacerProps, type SpecIdCandidate, type SpecIssue, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextPreset, type TextProps, Textarea, type TextareaProps, TimePickerProps, Toast, type ToastProps, Tooltip, type TooltipProps, boxed, cascadingValuePaths, cellRenderer, cleanSearchValues, createRegistry, createSearchInvalidator, defaultAdapter, defaultRegistry, getOverlayRoot, imageRenderer, includesLooseSearch, isValidSpecId, joinMultiValue, loadOptionalModule, mapActions, mapCardRows, mapColumns, mapGridCard, mapViews, matchesCondition, normalizePageSizes, normalizeSearchText, patternSpecCandidates, resolvePatternSpec, searchFieldKeys, searchValuesFromParams, sortableDropIndex, sortableMove, splitMultiValue, summaryParams, useOverlayLayer, useRemoteSearchPage, useRemoteSearchSummary, useSduiAssetResolver, useSduiCan, useSduiDispatch, useSduiRuntime, useSduiSandbox, useSearchFetcher, validateSpec, withProps };

package/dist/index.js

@@ -11,9 +11,9 @@ import { parseYmd, YMD_RE, TimePicker, DateRangePicker, DatePicker } from './chu
 export { DatePicker, DateRangePicker, TimePicker } from './chunk-RWSH2MBU.js';
 import { HoistedStyle } from './chunk-RIZRM7OO.js';
 export { OverlayContainerContext, OverlayLayer, getOverlayRoot, useOverlayLayer } from './chunk-XQPTSEJC.js';
-import { DEV, isSafeNavigationTarget, useSduiAdapter, hostFetchOf, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-KO6OEY3G.js';
+import { DEV, useSduiAdapter, hostFetchOf, isSafeNavigationTarget, useSduiSandbox, resolveAdapter, assetResolverOf, SduiAdapterContext } from './chunk-KO6OEY3G.js';
 export { defaultAdapter, useSduiAssetResolver, useSduiSandbox } from './chunk-KO6OEY3G.js';
-import { EmptyState, Button, Checkbox, SegmentedControl, Spinner, Select, Pagination, fieldOf, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Tabs, Table, Switch, StatCard, Input, IconButton, Field, Alert, warnOnce, isPlainObject, CALC_OPS, evaluateCalc, ICON_NODES, toNumber } from './chunk-RNOUXUBO.js';
+import { EmptyState, Button, Checkbox, Tabs, SegmentedControl, Spinner, Select, Pagination, fieldOf, StatCard, Icon, Card, Badge, ProgressBar, Tag, Toast, Textarea, Table, Switch, Input, IconButton, Field, Alert, warnOnce, isPlainObject, CALC_OPS, evaluateCalc, ICON_NODES, toNumber } from './chunk-RNOUXUBO.js';
 export { Alert, Avatar, Badge, Breadcrumb, Button, CALC_OPS, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip } from './chunk-RNOUXUBO.js';
 import { boxed, LAYOUT_CSS, childLayoutFrom, CHILD_LAYOUT_PROPS } from './chunk-5WW4MBRO.js';
 export { CHILD_LAYOUT_PROPS, LAYOUT_CSS, boxed, childLayoutFrom, columnsClass, containerLayoutStyle, joinClass, mergeStyle, typographyStyle } from './chunk-5WW4MBRO.js';
@@ -471,6 +471,78 @@ function useRemoteSearchPage(endpoint, params) {
   const reload = useCallback(() => setReloadKey((value) => value + 1), []);
   return { page, isLoading, error, reload };
 }
+function useRemoteSearchSummary(endpoint, params) {
+  const adapter = useSduiAdapter();
+  const invalidator = useContext(SearchInvalidationContext);
+  const [values, setValues] = useState(null);
+  const [isLoading, setIsLoading] = useState(endpoint !== null);
+  const [error, setError] = useState(null);
+  const [reloadKey, setReloadKey] = useState(0);
+  useEffect(() => {
+    if (!invalidator || endpoint === null) return void 0;
+    return invalidator.subscribe(endpoint, () => setReloadKey((value) => value + 1));
+  }, [invalidator, endpoint]);
+  const query = params.toString();
+  const hostFetchRef = useRef(hostFetchOf(adapter));
+  hostFetchRef.current = hostFetchOf(adapter);
+  useEffect(() => {
+    if (endpoint === null) return void 0;
+    const controller = new AbortController();
+    let alive = true;
+    const url = searchUrl(endpoint, new URLSearchParams(query));
+    setIsLoading(true);
+    const hostFetch = hostFetchRef.current;
+    const request = hostFetch ? hostFetch(url, { method: "GET", signal: controller.signal }) : fetch(url, { headers: { accept: "application/json" }, credentials: "same-origin", signal: controller.signal }).then(
+      async (response) => {
+        const body = await response.json().catch(() => null);
+        if (!response.ok) throw new Error(body?.message ?? `\uD569\uACC4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4 (${response.status})`);
+        return body;
+      }
+    );
+    request.then(
+      (body) => {
+        if (!alive) return;
+        setValues(body && typeof body === "object" && !Array.isArray(body) ? body : null);
+        setError(null);
+        setIsLoading(false);
+      },
+      (cause) => {
+        if (!alive || controller.signal.aborted) return;
+        setError(cause instanceof Error ? cause : new Error("\uD569\uACC4\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"));
+        setIsLoading(false);
+      }
+    );
+    return () => {
+      alive = false;
+      controller.abort();
+    };
+  }, [endpoint, query, reloadKey]);
+  return { values, isLoading, error };
+}
+function summaryParams(params) {
+  const next = new URLSearchParams(params);
+  next.delete("page");
+  next.delete("limit");
+  return next;
+}
+function plainValue(value) {
+  if (value === null || value === void 0 || value === "") return "\u2014";
+  if (typeof value === "number") return value.toLocaleString("ko-KR");
+  if (typeof value === "string" && /^-?\d+(\.\d+)?$/.test(value)) return Number(value).toLocaleString("ko-KR");
+  return String(value);
+}
+function SearchSummaryCards({ items, values, dispatch }) {
+  const list = Array.isArray(items) ? items.filter((item) => item && typeof item.key === "string") : [];
+  if (list.length === 0) return null;
+  const columns = Math.min(Math.max(list.length, 2), 4);
+  const row = values ?? {};
+  return /* @__PURE__ */ jsx("div", { className: `wp-grid wp-grid--${columns}`, "aria-label": "\uAC80\uC0C9 \uACB0\uACFC \uD569\uACC4", children: list.map((item) => {
+    const render = item.cell ? cellRenderer(item.cell, item.key, dispatch) : void 0;
+    const raw = values ? fieldOf(row, item.key) : void 0;
+    const value = values && render && raw !== void 0 && raw !== null ? render(row) : plainValue(raw);
+    return /* @__PURE__ */ jsx(StatCard, { size: "sm", label: item.label, icon: item.icon, value, unit: item.unit }, item.key);
+  }) });
+}
 var OVERSCAN = 10;
 var CLIP_CSS = `.wp-table--clip tbody td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;
 function ResultTable({
@@ -606,6 +678,8 @@ function SearchResults({
   gridConfig,
   leftFilters = EMPTY_FILTERS,
   rightFilters = EMPTY_FILTERS,
+  tabs,
+  summary,
   initialView = "list",
   views,
   pageSizes,
@@ -668,8 +742,12 @@ function SearchResults({
       const values = splitMultiValue(searchParams.get(filter.key) ?? "");
       if (values.length > 0) entries.push({ key: filter.key, values });
     }
+    if (tabs && typeof tabs.key === "string") {
+      const values = splitMultiValue(searchParams.get(tabs.key) ?? "");
+      if (values.length > 0) entries.push({ key: tabs.key, values });
+    }
     return entries;
-  }, [leftFilters, rightFilters, searchParams]);
+  }, [leftFilters, rightFilters, tabs, searchParams]);
   const hasAllRows = item.data.length >= item.total;
   const processed = useMemo(() => {
     const cell = (row, key) => fieldOf(row, key);
@@ -708,7 +786,8 @@ function SearchResults({
           if (max !== null) rows = rows.filter((row) => (numericValue(cell(row, field.key)) ?? Infinity) <= max);
         } else {
           const keyword = advancedValues[field.key];
-          const baseKey = field.key.endsWith("Contains") ? field.key.slice(0, -"Contains".length) : field.key;
+          const suffix = ["_contains", "Contains"].find((s) => field.key.endsWith(s));
+          const baseKey = suffix ? field.key.slice(0, -suffix.length) : field.key;
           if (keyword) rows = rows.filter((row) => includesLooseSearch(String(cell(row, baseKey) ?? ""), keyword));
         }
       }
@@ -804,6 +883,16 @@ function SearchResults({
   };
   const empty = /* @__PURE__ */ jsx(ResultEmptyState, { title });
   return /* @__PURE__ */ jsxs("div", { className: ["wp-col", className].filter(Boolean).join(" "), style, "aria-label": title, children: [
+    summary ?? null,
+    tabs && Array.isArray(tabs.items) && tabs.items.length > 0 ? /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        "aria-label": `${title} \uAD6C\uBD84`,
+        items: tabs.items.map((tab) => ({ value: tab.value ?? "", label: tab.label, icon: tab.icon })),
+        value: searchParams.get(tabs.key) ?? "",
+        onChange: (value) => updateParams({ [tabs.key]: value || null, page: null })
+      }
+    ) : null,
     !hideHeader ? /* @__PURE__ */ jsxs("div", { className: "wp-row wp-row--between", style: { flexWrap: "wrap" }, children: [
       /* @__PURE__ */ jsxs("span", { className: "wp-caption", children: [
         "\uCD1D ",
@@ -1140,6 +1229,7 @@ function SduiSearchResultsImpl({
   fields,
   leftFilters,
   rightFilters,
+  tabs,
   gridCard,
   actions,
   initialView,
@@ -1164,6 +1254,7 @@ function SduiSearchResultsImpl({
       gridConfig: mapGridCard(gridCard, dispatch),
       leftFilters,
       rightFilters,
+      tabs,
       actions: mapActions(actions, dispatch),
       initialView,
       views: mapViews(views, gridCard, disableGrid, disableList),
@@ -1187,6 +1278,7 @@ function RemoteSearchResultsImpl({
   fields,
   leftFilters,
   rightFilters,
+  tabs,
   gridCard,
   actions,
   initialView,
@@ -1200,7 +1292,8 @@ function RemoteSearchResultsImpl({
   virtual,
   pageSize,
   searchParams: controlledParams,
-  onParamsChange
+  onParamsChange,
+  summary
 }) {
   const dispatch = useSduiDispatch();
   const defaultPageSize = normalizePageSizes(pageSizes)?.[0] ?? 10;
@@ -1221,6 +1314,11 @@ function RemoteSearchResultsImpl({
     return next;
   }, [params, defaultPageSize]);
   const { page, isLoading, error, reload } = useRemoteSearchPage(endpoint, query);
+  const summaryQuery = useMemo(() => summaryParams(params), [params]);
+  const summaryState = useRemoteSearchSummary(
+    summary && typeof summary.endpoint === "string" ? summary.endpoint : null,
+    summaryQuery
+  );
   if (error && page.data.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -1241,6 +1339,7 @@ function RemoteSearchResultsImpl({
       gridConfig: mapGridCard(gridCard, dispatch),
       leftFilters,
       rightFilters,
+      tabs,
       actions: mapActions(actions, dispatch),
       initialView,
       views: mapViews(views, gridCard, disableGrid, disableList),
@@ -1252,6 +1351,7 @@ function RemoteSearchResultsImpl({
       headerActions,
       virtual,
       isLoading,
+      summary: summary ? /* @__PURE__ */ jsx(SearchSummaryCards, { items: summary.items, values: summaryState.values, dispatch }) : void 0,
       onRowClick: rowClick ? (row) => toList(rowClick).forEach((a) => dispatch(a, row)) : void 0,
       searchParams: params,
       onParamsChange: handleParamsChange
@@ -3119,4 +3219,4 @@ async function resolvePatternSpec(id, load) {
 // src/icon-names.ts
 var ICON_NAMES = Object.keys(ICON_NODES);
 
-export { Can, ICON_NAMES, NodeErrorBoundary, RemoteSearchResults, ResultTable, SduiForm, SduiRenderer, SduiSearchDataProvider, SduiSearchInvalidationProvider, SduiSearchResults, SearchResults, SortHandle, SortableList, cellRenderer, createRegistry, createSearchInvalidator, defaultRegistry, imageRenderer, isValidSpecId, mapActions, mapCardRows, mapColumns, mapGridCard, mapViews, matchesCondition, normalizePageSizes, patternSpecCandidates, resolvePatternSpec, sortableDropIndex, sortableMove, useRemoteSearchPage, useSduiRuntime, useSearchFetcher, validateSpec, withProps };
+export { Can, ICON_NAMES, NodeErrorBoundary, RemoteSearchResults, ResultTable, SduiForm, SduiRenderer, SduiSearchDataProvider, SduiSearchInvalidationProvider, SduiSearchResults, SearchResults, SearchSummaryCards, SortHandle, SortableList, cellRenderer, createRegistry, createSearchInvalidator, defaultRegistry, imageRenderer, isValidSpecId, mapActions, mapCardRows, mapColumns, mapGridCard, mapViews, matchesCondition, normalizePageSizes, patternSpecCandidates, resolvePatternSpec, sortableDropIndex, sortableMove, summaryParams, useRemoteSearchPage, useRemoteSearchSummary, useSduiRuntime, useSearchFetcher, validateSpec, withProps };

package/dist/meta.js

@@ -2174,6 +2174,27 @@ var searchCommonProps = [
       { name: "options", kind: "array", label: "\uC635\uC158", description: "{ key, label, value }" }
     ]
   },
+  {
+    name: "tabs",
+    kind: "object",
+    label: "\uAD6C\uBD84 \uD0ED",
+    description: "\uBAA9\uB85D \uB9E8 \uC704(\uD234\uBC14 \uC704)\uC758 \uD0ED. \uACE0\uB978 \uD0ED\uC758 value\uAC00 key \uD30C\uB77C\uBBF8\uD130\uAC00 \uB418\uACE0 \uBE48 value \uD0ED\uC740 \uD30C\uB77C\uBBF8\uD130\uB97C \uC9C0\uC6B4\uB2E4(= \uC804\uCCB4). value\uC5D0 \uC27C\uD45C\uB97C \uB123\uC73C\uBA74 \uC5EC\uB7EC \uAC12 \uC911 \uD558\uB098. \uD0ED\uC744 \uBC14\uAFB8\uBA74 1\uD398\uC774\uC9C0\uB85C \uB3CC\uC544\uAC04\uB2E4.",
+    group: "data",
+    fields: [
+      { name: "key", kind: "string", label: "\uCFFC\uB9AC \uD0A4", required: true },
+      {
+        name: "items",
+        kind: "array",
+        label: "\uD0ED",
+        required: true,
+        item: [
+          { name: "value", kind: "string", label: "\uAC12", description: "\uBE48 \uBB38\uC790\uC5F4 = \uC804\uCCB4", required: true },
+          { name: "label", kind: "string", label: "\uB77C\uBCA8", required: true },
+          { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58" }
+        ]
+      }
+    ]
+  },
   {
     name: "gridCard",
     kind: "object",
@@ -2360,6 +2381,35 @@ var RemoteSearchResultsMeta = {
       group: "data"
     },
     { name: "pageSize", kind: "number", label: "\uD398\uC774\uC9C0\uB2F9 \uD589 \uC218", default: 10, group: "data" },
+    {
+      name: "summary",
+      kind: "object",
+      label: "\uD569\uACC4 \uCE78",
+      description: "\uD0ED \uC704 \uC22B\uC790 \uCE74\uB4DC. \uBAA9\uB85D\uACFC \uAC19\uC740 \uCFFC\uB9AC(page/limit \uC81C\uC678)\uB85C endpoint\uB97C \uC870\uD68C\uD574 \uC751\uB2F5 \uAC1D\uCCB4\uC758 items[].key \uAC12\uC744 \uBCF4\uC778\uB2E4 \u2014 \uAC80\uC0C9\xB7\uC0C1\uC138\uAC80\uC0C9\xB7\uD0ED\uC744 \uB530\uB77C \uBC14\uB010\uB2E4.",
+      group: "data",
+      fields: [
+        { name: "endpoint", kind: "string", label: "\uD569\uACC4 endpoint", required: true },
+        {
+          name: "items",
+          kind: "array",
+          label: "\uCE78",
+          required: true,
+          item: [
+            { name: "key", kind: "string", label: "\uC751\uB2F5 \uD544\uB4DC", required: true },
+            { name: "label", kind: "string", label: "\uB77C\uBCA8", required: true },
+            { name: "unit", kind: "string", label: "\uB2E8\uC704" },
+            { name: "icon", kind: "icon", label: "\uC544\uC774\uCF58" },
+            {
+              name: "cell",
+              kind: "object",
+              label: "\uAC12 \uD45C\uD604",
+              description: "\uCEEC\uB7FC \uC140\uACFC \uAC19\uC740 \uC5B4\uD718. \uC0DD\uB7B5\uD558\uBA74 \uC22B\uC790\uB294 \uCC9C \uB2E8\uC704 \uAD6C\uBD84.",
+              fields: searchCellFields
+            }
+          ]
+        }
+      ]
+    },
     ...searchCommonProps
   ],
   slots: searchSlots,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "WIPCO 서버 주도 UI(SDUI) 렌더러 — JSON 페이지 스펙을 React 컴포넌트로 렌더링",
   "keywords": [
     "sdui",