@wipco/sdui 1.8.2 → 1.8.3

package/dist/{chunk-IWLLM45X.js → chunk-CFFSCGDV.js}

@@ -6,6 +6,98 @@ import { useState, useRef, useEffect, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var THUMB_SIZE = 72;
+var FILE_TILE_WIDTH = 168;
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([
+  "jpg",
+  "jpeg",
+  "jpe",
+  "jfif",
+  "pjpeg",
+  "pjp",
+  "png",
+  "apng",
+  "gif",
+  "webp",
+  "avif",
+  "bmp",
+  "svg",
+  "ico",
+  "heic",
+  "heif",
+  "tif",
+  "tiff"
+]);
+var MIME_SHAPE = /^[a-z0-9][\w.+-]*\/[\w.+-]+/i;
+function urlOf(item) {
+  return typeof item.url === "string" ? item.url : "";
+}
+function itemMime(item) {
+  const record = item;
+  for (const key of ["mimeType", "mime_type", "type"]) {
+    const value = record[key];
+    if (typeof value === "string" && MIME_SHAPE.test(value.trim())) return value.trim().toLowerCase();
+  }
+  return null;
+}
+function extensionOfPath(path) {
+  const segment = path.slice(Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\")) + 1);
+  const dot = segment.lastIndexOf(".");
+  if (dot <= 0) return null;
+  const ext = segment.slice(dot + 1).toLowerCase();
+  return /^[a-z0-9]{1,10}$/.test(ext) ? ext : null;
+}
+function extensionOfUrl(url) {
+  if (/^(blob|data):/i.test(url.trim())) return null;
+  return extensionOfPath(url.split(/[?#]/, 1)[0]);
+}
+function dataUrlMime(url) {
+  const match = /^data:([^;,]+)/i.exec(url.trim());
+  return match && MIME_SHAPE.test(match[1]) ? match[1].toLowerCase() : null;
+}
+function itemLooksLikeImage(item, fileType) {
+  const mime = itemMime(item) ?? (fileType && MIME_SHAPE.test(fileType) ? fileType.toLowerCase() : null) ?? dataUrlMime(urlOf(item));
+  if (mime) return mime.startsWith("image/");
+  const ext = extensionOfUrl(urlOf(item)) ?? (item.name ? extensionOfPath(item.name) : null);
+  if (ext) return IMAGE_EXTENSIONS.has(ext);
+  return true;
+}
+function fileBadgeOf(item, fileType) {
+  const ext = (item.name ? extensionOfPath(item.name) : null) ?? extensionOfUrl(urlOf(item));
+  if (ext) return ext.toUpperCase();
+  const mime = itemMime(item) ?? (fileType && MIME_SHAPE.test(fileType) ? fileType.toLowerCase() : null);
+  const subtype = mime?.split("/")[1]?.split(/[;+]/)[0];
+  return subtype && /^[a-z0-9]{1,5}$/.test(subtype) ? subtype.toUpperCase() : null;
+}
+function displayNameOf(item) {
+  if (item.name && item.name.trim() !== "") return item.name;
+  const url = urlOf(item);
+  if (!/^(blob|data):/i.test(url.trim())) {
+    const path = url.split(/[?#]/, 1)[0];
+    const segment = path.slice(path.lastIndexOf("/") + 1);
+    if (segment !== "") {
+      try {
+        return decodeURIComponent(segment);
+      } catch {
+        return segment;
+      }
+    }
+  }
+  return "\uCCA8\uBD80 \uD30C\uC77C";
+}
+function safeFileHref(url) {
+  const value = url.replace(/[\u0000-\u0020]/g, "");
+  if (value === "") return null;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(value);
+  if (!scheme) return url;
+  return /^(https?|blob)$/i.test(scheme[1]) ? url : null;
+}
+function acceptIsImageOnly(accept) {
+  const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+  if (rules.length === 0) return false;
+  return rules.every(
+    (rule) => rule.startsWith(".") ? IMAGE_EXTENSIONS.has(rule.slice(1)) : rule.startsWith("image/")
+  );
+}
 function matchesAccept(file, accept) {
   const rules = accept.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
   if (rules.length === 0) return true;
@@ -65,6 +157,10 @@ function FileDropzoneImpl({
   const inputRef = useRef(null);
   const dragDepthRef = useRef(0);
   const createdUrlsRef = useRef(/* @__PURE__ */ new Set());
+  const fileTypesRef = useRef(/* @__PURE__ */ new Map());
+  const rememberFileType = (id, file) => {
+    if (file.type) fileTypesRef.current.set(id, file.type);
+  };
   useEffect(() => {
     const created = createdUrlsRef.current;
     return () => created.forEach((url) => URL.revokeObjectURL(url));
@@ -93,6 +189,7 @@ function FileDropzoneImpl({
             try {
               const item = await upload(file);
               if (item && typeof item.id === "string" && typeof item.url === "string") {
+                rememberFileType(item.id, file);
                 commit([...itemsRef.current, { name: file.name, ...item }]);
               } else {
                 failures.push(`${file.name} (\uC5C5\uB85C\uB354\uAC00 \uD56D\uBAA9\uC744 \uC8FC\uC9C0 \uC54A\uC558\uC2B5\uB2C8\uB2E4)`);
@@ -116,10 +213,11 @@ function FileDropzoneImpl({
               } else {
                 const json = await res.json().catch(() => null);
                 const body = unwrapUploaded(json);
-                const id = body?.id;
+                const id2 = body?.id;
                 const url2 = body?.url;
-                if ((typeof id === "string" || typeof id === "number") && typeof url2 === "string") {
-                  commit([...itemsRef.current, { id: String(id), url: url2, name: file.name }]);
+                if ((typeof id2 === "string" || typeof id2 === "number") && typeof url2 === "string") {
+                  rememberFileType(String(id2), file);
+                  commit([...itemsRef.current, { id: String(id2), url: url2, name: file.name }]);
                 } else {
                   failures.push(`${file.name} (\uC751\uB2F5 \uD615\uC2DD \uC624\uB958)`);
                 }
@@ -132,7 +230,9 @@ function FileDropzoneImpl({
           }
           const url = URL.createObjectURL(file);
           createdUrlsRef.current.add(url);
-          commit([...itemsRef.current, { id: localId(), url, name: file.name }]);
+          const id = localId();
+          rememberFileType(id, file);
+          commit([...itemsRef.current, { id, url, name: file.name }]);
         }
       } finally {
         setProgress(null);
@@ -177,6 +277,7 @@ function FileDropzoneImpl({
     (item) => {
       const forget = () => {
         commit(itemsRef.current.filter((current) => current.id !== item.id));
+        fileTypesRef.current.delete(item.id);
         if (createdUrlsRef.current.has(item.url)) {
           URL.revokeObjectURL(item.url);
           createdUrlsRef.current.delete(item.url);
@@ -208,6 +309,7 @@ function FileDropzoneImpl({
   };
   const showLocalCaption = localMode || items.some((item) => item.id.startsWith("local-"));
   const dropTinted = canAdd && (dragOver || hovering);
+  const imageOnly = acceptIsImageOnly(accept);
   return /* @__PURE__ */ jsxs("div", { className: "wp-col", style: { gap: "var(--wp-space-2)" }, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -231,7 +333,7 @@ function FileDropzoneImpl({
         role: "button",
         tabIndex: canAdd ? 0 : -1,
         "aria-disabled": !canAdd,
-        "aria-label": "\uC774\uBBF8\uC9C0 \uCCA8\uBD80",
+        "aria-label": imageOnly ? "\uC774\uBBF8\uC9C0 \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80",
         onClick: openPicker,
         onKeyDown: (event) => {
           if (canAdd && (event.key === "Enter" || event.key === " ")) {
@@ -284,7 +386,7 @@ function FileDropzoneImpl({
               style: { color: dropTinted ? "var(--wp-text-brand)" : "var(--wp-text-muted)" }
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { color: "var(--wp-text-default)" }, children: atCapacity ? `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD588\uC2B5\uB2C8\uB2E4` : "\uD074\uB9AD\uD558\uAC70\uB098 \uC774\uBBF8\uC9C0\uB97C \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694" }),
+          /* @__PURE__ */ jsx("span", { className: "wp-body-sm", style: { color: "var(--wp-text-default)" }, children: atCapacity ? `\uCD5C\uB300 ${maxCount}\uAC1C\uAE4C\uC9C0 \uCCA8\uBD80\uD588\uC2B5\uB2C8\uB2E4` : `\uD074\uB9AD\uD558\uAC70\uB098 ${imageOnly ? "\uC774\uBBF8\uC9C0\uB97C" : "\uD30C\uC77C\uC744"} \uB04C\uC5B4\uB2E4 \uB193\uC73C\uC138\uC694` }),
           hint ? /* @__PURE__ */ jsx("span", { className: "wp-caption", children: hint }) : null
         ] })
       }
@@ -318,47 +420,128 @@ function FileDropzoneImpl({
       }
     ) : null,
     items.length > 0 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--wp-space-2)" }, children: items.map((item) => {
-      const thumbSrc = resolveAsset(item.url, {
+      const fileType = fileTypesRef.current.get(item.id);
+      const asImage = itemLooksLikeImage(item, fileType);
+      const resolved = resolveAsset(item.url, {
         component: "FileDropzone",
-        prop: "src",
+        prop: asImage ? "src" : "href",
         kind: "attribute"
       });
+      const hovered = hoverItemId === item.id;
+      let preview;
+      if (asImage) {
+        preview = resolved === null ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-label": item.name ?? "\uCCA8\uBD80 \uBBF8\uB9AC\uBCF4\uAE30 \uC5C6\uC74C",
+            role: "img",
+            style: {
+              display: "block",
+              width: THUMB_SIZE,
+              height: THUMB_SIZE,
+              borderRadius: "var(--wp-radius-md)",
+              border: "var(--wp-border-w) solid var(--wp-border-subtle)",
+              background: "var(--wp-surface-sunken)"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          ImageLightbox,
+          {
+            src: resolved,
+            alt: item.name,
+            thumbStyle: {
+              width: THUMB_SIZE,
+              height: THUMB_SIZE,
+              objectFit: "cover",
+              display: "block",
+              borderRadius: "var(--wp-radius-md)",
+              border: "var(--wp-border-w) solid var(--wp-border-subtle)"
+            }
+          }
+        );
+      } else {
+        const href = sandbox || resolved === null ? null : safeFileHref(resolved);
+        const displayName = displayNameOf(item);
+        const badge = fileBadgeOf(item, fileType);
+        const tileStyle = {
+          display: "flex",
+          alignItems: "center",
+          gap: "var(--wp-space-2)",
+          boxSizing: "border-box",
+          width: FILE_TILE_WIDTH,
+          height: THUMB_SIZE,
+          padding: "0 var(--wp-space-2)",
+          borderRadius: "var(--wp-radius-md)",
+          border: `var(--wp-border-w) solid ${hovered && href ? "var(--wp-border-strong)" : "var(--wp-border-subtle)"}`,
+          background: "var(--wp-surface-sunken)",
+          color: "var(--wp-text-default)",
+          textDecoration: "none",
+          transition: "var(--wp-transition-surface)"
+        };
+        const tileBody = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: 2,
+                flex: "none",
+                minWidth: 28,
+                color: "var(--wp-text-muted)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "file-text", size: 24 }),
+                badge ? /* @__PURE__ */ jsx("span", { className: "wp-overline", style: { lineHeight: 1 }, children: badge }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "wp-caption",
+              style: {
+                flex: 1,
+                minWidth: 0,
+                color: "var(--wp-text-default)",
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden",
+                wordBreak: "break-all"
+              },
+              children: displayName
+            }
+          )
+        ] });
+        preview = href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href,
+            target: "_blank",
+            rel: "noopener",
+            title: displayName,
+            "aria-label": `${displayName}${badge ? ` (${badge})` : ""} \u2014 \uC0C8 \uD0ED\uC5D0\uC11C \uC5F4\uAE30`,
+            "data-file-tile": "",
+            style: tileStyle,
+            onClick: (event) => event.stopPropagation(),
+            children: tileBody
+          }
+        ) : /* @__PURE__ */ jsx("span", { title: displayName, "data-file-tile": "", style: tileStyle, children: tileBody });
+      }
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          style: { position: "relative", width: THUMB_SIZE, height: THUMB_SIZE },
+          style: {
+            position: "relative",
+            width: asImage ? THUMB_SIZE : FILE_TILE_WIDTH,
+            height: THUMB_SIZE
+          },
           onMouseEnter: () => setHoverItemId(item.id),
           onMouseLeave: () => setHoverItemId((current) => current === item.id ? null : current),
           children: [
-            thumbSrc === null ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                "aria-label": item.name ?? "\uCCA8\uBD80 \uBBF8\uB9AC\uBCF4\uAE30 \uC5C6\uC74C",
-                role: "img",
-                style: {
-                  display: "block",
-                  width: THUMB_SIZE,
-                  height: THUMB_SIZE,
-                  borderRadius: "var(--wp-radius-md)",
-                  border: "var(--wp-border-w) solid var(--wp-border-subtle)",
-                  background: "var(--wp-surface-sunken)"
-                }
-              }
-            ) : /* @__PURE__ */ jsx(
-              ImageLightbox,
-              {
-                src: thumbSrc,
-                alt: item.name,
-                thumbStyle: {
-                  width: THUMB_SIZE,
-                  height: THUMB_SIZE,
-                  objectFit: "cover",
-                  display: "block",
-                  borderRadius: "var(--wp-radius-md)",
-                  border: "var(--wp-border-w) solid var(--wp-border-subtle)"
-                }
-              }
-            ),
+            preview,
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -369,7 +552,7 @@ function FileDropzoneImpl({
                   background: "var(--wp-surface-card)",
                   borderRadius: "var(--wp-radius-sm)",
                   boxShadow: "var(--wp-shadow-sm)",
-                  opacity: hoverItemId === item.id ? 1 : 0,
+                  opacity: hovered ? 1 : 0,
                   transition: "opacity var(--wp-duration-fast) var(--wp-ease-out)"
                 },
                 children: /* @__PURE__ */ jsx(

package/dist/meta.js

@@ -4376,7 +4376,7 @@ var FileDropzoneMeta = {
   label: "\uD30C\uC77C \uCCA8\uBD80",
   category: "input",
   icon: "paperclip",
-  description: "\uB4DC\uB798\uADF8 \uC564 \uB4DC\uB86D \uB2E4\uC911 \uCCA8\uBD80. \uC5C5\uB85C\uB4DC \uACBD\uB85C\uAC00 \uC5C6\uAC70\uB098 \uBC31\uC5D4\uB4DC\uAC00 503\uC774\uBA74 object URL \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30\uB85C \uB5A8\uC5B4\uC9C4\uB2E4.",
+  description: "\uB4DC\uB798\uADF8 \uC564 \uB4DC\uB86D \uB2E4\uC911 \uCCA8\uBD80. \uC774\uBBF8\uC9C0\uB294 \uC378\uB124\uC77C, PDF \uB4F1 \uADF8 \uBC16\uC758 \uD30C\uC77C\uC740 \uC0C8 \uD0ED\uC73C\uB85C \uC5EC\uB294 \uD30C\uC77C \uD0C0\uC77C\uB85C \uBCF4\uC778\uB2E4. \uC5C5\uB85C\uB4DC \uACBD\uB85C\uAC00 \uC5C6\uAC70\uB098 \uBC31\uC5D4\uB4DC\uAC00 503\uC774\uBA74 object URL \uB85C\uCEEC \uBBF8\uB9AC\uBCF4\uAE30\uB85C \uB5A8\uC5B4\uC9C4\uB2E4.",
   props: [
     {
       name: "value",
@@ -4389,7 +4389,13 @@ var FileDropzoneMeta = {
       item: [
         { name: "id", kind: "string", label: "\uC2DD\uBCC4\uC790", required: true },
         { name: "url", kind: "string", label: "URL", required: true },
-        { name: "name", kind: "string", label: "\uD30C\uC77C\uBA85" }
+        { name: "name", kind: "string", label: "\uD30C\uC77C\uBA85" },
+        {
+          name: "mimeType",
+          kind: "string",
+          label: "MIME \uD615\uC2DD",
+          description: "image/\u2026 \uC774\uBA74 \uC378\uB124\uC77C, \uC544\uB2C8\uBA74 \uD30C\uC77C \uD0C0\uC77C(\uBB38\uC11C \uC544\uC774\uCF58\xB7\uD655\uC7A5\uC790\xB7\uD30C\uC77C\uBA85, \uB204\uB974\uBA74 \uC0C8 \uD0ED). mime_type\xB7type \uB3C4 \uC77D\uACE0, \uC5C6\uC73C\uBA74 URL\xB7\uD30C\uC77C\uBA85 \uD655\uC7A5\uC790\uB85C \uD310\uC815\uD55C\uB2E4."
+        }
       ]
     },
     {

package/dist/widgets/FileDropzone.d.ts

@@ -5,6 +5,14 @@ type FileDropzoneItem = {
     id: string;
     url: string;
     name?: string;
+    /**
+     * MIME 형식(예: `application/pdf`) — 있으면 이미지/파일 타일 판정의 1순위다.
+     * 서버 행을 그대로 채우는 앱은 snake_case(`mime_type`)로 주고, File 같은 객체는
+     * `type`으로 준다 — 셋 다 읽는다(`type`은 `x/y` 모양일 때만 MIME 으로 본다).
+     */
+    mimeType?: string;
+    mime_type?: string;
+    type?: string;
 };
 interface FileDropzoneProps {
     /** 백엔드 업로드 경로 (예: "/attachments"). 없으면 로컬 미리보기 모드 */

package/dist/widgets/FileDropzone.js

@@ -1,4 +1,4 @@
-export { FileDropzone, unwrapUploaded } from '../chunk-IWLLM45X.js';
+export { FileDropzone, unwrapUploaded } from '../chunk-CFFSCGDV.js';
 import '../chunk-JDTVNS3H.js';
 import '../chunk-PN5IJPA5.js';
 import '../chunk-R2ORCOTG.js';

package/dist/widgets/index.js

@@ -59,7 +59,7 @@ import { Disclosure } from '../chunk-LONXOEZY.js';
 export { Disclosure } from '../chunk-LONXOEZY.js';
 import { EventCalendar } from '../chunk-KVQXQLAP.js';
 export { EventCalendar, statusToneOf } from '../chunk-KVQXQLAP.js';
-export { FileDropzone, unwrapUploaded } from '../chunk-IWLLM45X.js';
+export { FileDropzone, unwrapUploaded } from '../chunk-CFFSCGDV.js';
 import { ImageLightbox } from '../chunk-JDTVNS3H.js';
 export { ImageLightbox } from '../chunk-JDTVNS3H.js';
 import { InlineEdit } from '../chunk-FXEKHHEA.js';

package/package.json

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