@ncds/ui-admin 1.8.2 → 1.8.3

package/dist/temp/src/components/overlays/dropdown/Dropdown.js

@@ -0,0 +1,273 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements, monitorForElements, } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
+import { attachClosestEdge, extractClosestEdge, } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { DotsGrid02, DotsVertical, Eye, EyeOff } from '@ncds/ui-admin-icon';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Button } from '../../action/button';
+import { applyDraftToItems, arrayReorderByEdge, hasDraftChanged, initDraftState } from './utils';
+const DROPDOWN_ID_RADIX = 36;
+const DROPDOWN_ID_SLICE_START = 2;
+const DROPDOWN_ID_SLICE_END = 9;
+const SortableConfigItem = ({ item, isVisible, showVisibilityToggle, sortable, dropdownId, onToggleVisibility, onMoveBy, }) => {
+    const ref = useRef(null);
+    const handleRef = useRef(null);
+    const ItemIcon = item.icon;
+    const [closestEdge, setClosestEdge] = useState(null);
+    useEffect(() => {
+        if (!sortable || !ref.current || !handleRef.current)
+            return;
+        const itemEl = ref.current;
+        return combine(draggable({
+            element: handleRef.current,
+            getInitialData: () => ({ id: item.id, dropdownId }),
+            onGenerateDragPreview: ({ nativeSetDragImage }) => {
+                setCustomNativeDragPreview({
+                    nativeSetDragImage,
+                    getOffset: pointerOutsideOfPreview({ x: '8px', y: '8px' }),
+                    render: ({ container }) => {
+                        const clone = itemEl.cloneNode(true);
+                        clone.classList.add('ncua-dropdown__item--drag-preview');
+                        clone.style.width = `${itemEl.getBoundingClientRect().width}px`;
+                        container.appendChild(clone);
+                        return () => {
+                            container.removeChild(clone);
+                        };
+                    },
+                });
+            },
+            onDragStart: () => {
+                itemEl.classList.add('is-dragging');
+            },
+            onDrop: () => {
+                itemEl.classList.remove('is-dragging');
+            },
+        }), dropTargetForElements({
+            element: ref.current,
+            getData: ({ input, element }) => attachClosestEdge({ id: item.id, dropdownId }, { input, element, allowedEdges: ['top', 'bottom'] }),
+            onDragEnter: ({ self, source }) => {
+                if (source.data.id === item.id)
+                    return;
+                setClosestEdge(extractClosestEdge(self.data));
+            },
+            onDrag: ({ self, source }) => {
+                if (source.data.id === item.id)
+                    return;
+                setClosestEdge(extractClosestEdge(self.data));
+            },
+            onDragLeave: () => setClosestEdge(null),
+            onDrop: () => setClosestEdge(null),
+        }));
+    }, [sortable, item.id, dropdownId]);
+    const itemClasses = [
+        'ncua-dropdown__item',
+        'ncua-dropdown__item--config',
+        item.disabled ? 'is-disabled' : '',
+        isVisible ? '' : 'is-hidden',
+        item.className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { ref: ref, className: itemClasses, children: [closestEdge && (_jsx("div", { className: `ncua-dropdown__item-drop-indicator ncua-dropdown__item-drop-indicator--${closestEdge}` })), sortable && (_jsx("button", { ref: handleRef, type: "button", className: "ncua-dropdown__item-drag-handle", "aria-label": "\uC21C\uC11C \uBCC0\uACBD (\uC704/\uC544\uB798 \uBC29\uD5A5\uD0A4)", onKeyDown: (e) => {
+                    if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        onMoveBy(item.id, -1);
+                    }
+                    else if (e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        onMoveBy(item.id, 1);
+                    }
+                }, children: _jsx(DotsGrid02, {}) })), _jsx("div", { className: "ncua-dropdown__item-content", children: _jsxs("div", { className: "ncua-dropdown__item-text-group", children: [ItemIcon && _jsx(ItemIcon, { className: "ncua-dropdown__item-icon" }), _jsx("span", { className: "ncua-dropdown__item-text", children: item.text })] }) }), showVisibilityToggle && (_jsx("button", { type: "button", className: "ncua-dropdown__item-visibility", "aria-label": `${item.text} 노출`, "aria-pressed": isVisible, onClick: () => onToggleVisibility(item.id), children: isVisible ? _jsx(Eye, {}) : _jsx(EyeOff, {}) }))] }));
+};
+export const Dropdown = (props) => {
+    const { trigger, align = 'left', header, groups, className, opened = false, closeOnClickOutside = true } = props;
+    const variant = props.variant ?? 'action';
+    const closeOnClickItem = variant === 'action' ? (props.closeOnClickItem ?? true) : false;
+    const [isOpen, setIsOpen] = useState(opened);
+    const dropdownRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuItemsRef = useRef(null);
+    const dropdownIdRef = useRef(`ncua-dropdown-${Math.random().toString(DROPDOWN_ID_RADIX).slice(DROPDOWN_ID_SLICE_START, DROPDOWN_ID_SLICE_END)}`);
+    const dropdownId = dropdownIdRef.current;
+    useEffect(() => {
+        setIsOpen(opened);
+    }, [opened]);
+    const initialDraft = variant === 'config' ? initDraftState(groups) : null;
+    const [draft, setDraft] = useState(initialDraft);
+    // Reset draft to props baseline synchronously before paint to avoid a flash
+    // of "previous draft" state when reopening after a dismissed change.
+    useLayoutEffect(() => {
+        if (variant !== 'config')
+            return;
+        if (isOpen) {
+            setDraft(initDraftState(groups));
+        }
+        else {
+            setDraft(null);
+        }
+    }, [isOpen, variant, groups]);
+    // Listen for drag-drop events scoped to this dropdown
+    useEffect(() => {
+        if (variant !== 'config' || !isOpen)
+            return;
+        return monitorForElements({
+            canMonitor: ({ source }) => typeof source.data.id === 'string' && source.data.dropdownId === dropdownId,
+            onDrop: ({ source, location }) => {
+                const target = location.current.dropTargets[0];
+                if (!target)
+                    return;
+                const fromId = source.data.id;
+                const toId = target.data.id;
+                if (typeof fromId !== 'string' || typeof toId !== 'string' || fromId === toId)
+                    return;
+                const edge = extractClosestEdge(target.data);
+                const resolvedEdge = edge === 'bottom' ? 'bottom' : 'top';
+                setDraft((prev) => prev ? { ...prev, order: arrayReorderByEdge(prev.order, fromId, toId, resolvedEdge) } : prev);
+            },
+        });
+    }, [variant, isOpen, dropdownId]);
+    // Auto-scroll the items area while dragging near edges
+    useEffect(() => {
+        if (variant !== 'config' || !isOpen || !menuItemsRef.current)
+            return;
+        return autoScrollForElements({ element: menuItemsRef.current });
+    }, [variant, isOpen]);
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+    // 닫고 + 포커스를 trigger로 복귀 (a11y 권장)
+    const closeAndRestoreFocus = () => {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+    };
+    const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    const handleClickItem = (item) => {
+        if (!item.disabled && item.onClick) {
+            item.onClick();
+            if (closeOnClickItem) {
+                setIsOpen(false);
+            }
+        }
+    };
+    useEffect(() => {
+        if (closeOnClickOutside) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }
+    }, [closeOnClickOutside]);
+    // ESC 키로 닫고 trigger로 포커스 복귀
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEsc = (event) => {
+            if (event.key === 'Escape') {
+                closeAndRestoreFocus();
+            }
+        };
+        document.addEventListener('keydown', handleEsc);
+        return () => document.removeEventListener('keydown', handleEsc);
+    }, [isOpen]);
+    const renderTrigger = () => {
+        switch (trigger.type) {
+            case 'custom':
+                return (_jsx("button", { ref: triggerRef, type: "button", className: "ncua-dropdown__trigger", onClick: toggleDropdown, children: trigger.children }));
+            case 'icon': {
+                const TriggerIcon = trigger.icon ?? DotsVertical;
+                return (_jsx("button", { ref: triggerRef, type: "button", className: "ncua-dropdown__trigger ncua-dropdown__trigger--icon", onClick: toggleDropdown, children: _jsx(TriggerIcon, {}) }));
+            }
+            case 'avatar':
+                return (_jsx("button", { ref: triggerRef, type: "button", className: "ncua-dropdown__trigger ncua-dropdown__trigger--avatar", onClick: toggleDropdown, children: _jsx("div", { className: "ncua-dropdown__avatar", children: _jsx("img", { src: trigger.avatar, alt: "avatar" }) }) }));
+            case 'button':
+                return (_jsx("button", { ref: triggerRef, type: "button", className: "ncua-dropdown__trigger ncua-dropdown__trigger--button", onClick: toggleDropdown, children: trigger.text }));
+            default:
+                return null;
+        }
+    };
+    const renderHeader = () => {
+        if (!header)
+            return null;
+        if (header.type === 'avatar' && header.avatar) {
+            return (_jsx("div", { className: "ncua-dropdown__header", children: _jsxs("div", { className: "ncua-dropdown__header-avatar-group", children: [_jsx("div", { className: "ncua-dropdown__avatar", children: _jsx("img", { src: header.avatar, alt: "avatar" }) }), _jsxs("div", { className: "ncua-dropdown__header-text", children: [header.title && _jsx("div", { className: "ncua-dropdown__header-title", children: header.title }), header.subtitle && _jsx("div", { className: "ncua-dropdown__header-subtitle", children: header.subtitle })] })] }) }));
+        }
+        if (header.type === 'text' && header.title) {
+            return (_jsx("div", { className: "ncua-dropdown__header", children: _jsx("div", { className: "ncua-dropdown__header-title", children: header.title }) }));
+        }
+        return null;
+    };
+    const renderActionItem = (item) => {
+        const ItemIcon = item.icon;
+        const itemClasses = [
+            'ncua-dropdown__item',
+            item.disabled ? 'is-disabled' : '',
+            item.type === 'danger' ? 'is-danger' : '',
+            item.className,
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (_jsx("button", { type: "button", className: itemClasses, onClick: () => handleClickItem(item), disabled: item.disabled, children: _jsxs("div", { className: "ncua-dropdown__item-content", children: [_jsxs("div", { className: "ncua-dropdown__item-text-group", children: [ItemIcon && _jsx(ItemIcon, { className: "ncua-dropdown__item-icon" }), _jsx("span", { className: "ncua-dropdown__item-text", children: item.text })] }), item.shortcut && _jsx("span", { className: "ncua-dropdown__item-shortcut", children: item.shortcut })] }) }, item.id));
+    };
+    const toggleVisibility = (id) => {
+        setDraft((prev) => {
+            if (!prev)
+                return prev;
+            return {
+                ...prev,
+                visibility: { ...prev.visibility, [id]: !prev.visibility[id] },
+            };
+        });
+    };
+    const handleMoveBy = (id, delta) => {
+        setDraft((prev) => {
+            if (!prev)
+                return prev;
+            const fromIndex = prev.order.indexOf(id);
+            if (fromIndex === -1)
+                return prev;
+            const toIndex = fromIndex + delta;
+            if (toIndex < 0 || toIndex >= prev.order.length)
+                return prev;
+            const next = [...prev.order];
+            const [moved] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, moved);
+            return { ...prev, order: next };
+        });
+    };
+    const handleApply = () => {
+        if (variant !== 'config' || !draft)
+            return;
+        if (props.variant === 'config') {
+            props.onApply(applyDraftToItems(groups, draft));
+        }
+        closeAndRestoreFocus();
+    };
+    const renderConfigItem = (item, sortable) => (_jsx(SortableConfigItem, { item: item, isVisible: draft?.visibility[item.id] ?? true, showVisibilityToggle: item.visible !== undefined && !item.required, sortable: sortable, dropdownId: dropdownId, onToggleVisibility: toggleVisibility, onMoveBy: handleMoveBy }, item.id));
+    const renderFooter = () => {
+        if (variant !== 'config' || !draft || props.variant !== 'config')
+            return null;
+        const original = initDraftState(groups);
+        const enabled = hasDraftChanged(original, draft);
+        const text = props.applyButtonText ?? '설정 완료';
+        return (_jsx("div", { className: "ncua-dropdown__footer", children: _jsx(Button, { hierarchy: "secondary", size: "xs", onClick: handleApply, disabled: !enabled, label: text }) }));
+    };
+    const dropdownClasses = ['ncua-dropdown', className, align === 'right' ? 'ncua-dropdown--right' : '']
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [renderTrigger(), isOpen && (_jsxs("div", { className: "ncua-dropdown__menu", role: variant === 'config' ? 'dialog' : 'menu', "aria-label": variant === 'config' ? '설정' : undefined, children: [renderHeader(), _jsx("div", { ref: menuItemsRef, className: "ncua-dropdown__menu-items", children: groups.map((group) => {
+                            // config variant uses draft.order to drive the rendered order
+                            const orderedItems = variant === 'config' && draft
+                                ? draft.order
+                                    .map((id) => group.items.find((i) => i.id === id))
+                                    .filter((i) => i !== undefined)
+                                : group.items;
+                            return (_jsx("div", { className: "ncua-dropdown__group", children: orderedItems.map((item) => variant === 'config' ? renderConfigItem(item, group.sortable === true) : renderActionItem(item)) }, group.items[0]?.id));
+                        }) }), renderFooter()] }))] }));
+};

