@wipco/sdui 0.30.0 → 0.32.0

package/dist/rich/ExcelUploadCard.js

@@ -0,0 +1,606 @@
+import { loadOptionalModule } from '../chunk-RRMKCZYQ.js';
+import { useSduiAdapter, useSduiSandbox, hostFetchOf, defaultAdapter, hostRawFetchOf } from '../chunk-DKPNFEVU.js';
+import { Select, Input, Card, Button, Spinner, Icon, Alert, StatCard, Badge, Table, EmptyState } from '../chunk-WIDDHR7L.js';
+import { boxed } from '../chunk-SAN4IX6N.js';
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ACCEPT = ".xlsx,.xls";
+function pickCell(raw, column) {
+  const keys = Object.keys(raw);
+  const match = keys.find((key) => key.trim() === column.header) ?? keys.find((key) => key.trim() === column.key);
+  const value = match !== void 0 ? raw[match] : "";
+  return value === null || value === void 0 ? "" : String(value).trim();
+}
+function validateCell(column, value) {
+  if (value === "") return column.required ? "\uD544\uC218 \uC785\uB825\uC785\uB2C8\uB2E4" : null;
+  if (column.options && !column.options.includes(value)) {
+    return `\uD5C8\uC6A9\uAC12\uC774 \uC544\uB2D9\uB2C8\uB2E4 (\uD5C8\uC6A9: ${column.options.join(", ")})`;
+  }
+  return null;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+}
+function collectSummary(result, summaryLabels) {
+  const nested = result.summary && typeof result.summary === "object" ? result.summary : void 0;
+  const lookup = (key) => nested?.[key] ?? result[key];
+  if (summaryLabels) {
+    return Object.entries(summaryLabels).flatMap(([key, label]) => {
+      const value = lookup(key);
+      return typeof value === "number" && Number.isFinite(value) ? [{ key, label, value }] : [];
+    });
+  }
+  const source = nested ?? result;
+  return Object.entries(source).flatMap(
+    ([key, value]) => typeof value === "number" && Number.isFinite(value) ? [{ key, label: key, value }] : []
+  );
+}
+function errorMessage(error, fallback) {
+  return error instanceof Error && error.message ? error.message : fallback;
+}
+function ExcelUploadCardImpl({
+  mode = "server",
+  endpoint,
+  templateEndpoint,
+  templateColumns,
+  columns,
+  summaryLabels,
+  onComplete
+}) {
+  const adapter = useSduiAdapter();
+  const sandbox = useSduiSandbox();
+  const api = hostFetchOf(adapter) ?? defaultAdapter.fetch;
+  const rawFetch = hostRawFetchOf(adapter) ?? defaultAdapter.rawFetch;
+  const inputRef = useRef(null);
+  const [inputKey, setInputKey] = useState(0);
+  const [fileName, setFileName] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const [demoMode, setDemoMode] = useState(false);
+  const [downloading, setDownloading] = useState(false);
+  const [file, setFile] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const [result, setResult] = useState(null);
+  const [rows, setRows] = useState(null);
+  const [parsing, setParsing] = useState(false);
+  const excelRowNums = useRef([]);
+  const [importing, setImporting] = useState(false);
+  const schemaColumns = useMemo(() => columns ?? [], [columns]);
+  const reset = useCallback(() => {
+    setFile(null);
+    setFileName(null);
+    setResult(null);
+    setRows(null);
+    setNotice(null);
+    setInputKey((key) => key + 1);
+  }, []);
+  const hasTemplate = (templateColumns?.length ?? 0) > 0 || Boolean(templateEndpoint);
+  const handleTemplateDownload = useCallback(async () => {
+    setDownloading(true);
+    try {
+      if (templateColumns && templateColumns.length > 0) {
+        const XLSX = await loadOptionalModule(() => import('xlsx'), "xlsx");
+        const headers = templateColumns.map((column) => column.header);
+        const examples = templateColumns.map((column) => column.example ?? "");
+        const sheet = XLSX.utils.aoa_to_sheet([headers, examples]);
+        sheet["!cols"] = templateColumns.map((column) => ({
+          wch: Math.max(column.header.length * 2, (column.example ?? "").length + 2, 12)
+        }));
+        const workbook = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(workbook, sheet, "\uC5C5\uB85C\uB4DC\uC591\uC2DD");
+        XLSX.writeFile(workbook, "\uC5D1\uC140_\uC5C5\uB85C\uB4DC_\uD15C\uD50C\uB9BF.xlsx");
+      } else if (templateEndpoint) {
+        const res = await rawFetch(templateEndpoint, { method: "GET" });
+        if (res.status === 503) {
+          setDemoMode(true);
+          setNotice({
+            tone: "warning",
+            text: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \uC0C1\uD0DC\uB77C \uD15C\uD50C\uB9BF\uC744 \uBC1B\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4 (\uB370\uBAA8 \uBAA8\uB4DC)"
+          });
+          return;
+        }
+        if (!res.ok) throw new Error(`\uD15C\uD50C\uB9BF \uB2E4\uC6B4\uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${res.status})`);
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = "\uC5D1\uC140_\uC5C5\uB85C\uB4DC_\uD15C\uD50C\uB9BF.xlsx";
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        URL.revokeObjectURL(url);
+      }
+    } catch (error) {
+      setNotice({ tone: "danger", text: errorMessage(error, "\uD15C\uD50C\uB9BF \uB2E4\uC6B4\uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4") });
+    } finally {
+      setDownloading(false);
+    }
+  }, [templateColumns, templateEndpoint]);
+  const handleServerUpload = useCallback(async () => {
+    if (!file || !endpoint) return;
+    setUploading(true);
+    setNotice(null);
+    setResult(null);
+    try {
+      const formData = new FormData();
+      formData.append("file", file, file.name);
+      if (sandbox) {
+        setNotice({ tone: "warning", text: "\uBBF8\uB9AC\uBCF4\uAE30\uC5D0\uC11C\uB294 \uC5C5\uB85C\uB4DC\uAC00 \uB098\uAC00\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4" });
+        return;
+      }
+      const res = await rawFetch(endpoint, { method: "POST", body: formData });
+      if (res.status === 503) {
+        setDemoMode(true);
+        return;
+      }
+      const json = await res.json().catch(() => null);
+      if (!res.ok) {
+        if (json) setResult(json);
+        setNotice({
+          tone: "danger",
+          text: typeof json?.message === "string" && json.message || typeof json?.error === "string" && json.error || `\uC5C5\uB85C\uB4DC\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4 (${res.status})`
+        });
+        return;
+      }
+      setResult(json ?? {});
+      setNotice({ tone: "success", text: "\uC5C5\uB85C\uB4DC\uAC00 \uC644\uB8CC\uB418\uC5C8\uC2B5\uB2C8\uB2E4" });
+      setFile(null);
+      setFileName(null);
+      setInputKey((key) => key + 1);
+      onComplete?.(json ?? {});
+    } catch (error) {
+      setNotice({ tone: "danger", text: errorMessage(error, "\uC5C5\uB85C\uB4DC \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4") });
+    } finally {
+      setUploading(false);
+    }
+  }, [endpoint, file, onComplete]);
+  const validateRow = useCallback(
+    (row) => {
+      const errors = {};
+      for (const column of schemaColumns) {
+        const message = validateCell(column, row.cells[column.key] ?? "");
+        if (message) errors[column.key] = message;
+      }
+      return { ...row, errors };
+    },
+    [schemaColumns]
+  );
+  const parsePreviewFile = useCallback(
+    async (selected) => {
+      setParsing(true);
+      setNotice(null);
+      setRows(null);
+      try {
+        const buffer = await selected.arrayBuffer();
+        const XLSX = await loadOptionalModule(() => import('xlsx'), "xlsx");
+        const workbook = XLSX.read(buffer, { type: "array" });
+        const sheet = workbook.Sheets[workbook.SheetNames[0]];
+        if (!sheet) throw new Error("\uC5D1\uC140 \uD30C\uC77C\uC5D0\uC11C \uC2DC\uD2B8\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4");
+        const raw = XLSX.utils.sheet_to_json(sheet, {
+          defval: "",
+          raw: false
+        });
+        if (raw.length === 0) {
+          setNotice({ tone: "warning", text: "\uB370\uC774\uD130 \uD589\uC774 \uC5C6\uC2B5\uB2C8\uB2E4 \u2014 \uD15C\uD50C\uB9BF \uC591\uC2DD\uC744 \uD655\uC778\uD558\uC138\uC694" });
+          return;
+        }
+        excelRowNums.current = raw.map((rawRow, index) => {
+          const rowNum = rawRow.__rowNum__;
+          return typeof rowNum === "number" ? rowNum + 1 : index + 2;
+        });
+        setRows(
+          raw.map((rawRow, index) => {
+            const cells = {};
+            for (const column of schemaColumns) cells[column.key] = pickCell(rawRow, column);
+            return validateRow({ id: index, cells });
+          })
+        );
+        setFileName(selected.name);
+      } catch (error) {
+        setNotice({ tone: "danger", text: errorMessage(error, "\uC5D1\uC140 \uD30C\uC77C\uC744 \uC77D\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4") });
+      } finally {
+        setParsing(false);
+      }
+    },
+    [schemaColumns, validateRow]
+  );
+  const commitCell = useCallback(
+    (rowId, key, value) => {
+      setRows(
+        (current) => current ? current.map(
+          (row) => row.id === rowId ? validateRow({ id: row.id, cells: { ...row.cells, [key]: value.trim() } }) : row
+        ) : current
+      );
+    },
+    [validateRow]
+  );
+  const validRows = useMemo(
+    () => (rows ?? []).filter((row) => Object.keys(row.errors).length === 0),
+    [rows]
+  );
+  const invalidCount = (rows?.length ?? 0) - validRows.length;
+  const handleImport = useCallback(async () => {
+    if (validRows.length === 0) return;
+    const payload = validRows.map((row) => ({ ...row.cells }));
+    setImporting(true);
+    setNotice(null);
+    try {
+      if (endpoint) {
+        if (sandbox) {
+          setNotice({ tone: "warning", text: "\uBBF8\uB9AC\uBCF4\uAE30\uC5D0\uC11C\uB294 \uB4F1\uB85D\uC774 \uB098\uAC00\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4" });
+          return;
+        }
+        const response = await api(endpoint, { method: "POST", body: { rows: payload } });
+        setNotice({ tone: "success", text: `${payload.length}\uAC74\uC744 \uAC00\uC838\uC654\uC2B5\uB2C8\uB2E4` });
+        onComplete?.(response ?? payload);
+      } else {
+        setNotice({ tone: "success", text: `${payload.length}\uAC74\uC744 \uAC00\uC838\uC654\uC2B5\uB2C8\uB2E4` });
+        onComplete?.(payload);
+      }
+      setRows(null);
+      setFileName(null);
+      setInputKey((key) => key + 1);
+    } catch (error) {
+      if (error?.status === 503) {
+        setDemoMode(true);
+        setNotice({
+          tone: "warning",
+          text: `\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \u2014 \uAC80\uC99D\uB41C ${payload.length}\uAC74\uC744 \uB85C\uCEEC \uACB0\uACFC\uB85C \uC804\uB2EC\uD588\uC2B5\uB2C8\uB2E4 (\uB370\uBAA8 \uBAA8\uB4DC)`
+        });
+        onComplete?.(payload);
+        setRows(null);
+        setFileName(null);
+        setInputKey((key) => key + 1);
+      } else {
+        setNotice({ tone: "danger", text: errorMessage(error, "\uAC00\uC838\uC624\uAE30\uC5D0 \uC2E4\uD328\uD588\uC2B5\uB2C8\uB2E4") });
+      }
+    } finally {
+      setImporting(false);
+    }
+  }, [endpoint, onComplete, validRows]);
+  const previewTableColumns = useMemo(() => {
+    const base = [
+      {
+        key: "_row",
+        header: "#",
+        width: "48px",
+        align: "right",
+        mono: true,
+        // 엑셀 행 번호(헤더 1행 + 1-기반)
+        render: (row) => excelRowNums.current[row.id] ?? row.id + 2
+      },
+      {
+        key: "_status",
+        header: "\uC0C1\uD0DC",
+        width: "64px",
+        render: (row) => Object.keys(row.errors).length === 0 ? /* @__PURE__ */ jsx(Badge, { tone: "success", children: "\uC815\uC0C1" }) : /* @__PURE__ */ jsx(Badge, { tone: "danger", children: "\uC624\uB958" })
+      }
+    ];
+    const dataColumns = schemaColumns.map((column) => ({
+      key: column.key,
+      header: column.required ? `${column.header} *` : column.header,
+      render: (row) => {
+        const value = row.cells[column.key] ?? "";
+        const error = row.errors[column.key];
+        if (!error) {
+          return value !== "" ? value : /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-muted)" }, children: "\u2014" });
+        }
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "wp-col",
+            style: {
+              gap: "var(--wp-space-half)",
+              padding: "var(--wp-space-1)",
+              background: "var(--wp-status-danger-bg)",
+              borderRadius: "var(--wp-radius-sm)",
+              minWidth: 140
+            },
+            children: [
+              column.options ? /* @__PURE__ */ jsx(
+                Select,
+                {
+                  size: "sm",
+                  invalid: true,
+                  value: "",
+                  placeholder: value !== "" ? `${value} (\uD5C8\uC6A9\uAC12 \uC544\uB2D8)` : "\uAC12 \uC120\uD0DD",
+                  "aria-label": `${column.header} \uC218\uC815`,
+                  options: column.options.map((option) => ({ value: option, label: option })),
+                  onChange: (event) => {
+                    if (event.target.value) commitCell(row.id, column.key, event.target.value);
+                  }
+                }
+              ) : /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size: "sm",
+                  invalid: true,
+                  defaultValue: value,
+                  "aria-label": `${column.header} \uC218\uC815`,
+                  placeholder: column.header,
+                  onBlur: (event) => commitCell(row.id, column.key, event.target.value),
+                  onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                      commitCell(row.id, column.key, event.currentTarget.value);
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "wp-caption", style: { color: "var(--wp-text-danger)" }, children: error })
+            ]
+          }
+        );
+      }
+    }));
+    return [...base, ...dataColumns];
+  }, [commitCell, schemaColumns]);
+  const handleFileChange = (event) => {
+    const selected = event.target.files?.[0];
+    if (!selected) return;
+    if (mode === "preview") {
+      void parsePreviewFile(selected);
+    } else {
+      setFile(selected);
+      setFileName(selected.name);
+      setResult(null);
+      setNotice(null);
+    }
+  };
+  const previewSchemaMissing = mode === "preview" && schemaColumns.length === 0;
+  const pickerDisabled = uploading || parsing || importing || previewSchemaMissing;
+  const pickerReason = previewSchemaMissing ? "columns \uC2A4\uD0A4\uB9C8\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC544 \uBBF8\uB9AC\uBCF4\uAE30\uB97C \uC0AC\uC6A9\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4" : void 0;
+  const uploadDisabledReason = !endpoint ? "\uC5C5\uB85C\uB4DC endpoint\uAC00 \uC124\uC815\uB418\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4" : demoMode ? "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 \uC0C1\uD0DC\uC785\uB2C8\uB2E4 (\uB370\uBAA8 \uBAA8\uB4DC)" : !file ? "\uC5D1\uC140 \uD30C\uC77C\uC744 \uBA3C\uC800 \uC120\uD0DD\uD558\uC138\uC694" : void 0;
+  const importDisabledReason = validRows.length === 0 ? "\uAC00\uC838\uC62C \uC218 \uC788\uB294 \uC815\uC0C1 \uD589\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" : void 0;
+  const summaryEntries = result ? collectSummary(result, summaryLabels) : [];
+  const rowErrors = Array.isArray(result?.errors) ? result.errors : [];
+  const hasReset = fileName !== null || file !== null || result !== null || rows !== null || notice !== null;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      title: "\uC5D1\uC140 \uC77C\uAD04 \uC5C5\uB85C\uB4DC",
+      subtitle: mode === "preview" ? "\uC5D1\uC140 \uD30C\uC77C\uC744 \uBD88\uB7EC\uC640 \uAC80\uC99D\uD55C \uB4A4 \uC815\uC0C1 \uD589\uB9CC \uAC00\uC838\uC635\uB2C8\uB2E4" : "\uC5D1\uC140 \uD30C\uC77C\uC744 \uC5C5\uB85C\uB4DC\uD558\uBA74 \uC11C\uBC84\uC5D0\uC11C \uC77C\uAD04 \uCC98\uB9AC\uD569\uB2C8\uB2E4",
+      actions: hasTemplate ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          icon: "download",
+          loading: downloading,
+          onClick: () => void handleTemplateDownload(),
+          children: "\uD15C\uD50C\uB9BF \uB2E4\uC6B4\uB85C\uB4DC"
+        }
+      ) : void 0,
+      children: /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-3)" }, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: ACCEPT,
+            hidden: true,
+            onChange: handleFileChange
+          },
+          inputKey
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              flexWrap: "wrap",
+              gap: "var(--wp-space-2)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  icon: "upload",
+                  disabled: pickerDisabled,
+                  title: pickerReason,
+                  onClick: () => inputRef.current?.click(),
+                  children: "\uD30C\uC77C \uC120\uD0DD"
+                }
+              ),
+              parsing ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: "\uC5D1\uC140 \uD30C\uC2F1 \uC911\u2026" }) : fileName ? /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "wp-body-sm",
+                  style: {
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "var(--wp-space-1)",
+                    color: "var(--wp-text-default)"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "file-text", size: 16, style: { color: "var(--wp-text-muted)" } }),
+                    fileName,
+                    file ? /* @__PURE__ */ jsxs("span", { className: "wp-caption", style: { color: "var(--wp-text-muted)" }, children: [
+                      "(",
+                      formatBytes(file.size),
+                      ")"
+                    ] }) : null
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "wp-caption", children: ".xlsx / .xls \uD30C\uC77C\uC744 \uC120\uD0DD\uD558\uC138\uC694" }),
+              /* @__PURE__ */ jsxs("div", { style: { marginLeft: "auto", display: "flex", gap: "var(--wp-space-2)" }, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    icon: "rotate-ccw",
+                    disabled: !hasReset || uploading || importing || parsing,
+                    title: !hasReset ? "\uCD08\uAE30\uD654\uD560 \uB0B4\uC6A9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4" : void 0,
+                    onClick: reset,
+                    children: "\uCD08\uAE30\uD654"
+                  }
+                ),
+                mode === "server" ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "primary",
+                    icon: "cloud-upload",
+                    loading: uploading,
+                    disabled: uploadDisabledReason !== void 0,
+                    title: uploadDisabledReason,
+                    onClick: () => void handleServerUpload(),
+                    children: "\uC5C5\uB85C\uB4DC"
+                  }
+                ) : rows !== null ? /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "primary",
+                    icon: "check",
+                    loading: importing,
+                    disabled: importDisabledReason !== void 0,
+                    title: importDisabledReason,
+                    onClick: () => void handleImport(),
+                    children: [
+                      validRows.length,
+                      "\uAC74 \uAC00\uC838\uC624\uAE30",
+                      invalidCount > 0 ? ` (\uC624\uB958 ${invalidCount}\uAC74 \uC81C\uC678)` : ""
+                    ]
+                  }
+                ) : null
+              ] })
+            ]
+          }
+        ),
+        demoMode ? /* @__PURE__ */ jsx(Alert, { tone: "warning", title: "\uBC31\uC5D4\uB4DC \uBBF8\uC5F0\uB3D9 (\uB370\uBAA8 \uBAA8\uB4DC)", children: "\uC11C\uBC84 \uCC98\uB9AC\uAC00 \uBD88\uAC00\uB2A5\uD55C \uC0C1\uD0DC\uC785\uB2C8\uB2E4. \uC5F0\uB3D9 \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD558\uC138\uC694." }) : null,
+        notice ? /* @__PURE__ */ jsx(Alert, { tone: notice.tone, children: notice.text }) : null,
+        mode === "server" && summaryEntries.length > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))",
+              gap: "var(--wp-space-2)"
+            },
+            children: summaryEntries.map((entry) => /* @__PURE__ */ jsx(
+              StatCard,
+              {
+                size: "sm",
+                label: entry.label,
+                value: entry.value.toLocaleString("ko-KR")
+              },
+              entry.key
+            ))
+          }
+        ) : null,
+        mode === "server" && rowErrors.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-1)" }, children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "wp-body-sm",
+              style: { fontWeight: "var(--wp-weight-semibold)", color: "var(--wp-text-strong)" },
+              children: [
+                "\uC624\uB958 \uBAA9\uB85D (",
+                rowErrors.length,
+                "\uAC74)"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                maxHeight: 240,
+                overflowY: "auto",
+                border: "var(--wp-border-w) solid var(--wp-border-subtle)",
+                borderRadius: "var(--wp-radius-md)",
+                padding: "var(--wp-space-2)"
+              },
+              children: rowErrors.map((rowError, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "wp-body-sm",
+                  style: {
+                    display: "flex",
+                    gap: "var(--wp-space-2)",
+                    padding: "var(--wp-space-1) 0"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          color: "var(--wp-text-danger)",
+                          fontWeight: "var(--wp-weight-medium)",
+                          flexShrink: 0
+                        },
+                        children: [
+                          rowError.row_number ?? rowError.rowNumber,
+                          "\uD589"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { style: { color: "var(--wp-text-default)" }, children: rowError.message })
+                  ]
+                },
+                `${rowError.row_number ?? rowError.rowNumber}-${index}`
+              ))
+            }
+          )
+        ] }) : null,
+        mode === "preview" && rows !== null ? /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: "var(--wp-space-2)",
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ jsxs(Badge, { tone: "neutral", children: [
+                  "\uCD1D ",
+                  rows.length,
+                  "\uAC74"
+                ] }),
+                /* @__PURE__ */ jsxs(Badge, { tone: "success", dot: true, children: [
+                  "\uC815\uC0C1 ",
+                  validRows.length,
+                  "\uAC74"
+                ] }),
+                invalidCount > 0 ? /* @__PURE__ */ jsxs(Badge, { tone: "danger", dot: true, children: [
+                  "\uC624\uB958 ",
+                  invalidCount,
+                  "\uAC74"
+                ] }) : null,
+                invalidCount > 0 ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: "\uC624\uB958 \uC140\uC744 \uD45C\uC5D0\uC11C \uBC14\uB85C \uC218\uC815\uD558\uBA74 \uC7AC\uAC80\uC99D\uB429\uB2C8\uB2E4" }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                maxHeight: 360,
+                overflow: "auto",
+                border: "var(--wp-border-w) solid var(--wp-border-subtle)",
+                borderRadius: "var(--wp-radius-md)"
+              },
+              children: /* @__PURE__ */ jsx(
+                Table,
+                {
+                  columns: previewTableColumns,
+                  rows,
+                  dense: true,
+                  sticky: true,
+                  empty: /* @__PURE__ */ jsx(EmptyState, { icon: "table", title: "\uD45C\uC2DC\uD560 \uD589\uC774 \uC5C6\uC2B5\uB2C8\uB2E4", tight: true, children: "\uC5D1\uC140 \uD30C\uC77C\uC5D0 \uB370\uC774\uD130 \uD589\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                }
+              )
+            }
+          )
+        ] }) : null
+      ] })
+    }
+  );
+}
+var ExcelUploadCard = boxed(ExcelUploadCardImpl, "ExcelUploadCard");
+
+export { ExcelUploadCard };

