@loword/loword-design-system 0.6.0 → 0.7.1

package/dist/components/LDEditor/LDEditor.d.ts

@@ -16,7 +16,14 @@ export interface LDEditorProps {
     allowedImageHosts?: string[];
     /** 툴바 업로드·이미지 붙여넣기에서 허용할 MIME 타입. 지정하지 않으면 기본 허용 형식을 쓴다. */
     allowedExtensions?: TMimeType[];
+    /** 툴바 업로드·이미지 붙여넣기에서 허용할 최대 파일 크기(byte). 기본 5MB. */
+    maxSize?: number;
+    /** 툴바 업로드·이미지 붙여넣기에서 허용할 최대 해상도(px). 기본 16000x16000. */
+    maxImageSize?: {
+        width: number;
+        height: number;
+    };
 }
-declare const LDEditor: ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, }: LDEditorProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDEditor: ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }: LDEditorProps) => import("react/jsx-runtime").JSX.Element;
 export default LDEditor;
 //# sourceMappingURL=LDEditor.d.ts.map

package/dist/components/LDEditor/LDEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAqH1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;CACjC;AAqVD,QAAA,MAAM,QAAQ,GAAI,4FAOf,aAAa,4CAgCf,CAAC;AAwmBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAEL,KAAK,SAAS,EAGf,MAAM,kBAAkB,CAAC;AAqH1B,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;IAChC,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAClD;AA+UD,QAAA,MAAM,QAAQ,GAAI,mHASf,aAAa,4CAsCf,CAAC;AAimBF,eAAe,QAAQ,CAAC"}

package/dist/components/LDEditor/LDEditor.js