package/dist/temp/src/components/overlays/dropdown/__tests__/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/overlays/dropdown/__tests__/utils.test.js

@@ -0,0 +1,122 @@
+import { describe, expect, it } from 'vitest';
+import { applyDraftToItems, arrayMoveById, hasDraftChanged, initDraftState } from '../utils';
+describe('arrayMoveById', () => {
+    it('fromId를 toId 위치로 이동시킨다', () => {
+        const order = ['a', 'b', 'c', 'd'];
+        expect(arrayMoveById(order, 'a', 'c')).toEqual(['b', 'c', 'a', 'd']);
+    });
+    it('같은 id로 이동 시 원본을 그대로 반환한다', () => {
+        const order = ['a', 'b', 'c'];
+        expect(arrayMoveById(order, 'b', 'b')).toEqual(['a', 'b', 'c']);
+    });
+    it('존재하지 않는 id가 있으면 원본을 그대로 반환한다', () => {
+        const order = ['a', 'b', 'c'];
+        expect(arrayMoveById(order, 'a', 'z')).toEqual(['a', 'b', 'c']);
+        expect(arrayMoveById(order, 'z', 'a')).toEqual(['a', 'b', 'c']);
+    });
+    it('원본 배열을 변형하지 않는다 (immutable)', () => {
+        const order = ['a', 'b', 'c'];
+        arrayMoveById(order, 'a', 'c');
+        expect(order).toEqual(['a', 'b', 'c']);
+    });
+});
+describe('initDraftState', () => {
+    it('groups의 모든 item id를 순서대로 order에 담는다', () => {
+        const groups = [
+            {
+                items: [
+                    { id: 'a', text: 'A' },
+                    { id: 'b', text: 'B' },
+                ],
+            },
+            { items: [{ id: 'c', text: 'C' }] },
+        ];
+        expect(initDraftState(groups).order).toEqual(['a', 'b', 'c']);
+    });
+    it('item.visible이 정의되지 않았으면 visibility는 true', () => {
+        const groups = [{ items: [{ id: 'a', text: 'A' }] }];
+        expect(initDraftState(groups).visibility).toEqual({ a: true });
+    });
+    it('item.visible이 false면 visibility는 false', () => {
+        const groups = [
+            {
+                items: [
+                    { id: 'a', text: 'A', visible: false },
+                    { id: 'b', text: 'B', visible: true },
+                ],
+            },
+        ];
+        expect(initDraftState(groups).visibility).toEqual({ a: false, b: true });
+    });
+});
+describe('applyDraftToItems', () => {
+    it('draft.order 순서로 items를 재배열한다', () => {
+        const groups = [
+            {
+                items: [
+                    { id: 'a', text: 'A' },
+                    { id: 'b', text: 'B' },
+                    { id: 'c', text: 'C' },
+                ],
+            },
+        ];
+        const draft = { order: ['c', 'a', 'b'], visibility: { a: true, b: true, c: true } };
+        const result = applyDraftToItems(groups, draft);
+        expect(result.map((i) => i.id)).toEqual(['c', 'a', 'b']);
+    });
+    it('draft.visibility 값을 각 item.visible에 반영한다', () => {
+        const groups = [
+            {
+                items: [
+                    { id: 'a', text: 'A', visible: true },
+                    { id: 'b', text: 'B', visible: true },
+                ],
+            },
+        ];
+        const draft = { order: ['a', 'b'], visibility: { a: false, b: true } };
+        const result = applyDraftToItems(groups, draft);
+        expect(result[0].visible).toBe(false);
+        expect(result[1].visible).toBe(true);
+    });
+    it('item의 다른 필드 (id, text, icon 등)는 그대로 보존한다', () => {
+        const groups = [{ items: [{ id: 'a', text: 'Alpha', shortcut: 'Cmd+A' }] }];
+        const draft = { order: ['a'], visibility: { a: true } };
+        const result = applyDraftToItems(groups, draft);
+        expect(result[0]).toEqual({ id: 'a', text: 'Alpha', shortcut: 'Cmd+A' });
+    });
+    it('item.visible이 원래 undefined였으면 결과도 visible 필드 없이 보존한다', () => {
+        const groups = [{ items: [{ id: 'a', text: 'A' }] }];
+        const draft = { order: ['a'], visibility: { a: true } };
+        const result = applyDraftToItems(groups, draft);
+        expect(result[0].visible).toBeUndefined();
+    });
+});
+describe('hasDraftChanged', () => {
+    it('original과 동일하면 false', () => {
+        const groups = [
+            {
+                items: [
+                    { id: 'a', text: 'A', visible: true },
+                    { id: 'b', text: 'B', visible: false },
+                ],
+            },
+        ];
+        const original = initDraftState(groups);
+        expect(hasDraftChanged(original, original)).toBe(false);
+    });
+    it('order가 다르면 true', () => {
+        const original = { order: ['a', 'b'], visibility: { a: true, b: true } };
+        const draft = { order: ['b', 'a'], visibility: { a: true, b: true } };
+        expect(hasDraftChanged(original, draft)).toBe(true);
+    });
+    it('visibility가 다르면 true', () => {
+        const original = { order: ['a', 'b'], visibility: { a: true, b: true } };
+        const draft = { order: ['a', 'b'], visibility: { a: false, b: true } };
+        expect(hasDraftChanged(original, draft)).toBe(true);
+    });
+    it('order·visibility 둘 다 같으면 false', () => {
+        const original = { order: ['a', 'b'], visibility: { a: true, b: false } };
+        const draft = { order: ['a', 'b'], visibility: { a: true, b: false } };
+        expect(hasDraftChanged(original, draft)).toBe(false);
+    });
+});

