@wipco/sdui 0.8.1 → 0.9.1

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
-import { S as SduiAction, a as SduiPropValue, b as SduiRule, c as SduiPage } from './types-D5Tkrynd.js';
-export { d as SduiCalcRef, e as SduiChild, f as SduiIndexRef, g as SduiItemRef, h as SduiNode, i as SduiScalar, j as SduiStateRef } from './types-D5Tkrynd.js';
+import { S as SduiAction, a as SduiPropValue, b as SduiRule, c as SduiPage } from './types-Dl4rPyan.js';
+export { d as SduiCalcRef, e as SduiChild, f as SduiIndexRef, g as SduiItemRef, h as SduiNode, i as SduiPageQuery, j as SduiScalar, k as SduiStateRef } from './types-Dl4rPyan.js';
 import { S as SduiBoxProps, a as SduiContainerLayoutProps, b as SduiColumnsScale, c as SduiGapScale, d as SduiWeightScale, e as SduiTextAlignScale } from './layout-B1QrIBm6.js';
 export { C as CHILD_LAYOUT_PROPS, L as LAYOUT_CSS, f as SduiAlignScale, g as SduiChildLayoutProps, h as SduiSizeScale, i as SduiSpanScale, j as childLayoutFrom, k as columnsClass, l as containerLayoutStyle, m as joinClass, n as mergeStyle, t as typographyStyle } from './layout-B1QrIBm6.js';
 import { D as DatePickerProps, a as DateRangePickerProps } from './DatePicker-BndreCPl.js';

package/dist/index.js