@@ -80,17 +80,17 @@ const LDDivider = () => _jsx("div", { className: "mx-1 h-6 w-px bg-neutral200" }
 // 두어 줄이 바뀌어도 새 줄이 구분선으로 시작하지 않게 한다.
 const ToolbarGroup = ({ children }) => (_jsx("div", { className: "flex items-center gap-2", children: children }));
 // 검증을 통과하면 업로드한 URL을 반환하고, 실패하면 토스트에 띄울 사유를 담아 throw한다.
-const uploadImageFile = async (file, handleImageUpload, allowedExtensions = TOOLBAR_ALLOWED_EXTENSIONS) => {
+const uploadImageFile = async (file, { handleImageUpload, allowedExtensions = TOOLBAR_ALLOWED_EXTENSIONS, maxSize = TOOLBAR_MAX_SIZE, maxImageSize, }) => {
     if (!validAllowedExtensions(file, allowedExtensions)) {
         const allowedFiles = allowedExtensions
             .map((item) => FILE_EXTENSIONS[item].toUpperCase())
             .join(', ');
         throw new Error(`지원하지 않는 파일 형식입니다. ${allowedFiles} 파일만 업로드 가능합니다.`);
     }
-    if (!validFileSize(file, TOOLBAR_MAX_SIZE)) {
-        throw new Error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(TOOLBAR_MAX_SIZE)} 이하 파일을 선택해주세요.`);
+    if (!validFileSize(file, maxSize)) {
+        throw new Error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(maxSize)} 이하 파일을 선택해주세요.`);
     }
-    if (isImage(file.name) && !(await validImageSize(file))) {
+    if (isImage(file.name) && !(await validImageSize(file, maxImageSize))) {
         throw new Error('이미지 해상도가 너무 큽니다. 더 작은 이미지를 선택해주세요.');
     }
     let src;
@@ -259,7 +259,8 @@ const ImagePaste = Extension.create({
                 props: {
                     decorations: (state) => placeholderKey.getState(state),
                     handlePaste: (view, event, slice) => {
-                        const { handleImageUpload, allowedImageHosts, allowedExtensions } = getConfig();
+                        const config = getConfig();
+                        const { handleImageUpload, allowedImageHosts } = config;
                         if (!handleImageUpload)
                             return false;
                         const html = event.clipboardData?.getData('text/html') ?? '';
@@ -286,10 +287,10 @@ const ImagePaste = Extension.create({
                                 ? files[0]
                                 : undefined;
                             pasteAfterUpload(view, uploadAll(list.map((src) => isDataUrl(src)
-                                ? dataUrlToFile(src).then((file) => uploadImageFile(file, handleImageUpload, allowedExtensions))
+                                ? dataUrlToFile(src).then((file) => uploadImageFile(file, config))
                                 : (copiedImage
                                     ? Promise.resolve(copiedImage)
-                                    : urlToFile(src)).then((file) => uploadImageFile(file, handleImageUpload, allowedExtensions)))).then((srcs) => {
+                                    : urlToFile(src)).then((file) => uploadImageFile(file, config)))).then((srcs) => {
                                 const urls = new Map(list.map((src, index) => [src, srcs[index] ?? null]));
                                 return new Slice(replaceImages(slice.content, urls), slice.openStart, slice.openEnd);
                             }));
@@ -298,7 +299,7 @@ const ImagePaste = Extension.create({
                         // Office는 HTML과 함께 선택 영역을 찍은 PNG를 files에 넣는다. HTML이 있으면 파일은 무시한다.
                         if (html || !files.length)
                             return false;
-                        pasteAfterUpload(view, uploadAll(files.map((file) => uploadImageFile(file, handleImageUpload, allowedExtensions))).then((srcs) => {
+                        pasteAfterUpload(view, uploadAll(files.map((file) => uploadImageFile(file, config))).then((srcs) => {
                             const nodes = files.flatMap((file, index) => {
                                 const src = srcs[index];
                                 return src
@@ -320,26 +321,30 @@ const ImagePaste = Extension.create({
         ];
     },
 });
-const LDEditor = ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, }) => {
+const LDEditor = ({ content, onChange, className, handleImageUpload, allowedImageHosts, allowedExtensions, maxSize, maxImageSize, }) => {
     // 에디터는 첫 렌더의 extensions로 한 번만 만들어진다. 붙여넣기는 최신 props를 ref로 읽는다.
     const pasteConfigRef = useRef({
         handleImageUpload,
         allowedImageHosts,
         allowedExtensions,
+        maxSize,
+        maxImageSize,
     });
     useEffect(() => {
         pasteConfigRef.current = {
             handleImageUpload,
             allowedImageHosts,
             allowedExtensions,
+            maxSize,
+            maxImageSize,
         };
     });
     return (_jsxs(EditorBase.Root, { extensions: [
             ...createEditorExtensions(),
             ImagePaste.configure({ getConfig: () => pasteConfigRef.current }),
-        ], content: content, onChange: onChange, className: className, children: [_jsx(EditorToolbar, { handleImageUpload: handleImageUpload, allowedExtensions: allowedExtensions }), _jsx(EditorBase.Content, {})] }));
+        ], content: content, onChange: onChange, className: className, children: [_jsx(EditorToolbar, { handleImageUpload: handleImageUpload, allowedExtensions: allowedExtensions, maxSize: maxSize, maxImageSize: maxImageSize }), _jsx(EditorBase.Content, {})] }));
 };
-const EditorToolbar = ({ handleImageUpload, allowedExtensions, }) => {
+const EditorToolbar = (uploadConfig) => {
     const [linkUrl, setLinkUrl] = useState('');
     const [isMobile, setIsMobile] = useState(false);
     const { editor } = useEditorContext();
@@ -388,7 +393,7 @@ const EditorToolbar = ({ handleImageUpload, allowedExtensions, }) => {
             return;
         const file = files[0];
         try {
-            const src = await uploadImageFile(file, handleImageUpload, allowedExtensions);
+            const src = await uploadImageFile(file, uploadConfig);
             editor.commands.setImage({
                 src,
                 alt: file.name,

package/dist/components/LDFileUpload/LDFileUpload.d.ts

@@ -32,6 +32,11 @@ export interface LDFileUploadAttachmentListProps {
     labelPlaceholder?: string;
     /** 파일 카드에 업로드 시각 라벨을 표시합니다. */
     isExistUploadedAt?: boolean;
+    /**
+     * 손잡이를 끌어 순서를 바꿀 수 있게 합니다. 서버가 첨부 순서를 저장하는 화면에서만 켭니다.
+     * @default false
+     */
+    sortable?: boolean;
     className?: string;
 }
 export type LDFileUploadDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
@@ -46,7 +51,7 @@ declare const LDFileUpload: {
     Root: ({ className, classNames, children, ...props }: LDFileUploadRootProps) => import("react/jsx-runtime").JSX.Element;
     Input: ({ type, label, icon, options, className, ...props }: LDFileUploadInputProps) => import("react/jsx-runtime").JSX.Element | null;
     CardList: ({ type, isExistUploadedAt, className, }: LDFileUploadCardListProps) => import("react/jsx-runtime").JSX.Element;
-    AttachmentList: ({ placeholder, labelPlaceholder, isExistUploadedAt, className, }: LDFileUploadAttachmentListProps) => import("react/jsx-runtime").JSX.Element;
+    AttachmentList: ({ placeholder, labelPlaceholder, isExistUploadedAt, sortable, className, }: LDFileUploadAttachmentListProps) => import("react/jsx-runtime").JSX.Element;
     Description: ({ className, ...props }: LDFileUploadDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default LDFileUpload;

package/dist/components/LDFileUpload/LDFileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDFileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUpload.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAuB,EAErB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EAEvB,MAAM,0CAA0C,CAAC;AAuFlD,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB;IACpE,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAuBD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,aAAa,CAAC,QAAQ,CAAC,EACvB,MAAM,CACP;IACC,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AA6FD,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyUD,MAAM,WAAW,+BAA+B;IAC9C,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyFD,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AA6BhF,MAAM,WAAW,iBACf,SACE,IAAI,CACF,qBAAqB,EACrB,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,MAAM,uBAAuB,CAC3E,EACD,uBAAuB;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,kCAAkC;AAClC,QAAA,MAAM,YAAY;qFAMf,iBAAiB;0DArlBjB,qBAAqB;iEAmCrB,sBAAsB;wDA+FtB,yBAAyB;uFAqVzB,+BAA+B;2CAiFY,4BAA4B;CA2DzE,CAAC;AAQF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDFileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUpload.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAEf,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAuB,EAErB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EAEvB,MAAM,0CAA0C,CAAC;AAuFlD,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB;IACpE,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAuBD,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAClD,aAAa,CAAC,QAAQ,CAAC,EACvB,MAAM,CACP;IACC,IAAI,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mDAAmD;IACnD,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AA6FD,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,wDAAwD;IACxD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA8UD,MAAM,WAAW,+BAA+B;IAC9C,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoGD,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AA6BhF,MAAM,WAAW,iBACf,SACE,IAAI,CACF,qBAAqB,EACrB,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,MAAM,uBAAuB,CAC3E,EACD,uBAAuB;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,kCAAkC;AAClC,QAAA,MAAM,YAAY;qFAMf,iBAAiB;0DA1mBjB,qBAAqB;iEAmCrB,sBAAsB;wDA+FtB,yBAAyB;iGAgWzB,+BAA+B;2CA2FY,4BAA4B;CA2DzE,CAAC;AAQF,eAAe,YAAY,CAAC"}

package/dist/components/LDFileUpload/LDFileUpload.js

@@ -201,23 +201,23 @@ const LinkRow = ({ link, index, linkNumber, placeholder, labelPlaceholder, handl
  * 드래그로 순서를 바꾸는 항목 래퍼.
  * 파일 카드는 누르면 교체 창이 열리고 링크 행에는 입력칸이 있어, 카드 전체가 아니라 손잡이로만 끈다.
  */
-const SortableAttachment = ({ id, name, children, }) => {
+const SortableAttachment = ({ id, name, sortable, children, }) => {
     const { locked } = useFileUploadContext();
-    const { setNodeRef, setActivatorNodeRef, attributes, listeners, transform, transition, isDragging, isSorting, } = useSortable({ id, disabled: locked });
+    const { setNodeRef, setActivatorNodeRef, attributes, listeners, transform, transition, isDragging, isSorting, } = useSortable({ id, disabled: locked || !sortable });
     return (_jsx("div", { ref: setNodeRef, className: cn(isDragging && 'relative z-10 opacity-80'), style: {
             transform: CSS.Transform.toString(transform),
             // 인덱스를 id로 쓰므로 놓는 순간 같은 노드에 다른 항목이 들어간다. 그때 transition이 돌면
             // 이전 자리에서 미끄러져 오는 것처럼 보이므로, 끄는 동안(isSorting)에만 애니메이션한다.
             transition: isSorting && !isDragging ? transition : undefined,
-        }, children: children(_jsx("button", { type: "button", ref: setActivatorNodeRef, ...attributes, ...listeners, "aria-label": `${name} 순서 변경`, disabled: locked, 
+        }, children: children(sortable && (_jsx("button", { type: "button", ref: setActivatorNodeRef, ...attributes, ...listeners, "aria-label": `${name} 순서 변경`, disabled: locked, 
             // 손잡이 클릭이 카드로 올라가면 파일이 열린다
-            onClick: (event) => event.stopPropagation(), className: "shrink-0 cursor-grab touch-none text-lb300 active:cursor-grabbing disabled:cursor-not-allowed", children: _jsx(GripVertical, { className: "size-5" }) })) }));
+            onClick: (event) => event.stopPropagation(), className: "shrink-0 cursor-grab touch-none text-lb300 active:cursor-grabbing disabled:cursor-not-allowed", children: _jsx(GripVertical, { className: "size-5" }) }))) }));
 };
 /**
- * 파일과 링크가 섞인 첨부 목록입니다. 손잡이를 끌어 순서를 바꿉니다.
+ * 파일과 링크가 섞인 첨부 목록입니다. `sortable`을 켜면 손잡이를 끌어 순서를 바꿉니다.
  * Root에 `attachmentList`·`setAttachmentList`를 넘겨야 합니다.
  */
-const AttachmentList = ({ placeholder = '링크를 입력해주세요', labelPlaceholder = '링크 이름', isExistUploadedAt = true, className, }) => {
+const AttachmentList = ({ placeholder = '링크를 입력해주세요', labelPlaceholder = '링크 이름', isExistUploadedAt = true, sortable = false, className, }) => {
     const { attachmentList, moveAttachment } = useFileUploadContext();
     const classNames = useContext(StyleContext);
     // SSR에서 dnd-kit 접근성 id가 서버·클라이언트로 어긋나지 않게 고정한다.
@@ -235,12 +235,12 @@ const AttachmentList = ({ placeholder = '링크를 입력해주세요', labelPla
     return (_jsx(DndContext, { id: dndId, sensors: sensors, collisionDetection: closestCenter, modifiers: [restrictToVerticalAxis], onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: _jsx("div", { className: cn('flex w-full flex-col gap-sm', className, classNames.cardList), children: attachmentList.map((item, index) => {
                     const id = String(index);
                     if (item.type === 'file') {
-                        return (_jsx(SortableAttachment, { id: id, name: item.file.fileName, children: (handle) => (_jsx(FileCard, { file: item.file, index: index, isExistUploadedAt: isExistUploadedAt, handle: handle })) }, id));
+                        return (_jsx(SortableAttachment, { id: id, name: item.file.fileName, sortable: sortable, children: (handle) => (_jsx(FileCard, { file: item.file, index: index, isExistUploadedAt: isExistUploadedAt, handle: handle })) }, id));
                     }
                     const linkNumber = attachmentList
                         .slice(0, index + 1)
                         .filter((other) => other.type === 'link').length;
-                    return (_jsx(SortableAttachment, { id: id, name: `링크 ${linkNumber}`, children: (handle) => (_jsx(LinkRow, { link: item, index: index, linkNumber: linkNumber, placeholder: placeholder, labelPlaceholder: labelPlaceholder, handle: handle })) }, id));
+                    return (_jsx(SortableAttachment, { id: id, name: `링크 ${linkNumber}`, sortable: sortable, children: (handle) => (_jsx(LinkRow, { link: item, index: index, linkNumber: linkNumber, placeholder: placeholder, labelPlaceholder: labelPlaceholder, handle: handle })) }, id));
                 }) }) }) }));
 };
 /** 업로드 제한 조건을 안내합니다. */

package/dist/utils/file.d.ts

@@ -11,7 +11,10 @@ export declare const isImage: (src: string) => boolean;
 export declare const isImageOrPdf: (src: string) => boolean;
 export declare const getFileIcon: (fileName: string) => ReactElement;
 export declare const getFileExtensionFromMimeType: (mimeType: TMimeType) => TFileExtension | string;
-export declare const validImageSize: (file: File) => Promise<boolean>;
+export declare const validImageSize: (file: File, maxImageSize?: {
+    width: number;
+    height: number;
+}) => Promise<boolean>;
 export declare const validFileSize: (file: File, maxSize: number) => boolean;
 export declare const validAllowedExtensions: (file: File, allowedExtensions: TMimeType[]) => boolean;
 export declare const getFileSizeUnit: (number: number) => string | number;

package/dist/utils/file.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/utils/file.ts"],"names":[],"mappings":"AASA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,YACW,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,YACU,CAAC;AAgCnD,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,YAM9C,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,UAAU,SAAS,KAClB,cAAc,GAAG,MAEnB,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,OAAO,CAoB1D,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI,EAAE,SAAS,MAAM,YAExD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,MAAM,IAAI,EACV,mBAAmB,SAAS,EAAE,YAS/B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,oBAS7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAM5D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAU,MAAM,IAAI,KAAG,OAAO,CAAC,KAAK,CAa5D,CAAC"}
+{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../src/utils/file.ts"],"names":[],"mappings":"AASA,OAAO,EAAiB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,OAAO,GAAI,KAAK,MAAM,YACW,CAAC;AAE/C,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,YACU,CAAC;AAgCnD,eAAO,MAAM,WAAW,GAAI,UAAU,MAAM,KAAG,YAM9C,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,UAAU,SAAS,KAClB,cAAc,GAAG,MAEnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,MAAM,IAAI,EACV,eAAc;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAmB,KAC/D,OAAO,CAAC,OAAO,CAoBjB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,IAAI,EAAE,SAAS,MAAM,YAExD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GACjC,MAAM,IAAI,EACV,mBAAmB,SAAS,EAAE,YAS/B,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,MAAM,oBAS7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,IAAI,KAAG,OAAO,CAAC,MAAM,CAM5D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAU,MAAM,IAAI,KAAG,OAAO,CAAC,KAAK,CAa5D,CAAC"}

package/dist/utils/file.js

@@ -42,13 +42,13 @@ export const getFileIcon = (fileName) => {
 export const getFileExtensionFromMimeType = (mimeType) => {
     return FILE_EXTENSIONS[mimeType] || mimeType.split('/')[1] || 'unknown';
 };
-export const validImageSize = (file) => {
+export const validImageSize = (file, maxImageSize = MAX_IMAGE_SIZE) => {
     return new Promise((resolve) => {
         const image = new Image();
         const url = URL.createObjectURL(file);
         image.onload = () => {
-            const isValid = image.naturalWidth <= MAX_IMAGE_SIZE.width &&
-                image.naturalHeight <= MAX_IMAGE_SIZE.height;
+            const isValid = image.naturalWidth <= maxImageSize.width &&
+                image.naturalHeight <= maxImageSize.height;
             URL.revokeObjectURL(url);
             resolve(isValid);
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",