@loword/loword-design-system 0.2.2 → 0.3.0

package/dist/components/LDAvatar/LDEditableAvatar.d.ts

@@ -0,0 +1,17 @@
+import { type LDAvatarProps } from '../../components/LDAvatar/LDAvatar.js';
+import { type TMimeType } from '../../constants/file.js';
+export interface LDEditableAvatarProps extends LDAvatarProps {
+    /** 검증을 통과한 이미지 파일을 소비처에 전달합니다. 네트워크 업로드는 이 컴포넌트가 하지 않습니다. */
+    onChange: (file: File) => void | Promise<void>;
+    /** 허용 최대 파일 크기(byte)입니다. 기본값은 5MB입니다. */
+    maxSize?: number;
+    /** 허용할 이미지 MIME 타입 목록입니다. 기본값은 지원하는 전체 이미지 타입입니다. */
+    allowedExtensions?: TMimeType[];
+    /** 이미지가 있을 때 우측 상단 제거 버튼을 눌렀음을 소비처에 알립니다. 실제 `src` 정리는 소비처 몫입니다. */
+    onRemove?: () => void | Promise<void>;
+    /** true면 입력을 비활성화하고 hover 오버레이·우측 상단 배지도 표시하지 않습니다. */
+    disabled?: boolean;
+}
+declare const LDEditableAvatar: ({ src, alt, size, className, style, onChange, onRemove, maxSize, allowedExtensions, disabled, }: LDEditableAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default LDEditableAvatar;
+//# sourceMappingURL=LDEditableAvatar.d.ts.map

package/dist/components/LDAvatar/LDEditableAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LDEditableAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/LDAvatar/LDEditableAvatar.tsx"],"names":[],"mappings":"AAKA,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAI9E,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAU1B,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;IAChC,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,GAAI,iGAWvB,qBAAqB,4CAkIvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDAvatar/LDEditableAvatar.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Camera, Pencil, X } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
+import LDAvatar from '../../components/LDAvatar/LDAvatar.js';
+import LDToast from '../../components/LDToast/LDToast.js';
+import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
+import Show from '../../components/Show/Show.js';
+import { FILE_EXTENSIONS, FILE_SIZE_UNIT, SUPPORTED_IMAGE_MIME_TYPES, } from '../../constants/file.js';
+import cn from '../../utils/cn.js';
+import { getFileSizeUnit, validAllowedExtensions, validFileSize, validImageSize, } from '../../utils/file.js';
+const LDEditableAvatar = ({ src, alt = 'avatar', size = 'small', className, style, onChange, onRemove, maxSize = 5 * FILE_SIZE_UNIT.mb, allowedExtensions = SUPPORTED_IMAGE_MIME_TYPES, disabled, }) => {
+    const inputId = useId();
+    const [previewSrc, setPreviewSrc] = useState(null);
+    const previewUrlRef = useRef(null);
+    // src prop이 바뀌면(업로드 완료 후 서버 URL로 전환되는 흐름) 로컬 미리보기를 버리고 src를 우선한다.
+    useEffect(() => {
+        if (previewUrlRef.current) {
+            URL.revokeObjectURL(previewUrlRef.current);
+            previewUrlRef.current = null;
+        }
+        setPreviewSrc(null);
+    }, [src]);
+    // 언마운트 시 마지막 미리보기 objectURL을 해제한다.
+    useEffect(() => {
+        return () => {
+            if (previewUrlRef.current)
+                URL.revokeObjectURL(previewUrlRef.current);
+        };
+    }, []);
+    const handleChange = async (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        if (!validAllowedExtensions(file, allowedExtensions)) {
+            const allowed = allowedExtensions
+                .map((item) => FILE_EXTENSIONS[item].toUpperCase())
+                .join(', ');
+            LDToast.error(`지원하지 않는 파일 형식입니다. ${allowed} 파일만 업로드 가능합니다.`);
+            return;
+        }
+        if (!validFileSize(file, maxSize)) {
+            LDToast.error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(maxSize)} 이하 파일을 선택해주세요.`);
+            return;
+        }
+        if (!(await validImageSize(file))) {
+            LDToast.error('이미지 해상도가 너무 큽니다. 더 작은 크기의 이미지를 선택해주세요.');
+            return;
+        }
+        if (previewUrlRef.current)
+            URL.revokeObjectURL(previewUrlRef.current);
+        const nextPreviewUrl = URL.createObjectURL(file);
+        previewUrlRef.current = nextPreviewUrl;
+        setPreviewSrc(nextPreviewUrl);
+        await onChange(file);
+    };
+    const handleRemove = async () => {
+        if (previewUrlRef.current) {
+            URL.revokeObjectURL(previewUrlRef.current);
+            previewUrlRef.current = null;
+        }
+        setPreviewSrc(null);
+        await onRemove?.();
+    };
+    const hasImage = Boolean(previewSrc ?? src);
+    return (_jsxs("div", { className: "relative inline-block", children: [_jsx(LDAvatar, { src: previewSrc ?? src, alt: alt, size: size, className: className, style: style }), _jsxs("label", { htmlFor: inputId, className: cn('group absolute inset-0 rounded-full', disabled ? 'cursor-default' : 'cursor-pointer'), children: [_jsx("input", { id: inputId, type: "file", className: "peer sr-only", accept: allowedExtensions.join(','), disabled: disabled, "aria-label": `${alt} 이미지 변경`, onClick: (event) => {
+                            event.currentTarget.value = '';
+                        }, onChange: handleChange }), _jsx(Show, { when: !disabled, children: _jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-full bg-mono900/50 opacity-0 ld-transition group-hover:opacity-100 peer-focus-visible:opacity-100", children: _jsx(RenderIcon, { className: "size-1/2 text-white", children: _jsx(Camera, {}) }) }) }), _jsx(Show, { when: !disabled && !hasImage, children: _jsx("span", { "aria-hidden": true, className: "absolute -top-0.5 -right-0.5 flex size-4.5 items-center justify-center rounded-full bg-blue300 ld-transition group-hover:bg-blue400", children: _jsx(RenderIcon, { className: "size-2.5 text-white", children: _jsx(Pencil, {}) }) }) })] }), _jsx(Show, { when: !disabled && hasImage, children: _jsx("button", { type: "button", "aria-label": `${alt} 이미지 제거`, onClick: handleRemove, className: "absolute -top-0.5 -right-0.5 flex size-4.5 cursor-pointer items-center justify-center rounded-full bg-danger600 ld-transition hover:bg-danger700", children: _jsx(RenderIcon, { className: "size-2.5 text-white", children: _jsx(X, {}) }) }) })] }));
+};
+export default LDEditableAvatar;

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

@@ -1 +1 @@
-{"version":3,"file":"LDDataCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/LDDataCalendar/LDDataCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAGhF,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,gBAAgB;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe;IACf,mBAAmB,CAAC,EAAE,KAAK,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC;IAC5D,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC;CAClD;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAC9D,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CACnD,OAAO,kBAAkB,CAAC,KAAK,CAChC,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CACpD,OAAO,kBAAkB,CAAC,MAAM,CACjC,CAAC;AAyFF;;;GAGG;AACH,QAAA,MAAM,cAAc;qIAUjB,mBAAmB;oCAjGiB,uBAAuB;sCAQrB,yBAAyB;8CAQjB,uBAAuB;qCAOhC,wBAAwB;8CAWf,uBAAuB;2CAO1B,uBAAuB;mDAelE,uBAAuB;sCAiBe,yBAAyB;CAgDjE,CAAC;AAWF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LDDataCalendar.d.ts","sourceRoot":"","sources":["../../../src/components/LDDataCalendar/LDDataCalendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAIhF,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,gBAAgB;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACvC,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe;IACf,mBAAmB,CAAC,EAAE,KAAK,CAAC;IAC5B,iBAAiB;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC;IAC5D,mDAAmD;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC;CAClD;AAED,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAC9D,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG,cAAc,CACnD,OAAO,kBAAkB,CAAC,KAAK,CAChC,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAClD,OAAO,kBAAkB,CAAC,IAAI,CAC/B,CAAC;AACF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CACpD,OAAO,kBAAkB,CAAC,MAAM,CACjC,CAAC;AA8FF;;;GAGG;AACH,QAAA,MAAM,cAAc;qIAUjB,mBAAmB;oCAtGiB,uBAAuB;sCAQrB,yBAAyB;8CAQjB,uBAAuB;qCAShC,wBAAwB;8CAWf,uBAAuB;2CAS1B,uBAAuB;mDAelE,uBAAuB;sCAkBe,yBAAyB;CAgDjE,CAAC;AAWF,eAAe,cAAc,CAAC"}

package/dist/components/LDDataCalendar/LDDataCalendar.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import LDDataCalendarBase from '../../components/LDDataCalendar/LDDataCalendarBase.js';
+import Show from '../../components/Show/Show.js';
 import cn from '../../utils/cn.js';
 const navButtonClass = 'flex items-center justify-center rounded-full size-[30px] bg-neutral100 hover:bg-mono400 text-neutral500 hover:text-neutral900 ld-transition cursor-pointer';
 /** 달력의 월과 선택 상태를 관리하는 Styled Compound 루트입니다. */
@@ -9,15 +10,15 @@ const Root = ({ className, ...props }) => (_jsx(LDDataCalendarBase.Root, { class
 /** 월 이동 버튼과 현재 월 제목을 배치하는 헤더입니다. */
 const Header = ({ className, ...props }) => (_jsx("div", { className: cn('mb-md flex items-center justify-between', className), ...props }));
 /** 이전 달로 이동하는 버튼입니다. 기본 접근성 이름은 `이전 달`입니다. */
-const Prev = ({ children, className, ...props }) => (_jsx(LDDataCalendarBase.Prev, { className: cn(navButtonClass, className), ...props, children: children === undefined ? _jsx(ChevronLeft, { size: 15, "aria-hidden": true }) : children }));
+const Prev = ({ children, className, ...props }) => (_jsx(LDDataCalendarBase.Prev, { className: cn(navButtonClass, className), ...props, children: _jsx(Show, { when: children, fallback: _jsx(ChevronLeft, { size: 16, "aria-hidden": true }), children: children }) }));
 /** 현재 표시 중인 월 제목입니다. */
 const Title = ({ className, ...props }) => (_jsx(LDDataCalendarBase.Title, { className: cn('flex justify-center display32 bold mobile:display20', className), ...props }));
 /** 다음 달로 이동하는 버튼입니다. 기본 접근성 이름은 `다음 달`입니다. */
-const Next = ({ children, className, ...props }) => (_jsx(LDDataCalendarBase.Next, { className: cn(navButtonClass, className), ...props, children: children === undefined ? _jsx(ChevronRight, { size: 16, "aria-hidden": true }) : children }));
+const Next = ({ children, className, ...props }) => (_jsx(LDDataCalendarBase.Next, { className: cn(navButtonClass, className), ...props, children: _jsx(Show, { when: children, fallback: _jsx(ChevronRight, { size: 16, "aria-hidden": true }), children: children }) }));
 /** 요일과 날짜 셀을 7열로 렌더링하는 그리드입니다. */
-const Grid = ({ weekdayClassName, ...props }) => (_jsx(LDDataCalendarBase.Grid, { weekdayClassName: cn('py-[10px] display14 text-mono500 mobile:py-1 mobile:display12', weekdayClassName), ...props }));
+const Grid = ({ weekdayClassName, ...props }) => (_jsx(LDDataCalendarBase.Grid, { weekdayClassName: cn('px-2.5 py-sm display16 bold text-mono500 mobile:p-xs mobile:display14', weekdayClassName), ...props }));
 /** 날짜와 해당 날짜의 데이터를 표시하는 셀입니다. */
-const Cell = ({ className, dateClassName, ...props }) => (_jsx(LDDataCalendarBase.Cell, { className: cn('flex min-h-25 flex-col gap-[15px] py-[10px] data-outside:opacity-50 mobile:min-h-13 mobile:gap-1 mobile:py-1', 'ld-transition data-selectable:cursor-pointer data-selectable:rounded-[5px] data-selectable:hover:bg-mono100', 'data-[selected=true]:bg-tintBlue data-[selected=true]:hover:bg-tintBlue', className), dateClassName: cn('self-start display16 leading-none font-normal data-weekend:text-danger600 mobile:display12', dateClassName), ...props }));
+const Cell = ({ className, dateClassName, ...props }) => (_jsx(LDDataCalendarBase.Cell, { className: cn('flex min-h-25 flex-col gap-0.5 p-2.5 display14 text-neutral500 ld-transition data-outside:opacity-40 mobile:min-h-21 mobile:p-xs mobile:display12', 'data-selectable:cursor-pointer data-selectable:rounded-[5px] data-selectable:hover:bg-mono100', 'data-[selected=true]:bg-tintBlue data-[selected=true]:hover:bg-tintBlue', '*:truncate', className), dateClassName: cn('self-start pb-1.5 display16 leading-none font-normal text-black data-weekend:text-danger600 mobile:display14', dateClassName), ...props }));
 /** 선택한 날짜의 상세 내용을 표시하는 모바일 영역입니다. */
 const Detail = ({ className, ...props }) => (_jsx(LDDataCalendarBase.Detail, { className: cn('mt-md hidden rounded-[10px] bg-mono50 p-md mobile:block', className), ...props }));
 /**

package/dist/components/LDDatePicker/LDDatePicker.js

@@ -102,6 +102,6 @@ const LDDatePicker = ({ variant = 'filled', color = 'neutral', value, defaultVal
         setSelectedDate(value);
         setSelectedTime(toTimeString(value));
     }, [open, value]);
-    return (_jsx("div", { className: cn(block ? 'w-full' : 'w-auto', className), children: _jsxs(PopoverBase.Root, { open: open, onOpenChange: handleOpenChange, children: [_jsxs("div", { style: style, className: cn('relative h-9.5 w-full cursor-pointer rounded-[5px] px-4 display14', 'flex flex-row items-center justify-between gap-4', 'bold outline-2 outline-transparent ld-transition', variantColorClasses[variant][color], disabled && 'cursor-not-allowed opacity-50', triggerClassName), children: [_jsx("span", { "aria-hidden": true, className: cn('truncate', !displayDate && 'text-mono400'), children: displayDate ? formattedDate : placeholderText }), _jsx(PopoverBase.Trigger, { "aria-label": displayDate ? formattedDate : placeholderText, disabled: disabled, className: cn('absolute inset-0 rounded-[5px] outline-none', disabled ? 'cursor-not-allowed' : 'cursor-pointer') }), _jsxs("div", { className: "pointer-events-none relative flex shrink-0 items-center gap-xs", children: [showRotate && (_jsx("button", { type: "button", "aria-label": "\uCD08\uAE30\uD654", disabled: disabled, onClick: handleReset, className: "pointer-events-auto flex cursor-pointer items-center text-mono400 ld-transition disabled:cursor-not-allowed", children: _jsx(RotateCw, { size: 15 }) })), trailingIcon] })] }), _jsx(PopoverBase.Content, { className: "rounded-md border border-neutral200 bg-white p-0 shadow-md", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "single", locale: ko, selected: selectedDate, onSelect: handleSelect, disabled: isDateDisabled, colorSet: colorSet }), isExistTime && (_jsx(CalendarTimePicker, { value: selectedTime, onChange: handleSelectedTime, colorSet: colorSet, className: "shrink-0" }))] }), _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" })] })] }) })] }) }));
+    return (_jsx("div", { className: cn(block ? 'w-full' : 'w-auto', className), children: _jsxs(PopoverBase.Root, { open: open, onOpenChange: handleOpenChange, children: [_jsxs("div", { style: style, className: cn('relative h-9.5 w-full cursor-pointer rounded-[5px] px-4 display14', 'flex flex-row items-center justify-between gap-4', 'bold outline-2 outline-transparent ld-transition', variantColorClasses[variant][color], disabled && 'cursor-not-allowed opacity-50', triggerClassName), children: [_jsx("span", { "aria-hidden": true, className: cn('truncate', !displayDate && 'text-neutral300'), children: displayDate ? formattedDate : placeholderText }), _jsx(PopoverBase.Trigger, { "aria-label": displayDate ? formattedDate : placeholderText, disabled: disabled, className: cn('absolute inset-0 rounded-[5px] outline-none', disabled ? 'cursor-not-allowed' : 'cursor-pointer') }), _jsxs("div", { className: "pointer-events-none relative flex shrink-0 items-center gap-xs", children: [showRotate && (_jsx("button", { type: "button", "aria-label": "\uCD08\uAE30\uD654", disabled: disabled, onClick: handleReset, className: "pointer-events-auto flex cursor-pointer items-center text-mono400 ld-transition disabled:cursor-not-allowed", children: _jsx(RotateCw, { size: 15 }) })), trailingIcon] })] }), _jsx(PopoverBase.Content, { className: "rounded-md border border-neutral200 bg-white p-0 shadow-md", children: _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex max-h-90 flex-row", children: [_jsx(LDCalendar, { captionLayout: "dropdown", mode: "single", locale: ko, selected: selectedDate, onSelect: handleSelect, disabled: isDateDisabled, colorSet: colorSet }), isExistTime && (_jsx(CalendarTimePicker, { value: selectedTime, onChange: handleSelectedTime, colorSet: colorSet, className: "shrink-0" }))] }), _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" })] })] }) })] }) }));
 };
 export default LDDatePicker;

package/dist/components/LDDateRangePicker/LDDateRangePicker.js

@@ -85,10 +85,10 @@ const LDDateRangePicker = ({ variant = 'filled', value, onChange, disabled = fal
     })();
     const renderDateRange = () => {
         if (!displayRange?.from) {
-            return (_jsx("span", { className: "whitespace-nowrap text-mono400", children: placeholderText }));
+            return (_jsx("span", { className: "whitespace-nowrap text-neutral300", children: placeholderText }));
         }
         if (!displayRange.to) {
-            return (_jsxs("span", { className: "text-mono400", children: [dayjs(displayRange.from).format(displayFmt), " ~ ", placeholderFmt] }));
+            return (_jsxs("span", { className: "text-neutral300", children: [dayjs(displayRange.from).format(displayFmt), " ~ ", placeholderFmt] }));
         }
         return (_jsxs(_Fragment, { children: [dayjs(displayRange.from).format(displayFmt), " ~", ' ', dayjs(displayRange.to).format(displayFmt)] }));
     };

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

@@ -1 +1 @@
-{"version":3,"file":"EditorBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/EditorBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAEX,KAAK,UAAU,EAEhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAKf,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB,yBAS5B,CAAC;AAGF,UAAU,SAAS;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;CACrE;AA0CD,UAAU,aAAa;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,eAAO,MAAM,UAAU;oEA9JpB,SAAS;6BAoCoB,YAAY;wCAWE,YAAY;yFA2BvD,kBAAkB;sDA4BlB,oBAAoB;;mDA0C+B,aAAa;CAmBlE,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EditorBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/EditorBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,MAAM,EAEX,KAAK,UAAU,EAEhB,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAKf,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAID,eAAO,MAAM,gBAAgB,yBAS5B,CAAC;AAGF,UAAU,SAAS;IACjB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAwCD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA0BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;CACrE;AA0ED,UAAU,aAAa;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,eAAO,MAAM,UAAU;oEA9LpB,SAAS;6BAoCoB,YAAY;wCAWE,YAAY;yFA2BvD,kBAAkB;sDA4BlB,oBAAoB;;mDA0E+B,aAAa;CAmBlE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/LDEditor/EditorBase.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EditorContent, useEditor, } from '@tiptap/react';
-import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import cn from '../../utils/cn.js';
 const EditorContext = createContext(null);
 export const useEditorContext = () => {
@@ -51,7 +51,10 @@ const ToolbarButton = ({ disabled, onClick, className, children, 'aria-label': a
 };
 const ToolbarDropdown = ({ trigger, className, children, }) => {
     const [open, setOpen] = useState(false);
+    // 패널 기준 위치는 트리거 왼쪽. 툴바(=에디터 폭) 오른쪽을 넘는 만큼만 왼쪽으로 밀어 넣는다.
+    const [shift, setShift] = useState(0);
     const ref = useRef(null);
+    const panelRef = useRef(null);
     const toggle = () => setOpen((prev) => !prev);
     const close = () => setOpen(false);
     useEffect(() => {
@@ -63,7 +66,27 @@ const ToolbarDropdown = ({ trigger, className, children, }) => {
         document.addEventListener('mousedown', handler);
         return () => document.removeEventListener('mousedown', handler);
     }, []);
-    return (_jsxs("div", { ref: ref, className: "relative", children: [trigger({ open, toggle }), open && (_jsx("div", { className: cn('absolute top-full left-0 z-50 mt-1', className), children: typeof children === 'function' ? children({ close }) : children }))] }));
+    // paint 전에 위치를 확정해야 열리는 첫 프레임이 튀지 않는다.
+    // Root가 editor 생성 전엔 children을 렌더하지 않으므로 서버에서는 실행되지 않는다.
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        const measure = () => {
+            const bounds = ref.current?.parentElement;
+            const panel = panelRef.current;
+            if (!ref.current || !bounds || !panel)
+                return;
+            const boundsRect = bounds.getBoundingClientRect();
+            const triggerRect = ref.current.getBoundingClientRect();
+            const overflow = triggerRect.left + panel.offsetWidth - boundsRect.right;
+            // 왼쪽 경계도 넘지 않도록 밀 수 있는 양을 제한한다.
+            setShift(Math.max(0, Math.min(overflow, triggerRect.left - boundsRect.left)));
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [open]);
+    return (_jsxs("div", { ref: ref, className: "relative", children: [trigger({ open, toggle }), open && (_jsx("div", { ref: panelRef, style: { left: -shift }, className: cn('absolute top-full z-50 mt-1', className), children: typeof children === 'function' ? children({ close }) : children }))] }));
 };
 const Toolbar = Object.assign(ToolbarRoot, {
     LDButton: ToolbarButton,

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":"AA4EA,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,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;CAC9B;AAED,QAAA,MAAM,QAAQ,GAAI,sDAKf,aAAa,4CAYf,CAAC;AAujBF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"LDEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LDEditor/LDEditor.tsx"],"names":[],"mappings":"AA4EA,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,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;CAC9B;AAED,QAAA,MAAM,QAAQ,GAAI,sDAKf,aAAa,4CAYf,CAAC;AAyjBF,eAAe,QAAQ,CAAC"}

package/dist/components/LDEditor/LDEditor.js

@@ -77,6 +77,7 @@ const EditorToolbar = ({ handleImageUpload, }) => {
                 canUndo: editor.can().undo(),
                 canRedo: editor.can().redo(),
                 isLink: editor.isActive('link'),
+                hasSelection: !editor.state.selection.empty,
             };
         },
     });
@@ -148,7 +149,7 @@ const EditorToolbar = ({ handleImageUpload, }) => {
                                     justify: '양쪽 정렬',
                                 }[align];
                                 return (_jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().setTextAlign(align).run(), className: cn(iconBtn, state.align[align] && activeBtn), "aria-label": alignLabel, children: _jsx(Icon, { className: "size-5" }) }, align));
-                            })] })), _jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), className: cn(iconBtn, state.isBulletList && activeBtn), "aria-label": "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D", children: _jsx(List, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), className: cn(iconBtn, state.isOrderedList && activeBtn), "aria-label": "\uBC88\uD638 \uBAA9\uB85D", children: _jsx(ListOrdered, { className: "size-5" }) }), _jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canUndo, onClick: () => editor.chain().focus().undo().run(), className: iconBtn, "aria-label": "\uB418\uB3CC\uB9AC\uAE30", children: _jsx(Undo, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canRedo, onClick: () => editor.chain().focus().redo().run(), className: iconBtn, "aria-label": "\uB2E4\uC2DC \uC2E4\uD589", children: _jsx(Redo, { className: "size-5" }) }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-70 rounded-lg border border-neutral200 bg-white p-3 shadow-lg", trigger: ({ toggle }) => (_jsx(EditorBase.Toolbar.LDButton, { onClick: () => {
+                            })] })), _jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleBulletList().run(), className: cn(iconBtn, state.isBulletList && activeBtn), "aria-label": "\uAE00\uBA38\uB9AC \uAE30\uD638 \uBAA9\uB85D", children: _jsx(List, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { onClick: () => editor.chain().focus().toggleOrderedList().run(), className: cn(iconBtn, state.isOrderedList && activeBtn), "aria-label": "\uBC88\uD638 \uBAA9\uB85D", children: _jsx(ListOrdered, { className: "size-5" }) }), _jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canUndo, onClick: () => editor.chain().focus().undo().run(), className: iconBtn, "aria-label": "\uB418\uB3CC\uB9AC\uAE30", children: _jsx(Undo, { className: "size-5" }) }), _jsx(EditorBase.Toolbar.LDButton, { disabled: !state.canRedo, onClick: () => editor.chain().focus().redo().run(), className: iconBtn, "aria-label": "\uB2E4\uC2DC \uC2E4\uD589", children: _jsx(Redo, { className: "size-5" }) }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(LDDivider, {}), _jsx(EditorBase.Toolbar.Dropdown, { className: "min-w-70 rounded-lg border border-neutral200 bg-white p-3 shadow-lg", trigger: ({ toggle }) => (_jsx(EditorBase.Toolbar.LDButton, { disabled: !state.hasSelection, onClick: () => {
                                         setLinkUrl(editor.getAttributes('link').href || '');
                                         toggle();
                                     }, className: cn(iconBtn, state.isLink && activeBtn), "aria-label": "\uB9C1\uD06C", children: _jsx(Link2, { className: "size-5" }) })), children: ({ close }) => {

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

@@ -1,6 +1,12 @@
 import { type Dispatch, type HTMLAttributes, type InputHTMLAttributes, type ReactNode, type Ref, type SetStateAction } from 'react';
 import { type TMimeType } from '../../constants/file.js';
 import { type IFile } from '../../utils/file.js';
+/** 인풋마다 다르게 줄 수 있는 파일 허용 조건입니다. 생략한 항목은 Root 값을 씁니다. */
+export interface FileUploadOptions {
+    maxSize?: number;
+    allowedExtensions?: TMimeType[];
+    maxFileCount?: number;
+}
 interface FileUploadContextValue {
     recommendedSize?: {
         width: number;
@@ -9,13 +15,17 @@ interface FileUploadContextValue {
     maxSize: number;
     allowedExtensions: TMimeType[];
     fileList: IFile[];
+    linkList: string[];
     maxFileCount: number;
     disabled?: boolean;
     readOnly?: boolean;
     locked: boolean;
-    addFiles: (files: File[]) => Promise<void>;
-    replaceFile: (file: File, index: number) => Promise<void>;
+    addFiles: (files: File[], options?: FileUploadOptions) => Promise<void>;
+    replaceFile: (file: File, index: number, options?: FileUploadOptions) => Promise<void>;
     deleteFile: (index: number) => Promise<void>;
+    addLink: () => Promise<void>;
+    changeLink: (index: number, value: string) => Promise<void>;
+    deleteLink: (index: number) => Promise<void>;
 }
 export declare const useFileUploadContext: () => FileUploadContextValue;
 export interface FileUploadBaseRootProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
@@ -27,6 +37,10 @@ export interface FileUploadBaseRootProps extends Omit<HTMLAttributes<HTMLDivElem
     allowedExtensions?: TMimeType[];
     fileList: IFile[];
     setFileList: Dispatch<SetStateAction<IFile[]>>;
+    /** 첨부된 링크 목록입니다. `Input type="link"`·`LinkList`를 쓸 때 넘깁니다. */
+    linkList?: string[];
+    setLinkList?: Dispatch<SetStateAction<string[]>>;
+    onChangeLink?: (links: string[]) => void | Promise<void>;
     maxFileCount: number;
     onChangeFile: (files: IFile[]) => void | Promise<void>;
     onDeleteFile: (file: IFile) => Promise<boolean>;
@@ -37,12 +51,14 @@ export interface FileUploadBaseRootProps extends Omit<HTMLAttributes<HTMLDivElem
 }
 export interface FileUploadBaseInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'multiple' | 'onChange' | 'type'> {
     replaceIndex?: number;
+    /** 이 인풋에만 적용할 파일 허용 조건입니다. 생략한 항목은 Root 값을 씁니다. */
+    options?: FileUploadOptions;
     onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
     ref?: Ref<HTMLInputElement>;
 }
 export declare const FileUploadBase: {
-    Root: ({ recommendedSize, maxSize, allowedExtensions: allowedExtensionsProp, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, disabled, readOnly, children, ref, ...props }: FileUploadBaseRootProps) => import("react/jsx-runtime").JSX.Element;
-    Input: ({ replaceIndex, onClick, onChange, disabled, ref, ...props }: FileUploadBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ recommendedSize, maxSize, allowedExtensions: allowedExtensionsProp, maxFileCount, fileList, setFileList, linkList: linkListProp, setLinkList, onChangeLink, onChangeFile, onDeleteFile, disabled, readOnly, children, ref, ...props }: FileUploadBaseRootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ replaceIndex, options, onClick, onChange, disabled, ref, ...props }: FileUploadBaseInputProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default FileUploadBase;
 //# sourceMappingURL=FileUploadBase.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/FileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAGL,KAAK,KAAK,EAKX,MAAM,cAAc,CAAC;AAEtB,UAAU,sBAAsB;IAC9B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9C;AAID,eAAO,MAAM,oBAAoB,8BAUhC,CAAC;AAEF,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CACnD,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,GAAG,UAAU,CACxB;IACC,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC;IAChC,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAgID,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,UAAU,GAAG,MAAM,CACjC;IACC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7D,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAsCD,eAAO,MAAM,cAAc;iMA7JxB,uBAAuB;0EAgIvB,wBAAwB;CA6BkB,CAAC;AAE9C,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/FileUploadBase.tsx"],"names":[],"mappings":"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"}

package/dist/components/LDFileUpload/FileUploadBase.js

@@ -12,29 +12,38 @@ export const useFileUploadContext = () => {
     }
     return context;
 };
-const Root = ({ recommendedSize, maxSize, allowedExtensions: allowedExtensionsProp, maxFileCount, fileList, setFileList, onChangeFile, onDeleteFile, disabled, readOnly, children, ref, ...props }) => {
+const Root = ({ recommendedSize, maxSize, allowedExtensions: allowedExtensionsProp, maxFileCount, fileList, setFileList, linkList: linkListProp, setLinkList, onChangeLink, onChangeFile, onDeleteFile, disabled, readOnly, children, ref, ...props }) => {
     const allowedExtensions = allowedExtensionsProp?.length
         ? allowedExtensionsProp
         : SUPPORTED_FILE_MIME_TYPES;
     const locked = Boolean(disabled || readOnly);
-    const validateFile = async (file) => {
-        if (!validAllowedExtensions(file, allowedExtensions)) {
-            const allowed = allowedExtensions
+    const linkList = linkListProp ?? [];
+    // 인풋마다 허용 조건이 다를 수 있어, Root 값 위에 인풋이 준 옵션을 덮어쓴다.
+    const resolveOptions = (options) => ({
+        maxSize: options?.maxSize ?? maxSize,
+        allowedExtensions: options?.allowedExtensions?.length
+            ? options.allowedExtensions
+            : allowedExtensions,
+        maxFileCount: options?.maxFileCount ?? maxFileCount,
+    });
+    const validateFile = async (file, resolved) => {
+        if (!validAllowedExtensions(file, resolved.allowedExtensions)) {
+            const allowed = resolved.allowedExtensions
                 .map((item) => FILE_EXTENSIONS[item].toUpperCase())
                 .join(', ');
             return `지원하지 않는 파일 형식입니다. ${allowed} 파일만 업로드 가능합니다.`;
         }
-        if (!validFileSize(file, maxSize)) {
-            return `파일 크기가 너무 큽니다. ${getFileSizeUnit(maxSize)} 이하 파일을 선택해주세요.`;
+        if (!validFileSize(file, resolved.maxSize)) {
+            return `파일 크기가 너무 큽니다. ${getFileSizeUnit(resolved.maxSize)} 이하 파일을 선택해주세요.`;
         }
         if (isImage(file.name) && !(await validImageSize(file))) {
             return '이미지 해상도가 너무 큽니다. 더 작은 크기의 이미지를 선택해주세요.';
         }
         return null;
     };
-    const convertFiles = async (files) => {
+    const convertFiles = async (files, resolved) => {
         for (const file of files) {
-            const error = await validateFile(file);
+            const error = await validateFile(file, resolved);
             if (error) {
                 LDToast.error(error);
                 return null;
@@ -50,20 +59,21 @@ const Root = ({ recommendedSize, maxSize, allowedExtensions: allowedExtensionsPr
             return null;
         }
     };
-    const addFiles = async (files) => {
-        if (fileList.length + files.length > maxFileCount) {
-            LDToast.error(`최대 ${maxFileCount}개까지 업로드할 수 있습니다.`);
+    const addFiles = async (files, options) => {
+        const resolved = resolveOptions(options);
+        if (fileList.length + files.length > resolved.maxFileCount) {
+            LDToast.error(`최대 ${resolved.maxFileCount}개까지 업로드할 수 있습니다.`);
             return;
         }
-        const converted = await convertFiles(files);
+        const converted = await convertFiles(files, resolved);
         if (!converted)
             return;
         const next = [...fileList, ...converted];
         setFileList(next);
         await onChangeFile(next);
     };
-    const replaceFile = async (file, index) => {
-        const [converted] = (await convertFiles([file])) ?? [];
+    const replaceFile = async (file, index, options) => {
+        const [converted] = (await convertFiles([file], resolveOptions(options))) ?? [];
         if (!converted)
             return;
         const next = fileList.map((item, itemIndex) => itemIndex === index ? converted : item);
@@ -85,11 +95,20 @@ const Root = ({ recommendedSize, maxSize, allowedExtensions: allowedExtensionsPr
             LDToast.error('파일 삭제 중 문제가 발생했습니다. 잠시후 다시 시도해주세요.');
         }
     };
+    // 링크는 파일이 아니라 검증·변환 대상이 아니므로 목록 갱신만 하고 onChangeLink로 알린다.
+    const applyLinks = async (next) => {
+        setLinkList?.(next);
+        await onChangeLink?.(next);
+    };
+    const addLink = () => applyLinks([...linkList, '']);
+    const changeLink = (index, value) => applyLinks(linkList.map((item, itemIndex) => (itemIndex === index ? value : item)));
+    const deleteLink = (index) => applyLinks(linkList.filter((_, itemIndex) => itemIndex !== index));
     return (_jsx(FileUploadContext, { value: {
             recommendedSize,
             maxSize,
             allowedExtensions,
             fileList,
+            linkList,
             maxFileCount,
             disabled,
             readOnly,
@@ -97,11 +116,15 @@ const Root = ({ recommendedSize, maxSize, allowedExtensions: allowedExtensionsPr
             addFiles,
             replaceFile,
             deleteFile,
+            addLink,
+            changeLink,
+            deleteLink,
         }, children: _jsx("div", { ref: ref, ...props, children: children }) }));
 };
-const Input = ({ replaceIndex, onClick, onChange, disabled, ref, ...props }) => {
+const Input = ({ replaceIndex, options, onClick, onChange, disabled, ref, ...props }) => {
     const { maxFileCount, locked, addFiles, replaceFile } = useFileUploadContext();
-    return (_jsx("input", { ref: ref, ...props, type: "file", multiple: replaceIndex === undefined && maxFileCount > 1, disabled: locked || disabled, onClick: (event) => {
+    const resolvedMaxFileCount = options?.maxFileCount ?? maxFileCount;
+    return (_jsx("input", { ref: ref, ...props, type: "file", multiple: replaceIndex === undefined && resolvedMaxFileCount > 1, disabled: locked || disabled, onClick: (event) => {
             onClick?.(event);
             if (!event.defaultPrevented)
                 event.currentTarget.value = '';
@@ -113,9 +136,9 @@ const Input = ({ replaceIndex, onClick, onChange, disabled, ref, ...props }) =>
             if (!files.length)
                 return;
             if (replaceIndex === undefined)
-                await addFiles(files);
+                await addFiles(files, options);
             else if (files[0])
-                await replaceFile(files[0], replaceIndex);
+                await replaceFile(files[0], replaceIndex, options);
         } }));
 };
 export const FileUploadBase = { Root, Input };

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

@@ -1,6 +1,6 @@
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type ReactNode } from 'react';
 import { type LDButtonProps } from '../../components/LDButton/LDButton.js';
-import { type FileUploadBaseRootProps } from '../../components/LDFileUpload/FileUploadBase.js';
+import { type FileUploadBaseRootProps, type FileUploadOptions } from '../../components/LDFileUpload/FileUploadBase.js';
 export interface LDFileUploadClassNames {
     root?: string;
     input?: string;
@@ -12,23 +12,36 @@ export interface LDFileUploadRootProps extends FileUploadBaseRootProps {
     classNames?: LDFileUploadClassNames;
 }
 export interface LDFileUploadInputProps extends Omit<LDButtonProps<'button'>, 'type'> {
-    type?: 'default' | 'image';
+    type?: 'default' | 'attachment' | 'image' | 'link';
     label?: string;
+    /** 라벨 앞 아이콘입니다. `type="default"`에서는 `leftIcon`을 씁니다. */
+    icon?: ReactNode;
+    /** 이 인풋에만 적용할 파일 허용 조건입니다. 생략한 항목은 Root 값을 씁니다. */
+    options?: FileUploadOptions;
 }
 export interface LDFileUploadCardListProps {
     type?: 'default' | 'image';
+    /** 카드에 업로드 시각 라벨을 표시합니다. `uploadedAt`이 있는 파일만 표시됩니다. */
+    isExistUploadedAt?: boolean;
+    className?: string;
+}
+export interface LDFileUploadLinkListProps {
+    placeholder?: string;
     className?: string;
 }
 export type LDFileUploadDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
 export interface LDFileUploadProps extends Omit<LDFileUploadRootProps, 'children' | 'classNames' | 'maxFileCount'> {
     isExistDescription?: boolean;
+    /** 카드에 업로드 시각 라벨을 표시합니다. */
+    isExistUploadedAt?: boolean;
 }
 /** 한 개의 일반 파일을 업로드하는 기본 조합입니다. */
 declare const LDFileUpload: {
-    ({ recommendedSize, isExistDescription, fileList, ...props }: LDFileUploadProps): import("react/jsx-runtime").JSX.Element;
+    ({ recommendedSize, isExistDescription, isExistUploadedAt, fileList, ...props }: LDFileUploadProps): import("react/jsx-runtime").JSX.Element;
     Root: ({ className, classNames, children, ...props }: LDFileUploadRootProps) => import("react/jsx-runtime").JSX.Element;
-    Input: ({ type, label, className, ...props }: LDFileUploadInputProps) => import("react/jsx-runtime").JSX.Element | null;
-    CardList: ({ type, className, }: LDFileUploadCardListProps) => 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;
+    LinkList: ({ placeholder, className, }: LDFileUploadLinkListProps) => 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":"AAGA,OAAO,EAAiB,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAEvE,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAuB,EACrB,KAAK,uBAAuB,EAE7B,MAAM,0CAA0C,CAAC;AAMlD,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,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmDD,MAAM,WAAW,yBAAyB;IACxC,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmJD,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AA8BhF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,qBAAqB,EACrB,UAAU,GAAG,YAAY,GAAG,cAAc,CAC3C;IACC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,kCAAkC;AAClC,QAAA,MAAM,YAAY;kEAKf,iBAAiB;0DAzQjB,qBAAqB;kDA6BrB,sBAAsB;qCAoDtB,yBAAyB;2CAgJkB,4BAA4B;CAkDzE,CAAC;AAOF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LDFileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUpload.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAE9E,OAAuB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EAEvB,MAAM,0CAA0C,CAAC;AAqFlD,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;AA6HD,MAAM,WAAW,yBAAyB;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwDD,MAAM,MAAM,4BAA4B,GAAG,cAAc,CAAC,oBAAoB,CAAC,CAAC;AA6BhF,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,qBAAqB,EACrB,UAAU,GAAG,YAAY,GAAG,cAAc,CAC3C;IACC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,kCAAkC;AAClC,QAAA,MAAM,YAAY;qFAMf,iBAAiB;0DAhWjB,qBAAqB;iEAmCrB,sBAAsB;wDA+FtB,yBAAyB;4CA+HzB,yBAAyB;2CAqDkB,4BAA4B;CAwDzE,CAAC;AAQF,eAAe,YAAY,CAAC"}