@@ -1766,6 +1766,7 @@ function validateSpec(page, knownComponents) {
   const issues = [];
   if (!isPlainObject(page)) return [{ path: "$", message: "\uC2A4\uD399\uC774 \uAC1D\uCCB4\uAC00 \uC544\uB2D9\uB2C8\uB2E4" }];
   if (page.version !== 1) issues.push({ path: "$.version", message: "version\uC740 1\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
+  validatePageData(page.data, issues);
   if (!Array.isArray(page.body)) {
     issues.push({ path: "$.body", message: "body\uB294 \uBC30\uC5F4\uC774\uC5B4\uC57C \uD569\uB2C8\uB2E4" });
     return issues;
@@ -1775,6 +1776,48 @@ function validateSpec(page, knownComponents) {
   );
   return issues;
 }
+function validatePageData(data, issues) {
+  if (data === void 0) return;
+  if (!isPlainObject(data)) {
+    issues.push({ path: "$.data", message: "data\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+    return;
+  }
+  for (const [key, raw] of Object.entries(data)) {
+    const path = `$.data.${key}`;
+    if (key === "" || key.startsWith("$")) {
+      issues.push({ path, message: "\uC0C1\uD0DC \uD0A4\uB294 \uBE44\uC5B4 \uC788\uC9C0 \uC54A\uC544\uC57C \uD558\uACE0 $\uB85C \uC2DC\uC791\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" });
+      continue;
+    }
+    if (!isPlainObject(raw)) {
+      issues.push({ path, message: "\uC870\uD68C\uB294 { endpoint, select?, when?, fallback? } \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+      continue;
+    }
+    if (raw.endpoint === void 0) {
+      issues.push({ path: `${path}.endpoint`, message: "endpoint\uB294 \uD544\uC218\uC785\uB2C8\uB2E4" });
+    } else if (typeof raw.endpoint === "string") {
+      if (isDangerousUrlValue(raw.endpoint)) {
+        issues.push({ path: `${path}.endpoint`, message: `\uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uACBD\uB85C: ${raw.endpoint}` });
+      } else if (!raw.endpoint.startsWith("/")) {
+        issues.push({ path: `${path}.endpoint`, message: "endpoint\uB294 /\uB85C \uC2DC\uC791\uD558\uB294 \uACBD\uB85C\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+      }
+    } else if (!isPlainObject(raw.endpoint)) {
+      issues.push({ path: `${path}.endpoint`, message: "endpoint\uB294 \uBB38\uC790\uC5F4\uC774\uAC70\uB098 \uAC12 \uCC38\uC870\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+    } else {
+      walkValue(raw.endpoint, `${path}.endpoint`, issues, false);
+    }
+    if (raw.select !== void 0 && typeof raw.select !== "string") {
+      issues.push({ path: `${path}.select`, message: "select\uB294 \uBB38\uC790\uC5F4 \uACBD\uB85C\uC5EC\uC57C \uD569\uB2C8\uB2E4" });
+    }
+    for (const [k, v] of Object.entries(raw)) {
+      if (k === "endpoint" || k === "select") continue;
+      if (k !== "when" && k !== "fallback") {
+        issues.push({ path: `${path}.${k}`, message: `\uC54C \uC218 \uC5C6\uB294 \uD56D\uBAA9: ${k}` });
+        continue;
+      }
+      walkValue(v, `${path}.${k}`, issues, false);
+    }
+  }
+}
 function walkChild(child, path, issues, known) {
   if (typeof child === "string") return;
   if (!isPlainObject(child)) {
@@ -1892,29 +1935,84 @@ function walkValue(value, path, issues, actionEligible) {
     walkValue(v, `${path}.${k}`, issues, k === "run" || k === "rowClick" || k.startsWith("on"));
   }
 }
-function isPlainObject2(v) {
+
+// src/page-data.ts
+function isPlainObject2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function planPageData(data, resolve) {
+  if (data === void 0) return [];
+  if (!isPlainObject2(data)) {
+    warnOnce("page-data:root", "[sdui] page.data\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4 \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4");
+    return [];
+  }
+  const plans = [];
+  for (const [key, raw] of Object.entries(data)) {
+    if (key === "" || key.startsWith("$")) {
+      warnOnce(`page-data:${key}`, `[sdui] page.data\uC758 \uC0C1\uD0DC \uD0A4 "${key}"\uB294 \uC4F8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uAC74\uB108\uB701\uB2C8\uB2E4`);
+      continue;
+    }
+    if (!isPlainObject2(raw)) {
+      warnOnce(`page-data:${key}`, `[sdui] page.data.${key}\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4 \u2014 \uAC74\uB108\uB701\uB2C8\uB2E4`);
+      continue;
+    }
+    const query = raw;
+    const resolved = resolve(query.endpoint);
+    const endpoint = typeof resolved === "string" ? resolved.trim() : "";
+    const enabled = "when" in query ? Boolean(resolve(query.when)) : true;
+    plans.push({
+      key,
+      endpoint,
+      enabled,
+      select: typeof query.select === "string" ? query.select : void 0,
+      fallback: query.fallback
+    });
+  }
+  return plans;
+}
+function planSignature(plans) {
+  return JSON.stringify(plans.map((plan) => [plan.key, plan.enabled ? plan.endpoint : ""]));
+}
+function runnablePlans(plans) {
+  return plans.filter((plan) => plan.enabled && plan.endpoint !== "");
+}
+function invalidateHits(plans, prefix, exact) {
+  return plans.filter(
+    (plan) => prefix === "" ? true : exact ? plan.endpoint === prefix : plan.endpoint.startsWith(prefix)
+  ).map((plan) => plan.key);
+}
+function pickPath(source, path) {
+  if (path === void 0 || path === "") return source;
+  let value = source;
+  for (const segment of path.split(".")) {
+    if (!isPlainObject2(value)) return void 0;
+    value = value[segment];
+  }
+  return value;
+}
+function isPlainObject3(v) {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
 function isStateRef(v) {
-  return isPlainObject2(v) && typeof v.$state === "string";
+  return isPlainObject3(v) && typeof v.$state === "string";
 }
 function isItemRef(v) {
-  return isPlainObject2(v) && "$item" in v;
+  return isPlainObject3(v) && "$item" in v;
 }
 function isIndexRef(v) {
-  return isPlainObject2(v) && "$index" in v;
+  return isPlainObject3(v) && "$index" in v;
 }
 function isCalcRef(v) {
-  return isPlainObject2(v) && isPlainObject2(v.$calc);
+  return isPlainObject3(v) && isPlainObject3(v.$calc);
 }
 function isAction(v) {
-  return isPlainObject2(v) && typeof v.action === "string";
+  return isPlainObject3(v) && typeof v.action === "string";
 }
 function isActionList(v) {
   return Array.isArray(v) && v.length > 0 && v.every(isAction);
 }
 function eventValue(arg) {
-  if (isPlainObject2(arg) && "target" in arg && typeof arg.preventDefault === "function") {
+  if (isPlainObject3(arg) && "target" in arg && typeof arg.preventDefault === "function") {
     const target = arg.target;
     if (target.type === "checkbox") return target.checked;
     if (target.type === "number" || target.type === "range") {
@@ -2032,7 +2130,7 @@ function childrenOf(node) {
 }
 function renderChild(child, index, scope, engine) {
   if (typeof child === "string") return child;
-  if (!isPlainObject2(child)) {
+  if (!isPlainObject3(child)) {
     warnOnce2(`child:${String(child)}`, `[sdui] \uC798\uBABB\uB41C \uB178\uB4DC(\uBB38\uC790\uC5F4 \uB610\uB294 \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4): ${String(child)}`);
     return /* @__PURE__ */ jsx(SpecErrorCard, { children: "[sdui] \uC798\uBABB\uB41C \uB178\uB4DC \u2014 \uBB38\uC790\uC5F4 \uB610\uB294 \uB178\uB4DC \uAC1D\uCCB4\uC5EC\uC57C \uD569\uB2C8\uB2E4" }, index);
   }
@@ -2047,11 +2145,11 @@ function SduiNodeRenderer({
   engine
 }) {
   const { registry, resolveValue, dispatch, resolveAsset } = engine;
-  const slots = isPlainObject2(node.slots) ? node.slots : void 0;
+  const slots = isPlainObject3(node.slots) ? node.slots : void 0;
   const childList = childrenOf(node);
   if (node.component === "ForEach") {
     const source = resolveValue(
-      isPlainObject2(node.props) ? node.props.source ?? null : null,
+      isPlainObject3(node.props) ? node.props.source ?? null : null,
       scope
     );
     const rows = Array.isArray(source) ? source : [];
@@ -2061,7 +2159,7 @@ function SduiNodeRenderer({
     }
     return /* @__PURE__ */ jsx(Fragment, { children: rows.map((item, rowIndex) => {
       const rowScope = [...scope, { item, index: rowIndex }];
-      const rowKey = isPlainObject2(item) && typeof item.id === "string" ? item.id : rowIndex;
+      const rowKey = isPlainObject3(item) && typeof item.id === "string" ? item.id : rowIndex;
       return /* @__PURE__ */ jsx(React.Fragment, { children: childList?.map((child, i) => renderChild(child, i, rowScope, engine)) }, rowKey);
     }) });
   }
@@ -2077,7 +2175,7 @@ function SduiNodeRenderer({
     ] });
   }
   const props = {};
-  for (const [name, raw] of Object.entries(isPlainObject2(node.props) ? node.props : {})) {
+  for (const [name, raw] of Object.entries(isPlainObject3(node.props) ? node.props : {})) {
     if (DENIED_PROPS2.has(name)) {
       warnOnce2(`prop:${name}`, `[sdui] \uC2A4\uD399\uC5D0\uC11C \uD5C8\uC6A9\uB418\uC9C0 \uC54A\uB294 \uD504\uB86D: ${name} \u2014 \uBB34\uC2DC\uD569\uB2C8\uB2E4`);
       continue;
@@ -2087,6 +2185,8 @@ function SduiNodeRenderer({
       props[name] = (arg) => actions.forEach(
         (a) => dispatch(resolveValue(a, scope), arg)
       );
+    } else if (name === "rowClick" && (isAction(raw) || isActionList(raw))) {
+      props[name] = raw;
     } else {
       let resolved = resolveValue(raw, scope);
       if (resolved === null) {
@@ -2109,7 +2209,7 @@ function SduiNodeRenderer({
   if (childLayout) {
     for (const name of CHILD_LAYOUT_PROPS) delete props[name];
     if (childLayout.style) {
-      props.style = isPlainObject2(props.style) ? { ...childLayout.style, ...props.style } : childLayout.style;
+      props.style = isPlainObject3(props.style) ? { ...childLayout.style, ...props.style } : childLayout.style;
     }
     if (childLayout.className) {
       props.className = typeof props.className === "string" && props.className ? `${childLayout.className} ${props.className}` : childLayout.className;
@@ -2244,7 +2344,7 @@ function SduiRenderer({
       if (head in current) {
         let value = current[head];
         for (const segment of segments.slice(cut)) {
-          if (!isPlainObject2(value)) return void 0;
+          if (!isPlainObject3(value)) return void 0;
           value = value[segment];
         }
         return value;
@@ -2262,7 +2362,7 @@ function SduiRenderer({
         const frame = scope[scope.length - 1];
         if (!frame) return null;
         if (value.$item === true) return frame.item;
-        return isPlainObject2(frame.item) ? frame.item[value.$item] ?? null : null;
+        return isPlainObject3(frame.item) ? frame.item[value.$item] ?? null : null;
       }
       if (isIndexRef(value)) {
         return scope[scope.length - 1]?.index ?? null;
@@ -2278,7 +2378,7 @@ function SduiRenderer({
         const resolved = args.map((arg) => resolveValue(arg, scope));
         const nums = (v) => {
           if (Array.isArray(v))
-            return v.map((row) => field && isPlainObject2(row) ? toNumber2(row[field]) : toNumber2(row));
+            return v.map((row) => field && isPlainObject3(row) ? toNumber2(row[field]) : toNumber2(row));
           return [toNumber2(v)];
         };
         switch (op) {
@@ -2325,7 +2425,7 @@ function SduiRenderer({
         }
       }
       if (Array.isArray(value)) return value.map((v) => resolveValue(v, scope));
-      if (isPlainObject2(value)) {
+      if (isPlainObject3(value)) {
         const out = {};
         for (const [k, v] of Object.entries(value)) out[k] = resolveValue(v, scope);
         return out;
@@ -2334,10 +2434,78 @@ function SduiRenderer({
     },
     [lookupState]
   );
+  const dataPlan = useMemo(
+    () => planPageData(page.data, (value) => resolveValue(value, EMPTY_SCOPE)),
+    // state를 의존성에 두어야 $state를 참조하는 경로가 값 변화를 따라간다.
+    [page.data, resolveValue, state]
+  );
+  const dataPlanRef = useRef(dataPlan);
+  dataPlanRef.current = dataPlan;
+  const dataPlanKey = useMemo(() => planSignature(dataPlan), [dataPlan]);
+  const [dataEpochs, setDataEpochs] = useState({});
+  const dataEpochsRef = useRef(dataEpochs);
+  dataEpochsRef.current = dataEpochs;
+  const fetchedRef = useRef(/* @__PURE__ */ new Map());
+  const dataEpochKey = useMemo(() => JSON.stringify(dataEpochs), [dataEpochs]);
+  useEffect(() => {
+    const epochs = dataEpochsRef.current;
+    const runnable = runnablePlans(dataPlanRef.current).filter((plan) => {
+      const stamp = `${plan.endpoint}#${epochs[plan.key] ?? 0}`;
+      if (fetchedRef.current.get(plan.key) === stamp) return false;
+      fetchedRef.current.set(plan.key, stamp);
+      return true;
+    });
+    if (runnable.length === 0) return;
+    const controller = new AbortController();
+    let cancelled = false;
+    setEntries(
+      Object.fromEntries(runnable.map((plan) => [`${plan.key}.$loading`, true]))
+    );
+    void Promise.all(
+      runnable.map(async (plan) => {
+        try {
+          const response = await hostRef.current.fetch(plan.endpoint, {
+            method: "GET",
+            signal: controller.signal
+          });
+          if (cancelled) return;
+          const picked = pickPath(response, plan.select);
+          if (picked === void 0 && plan.select !== void 0) {
+            warnOnce2(
+              `data-select:${plan.key}`,
+              `[sdui] page.data.${plan.key}: \uC751\uB2F5\uC5D0 "${plan.select}" \uACBD\uB85C\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uAC12 \uC5C6\uC74C\uC73C\uB85C \uB461\uB2C8\uB2E4 (${plan.endpoint})`
+            );
+          }
+          setEntries({
+            [plan.key]: picked,
+            [`${plan.key}.$loading`]: false,
+            [`${plan.key}.$error`]: null
+          });
+        } catch (error) {
+          if (cancelled || controller.signal.aborted) return;
+          const message = error instanceof Error ? error.message : "\uC870\uD68C\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4";
+          warnOnce2(`data:${plan.key}:${plan.endpoint}`, `[sdui] page.data.${plan.key} \uC870\uD68C \uC2E4\uD328 (${plan.endpoint}): ${message}`);
+          setEntries({
+            [plan.key]: plan.fallback ?? void 0,
+            [`${plan.key}.$loading`]: false,
+            [`${plan.key}.$error`]: message
+          });
+        }
+      })
+    );
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [dataPlanKey, dataEpochKey, setEntries]);
   const dispatchRef = useRef(() => {
   });
   const dispatch = useCallback(
-    (action, arg) => {
+    (rawAction, arg) => {
+      const action = resolveValue(
+        rawAction,
+        EMPTY_SCOPE
+      );
       switch (action.action) {
         case "navigate":
           if (!isSafeNavigationTarget(action.to)) {
@@ -2407,7 +2575,7 @@ function SduiRenderer({
             break;
           }
           const row = current[index];
-          if (!isPlainObject2(row)) break;
+          if (!isPlainObject3(row)) break;
           const nextValue = (action.fromEvent ? eventValue(arg) : action.value) ?? null;
           const next = [...current];
           next[index] = { ...row, [action.field]: nextValue };
@@ -2456,9 +2624,19 @@ function SduiRenderer({
           })();
           break;
         }
-        case "invalidate":
+        case "invalidate": {
           hostRef.current.invalidate?.(action.prefix, action.exact ?? false);
+          const prefix = typeof action.prefix === "string" ? action.prefix : "";
+          const hit = invalidateHits(runnablePlans(dataPlanRef.current), prefix, action.exact ?? false);
+          if (hit.length > 0) {
+            setDataEpochs((prev) => {
+              const next = { ...prev };
+              for (const key of hit) next[key] = (next[key] ?? 0) + 1;
+              return next;
+            });
+          }
           break;
+        }
         case "refresh":
           hostRef.current.refresh?.();
           break;
@@ -2496,7 +2674,7 @@ function SduiRenderer({
           break;
       }
     },
-    [pushToast, onCustomAction, customValidators, setEntries]
+    [pushToast, onCustomAction, customValidators, setEntries, resolveValue]
   );
   dispatchRef.current = dispatch;
   const engine = useMemo(

package/dist/meta.d.ts

@@ -1,4 +1,4 @@
-import { a as SduiPropValue, h as SduiNode } from './types-D5Tkrynd.js';
+import { a as SduiPropValue, h as SduiNode } from './types-Dl4rPyan.js';
 
 /**
  * 시각 빌더용 컴포넌트 메타데이터 스키마.

package/dist/{types-D5Tkrynd.d.ts → types-Dl4rPyan.d.ts}

@@ -182,6 +182,41 @@ type SduiAction = {
     name: string;
     payload?: SduiPropValue;
 };
+/**
+ * 페이지가 열릴 때 서버에서 끌어와 상태에 넣을 조회 하나.
+ *
+ * ## 왜 이게 생겼나 (실측)
+ * 이것이 생기기 전, 스펙에는 **서버 데이터를 상태로 들여오는 통로가 없었다.**
+ * 마운트 훅이 없고, `submitForm`은 GET에도 본문을 붙여(어댑터가 `JSON.stringify`한다)
+ * 브라우저가 막는다. 그래서 데이터는 **스스로 조회하는 컴포넌트**로만 들어왔다 —
+ * ERP 85화면 실측에서 그런 자리는 `RemoteSearchResults +endpoint` 43곳,
+ * `AutocompleteField +endpoint` 1곳, 합쳐 44곳이 전부였다.
+ * 그 결과 `Chart`는 20번 쓰여 **20번 모두** 리터럴 샘플이었고, 데이터를 지는 자리
+ * 854곳 중 387곳이 샘플로 남아 있었다. 화면마다 배선을 빠뜨린 것이 아니라
+ * **배선할 수단이 없었던 것**이다.
+ */
+interface SduiPageQuery {
+    /**
+     * GET 경로. 값 해석을 거치므로 `$state`·`$calc`를 쓸 수 있다 —
+     * 선택된 행에 딸린 조회는
+     * `{"$calc":{"op":"concat","args":["/roles/",{"$state":"rt.id"},"/permissions"]}}`처럼 쓴다.
+     * 해석된 경로가 바뀌면 자동으로 다시 조회한다.
+     */
+    endpoint: SduiPropValue;
+    /**
+     * 응답에서 꺼낼 필드 경로(`"data"`, `"result.rows"`). 생략하면 응답 전체.
+     * 목록 API가 `{data, total, limit, offset}` 봉투를 주므로 대개 `"data"`가 된다.
+     */
+    select?: string;
+    /**
+     * 이 값이 거짓이면 조회하지 않는다. 선택된 행이 없을 때
+     * `/roles/undefined/permissions`를 때리는 것을 막는 자리다.
+     * 생략하면 해석된 경로가 비어 있지 않은 문자열일 때 조회한다.
+     */
+    when?: SduiPropValue;
+    /** 실패했거나 아직 조회 전일 때 상태에 들어갈 값. 생략하면 `undefined`. */
+    fallback?: SduiPropValue;
+}
 interface SduiPage {
     version: 1;
     /** 문서 <title> 및 페이지 헤더에 쓰인다. */
@@ -191,7 +226,19 @@ interface SduiPage {
     subscribe?: string[];
     /** URL 쿼리파라미터와 동기화할 상태 키 — 딥링크/새로고침 보존용 */
     urlState?: string[];
+    /**
+     * 페이지가 열릴 때 채울 상태 — `{ "상태키": { endpoint, select? } }`.
+     *
+     * 각 조회는 자기 키 옆에 진행·실패를 **평평한 키**로 함께 적는다:
+     * `"<키>.$loading"`(boolean) · `"<키>.$error"`(문자열 또는 null).
+     * 상태 조회가 완전 일치를 먼저 보므로 `{"$state":"rt.x.$loading"}`은 그 평평한 키를
+     * 집고 `{"$state":"rt.x"}`는 데이터를 집는다 — 서로 가리지 않는다.
+     *
+     * `invalidate` 액션의 prefix와 경로가 겹치면 다시 조회한다. 저장 후
+     * `{"action":"invalidate","prefix":"/roles"}` 하나로 목록이 갱신되는 이유다.
+     */
+    data?: Record<string, SduiPageQuery>;
     body: SduiChild[];
 }
 
-export type { SduiAction as S, SduiPropValue as a, SduiRule as b, SduiPage as c, SduiCalcRef as d, SduiChild as e, SduiIndexRef as f, SduiItemRef as g, SduiNode as h, SduiScalar as i, SduiStateRef as j };
+export type { SduiAction as S, SduiPropValue as a, SduiRule as b, SduiPage as c, SduiCalcRef as d, SduiChild as e, SduiIndexRef as f, SduiItemRef as g, SduiNode as h, SduiPageQuery as i, SduiScalar as j, SduiStateRef as k };

package/package.json

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