@loword/loword-design-system 0.6.0 → 0.7.0

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/package.json

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