package/dist/rich.js

@@ -1,5 +1,5 @@
-import { useOptionalModule, DependencyPlaceholder } from './chunk-WXOU7QTN.js';
-export { TimePicker } from './chunk-WXOU7QTN.js';
+import { useOptionalModule, DependencyPlaceholder } from './chunk-RRMKCZYQ.js';
+export { TimePicker } from './chunk-SNRKPEWT.js';
 import { HoistedStyle } from './chunk-EFMKWPZ3.js';
 export { DatePicker, DateRangePicker } from './chunk-EFMKWPZ3.js';
 import './chunk-XQPTSEJC.js';

package/dist/widgets/OptionSchemaEditor.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { S as SduiBoxProps } from '../layout-B1QrIBm6.js';
+
+/**
+ * OptionSchemaEditor — 장비가 자기 유닛에게 받을 **옵션 서식**을 정한다.
+ *
+ * 유닛의 사양(CPU·RAM·해상도…)은 장비 종류마다 달라서 컬럼으로 세울 수 없다.
+ * 그래서 값은 `asset_units.config`(JSON)에 담기는데, 지금까지는 그 JSON을 사람이
+ * 직접 쓰고 있었다 — 키 이름이 유닛마다 갈리고(`cpu`/`CPU`/`씨피유`) 숫자여야 할
+ * 자리에 문자열이 들어가도 아무도 못 막는다.
+ *
+ * 여기서 정하는 것은 **값이 아니라 서식**이다. 장비에 한 번 정해 두면
+ * (`assets.config.options`) 유닛 수정 화면이 그 서식대로 칸을 그린다
+ * ({@link ./OptionValueFields.tsx}). SDUI가 스펙을 화면으로 만드는 것과 같은 결이고,
+ * 서식이 스펙이 아니라 **데이터**라는 점만 다르다 — 장비마다 다르니 스펙일 수 없다.
+ *
+ * 계약: `value`는 장비의 **config 객체 통째**이고 서식은 그 안의 `options`다.
+ *   { options: [{ key, label?, type: 'text'|'number'|'select'|'boolean', options?, unit? }] }
+ *
+ * 배열만 주고받지 않는 이유는 SDUI의 `setState`가 **점 경로를 평면 키로 저장**하기
+ * 때문이다 — `assetEditForm.config.options`로 쓰면 그 이름의 납작한 키가 하나 생길 뿐
+ * `config` 안에 들어가지 않아 폼 본문에 실리지 않는다. 그래서 다른 폼 칸과 똑같이
+ * 키 하나(`assetEditForm.config`)를 주고받고, `options` 밖의 값은 그대로 보존한다.
+ * - `key`가 유닛 config의 실제 키다. 비었거나 겹치면 저장 못 하게 사유를 띄운다
+ *   (스펙은 이 위젯 밖이라 검증을 여기서 보여 준다).
+ * - `label`은 화면에 쓸 이름 — 비면 key를 그대로 쓴다.
+ */
+declare const OPTION_TYPES: readonly [{
+    readonly value: "text";
+    readonly label: "문자열";
+}, {
+    readonly value: "number";
+    readonly label: "숫자";
+}, {
+    readonly value: "select";
+    readonly label: "선택";
+}, {
+    readonly value: "boolean";
+    readonly label: "예/아니오";
+}];
+type OptionFieldType = (typeof OPTION_TYPES)[number]['value'];
+interface OptionField {
+    key: string;
+    label?: string;
+    type: OptionFieldType;
+    /** type=select일 때의 선택지 */
+    options?: string[];
+    /** 숫자 뒤에 붙는 단위 표시 — GB·인치처럼 값에 섞지 않을 것들 */
+    unit?: string;
+}
+/** 장비의 config — 서식은 options에 담고 나머지 키는 손대지 않는다 */
+interface AssetOptionConfig {
+    options?: OptionField[];
+    [key: string]: unknown;
+}
+interface OptionSchemaEditorProps {
+    value?: AssetOptionConfig | null;
+    onChange?: (config: AssetOptionConfig) => void;
+    disabled?: boolean;
+}
+declare const OptionSchemaEditor: React.FC<OptionSchemaEditorProps & SduiBoxProps>;
+
+export { type AssetOptionConfig, OPTION_TYPES, type OptionField, type OptionFieldType, OptionSchemaEditor, type OptionSchemaEditorProps };

package/dist/widgets/OptionSchemaEditor.js

@@ -0,0 +1,4 @@
+export { OPTION_TYPES, OptionSchemaEditor } from '../chunk-TIY4A223.js';
+import '../chunk-QO6UJAQN.js';
+import '../chunk-WIDDHR7L.js';
+import '../chunk-SAN4IX6N.js';