package/dist/temp/src/components/overlays/dropdown/utils.d.ts

@@ -0,0 +1,32 @@
+import type { DropdownGroup, DropdownItemType } from './Dropdown';
+/**
+ * 배열에서 fromId 위치의 요소를 toId 위치로 이동.
+ * id 중 하나라도 없으면 원본 그대로 반환. immutable.
+ */
+export declare function arrayMoveById(order: string[], fromId: string, toId: string): string[];
+/**
+ * fromId 요소를 toId 기준 edge('top'=직전, 'bottom'=직후)에 삽입.
+ * indicator 위치와 정확히 일치하는 reorder를 위해 사용.
+ */
+export declare function arrayReorderByEdge(order: string[], fromId: string, toId: string, edge: 'top' | 'bottom'): string[];
+export type DraftState = {
+    order: string[];
+    visibility: Record<string, boolean>;
+};
+/**
+ * groups를 받아 초기 draft state를 만든다.
+ * - order: 모든 그룹·아이템의 id를 순서대로 평탄화
+ * - visibility: item.visible (undefined면 true)
+ */
+export declare function initDraftState(groups: DropdownGroup[]): DraftState;
+/**
+ * 모든 그룹의 items를 평탄화하고, draft.order 순서로 재배열.
+ * 각 item의 visible은 원래 visible이 정의되어 있던 경우에만 draft.visibility 값으로 갱신.
+ * 그 외 필드는 props 원본 그대로 보존.
+ */
+export declare function applyDraftToItems(groups: DropdownGroup[], draft: DraftState): DropdownItemType[];
+/**
+ * draft가 original과 비교해 변경되었는지 판단.
+ * order 배열 또는 visibility 객체 중 하나라도 다르면 true.
+ */
+export declare function hasDraftChanged(original: DraftState, draft: DraftState): boolean;

