@loword/loword-design-system 0.4.2 → 0.5.1

package/dist/components/LDModal/LDModal.js

@@ -50,7 +50,7 @@ const LDModal = (options) => {
             return (_jsx(LDModalView, { open: open, onOpenChange: (next) => {
                     if (!next)
                         close(undefined);
-                }, name: options.name, title: options.title, description: options.description, size: options.size, icon: options.icon, scrollBehavior: options.scrollBehavior, closeOnOverlayClick: options.closeOnOverlayClick, style: options.style, buttons: list ? { direction: options.buttonsDirection, list } : undefined, classNames: options.classNames, children: content }));
+                }, name: options.name, title: options.title, description: options.description, size: options.size, icon: options.icon, scrollBehavior: options.scrollBehavior, closeOnOverlayClick: options.closeOnOverlayClick, closeOnEsc: options.closeOnEsc, style: options.style, buttons: list ? { direction: options.buttonsDirection, list } : undefined, classNames: options.classNames, children: content }));
         };
         root.render(_jsx(ModalHost, {}));
     });

package/dist/components/LDModal/LDModalView.d.ts

@@ -52,12 +52,14 @@ export interface LDModalViewProps {
     scrollBehavior?: 'inside' | 'outside';
     /** 오버레이(모달 바깥) 클릭으로 닫기 허용 여부 */
     closeOnOverlayClick?: boolean;
+    /** ESC 키로 닫기 허용 여부 */
+    closeOnEsc?: boolean;
     /** 인라인 스타일 (모달 패널에 적용) */
     style?: React.CSSProperties;
     /** 버튼 클릭 시 해당 버튼의 value를 전달하는 콜백 */
     onButtonClick?: (value: unknown) => void;
     classNames?: TModalClassNames;
 }
-declare const LDModalView: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, closeOnOverlayClick, classNames, style, onButtonClick, }: LDModalViewProps) => import("react/jsx-runtime").JSX.Element;
+declare const LDModalView: ({ open, defaultOpen, onOpenChange, name, title, description, children, size, icon, buttons, scrollBehavior, closeOnOverlayClick, closeOnEsc, classNames, style, onButtonClick, }: LDModalViewProps) => import("react/jsx-runtime").JSX.Element;
 export default LDModalView;
 //# sourceMappingURL=LDModalView.d.ts.map

