@loword/loword-design-system 0.2.0 → 0.2.2

package/dist/components/LDDataCalendar/LDDataCalendar.js

@@ -17,7 +17,7 @@ const Next = ({ children, className, ...props }) => (_jsx(LDDataCalendarBase.Nex
 /** 요일과 날짜 셀을 7열로 렌더링하는 그리드입니다. */
 const Grid = ({ weekdayClassName, ...props }) => (_jsx(LDDataCalendarBase.Grid, { weekdayClassName: cn('py-[10px] display14 text-mono500 mobile:py-1 mobile:display12', weekdayClassName), ...props }));
 /** 날짜와 해당 날짜의 데이터를 표시하는 셀입니다. */
-const Cell = ({ className, dateClassName, ...props }) => (_jsx(LDDataCalendarBase.Cell, { className: cn('flex min-h-[100px] flex-col gap-[15px] py-[10px] data-outside:*:text-mono400 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-outside:font-normal data-outside:text-mono400 data-weekend:text-danger600 data-outside:data-weekend:text-danger400 mobile:display12', dateClassName), ...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 Detail = ({ className, ...props }) => (_jsx(LDDataCalendarBase.Detail, { className: cn('mt-md hidden rounded-[10px] bg-mono50 p-md mobile:block', className), ...props }));
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"LDLNB.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNB.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAIpE,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD;;;;GAIG;AACH,QAAA,MAAM,KAAK,GAAI,yKAgBZ,UAAU,4CAqGZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"LDLNB.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNB.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIpD,OAAgB,EAAE,KAAK,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAGpE,MAAM,WAAW,UAAU;IACzB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,yBAAyB;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,yDAAyD;IACzD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,2EAA2E;IAC3E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAWD;;;;GAIG;AACH,QAAA,MAAM,KAAK,GAAI,yKAgBZ,UAAU,4CAoGZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/LDLNB/LDLNB.js

@@ -6,7 +6,6 @@ import { useEffect, useState } from 'react';
 import LDDrawer from '../../components/LDDrawer/LDDrawer.js';
 import LNBBase from '../../components/LDLNB/LNBBase.js';
 import cn from '../../utils/cn.js';
-import { isActivePath } from '../../utils/utils.js';
 // mobile: variant(max-width: calc(--size_md - 1px) = 767px)와 동일 기준
 const MOBILE_QUERY = '(max-width: 767px)';
 // tablet: variant(--size_md 768px ~ calc(--size_lg - 1px) 991px)와 동일 기준
@@ -39,7 +38,7 @@ const LDLNB = ({ items, pathname, as = Link, onNavigate, name, email, profileIma
         };
     }, []);
     const resolvedSize = size ?? (isTablet ? TABLET_SIZE : PC_SIZE);
-    const nav = (isMobile) => (_jsx(LNBBase.Provider, { isMobile: isMobile, items: items, pathname: pathname, defaultCollapsed: isMobile ? false : defaultCollapsed, size: resolvedSize, minWidth: minWidth, children: _jsxs(LNBBase.Root, { className: className, trigger: _jsx(LNBBase.Trigger, {}), children: [_jsx(LNBBase.Header, { name: name, email: email, profileImage: profileImage, handleLogout: handleLogout }), isMobile && children, _jsx(LNBBase.Content, { children: items.map((group) => (_jsx(LNBBase.Group, { label: group.label, noSlider: group.noSlider, children: _jsx(LNBBase.Menu, { label: group.label, noSlider: group.noSlider, tabCount: group.tabs?.length ?? 0, children: group.tabs?.map((tab) => (_jsx(LNBBase.MenuItem, { as: as, href: tab.path, icon: tab.icon, isActive: isActivePath(pathname, tab.path), onClick: () => {
+    const nav = (isMobile) => (_jsx(LNBBase.Provider, { isMobile: isMobile, items: items, pathname: pathname, defaultCollapsed: isMobile ? false : defaultCollapsed, size: resolvedSize, minWidth: minWidth, children: _jsxs(LNBBase.Root, { className: className, trigger: _jsx(LNBBase.Trigger, {}), children: [_jsx(LNBBase.Header, { name: name, email: email, profileImage: profileImage, handleLogout: handleLogout }), isMobile && children, _jsx(LNBBase.Content, { children: items.map((group) => (_jsx(LNBBase.Group, { label: group.label, noSlider: group.noSlider, children: _jsx(LNBBase.Menu, { label: group.label, noSlider: group.noSlider, tabCount: group.tabs?.length ?? 0, children: group.tabs?.map((tab) => (_jsx(LNBBase.MenuItem, { as: as, href: tab.path, icon: tab.icon, onClick: () => {
                                     onNavigate?.(tab.path);
                                     setOpen(false);
                                 }, children: tab.label }, tab.path))) }) }, group.label))) }), _jsx(LNBBase.ResizeWidthBar, { className: "absolute inset-y-0 right-0" })] }) }));

package/dist/components/LDLNB/LNBBase.d.ts

@@ -58,7 +58,6 @@ interface MenuProps {
 interface MenuItemProps {
     as?: ElementType;
     href: string;
-    isActive?: boolean;
     children: ReactNode;
     icon?: ReactNode;
     className?: string;
@@ -75,7 +74,7 @@ declare const LNBBase: {
     Content: ({ children, className }: ContentProps) => import("react/jsx-runtime").JSX.Element;
     Group: ({ children, label, noSlider }: GroupProps) => import("react/jsx-runtime").JSX.Element;
     Menu: ({ children, label, noSlider, tabCount }: MenuProps) => import("react/jsx-runtime").JSX.Element;
-    MenuItem: ({ as: Comp, href, isActive, children, icon, className, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    MenuItem: ({ as: Comp, href, children, icon, className, ...rest }: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
     ResizeWidthBar: ({ className }: IResizeWidthBar) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default LNBBase;

package/dist/components/LDLNB/LNBBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LNBBase.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAEV,WAAW,EAEX,SAAS,EAEV,MAAM,OAAO,CAAC;AAoBf,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiDD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgCD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgCD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmDD,QAAA,MAAM,OAAO;2FApYV,aAAa;6CAgGgC,SAAS;6BAkCzB,YAAY;0DAgCiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA4CG,SAAS;iFA6CjE,aAAa;oCA0BuB,eAAe;CA2DrD,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"LNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LNBBase.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAEV,WAAW,EAEX,SAAS,EAEV,MAAM,OAAO,CAAC;AAoBf,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmDD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0GD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAgCD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAgCD,UAAU,eAAe;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAmDD,QAAA,MAAM,OAAO;2FAhZV,aAAa;6CA6GgC,SAAS;6BAkCzB,YAAY;0DAgCiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA4CG,SAAS;uEA2CjE,aAAa;oCA2BuB,eAAe;CA2DrD,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/LDLNB/LNBBase.js

@@ -5,7 +5,7 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState, }
 import LDAvatar from '../../components/LDAvatar/LDAvatar.js';
 import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
 import cn from '../../utils/cn.js';
-import { isActivePath } from '../../utils/utils.js';
+import { findActivePath } from '../../utils/utils.js';
 const DEFAULT_MIN_WIDTH = 144;
 const DEFAULT_SIZE = 300;
 const LNBContext = createContext(null);
@@ -36,6 +36,9 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
         setOpenGroups((prev) => prev.includes(label) ? prev.filter((g) => g !== label) : [...prev, label]);
     }, []);
     const isGroupOpen = useCallback((label) => openGroups.includes(label), [openGroups]);
+    // 항목마다 따로 판정하면 `/admin` 과 `/admin/group` 이 동시에 켜진다.
+    // 후보 전체에서 가장 구체적인 경로 하나만 골라 MenuItem·그룹 펼침이 함께 쓴다.
+    const activePath = useMemo(() => findActivePath(pathname, items.flatMap((item) => item.tabs?.map((tab) => tab.path) ?? [])), [items, pathname]);
     // size(펼침 기본 너비)는 뷰포트 구간에 따라 바뀐다. width는 useState 초기값이라
     // 그대로 두면 마운트 시점 값에 고정되므로, size가 바뀌면 새 기본값으로 맞춘다.
     useEffect(() => {
@@ -48,7 +51,7 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
             setOpenGroups([]);
             return;
         }
-        const matchedLabel = items.find((item) => item.tabs?.some((tab) => isActivePath(pathname, tab.path)))?.label;
+        const matchedLabel = items.find((item) => item.tabs?.some((tab) => tab.path === activePath))?.label;
         if (matchedLabel && !openGroups.includes(matchedLabel)) {
             setOpenGroups((prev) => [...prev, matchedLabel]);
         }
@@ -57,6 +60,7 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
     }, [pathname]);
     const contextValue = useMemo(() => ({
         isMobile,
+        activePath,
         collapsed,
         toggleCollapsed,
         openGroups,
@@ -67,6 +71,7 @@ const Provider = ({ children, isMobile, items = [], pathname = '', size = DEFAUL
         size,
     }), [
         isMobile,
+        activePath,
         collapsed,
         toggleCollapsed,
         openGroups,
@@ -115,8 +120,9 @@ const Menu = ({ children, label, noSlider, tabCount = 0 }) => {
                 : 'auto',
         }, children: children }));
 };
-const MenuItem = ({ as: Comp = 'a', href, isActive, children, icon, className, ...rest }) => {
-    const { collapsed } = useLNBContext();
+const MenuItem = ({ as: Comp = 'a', href, children, icon, className, ...rest }) => {
+    const { collapsed, activePath } = useLNBContext();
+    const isActive = href === activePath;
     return (_jsxs(Comp, { href: href, className: cn('flex w-full items-center gap-sm p-sm display16 bold mobile:display14 mobile:medium', 'cursor-pointer rounded-[5px] text-neutral500 ld-transition hover:bg-neutral100 hover:text-neutral900', 'overflow-hidden whitespace-nowrap', collapsed && 'justify-center', isActive &&
             'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: [_jsx(RenderIcon, { className: "icon-md", children: icon }), !collapsed && children] }));
 };

package/dist/components/LDTable/HeadlessTable.d.ts

@@ -4,6 +4,10 @@ export interface TableColumnMeta {
     headerAlign?: 'left' | 'center' | 'right';
     /** 체크박스/액션 컬럼처럼 헤더에 시각적 텍스트가 없을 때 스크린리더에만 노출할 이름 */
     headerScreenReaderLabel?: string;
+    /** 이 컬럼 헤더 셀(`<th>`)에 추가할 클래스 — `classNames.headCell` 뒤에 병합된다 */
+    headerClassName?: string;
+    /** 이 컬럼 바디 셀(`<td>`)에 추가할 클래스 — `classNames.cell` 뒤에 병합된다 */
+    cellClassName?: string;
 }
 export type TOpenRowState = Record<string | number, boolean>;
 export interface HeadlessTableProps<TData, TColumn> {

package/dist/components/LDTable/HeadlessTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeadlessTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/HeadlessTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"HeadlessTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/HeadlessTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/LDTable/HeadlessTable.js

@@ -124,6 +124,16 @@ const HeadlessTable = ({ columns, data, rowCount, paginationState, onPageChange,
             id: c.id,
             width: headerCells[i]?.getBoundingClientRect().width ?? 0,
             min: c.columnDef.minSize ?? 0,
+            /**
+             * NOTE: size 미지정 = 남는 공간 흡수 컬럼.
+             * 이 컬럼에 px를 기록하면 columnWidths의 undefined가 사라져
+             * tableStyle이 [CASE 2] 고정폭으로 뒤집히고, 그 뒤로는 viewport를
+             * 넓혀도 테이블이 드래그 시점 폭에 갇힌다.
+             * 그래서 배분 계산에는 참여시키되 columnSizing에는 쓰지 않는다.
+             * 남는 공간은 table-fixed가 이 컬럼에 주고, 그 값은 아래에서
+             * 계산한 width와 같다(총합이 컨테이너 폭으로 보존되므로).
+             */
+            absorbs: c.columnDef.size === undefined,
         }));
         const index = cols.findIndex((c) => c.id === columnId);
         const target = cols[index];
@@ -148,7 +158,8 @@ const HeadlessTable = ({ columns, data, rowCount, paginationState, onPageChange,
                     ideal -= delta * (shareOf(c) / shareTotal);
                 }
                 const width = Math.round(ideal) - assigned;
-                next[c.id] = width;
+                if (!c.absorbs)
+                    next[c.id] = width;
                 assigned += width;
             });
             table.setColumnSizing((old) => ({ ...old, ...next }));

package/dist/components/LDTable/LDCollapsibleTanstackTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDCollapsibleTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDCollapsibleTanstackTable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAK5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAC3E,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,SAAS,CAAC;IAC9C,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,QAAA,MAAM,0BAA0B,GAAI,KAAK,EAAE,OAAO,EAAE,4OAiBjD,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAC,4CAoMjD,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"LDCollapsibleTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDCollapsibleTanstackTable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAK5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAC3E,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,kBAAkB,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,SAAS,CAAC;IAC9C,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,QAAA,MAAM,0BAA0B,GAAI,KAAK,EAAE,OAAO,EAAE,4OAiBjD,+BAA+B,CAAC,KAAK,EAAE,OAAO,CAAC,4CA2MjD,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/dist/components/LDTable/LDCollapsibleTanstackTable.js

@@ -13,7 +13,7 @@ const LDCollapsibleTanstackTable = ({ columns, data, rowCount, paginationState,
                     root: cn('table-fixed', classNames?.root),
                 }, children: [_jsx(LDTable.Header, { className: classNames?.thead, children: headerGroups.map((hg) => (_jsx(LDTable.HeaderRow, { className: cn('group w-full', classNames?.headRow), children: hg.headers.map((header) => {
                                 const h = getHeader(header);
-                                return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [_jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
+                                return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell, h.meta?.headerClassName), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [_jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
                                                 ? 'justify-end'
                                                 : h.meta?.headerAlign === 'left'
                                                     ? 'justify-start'
@@ -25,7 +25,7 @@ const LDCollapsibleTanstackTable = ({ columns, data, rowCount, paginationState,
                                         row.toggleSelected();
                                     }, children: row.getVisibleCells().map((cell, idx) => {
                                         const c = getCell(cell);
-                                        return (_jsxs(LDTable.Cell, { className: classNames?.cell, children: [_jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
+                                        return (_jsxs(LDTable.Cell, { className: cn(classNames?.cell, c.meta?.cellClassName), children: [_jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
                                                         ? 'justify-start'
                                                         : c.meta?.headerAlign === 'right'
                                                             ? 'justify-end'

package/dist/components/LDTable/LDTanstackTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDTanstackTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAW5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAChE,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,eAAe,GAAI,KAAK,EAAE,OAAO,EAAE,0OAiBtC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,4CAgMtC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"LDTanstackTable.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/LDTanstackTable.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAsB,EACpB,KAAK,kBAAkB,EACxB,MAAM,oCAAoC,CAAC;AAW5C,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,sBAAsB;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAE,SAAQ,IAAI,CAChE,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAClC,UAAU,CACX;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,eAAe,GAAI,KAAK,EAAE,OAAO,EAAE,0OAiBtC,oBAAoB,CAAC,KAAK,EAAE,OAAO,CAAC,4CAoMtC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/LDTable/LDTanstackTable.js

@@ -27,7 +27,7 @@ const LDTanstackTable = ({ columns, data, rowCount, paginationState, onPageChang
             const RowComp = enableRowDragging ? SortableRow : PlainRow;
             const bodyRows = rows.map((row) => (_jsx(RowComp, { rowId: row.id, selected: row.getIsSelected(), className: classNames?.row, onClick: () => row.toggleSelected(), children: row.getVisibleCells().map((cell) => {
                     const c = getCell(cell);
-                    return (_jsx(LDTable.Cell, { className: classNames?.cell, children: _jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
+                    return (_jsx(LDTable.Cell, { className: cn(classNames?.cell, c.meta?.cellClassName), children: _jsx("div", { className: cn('flex w-full items-center', c.meta?.headerAlign === 'left'
                                 ? 'justify-start'
                                 : c.meta?.headerAlign === 'right'
                                     ? 'justify-end'
@@ -38,7 +38,7 @@ const LDTanstackTable = ({ columns, data, rowCount, paginationState, onPageChang
                     root: cn('table-fixed', classNames?.root),
                 }, children: [_jsx(LDTable.Header, { className: classNames?.thead, children: headerGroups.map((hg) => (_jsx(LDTable.HeaderRow, { className: cn('group w-full', classNames?.headRow), children: hg.headers.map((header) => {
                                 const h = getHeader(header);
-                                return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [h.meta?.headerScreenReaderLabel && (_jsx("span", { className: "sr-only", children: h.meta.headerScreenReaderLabel })), _jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
+                                return (_jsxs(LDTable.HeaderCell, { className: cn('relative overflow-hidden', h.canSort && 'cursor-pointer', classNames?.headCell, h.meta?.headerClassName), style: { width: h.size }, onClick: h.toggleSortingHandler, children: [h.meta?.headerScreenReaderLabel && (_jsx("span", { className: "sr-only", children: h.meta.headerScreenReaderLabel })), _jsxs("span", { className: cn('flex items-center gap-0.5 align-middle', h.meta?.headerAlign === 'right'
                                                 ? 'justify-end'
                                                 : h.meta?.headerAlign === 'left'
                                                     ? 'justify-start'

package/dist/components/LDTable/TableRowDnd.d.ts

@@ -19,8 +19,8 @@ export interface TableRowProps {
 export declare const PlainRow: ({ selected, className, onClick, children, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
 /** 드래그가 켜져 있을 때의 행 */
 export declare const SortableRow: ({ rowId, selected, className, onClick, children, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
-export declare const LDRowDragHandle: ({ rowId, className, }: {
-    rowId: string;
+export declare const LDRowDragHandle: ({ className, }: {
     className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
+    rowId?: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=TableRowDnd.d.ts.map

package/dist/components/LDTable/TableRowDnd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRowDnd.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/TableRowDnd.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,gBAAgB,EAGtB,MAAM,eAAe,CAAC;AAUvB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,eAAO,MAAM,cAAc,GAAI,6BAG5B;IACD,YAAY,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7E,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAwBA,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAAI,uBAGjC;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAIA,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6DAA6D;AAC7D,eAAO,MAAM,QAAQ,GAAI,6CAKtB,aAAa,4CAIf,CAAC;AAEF,sBAAsB;AACtB,eAAO,MAAM,WAAW,GAAI,oDAMzB,aAAa,4CAmBf,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,uBAG7B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAoBA,CAAC"}
+{"version":3,"file":"TableRowDnd.d.ts","sourceRoot":"","sources":["../../../src/components/LDTable/TableRowDnd.tsx"],"names":[],"mappings":"AAGA,OAAO,EAOL,KAAK,gBAAgB,EAGtB,MAAM,eAAe,CAAC;AAWvB,OAAO,EAAiB,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM3E,eAAO,MAAM,cAAc,GAAI,6BAG5B;IACD,YAAY,EAAE,CAAC,QAAQ,EAAE,gBAAgB,EAAE,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC7E,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAwBA,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAAI,uBAGjC;IACD,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,4CAIA,CAAC;AAIF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,6DAA6D;AAC7D,eAAO,MAAM,QAAQ,GAAI,6CAKtB,aAAa,4CAIf,CAAC;AAaF,sBAAsB;AACtB,eAAO,MAAM,WAAW,GAAI,oDAMzB,aAAa,4CAgCf,CAAC;AAIF,eAAO,MAAM,eAAe,GAAI,gBAE7B;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,mDAyBA,CAAC"}

package/dist/components/LDTable/TableRowDnd.js

@@ -5,6 +5,7 @@ import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { GripVertical } from 'lucide-react';
+import { createContext, useContext, useMemo } from 'react';
 import LDTable from '../../components/LDTable/LDTable.js';
 import cn from '../../utils/cn.js';
 // ── DndContext ──
@@ -23,18 +24,21 @@ export const RowDndProvider = ({ onRowDragEnd, children, }) => {
 export const RowSortableProvider = ({ rowIds, children, }) => (_jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: children }));
 /** 드래그가 꺼져 있을 때의 행. `SortableRow`와 prop 모양을 맞춰 교체 가능하게 둔다 */
 export const PlainRow = ({ selected, className, onClick, children, }) => (_jsx(LDTable.Row, { selected: selected, className: className, onClick: onClick, children: children }));
+const RowDragHandleContext = createContext(null);
 /** 드래그가 켜져 있을 때의 행 */
 export const SortableRow = ({ rowId, selected, className, onClick, children, }) => {
-    const { setNodeRef, transform, transition, isDragging } = useSortable({
-        id: rowId,
-    });
-    return (_jsx(LDTable.Row, { ref: setNodeRef, selected: selected, className: cn(isDragging && 'relative z-10 opacity-80', className), onClick: onClick, style: {
-            transform: CSS.Transform.toString(transform),
-            transition: isDragging ? 'none' : transition,
-        }, children: children }));
+    const { setNodeRef, setActivatorNodeRef, attributes, listeners, transform, transition, isDragging, } = useSortable({ id: rowId });
+    const handleContext = useMemo(() => ({ setActivatorNodeRef, attributes, listeners, isDragging }), [setActivatorNodeRef, attributes, listeners, isDragging]);
+    return (_jsx(RowDragHandleContext, { value: handleContext, children: _jsx(LDTable.Row, { ref: setNodeRef, selected: selected, className: cn(isDragging && 'relative z-10 opacity-80', className), onClick: onClick, style: {
+                transform: CSS.Transform.toString(transform),
+                transition: isDragging ? 'none' : transition,
+            }, children: children }) }));
 };
 // ── Handle ──
-export const LDRowDragHandle = ({ rowId, className, }) => {
-    const { attributes, listeners, isDragging } = useSortable({ id: rowId });
-    return (_jsx("button", { type: "button", "aria-label": "\uC21C\uC11C \uBCC0\uACBD", onClick: (e) => e.stopPropagation(), className: cn('flex size-6 touch-none items-center justify-center', 'text-neutral400 ld-transition hover:text-neutral700', isDragging ? 'cursor-grabbing' : 'cursor-grab', className), ...attributes, ...listeners, children: _jsx(GripVertical, { size: 16 }) }));
+export const LDRowDragHandle = ({ className, }) => {
+    const context = useContext(RowDragHandleContext);
+    if (!context)
+        return null;
+    const { setActivatorNodeRef, attributes, listeners, isDragging } = context;
+    return (_jsx("button", { ref: setActivatorNodeRef, type: "button", "aria-label": "\uC21C\uC11C \uBCC0\uACBD", onClick: (e) => e.stopPropagation(), className: cn('flex size-6 touch-none items-center justify-center', 'text-neutral400 ld-transition hover:text-neutral700', isDragging ? 'cursor-grabbing' : 'cursor-grab', className), ...attributes, ...listeners, children: _jsx(GripVertical, { size: 16 }) }));
 };

package/dist/index.css

@@ -65,9 +65,11 @@
     --color-neutral700: #535a64;
     --color-neutral800: #3a3f46;
     --color-neutral900: #191f28;
+    --color-blue100: #b8c9ff;
     --color-blue200: #8fabff;
     --color-blue400: #2158fd;
     --color-blue500: #003fff;
+    --color-blue700: #002699;
     --color-red200: #ff9494;
     --color-red500: #ff4747;
     --color-orange400: #ff7a33;
@@ -78,6 +80,7 @@
     --color-green600: #00de47;
     --color-green700: #00cc41;
     --color-pink500: #ff33d3;
+    --color-pink600: #e61eb8;
     --color-purple500: #7b40c7;
     --color-danger50: #fef7f7;
     --color-danger100: #fdefef;
@@ -462,6 +465,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-1\/4 {
+    top: calc(1 / 4 * 100%);
+  }
   .top-2 {
     top: calc(var(--spacing) * 2);
   }
@@ -519,6 +525,9 @@
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
+  .left-1\/4 {
+    left: calc(1 / 4 * 100%);
+  }
   .left-5 {
     left: calc(var(--spacing) * 5);
   }
@@ -1296,6 +1305,9 @@
   .table {
     display: table;
   }
+  .aspect-4\/3 {
+    aspect-ratio: 4/3;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -1506,6 +1518,9 @@
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
+  .h-50 {
+    height: calc(var(--spacing) * 50);
+  }
   .h-60 {
     height: calc(var(--spacing) * 60);
   }
@@ -1563,6 +1578,9 @@
   .h-\[80vh\] {
     height: 80vh;
   }
+  .h-\[220px\] {
+    height: 220px;
+  }
   .h-\[calc\(100vh-64px\)\] {
     height: calc(100vh - 64px);
   }
@@ -1578,6 +1596,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .max-h-57\.5 {
     max-height: calc(var(--spacing) * 57.5);
   }
@@ -1626,6 +1647,9 @@
   .min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
+  .min-h-25 {
+    min-height: calc(var(--spacing) * 25);
+  }
   .min-h-100 {
     min-height: calc(var(--spacing) * 100);
   }
@@ -1732,6 +1756,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-96 {
+    width: calc(var(--spacing) * 96);
+  }
   .w-99 {
     width: calc(var(--spacing) * 99);
   }
@@ -1741,9 +1768,18 @@
   .w-120 {
     width: calc(var(--spacing) * 120);
   }
+  .w-125 {
+    width: calc(var(--spacing) * 125);
+  }
+  .w-140 {
+    width: calc(var(--spacing) * 140);
+  }
   .w-150 {
     width: calc(var(--spacing) * 150);
   }
+  .w-160 {
+    width: calc(var(--spacing) * 160);
+  }
   .w-\[60px\] {
     width: 60px;
   }
@@ -1852,6 +1888,9 @@
     animation: bell-ring 600ms ease-in-out;
     transform-origin: top center;
   }
+  .origin-center {
+    transform-origin: center;
+  }
   .-translate-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
@@ -1948,6 +1987,9 @@
   .resize {
     resize: both;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2351,6 +2393,9 @@
   .bg-\(--calendar-range-band\) {
     background-color: var(--calendar-range-band);
   }
+  .bg-\[\#1a6dcc\] {
+    background-color: #1a6dcc;
+  }
   .bg-accept600 {
     background-color: var(--color-accept600);
   }
@@ -2378,6 +2423,9 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue100 {
+    background-color: var(--color-blue100);
+  }
   .bg-current {
     background-color: currentcolor;
   }
@@ -2492,12 +2540,43 @@
   .bg-yellow-400 {
     background-color: var(--color-yellow-400);
   }
+  .bg-linear-to-br {
+    --tw-gradient-position: to bottom right;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to bottom right in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-\[linear-gradient\(to_left\,transparent_50\%\,var\(--calendar-range-band\)_50\%\)\] {
     background-image: linear-gradient(to left,transparent 50%,var(--calendar-range-band) 50%);
   }
   .bg-\[linear-gradient\(to_right\,transparent_50\%\,var\(--calendar-range-band\)_50\%\)\] {
     background-image: linear-gradient(to right,transparent 50%,var(--calendar-range-band) 50%);
   }
+  .from-lb500 {
+    --tw-gradient-from: var(--color-lb500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-orange500 {
+    --tw-gradient-from: var(--color-orange500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .from-purple500 {
+    --tw-gradient-from: var(--color-purple500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-blue700 {
+    --tw-gradient-to: var(--color-blue700);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-lb700 {
+    --tw-gradient-to: var(--color-lb700);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-pink600 {
+    --tw-gradient-to: var(--color-pink600);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .bg-clip-content {
     background-clip: content-box;
   }
@@ -2600,6 +2679,9 @@
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
   .px-\[10px\] {
     padding-inline: 10px;
   }
@@ -2675,6 +2757,9 @@
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
+  .pt-7 {
+    padding-top: calc(var(--spacing) * 7);
+  }
   .pt-10 {
     padding-top: calc(var(--spacing) * 10);
   }
@@ -2709,6 +2794,9 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
   .pb-10 {
     padding-bottom: calc(var(--spacing) * 10);
   }
@@ -2844,6 +2932,15 @@
   .text-\[13px\] {
     font-size: 13px;
   }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
+  .text-display14 {
+    font-size: var(--text-display14);
+  }
+  .text-display20 {
+    font-size: var(--text-display20);
+  }
   .text-display24 {
     font-size: var(--text-display24);
   }
@@ -2926,6 +3023,9 @@
   .text-\(--calendar-accent\) {
     color: var(--calendar-accent);
   }
+  .text-\[\#1a6dcc\] {
+    color: #1a6dcc;
+  }
   .text-black {
     color: var(--color-black);
   }
@@ -2938,6 +3038,9 @@
   .text-blue400 {
     color: var(--color-blue400);
   }
+  .text-blue500 {
+    color: var(--color-blue500);
+  }
   .text-danger400 {
     color: var(--color-danger400);
   }
@@ -3078,6 +3181,9 @@
   .opacity-80 {
     opacity: 80%;
   }
+  .opacity-90 {
+    opacity: 90%;
+  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -3234,6 +3340,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-transform {
     transition-property: transform, translate, scale, rotate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3753,6 +3864,14 @@
       }
     }
   }
+  .hover\:shadow-md {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .hover\:outline-neutral200 {
     &:hover {
       @media (hover: hover) {
@@ -3980,15 +4099,9 @@
       opacity: 40%;
     }
   }
-  .data-outside\:font-normal {
-    &[data-outside] {
-      --tw-font-weight: var(--font-weight-normal);
-      font-weight: var(--font-weight-normal);
-    }
-  }
-  .data-outside\:text-mono400 {
+  .data-outside\:opacity-50 {
     &[data-outside] {
-      color: var(--color-mono400);
+      opacity: 50%;
     }
   }
   .data-outside\:\*\:text-mono400 {
@@ -4022,13 +4135,6 @@
       color: var(--color-danger600);
     }
   }
-  .data-outside\:data-weekend\:text-danger400 {
-    &[data-outside] {
-      &[data-weekend] {
-        color: var(--color-danger400);
-      }
-    }
-  }
   .data-\[active\=true\]\:bg-lb500 {
     &[data-active="true"] {
       background-color: var(--color-lb500);
@@ -4475,11 +4581,21 @@
       color: var(--color-neutral900);
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:flex-row {
     @media (width >= 48rem) {
       flex-direction: row;
     }
   }
+  .lg\:grid-cols-3 {
+    @media (width >= 64rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .mobile\:invisible {
     @media (max-width: calc(768px - 1px)) {
       visibility: hidden;
@@ -5790,6 +5906,48 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -5976,6 +6134,15 @@
       --tw-skew-y: initial;
       --tw-divide-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;

package/dist/utils/utils.d.ts

@@ -1,10 +1,36 @@
 /**
- * 현재 경로가 해당 링크의 경로와 **정확히** 일치하는지 판별합니다.
+ * 현재 경로가 해당 링크의 경로에 속하는지 판별합니다.
  *
- * 접두사(prefix) 비교는 쓰지 않습니다. `startsWith`로 판별하면 `/admin`이
- * `/admin/group`·`/admin-group`까지 활성으로 잡아 여러 메뉴가 동시에 켜집니다.
+ * `href` 와 정확히 같거나 `href` 의 **하위 경로**면 활성으로 봅니다.
+ * `/products/items` 같은 상세 페이지에서도 상위 메뉴 `/products` 가 켜져 있어야
+ * 하기 때문입니다.
+ *
+ * 단순 `startsWith` 는 쓰지 않습니다. 세그먼트 경계(`/`)를 요구해서
+ * `/foo-bar` 가 `/foo` 에 걸리는 오탐을 막습니다. 루트(`/`)는 모든 경로의
+ * 접두사이므로 정확히 일치할 때만 활성입니다.
+ *
+ * 쿼리스트링과 해시는 비교하지 않습니다. `/search?q=A` 와 `/search?q=B` 는 같은
+ * 페이지이므로 검색어가 바뀌어도 메뉴가 꺼지면 안 됩니다. 반대로 `href` 를
+ * `/orders?status=done` 처럼 쿼리로 구분하는 메뉴는 서로 구별되지 않습니다.
+ *
+ * 주의: 항목 단위 판정이라 `/admin` 과 `/admin/group` 이 둘 다 메뉴에 있으면
+ * `/admin/group` 에서 두 항목이 함께 활성이 됩니다. 하나만 켜려면 호출부에서
+ * 가장 긴 매칭을 골라야 합니다.
  */
 export declare const isActivePath: (pathname: string, href: string) => boolean;
+/**
+ * 후보 경로 목록 중 현재 경로에 **가장 구체적으로** 맞는 하나를 고릅니다.
+ * 맞는 것이 없으면 `null` 입니다.
+ *
+ * `isActivePath` 는 항목 단위 판정이라 `/admin` 과 `/admin/group` 이 둘 다 후보면
+ * `/admin/group` 에서 두 항목이 함께 활성이 됩니다. 메뉴에서 하나만 켜려면
+ * 후보 전체를 보고 가장 긴 경로를 골라야 합니다.
+ *
+ * 정규화한 경로 길이로 비교하므로 `/foo` 와 `/foo/` 처럼 같은 경로를 가리키는
+ * 표기 차이는 우열을 만들지 않고, 동률이면 먼저 나온 후보를 씁니다.
+ * 반환값은 정규화 이전의 원본 문자열이라 호출부에서 `===` 로 항목을 찾을 수 있습니다.
+ */
+export declare const findActivePath: (pathname: string, candidates: readonly string[]) => string | null;
 /** 숫자를 정수로 내림 후 천 단위 콤마를 붙인 문자열로 변환합니다 (LDChart 툴팁 표시용). */
 export declare const formatNumberWithComma: (num?: number) => string;
 /** 숫자를 K/M 단위로 축약해 표시합니다 (LDChart y축 눈금 표시용). */

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,EAAE,MAAM,MAAM,KAAG,OAC3C,CAAC;AAEpB,4DAA4D;AAC5D,eAAO,MAAM,qBAAqB,GAAI,MAAK,MAAU,WAMpD,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,WAQpD,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAgDA;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,GAAI,UAAU,MAAM,EAAE,MAAM,MAAM,KAAG,OAO7D,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GACzB,UAAU,MAAM,EAChB,YAAY,SAAS,MAAM,EAAE,KAC5B,MAAM,GAAG,IAeX,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,qBAAqB,GAAI,MAAK,MAAU,WAMpD,CAAC;AAEF,iDAAiD;AACjD,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,WAQpD,CAAC"}

package/dist/utils/utils.js

@@ -1,10 +1,99 @@
 /**
- * 현재 경로가 해당 링크의 경로와 **정확히** 일치하는지 판별합니다.
+ * URL 파싱용 더미 origin. `new URL()`에 base 를 주면 상대 경로·`..` 해석과
+ * 쿼리스트링·해시 분리를 표준 파서가 대신 처리한다.
+ */
+const PARSE_BASE = 'http://ld.local';
+/**
+ * 퍼센트 인코딩을 되돌립니다. `decodeURIComponent` 가 아니라 `decodeURI` 를 쓰는
+ * 이유는 `%2F` 같은 예약 문자까지 풀면 경로 구분자가 늘어나 세그먼트 경계가
+ * 어긋나기 때문입니다. 잘못된 인코딩이면 원문 그대로 비교합니다.
+ */
+const safeDecode = (value) => {
+    try {
+        return decodeURI(value);
+    }
+    catch {
+        return value;
+    }
+};
+/**
+ * 비교 가능한 형태로 경로를 정규화합니다.
+ *
+ * - origin·쿼리스트링·해시 제거 (`https://a.com/foo?x=1#y` → `/foo`)
+ * - 상대 경로와 `.`·`..` 해석 (`foo/../bar` → `/bar`)
+ * - 중복 슬래시 축약 (`/foo//bar` → `/foo/bar`)
+ * - 끝 슬래시 제거 (루트 `/` 는 유지)
+ * - 퍼센트 인코딩 해제 (`/%EC%83%81%ED%92%88` → `/상품`)
+ *
+ * 대소문자는 구분합니다. 경로는 대소문자를 구분하는 것이 표준이고, 서로 다른
+ * 라우트를 같은 것으로 묶으면 오히려 오탐이 됩니다.
+ */
+const toComparablePath = (value) => {
+    let pathname;
+    try {
+        ({ pathname } = new URL(value, PARSE_BASE));
+    }
+    catch {
+        // URL 로 해석되지 않는 문자열(예: 'http://')은 정규화 없이 원문을 쓴다.
+        return value;
+    }
+    const collapsed = safeDecode(pathname).replace(/\/{2,}/g, '/');
+    return collapsed.length > 1 && collapsed.endsWith('/')
+        ? collapsed.slice(0, -1)
+        : collapsed;
+};
+/**
+ * 현재 경로가 해당 링크의 경로에 속하는지 판별합니다.
+ *
+ * `href` 와 정확히 같거나 `href` 의 **하위 경로**면 활성으로 봅니다.
+ * `/products/items` 같은 상세 페이지에서도 상위 메뉴 `/products` 가 켜져 있어야
+ * 하기 때문입니다.
+ *
+ * 단순 `startsWith` 는 쓰지 않습니다. 세그먼트 경계(`/`)를 요구해서
+ * `/foo-bar` 가 `/foo` 에 걸리는 오탐을 막습니다. 루트(`/`)는 모든 경로의
+ * 접두사이므로 정확히 일치할 때만 활성입니다.
+ *
+ * 쿼리스트링과 해시는 비교하지 않습니다. `/search?q=A` 와 `/search?q=B` 는 같은
+ * 페이지이므로 검색어가 바뀌어도 메뉴가 꺼지면 안 됩니다. 반대로 `href` 를
+ * `/orders?status=done` 처럼 쿼리로 구분하는 메뉴는 서로 구별되지 않습니다.
+ *
+ * 주의: 항목 단위 판정이라 `/admin` 과 `/admin/group` 이 둘 다 메뉴에 있으면
+ * `/admin/group` 에서 두 항목이 함께 활성이 됩니다. 하나만 켜려면 호출부에서
+ * 가장 긴 매칭을 골라야 합니다.
+ */
+export const isActivePath = (pathname, href) => {
+    const current = toComparablePath(pathname);
+    const target = toComparablePath(href);
+    if (target === '/')
+        return current === '/';
+    return current === target || current.startsWith(`${target}/`);
+};
+/**
+ * 후보 경로 목록 중 현재 경로에 **가장 구체적으로** 맞는 하나를 고릅니다.
+ * 맞는 것이 없으면 `null` 입니다.
  *
- * 접두사(prefix) 비교는 쓰지 않습니다. `startsWith`로 판별하면 `/admin`이
- * `/admin/group`·`/admin-group`까지 활성으로 잡아 여러 메뉴가 동시에 켜집니다.
+ * `isActivePath` 는 항목 단위 판정이라 `/admin` 과 `/admin/group` 이 둘 다 후보면
+ * `/admin/group` 에서 두 항목이 함께 활성이 됩니다. 메뉴에서 하나만 켜려면
+ * 후보 전체를 보고 가장 긴 경로를 골라야 합니다.
+ *
+ * 정규화한 경로 길이로 비교하므로 `/foo` 와 `/foo/` 처럼 같은 경로를 가리키는
+ * 표기 차이는 우열을 만들지 않고, 동률이면 먼저 나온 후보를 씁니다.
+ * 반환값은 정규화 이전의 원본 문자열이라 호출부에서 `===` 로 항목을 찾을 수 있습니다.
  */
-export const isActivePath = (pathname, href) => pathname === href;
+export const findActivePath = (pathname, candidates) => {
+    let matched = null;
+    let matchedLength = -1;
+    for (const candidate of candidates) {
+        if (!isActivePath(pathname, candidate))
+            continue;
+        const length = toComparablePath(candidate).length;
+        if (length > matchedLength) {
+            matched = candidate;
+            matchedLength = length;
+        }
+    }
+    return matched;
+};
 /** 숫자를 정수로 내림 후 천 단위 콤마를 붙인 문자열로 변환합니다 (LDChart 툴팁 표시용). */
 export const formatNumberWithComma = (num = 0) => {
     if (isNaN(num)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",
@@ -48,10 +48,6 @@
   },
   "license": "MIT",
   "peerDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-accordion": "^1.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
@@ -92,18 +88,6 @@
     "next": {
       "optional": true
     },
-    "@dnd-kit/core": {
-      "optional": true
-    },
-    "@dnd-kit/modifiers": {
-      "optional": true
-    },
-    "@dnd-kit/sortable": {
-      "optional": true
-    },
-    "@dnd-kit/utilities": {
-      "optional": true
-    },
     "@radix-ui/react-accordion": {
       "optional": true
     },
@@ -202,10 +186,6 @@
     }
   },
   "devDependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
     "@eslint/js": "^9.31.0",
     "@hookform/resolvers": "^5.4.0",
     "@radix-ui/react-accordion": "^1.2.16",
@@ -277,6 +257,10 @@
     "zod": "^4.4.3"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "clsx": "^2.1.1",
     "lucide-react": "^0.536.0",
     "react-hook-form": "^7.62.0",