package/dist/temp/src/components/overlays/dropdown/utils.js

@@ -0,0 +1,89 @@
+/**
+ * 배열에서 fromId 위치의 요소를 toId 위치로 이동.
+ * id 중 하나라도 없으면 원본 그대로 반환. immutable.
+ */
+export function arrayMoveById(order, fromId, toId) {
+    const fromIndex = order.indexOf(fromId);
+    const toIndex = order.indexOf(toId);
+    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+        return order;
+    }
+    const next = [...order];
+    const [moved] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, moved);
+    return next;
+}
+/**
+ * fromId 요소를 toId 기준 edge('top'=직전, 'bottom'=직후)에 삽입.
+ * indicator 위치와 정확히 일치하는 reorder를 위해 사용.
+ */
+export function arrayReorderByEdge(order, fromId, toId, edge) {
+    if (fromId === toId)
+        return order;
+    const fromIndex = order.indexOf(fromId);
+    const toIndex = order.indexOf(toId);
+    if (fromIndex === -1 || toIndex === -1)
+        return order;
+    const next = [...order];
+    next.splice(fromIndex, 1);
+    // 목표 인덱스 재계산 (제거로 인해 toIndex가 한 칸 당겨질 수 있음)
+    const adjustedToIndex = fromIndex < toIndex ? toIndex - 1 : toIndex;
+    const insertIndex = edge === 'bottom' ? adjustedToIndex + 1 : adjustedToIndex;
+    next.splice(insertIndex, 0, fromId);
+    return next;
+}
+/**
+ * groups를 받아 초기 draft state를 만든다.
+ * - order: 모든 그룹·아이템의 id를 순서대로 평탄화
+ * - visibility: item.visible (undefined면 true)
+ */
+export function initDraftState(groups) {
+    const order = [];
+    const visibility = {};
+    for (const group of groups) {
+        for (const item of group.items) {
+            order.push(item.id);
+            visibility[item.id] = item.visible ?? true;
+        }
+    }
+    return { order, visibility };
+}
+/**
+ * 모든 그룹의 items를 평탄화하고, draft.order 순서로 재배열.
+ * 각 item의 visible은 원래 visible이 정의되어 있던 경우에만 draft.visibility 값으로 갱신.
+ * 그 외 필드는 props 원본 그대로 보존.
+ */
+export function applyDraftToItems(groups, draft) {
+    const itemsById = new Map();
+    for (const group of groups) {
+        for (const item of group.items) {
+            itemsById.set(item.id, item);
+        }
+    }
+    return draft.order
+        .map((id) => itemsById.get(id))
+        .filter((item) => item !== undefined)
+        .map((item) => {
+        if (item.visible === undefined)
+            return item;
+        return { ...item, visible: draft.visibility[item.id] };
+    });
+}
+/**
+ * draft가 original과 비교해 변경되었는지 판단.
+ * order 배열 또는 visibility 객체 중 하나라도 다르면 true.
+ */
+export function hasDraftChanged(original, draft) {
+    if (original.order.length !== draft.order.length)
+        return true;
+    for (let i = 0; i < original.order.length; i++) {
+        if (original.order[i] !== draft.order[i])
+            return true;
+    }
+    const keys = new Set([...Object.keys(original.visibility), ...Object.keys(draft.visibility)]);
+    for (const key of keys) {
+        if (original.visibility[key] !== draft.visibility[key])
+            return true;
+    }
+    return false;
+}