package/dist/components/LDModal/LDModalView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDModalView.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModalView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI7C,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;IACzD,eAAe;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,eAAe;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa;IACb,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,gCAAgC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AA6CD,QAAA,MAAM,WAAW,GAAI,sKAgBlB,gBAAgB,4CAsLlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"LDModalView.d.ts","sourceRoot":"","sources":["../../../src/components/LDModal/LDModalView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAK/C,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAI7C,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,KAAK,EAAE,CAAC,CAAC;IACT,gBAAgB;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC,CAAC;IACzD,eAAe;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,GAAG,OAAO,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,gBAAgB;IAC/B,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY;IACZ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa;IACb,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,gBAAgB;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,eAAe;IACf,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,aAAa;IACb,cAAc,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACtC,gCAAgC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AA6CD,QAAA,MAAM,WAAW,GAAI,kLAiBlB,gBAAgB,4CAoLlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/LDModal/LDModalView.js

@@ -42,7 +42,7 @@ const statusIconSizeClasses = {
     large: 'size-12.5',
     xlarge: 'size-12.5',
 };
-const LDModalView = ({ open, defaultOpen, onOpenChange, name, title, description, children, size = 'small', icon, buttons, scrollBehavior = 'inside', closeOnOverlayClick = true, classNames, style, onButtonClick, }) => {
+const LDModalView = ({ open, defaultOpen, onOpenChange, name, title, description, children, size = 'small', icon, buttons, scrollBehavior = 'inside', closeOnOverlayClick = true, closeOnEsc = true, classNames, style, onButtonClick, }) => {
     const overlayRef = useRef(false);
     const hasHeader = name || title || description || icon;
     const handleClick = async (button) => {
@@ -57,14 +57,14 @@ const LDModalView = ({ open, defaultOpen, onOpenChange, name, title, description
     return (_jsxs(ModalBase.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(ModalBase.Overlay, { className: classNames?.overlay }), _jsx(ModalBase.Content, { className: cn({
                     ['top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2']: scrollBehavior === 'inside',
                     ['inset-0 flex items-start justify-center overflow-y-auto py-20']: scrollBehavior === 'outside',
-                }, classNames?.content), onPointerDownOutside: closeOnOverlayClick ? undefined : (e) => e.preventDefault(), onMouseDown: (e) => (overlayRef.current = e.target === e.currentTarget), onClick: (e) => {
+                }, classNames?.content), onPointerDownOutside: closeOnOverlayClick ? undefined : (e) => e.preventDefault(), onEscapeKeyDown: closeOnEsc ? undefined : (e) => e.preventDefault(), onMouseDown: (e) => (overlayRef.current = e.target === e.currentTarget), onClick: (e) => {
                     if (closeOnOverlayClick &&
                         scrollBehavior === 'outside' &&
                         e.target === e.currentTarget &&
                         overlayRef.current)
                         onOpenChange?.(false);
                     overlayRef.current = false;
-                }, children: _jsxs("div", { className: cn('relative rounded-2xl bg-white p-5', sizeClasses[size], 'mobile:max-w-[calc(100vw-40px)]', scrollBehavior === 'inside' && 'flex max-h-[90dvh] flex-col', classNames?.layout), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { asChild: true, className: cn('absolute top-4 right-5 cursor-pointer text-neutral500 outline-hidden', classNames?.close), children: _jsx(LDButton, { variant: "ghost", color: "neutral", leftIcon: _jsx(X, { className: "size-4" }), compact: true }) }), _jsxs("div", { className: cn('flex w-full shrink-0 flex-col', scrollBehavior === 'inside' && 'min-h-0 flex-1', layoutGapSizeClasses[size], !hasHeader && noHeaderPaddingTopSizeClasses[size], classNames?.panel), children: [_jsx(Show, { when: hasHeader, children: _jsxs("div", { className: "flex w-full shrink-0 flex-col items-center gap-5 py-5 text-center", children: [_jsx(Show, { when: icon === 'success', children: _jsx("div", { className: cn('flex items-center justify-center rounded-full bg-hyper-blue', statusIconSizeClasses[size]), children: _jsx(Check, { className: "text-white" }) }) }), _jsx(Show, { when: icon === 'fail', children: _jsx("div", { className: cn('flex items-center justify-center rounded-full bg-danger600', statusIconSizeClasses[size]), children: _jsx(CircleAlert, { className: "text-white" }) }) }), _jsx(Show, { when: name, children: _jsx("span", { className: "display16 bold whitespace-pre-wrap text-neutral500", children: name }) }), _jsx(Show, { when: title, children: _jsx(ModalBase.Title, { className: cn('text-center display28 bold whitespace-pre-wrap', classNames?.title), children: title }) }), _jsx(Show, { when: description, children: _jsx(ModalBase.Description, { className: cn('text-center display14 whitespace-pre-wrap text-neutral500', classNames?.description), children: description }) })] }) }), _jsx(Show, { when: children, children: _jsx("div", { className: cn(scrollBehavior === 'inside' &&
+                }, children: _jsxs("div", { className: cn('relative rounded-2xl bg-white p-5', sizeClasses[size], 'mobile:max-w-[calc(100vw-40px)]', scrollBehavior === 'inside' && 'flex max-h-[90dvh] flex-col', classNames?.layout), style: style, onClick: (e) => e.stopPropagation(), children: [_jsx(ModalBase.Close, { asChild: true, className: cn('absolute top-5 right-5 z-10 flex cursor-pointer text-neutral500 outline-hidden transition-colors after:absolute after:top-1/2 after:left-1/2 after:size-10 after:-translate-1/2 hover:text-neutral700', classNames?.close), children: _jsx("button", { type: "button", "aria-label": "\uB2EB\uAE30", children: _jsx(X, { className: "size-4 tablet:size-5 pc:size-6" }) }) }), _jsxs("div", { className: cn('flex w-full shrink-0 flex-col', scrollBehavior === 'inside' && 'min-h-0 flex-1', layoutGapSizeClasses[size], !hasHeader && noHeaderPaddingTopSizeClasses[size], classNames?.panel), children: [_jsx(Show, { when: hasHeader, children: _jsxs("div", { className: "flex w-full shrink-0 flex-col items-center gap-5 py-5 text-center", children: [_jsx(Show, { when: icon === 'success', children: _jsx("div", { className: cn('flex items-center justify-center rounded-full bg-hyper-blue', statusIconSizeClasses[size]), children: _jsx(Check, { className: "text-white" }) }) }), _jsx(Show, { when: icon === 'fail', children: _jsx("div", { className: cn('flex items-center justify-center rounded-full bg-danger600', statusIconSizeClasses[size]), children: _jsx(CircleAlert, { className: "text-white" }) }) }), _jsx(Show, { when: name, children: _jsx("span", { className: "display16 bold whitespace-pre-wrap text-neutral500", children: name }) }), _jsx(Show, { when: title, children: _jsx(ModalBase.Title, { className: cn('text-center display28 bold whitespace-pre-wrap', classNames?.title), children: title }) }), _jsx(Show, { when: description, children: _jsx(ModalBase.Description, { className: cn('text-center display14 whitespace-pre-wrap text-neutral500', classNames?.description), children: description }) })] }) }), _jsx(Show, { when: children, children: _jsx("div", { className: cn(scrollBehavior === 'inside' &&
                                             'min-h-10 flex-1 overflow-y-auto'), children: children }) }), _jsx(Show, { when: buttons?.list?.length, children: _jsx("div", { className: cn('flex mobile:flex-1 mobile:flex-col mobile:items-center', buttons?.direction === 'column' ? 'flex-col' : 'flex-row', buttonsGapSizeClasses[size]), children: buttons?.list?.map((button, index) => {
                                             const isFirst = index === 0;
                                             return (_jsx("div", { className: "flex w-full flex-1", children: _jsx(LDButton, { type: "button", onClick: () => handleClick(button), variant: button.variant ?? (isFirst ? 'solid' : 'outline'), color: button.color ?? (isFirst ? 'point' : 'neutral'), size: buttonSizeClasses[size], block: true, children: button.label }) }, String(button.value)));

package/dist/index.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
+    --color-blue-100: oklch(93.2% 0.032 255.585);
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
@@ -432,6 +433,9 @@
   .absolute {
     position: absolute;
   }
+  .absolute\! {
+    position: absolute !important;
+  }
   .fixed {
     position: fixed;
   }
@@ -480,12 +484,18 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-5 {
+    top: calc(var(--spacing) * 5);
+  }
   .top-16 {
     top: calc(var(--spacing) * 16);
   }
   .top-20 {
     top: calc(var(--spacing) * 20);
   }
+  .top-\[17px\] {
+    top: 17px;
+  }
   .top-\[40\%\] {
     top: 40%;
   }
@@ -1229,9 +1239,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-3 {
-    margin-top: calc(var(--spacing) * 3);
-  }
   .mt-md {
     margin-top: var(--spacing_20);
   }
@@ -1247,9 +1254,6 @@
   .-mb-px {
     margin-bottom: -1px;
   }
-  .mb-1 {
-    margin-bottom: calc(var(--spacing) * 1);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -1489,6 +1493,9 @@
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
+  .h-1\.5\! {
+    height: calc(var(--spacing) * 1.5) !important;
+  }
   .h-2 {
     height: calc(var(--spacing) * 2);
   }
@@ -1742,6 +1749,9 @@
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
+  .w-19\! {
+    width: calc(var(--spacing) * 19) !important;
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -2018,6 +2028,9 @@
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
@@ -2213,6 +2226,9 @@
   .rounded-\[10px\] {
     border-radius: 10px;
   }
+  .rounded-\[10px\]\! {
+    border-radius: 10px !important;
+  }
   .rounded-\[12px\] {
     border-radius: 12px;
   }
@@ -2243,9 +2259,9 @@
   .rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .rounded-t-2xl {
-    border-top-left-radius: var(--radius-2xl);
-    border-top-right-radius: var(--radius-2xl);
+  .rounded-t-\[10px\] {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
   }
   .rounded-t-lg {
     border-top-left-radius: var(--radius-lg);
@@ -2255,9 +2271,9 @@
     border-top-left-radius: var(--radius-md);
     border-top-right-radius: var(--radius-md);
   }
-  .rounded-l-2xl {
-    border-top-left-radius: var(--radius-2xl);
-    border-bottom-left-radius: var(--radius-2xl);
+  .rounded-l-\[10px\] {
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
   }
   .rounded-l-lg {
     border-top-left-radius: var(--radius-lg);
@@ -2270,9 +2286,9 @@
   .rounded-tl-lg {
     border-top-left-radius: var(--radius-lg);
   }
-  .rounded-r-2xl {
-    border-top-right-radius: var(--radius-2xl);
-    border-bottom-right-radius: var(--radius-2xl);
+  .rounded-r-\[10px\] {
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
   }
   .rounded-r-lg {
     border-top-right-radius: var(--radius-lg);
@@ -2285,9 +2301,9 @@
   .rounded-tr-lg {
     border-top-right-radius: var(--radius-lg);
   }
-  .rounded-b-2xl {
-    border-bottom-right-radius: var(--radius-2xl);
-    border-bottom-left-radius: var(--radius-2xl);
+  .rounded-b-\[10px\] {
+    border-bottom-right-radius: 10px;
+    border-bottom-left-radius: 10px;
   }
   .rounded-b-lg {
     border-bottom-right-radius: var(--radius-lg);
@@ -2361,6 +2377,9 @@
     --tw-border-style: solid;
     border-style: solid;
   }
+  .border-blue-500 {
+    border-color: var(--color-blue-500);
+  }
   .border-blue500 {
     border-color: var(--color-blue500);
   }
@@ -2439,6 +2458,9 @@
       background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
     }
   }
+  .bg-blue-100 {
+    background-color: var(--color-blue-100);
+  }
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
@@ -2511,6 +2533,9 @@
   .bg-neutral100 {
     background-color: var(--color-neutral100);
   }
+  .bg-neutral100\! {
+    background-color: var(--color-neutral100) !important;
+  }
   .bg-neutral200 {
     background-color: var(--color-neutral200);
   }
@@ -2632,6 +2657,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
   .p-0\.75 {
     padding: calc(var(--spacing) * 0.75);
   }
@@ -2779,9 +2807,6 @@
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
-  .pt-2 {
-    padding-top: calc(var(--spacing) * 2);
-  }
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -3230,6 +3255,9 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .opacity-100\! {
+    opacity: 100% !important;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
@@ -3627,6 +3655,12 @@
       inset-block: calc(var(--spacing) * 0);
     }
   }
+  .after\:top-1\/2 {
+    &::after {
+      content: var(--tw-content);
+      top: calc(1 / 2 * 100%);
+    }
+  }
   .after\:top-full {
     &::after {
       content: var(--tw-content);
@@ -3639,12 +3673,25 @@
       right: 100%;
     }
   }
+  .after\:left-1\/2 {
+    &::after {
+      content: var(--tw-content);
+      left: calc(1 / 2 * 100%);
+    }
+  }
   .after\:left-full {
     &::after {
       content: var(--tw-content);
       left: 100%;
     }
   }
+  .after\:size-10 {
+    &::after {
+      content: var(--tw-content);
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+    }
+  }
   .after\:h-0\.5 {
     &::after {
       content: var(--tw-content);
@@ -3657,6 +3704,14 @@
       width: calc(var(--spacing) * 0.5);
     }
   }
+  .after\:-translate-1\/2 {
+    &::after {
+      content: var(--tw-content);
+      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
   .after\:bg-transparent {
     &::after {
       content: var(--tw-content);
@@ -4668,21 +4723,6 @@
       visibility: hidden;
     }
   }
-  .mobile\:absolute {
-    @media (max-width: calc(768px - 1px)) {
-      position: absolute;
-    }
-  }
-  .mobile\:top-1\/2 {
-    @media (max-width: calc(768px - 1px)) {
-      top: calc(1 / 2 * 100%);
-    }
-  }
-  .mobile\:left-1\/2 {
-    @media (max-width: calc(768px - 1px)) {
-      left: calc(1 / 2 * 100%);
-    }
-  }
   .mobile\:block {
     @media (max-width: calc(768px - 1px)) {
       display: block;
@@ -4738,13 +4778,6 @@
       flex: 1;
     }
   }
-  .mobile\:-translate-1\/2 {
-    @media (max-width: calc(768px - 1px)) {
-      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
-      --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
-    }
-  }
   .mobile\:flex-col {
     @media (max-width: calc(768px - 1px)) {
       flex-direction: column;
@@ -4831,6 +4864,14 @@
       font-weight: var(--font-medium);
     }
   }
+  .tablet\:size-5 {
+    @media (min-width: 768px) {
+      @media (max-width: calc(992px - 1px)) {
+        width: calc(var(--spacing) * 5);
+        height: calc(var(--spacing) * 5);
+      }
+    }
+  }
   .tablet-down\:display12 {
     @media (max-width: calc(992px - 1px)) {
       font-size: var(--text-display12);
@@ -4852,6 +4893,12 @@
       letter-spacing: var(--tracking-display16);
     }
   }
+  .pc\:size-6 {
+    @media (min-width: 992px) {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
+  }
   .\[\&_svg\]\:icon-2xs {
     & svg {
       width: var(--control-icon-2xs);
@@ -5524,7 +5571,7 @@
 }
 .ProseMirror img {
   max-width: 100%;
-  height: auto;
+  height: auto !important;
   display: block;
   margin: 1rem auto;
 }
@@ -5542,7 +5589,6 @@
 }
 .ProseMirror img {
   cursor: pointer;
-  border: 2px solid transparent;
   transition: border-color 0.2s;
 }
 .ProseMirror img:hover {
@@ -5611,6 +5657,54 @@
 .ProseMirror [data-resize-wrapper] img {
   margin: 0 !important;
 }
+.ProseMirror [data-resize-wrapper] {
+  width: fit-content;
+}
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+.ProseMirror table {
+  width: 100%;
+  margin: 0;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+.ProseMirror table td, .ProseMirror table th {
+  position: relative;
+  min-width: 1em;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-neutral200);
+  vertical-align: top;
+}
+.ProseMirror table th {
+  background: var(--color-mono100);
+  font-weight: 600;
+  text-align: left;
+}
+.ProseMirror table p {
+  margin: 0;
+}
+.ProseMirror .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(59, 130, 246, 0.15);
+  pointer-events: none;
+  z-index: 2;
+}
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  width: 4px;
+  background: #3b82f6;
+  pointer-events: none;
+}
+.ProseMirror.resize-cursor {
+  cursor: col-resize;
+}
 @layer components {
   .select-2xs {
     height: var(--control-height-2xs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loword/loword-design-system",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
   "keywords": [
     "react",
@@ -63,6 +63,7 @@
     "@tiptap/extension-highlight": "^3.26.0",
     "@tiptap/extension-image": "^3.26.0",
     "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
     "@tiptap/extension-text-align": "^3.26.0",
     "@tiptap/extension-text-style": "^3.26.0",
     "@tiptap/extension-underline": "^3.26.0",
@@ -131,6 +132,9 @@
     "@tiptap/extension-link": {
       "optional": true
     },
+    "@tiptap/extension-table": {
+      "optional": true
+    },
     "@tiptap/extension-text-align": {
       "optional": true
     },
@@ -209,6 +213,7 @@
     "@tiptap/extension-highlight": "^3.26.0",
     "@tiptap/extension-image": "^3.26.0",
     "@tiptap/extension-link": "^3.26.0",
+    "@tiptap/extension-table": "^3.26.0",
     "@tiptap/extension-text-align": "^3.26.0",
     "@tiptap/extension-text-style": "^3.26.0",
     "@tiptap/extension-underline": "^3.26.0",

package/src/styles/components/editor.css

@@ -47,9 +47,13 @@
 }
 
 /* 이미지 정렬 스타일 */
+/* height만 !important로 잠근다. 리사이즈 노드뷰가 width/height를 함께 인라인 px로
+   쓰는데, 높이가 고정되면 컨테이너가 좁아질 때 max-width로 폭만 줄어 이미지가
+   찌그러진다. 높이를 auto로 두면 항상 폭을 따라가므로 비율이 유지되고,
+   width는 인라인이 그대로 먹으므로 드래그 리사이즈도 동작한다. */
 .ProseMirror img {
   max-width: 100%;
-  height: auto;
+  height: auto !important;
   display: block;
   margin: 1rem auto;
 }
@@ -72,7 +76,6 @@
 /* 이미지 선택 스타일 */
 .ProseMirror img {
   cursor: pointer;
-  border: 2px solid transparent;
   transition: border-color 0.2s;
 }
 
@@ -165,3 +168,72 @@
 .ProseMirror [data-resize-wrapper] img {
   margin: 0 !important;
 }
+
+/* 리사이즈 핸들은 래퍼를 기준으로 배치된다. 래퍼가 이미지보다 넓으면 핸들이
+   이미지 모서리에서 떨어져 보이므로, 래퍼는 항상 이미지 크기에 맞춘다.
+   (래퍼는 부모가 block이면 기본값이 100%라 가만두면 벌어진다.) */
+.ProseMirror [data-resize-wrapper] {
+  width: fit-content;
+}
+
+/* 표
+   prose 기본 표는 가로줄만 그어 에디터에서 셀 경계가 보이지 않는다. 격자 테두리로 덮는다.
+   @layer 밖(=무레이어)이라 utilities 레이어의 prose보다 우선한다. */
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.ProseMirror table {
+  width: 100%;
+  margin: 0;
+  /* 열 너비 리사이즈(colgroup width)가 반영되려면 fixed여야 한다. */
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.ProseMirror table td,
+.ProseMirror table th {
+  /* 열 리사이즈 핸들의 위치 기준 */
+  position: relative;
+  min-width: 1em;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-neutral200);
+  vertical-align: top;
+}
+
+.ProseMirror table th {
+  background: var(--color-mono100);
+  font-weight: 600;
+  text-align: left;
+}
+
+/* 셀 안 문단은 prose의 블록 여백을 쓰지 않는다 — 셀 높이가 과하게 늘어난다. */
+.ProseMirror table p {
+  margin: 0;
+}
+
+/* 드래그로 여러 셀을 선택했을 때 */
+.ProseMirror .selectedCell::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(59, 130, 246, 0.15);
+  pointer-events: none;
+  z-index: 2;
+}
+
+/* 열 너비 리사이즈 핸들 (셀 오른쪽 경계) */
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  width: 4px;
+  background: #3b82f6;
+  pointer-events: none;
+}
+
+.ProseMirror.resize-cursor {
+  cursor: col-resize;
+}