@loword/loword-design-system 0.7.0 → 0.7.2

package/dist/components/LDDateRangePicker/LDDateRangePicker.d.ts

@@ -56,7 +56,9 @@ export interface LDDateRangePickerProps {
     triggerClassName?: string;
     /** 달력·시간 컬럼의 선택 강조 색 */
     colorSet?: CalendarColorSet;
+    /** false면 daily 모드에서 시간 선택을 숨기고 날짜만 표시한다. 값의 시각은 바꾸지 않는다(LDDatePicker와 동일) */
+    isExistTime?: boolean;
 }
-declare const LDDateRangePicker: ({ variant, value, onChange, disabled, block, color, placeholder, dateFormat, timeFormat, isDisableAfterNow, isAutoClose, viewMode, initialValue, trailingIcon, onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, }: LDDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDDateRangePicker: ({ variant, value, onChange, disabled, block, color, placeholder, dateFormat, timeFormat, isDisableAfterNow, isAutoClose, viewMode, initialValue, trailingIcon, onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, isExistTime, }: LDDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default LDDateRangePicker;
 //# sourceMappingURL=LDDateRangePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"LDDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDateRangePicker/LDDateRangePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAmB,EACjB,KAAK,gBAAgB,EACtB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAC3C,KAAK,YAAY,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAChE,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,sBAAsB,GAAG,MAAM,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;AACpE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CACvC,KAAK,EACL,SAAS,GAAG,OAAO,GAAG,QAAQ,CAC/B,CAAC;AAcF,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,0BAA0B;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAwBD,QAAA,MAAM,iBAAiB,GAAI,kPAqBxB,sBAAsB,4CA+VxB,CAAC;AAiMF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"LDDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/LDDateRangePicker/LDDateRangePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,OAAmB,EACjB,KAAK,gBAAgB,EACtB,MAAM,oCAAoC,CAAC;AAG5C,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAC3C,KAAK,YAAY,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC;AAChE,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,KAAK,sBAAsB,GAAG,MAAM,CAAC,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC,CAAC;AACpE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CACvC,KAAK,EACL,SAAS,GAAG,OAAO,GAAG,QAAQ,CAC/B,CAAC;AAcF,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,oBAAoB;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,EAAE,EAAE,IAAI,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5D,0BAA0B;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwBD,QAAA,MAAM,iBAAiB,GAAI,+PAsBxB,sBAAsB,4CAqWxB,CAAC;AAiMF,eAAe,iBAAiB,CAAC"}

package/dist/components/LDDateRangePicker/LDDateRangePicker.js

@@ -31,8 +31,10 @@ const variantColorClasses = {
         danger: 'bg-transparent text-neutral900 border-none outline-2 outline-danger600 outline-solid -outline-offset-2',
     },
 };
-const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = false, block = false, color = 'neutral', placeholder, dateFormat, timeFormat = 'HH:mm:ss', isDisableAfterNow = false, isAutoClose = false, viewMode = 'daily', initialValue, trailingIcon = _jsx(Calendar, { size: 15, className: "text-mono400" }), onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, }) => {
+const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = false, block = false, color = 'neutral', placeholder, dateFormat, timeFormat = 'HH:mm:ss', isDisableAfterNow = false, isAutoClose = false, viewMode = 'daily', initialValue, trailingIcon = _jsx(Calendar, { size: 15, className: "text-mono400" }), onRangeComplete, onResetComplete, className, style, triggerClassName, colorSet, isExistTime = true, }) => {
     const fmt = dateFormat ?? dateFormats[viewMode];
+    // 시간을 그리고 표시하는 건 daily 모드에서 isExistTime일 때뿐이다
+    const showTime = viewMode === 'daily' && isExistTime;
     const [open, setOpen] = useState(false);
     const [leftMonth, setLeftMonth] = useState(new Date());
     const [rightMonth, setRightMonth] = useState(dayjs().add(1, 'month').toDate());
@@ -68,12 +70,14 @@ const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = fal
             to: r.to ? combineDateTime(r.to, toTimeRef.current) : undefined,
         };
     }, []);
-    const placeholderFmt = viewMode === 'daily'
+    const placeholderFmt = showTime
         ? `${dateFormats[viewMode]} ${DEFAULT_TIME_PLACEHOLDER}`
         : dateFormats[viewMode];
     const placeholderText = placeholder ?? `${placeholderFmt} ~ ${placeholderFmt}`;
     const displayRange = composeRange(selectedRange);