package/dist/{types/src/components → temp/src/components/overlays}/modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-import type { SlotIconComponent } from '../../types/side-slot';
-import { type FeaturedIconColor, type FeaturedIconTheme } from '../featured-icon';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import { type FeaturedIconColor, type FeaturedIconTheme } from '../../image-and-icons/featured-icon';
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type ModalHeaderAlign = 'left' | 'center' | 'horizontal';
 type ModalActionsAlign = 'left' | 'center' | 'right' | 'stretch';

package/dist/temp/src/components/{modal → overlays/modal}/Modal.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
-import { ButtonCloseX } from '../button/ButtonCloseX';
-import { FeaturedIcon } from '../featured-icon';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon } from '../../image-and-icons/featured-icon';
 const Modal = ({ isOpen, onClose, children, size = 'md', closeOnBackdropClick = false, closeOnEsc = true, className, zIndex, ...restProps }) => {
     const modalRef = useRef(null);
     const handleBackdropClick = (e) => {

package/dist/temp/src/components/{notification → overlays/notification}/FloatingNotification.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { MEDIA_QUERY } from '../../constant/breakpoint';
-import { useMediaQuery } from '../../hooks/useMediaQuery';
-import { Button } from '../button';
-import { ButtonCloseX } from '../button/ButtonCloseX';
-import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+import { MEDIA_QUERY } from '../../../constant/breakpoint';
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
+import { Button } from '../../action/button';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
+import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
 const iconMap = {
     neutral: Pin02,
     error: AlertTriangle,

package/dist/temp/src/components/{notification → overlays/notification}/FullWidthNotification.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { COLOR } from '../../../constant/color';
+import { COLOR } from '../../../../constant/color';
 const iconMap = {
     neutral: MessageChatSquare,
     error: AlertTriangle,

package/dist/temp/src/components/{notification → overlays/notification}/MessageNotification.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import type { SlotIconComponent } from '../../types/side-slot';
+import type { SlotIconComponent } from '../../../types/side-slot';
 import type { NotificationAction, NotificationColor } from './Notification';
 interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**

package/dist/temp/src/components/{notification → overlays/notification}/MessageNotification.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Button } from '../button';
-import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+import { COLOR } from '../../../../constant/color';
+import { Button } from '../../action/button';
+import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
 const iconMap = {
     neutral: Pin02,
     error: AlertTriangle,

package/dist/temp/src/components/{notification → overlays/notification}/Notification.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import type { ColorTone } from '../../../constant/color';
-import type { SlotIconComponent } from '../../types/side-slot';
-import type { ButtonTheme } from '../button';
+import type { ColorTone } from '../../../../constant/color';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import type { ButtonTheme } from '../../action/button';
 type NotificationType = 'floating' | 'full-width' | 'message';
 type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'info'>;
 type NotificationSize = 'desktop' | 'mobile';

package/dist/temp/src/components/{tooltip → overlays/tooltip}/Tooltip.js

@@ -3,7 +3,7 @@ import { AlertCircle, AlertCircleFill, HelpCircle, HelpCircleFill } from '@ncds/
 import classNames from 'classnames';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { ButtonCloseX } from '../button/ButtonCloseX';
+import { ButtonCloseX } from '../../action/button/ButtonCloseX';
 const ICON_SIZE_SM = 14;
 const ICON_SIZE_DEFAULT = 16;
 // HTML 구현체(assets/scripts/tooltip)와 동일한 상수

package/dist/temp/src/components/select-dropdown/SelectDropdown.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
-import { Button } from '../button';
+import { Button } from '../action/button';
 const SelectDropdown = forwardRef(({ isOpen, direction = 'down', size = 'xs', options, value, focusedIndex, maxHeight, listboxId = 'selectbox-options-default', onOptionSelect, onMouseMove, isKeyboardNavigation, onOptionHover, children, multiple = false, showFooterButtons = false, selectAllButtonText = '전체 선택', onSelectAll, onEdit, onComplete, className, activeDescendantId, componentType, align = 'left', ...props }, ref) => {
     if (!isOpen)
         return null;

package/dist/temp/src/components/tab/TabButton.d.ts

@@ -1,5 +1,5 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import { type BadgeProps } from '../badge/Badge';
+import { type BadgeProps } from '../feedback-and-status/badge/Badge';
 type TabSize = 'sm' | 'md' | 'lg';
 type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 type BaseTabButtonProps = {

package/dist/temp/src/components/tab/TabButton.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { XClose } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
-import { Badge } from '../badge/Badge';
+import { Badge } from '../feedback-and-status/badge/Badge';
 const TabButton = ({ id, label, size = 'sm', tabButtonType, type, isActive = false, badgeInfo, className, children, ...props }) => {
     const componentClassName = classNames('ncua-tab-button', { 'is-active': isActive }, className);
     if ('href' in props && props.href) {