-    const displayFmt = viewMode === 'daily' ? `${fmt} ${normalizeTimeFormat(timeFormat)}` : fmt;
+    const displayFmt = showTime
+        ? `${fmt} ${normalizeTimeFormat(timeFormat)}`
+        : fmt;
     /* 트리거의 접근 이름(aria-label)용 평문. 화면 표시는 renderDateRange가 담당한다 */
     const displayText = (() => {
         if (!displayRange?.from)
@@ -176,7 +180,7 @@ const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = fal
                                         : 'pointer-events-none opacity-0'), onClick: handleReset, children: _jsx(RotateCw, { size: 15 }) }), trailingIcon] })] }), _jsx(PopoverBase.Content, { className: "rounded-md border border-neutral-200 bg-white p-0 shadow-md", children: _jsxs("div", { style: {
                             '--calendar-accent': colorSet?.accent,
                             '--calendar-accent-bg': colorSet?.accentBg,
-                        }, className: "flex flex-col [--calendar-accent-bg:var(--color-tintBlue)] [--calendar-accent:var(--color-lb500)]", children: [viewMode === 'daily' && (_jsxs("div", { className: "flex flex-row mobile:flex-col", children: [_jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: leftMonth, onMonthChange: setLeftMonth, endMonth: leftEndMonth, disabled: isDateDisabled, colorSet: colorSet }), _jsx(CalendarTimePicker, { value: fromTime, onChange: handleFromTime, colorSet: colorSet, className: "shrink-0" })] }), _jsx(LDDivider, { orientation: "vertical", className: "inline-block h-auto self-stretch mobile:hidden" }), _jsx(LDDivider, { orientation: "horizontal", className: "hidden w-auto self-stretch mobile:inline-block" }), _jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: rightMonth, onMonthChange: setRightMonth, startMonth: rightStartMonth, disabled: isDateDisabled, colorSet: colorSet }), _jsx(CalendarTimePicker, { value: toTime, onChange: handleToTime, colorSet: colorSet, className: "shrink-0" })] })] })), viewMode === 'monthly' && (_jsx(MonthRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), viewMode === 'yearly' && (_jsx(YearRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), !isAutoClose && (_jsxs("div", { className: "flex items-center justify-end gap-sm border-t border-neutral100 py-xs px-sm", children: [_jsx(LDButton, { variant: "outline", color: "neutral", onClick: handleCancel, children: "\uCDE8\uC18C" }), _jsx(LDButton, { onClick: handleConfirm, children: "\uD655\uC778" })] }))] }) })] }) }));
+                        }, className: "flex flex-col [--calendar-accent-bg:var(--color-tintBlue)] [--calendar-accent:var(--color-lb500)]", children: [viewMode === 'daily' && (_jsxs("div", { className: "flex flex-row mobile:flex-col", children: [_jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: leftMonth, onMonthChange: setLeftMonth, endMonth: leftEndMonth, disabled: isDateDisabled, colorSet: colorSet }), showTime && (_jsx(CalendarTimePicker, { value: fromTime, onChange: handleFromTime, colorSet: colorSet, className: "shrink-0" }))] }), _jsx(LDDivider, { orientation: "vertical", className: "inline-block h-auto self-stretch mobile:hidden" }), _jsx(LDDivider, { orientation: "horizontal", className: "hidden w-auto self-stretch mobile:inline-block" }), _jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "range", locale: ko, selected: selectedRange, onSelect: handleDailySelect, month: rightMonth, onMonthChange: setRightMonth, startMonth: rightStartMonth, disabled: isDateDisabled, colorSet: colorSet }), showTime && (_jsx(CalendarTimePicker, { value: toTime, onChange: handleToTime, colorSet: colorSet, className: "shrink-0" }))] })] })), viewMode === 'monthly' && (_jsx(MonthRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), viewMode === 'yearly' && (_jsx(YearRangePicker, { value: selectedRange, onChange: handleRangeSelect, isDisableAfterNow: isDisableAfterNow })), !isAutoClose && (_jsxs("div", { className: "flex items-center justify-end gap-sm border-t border-neutral100 py-xs px-sm", children: [_jsx(LDButton, { variant: "outline", color: "neutral", onClick: handleCancel, children: "\uCDE8\uC18C" }), _jsx(LDButton, { onClick: handleConfirm, children: "\uD655\uC778" })] }))] }) })] }) }));
 };
 // ── MonthRangePicker ──
 const MonthRangePicker = ({ value, onChange, isDisableAfterNow, }) => {

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/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.7.0",
+  "version": "0.7.2",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",