@ncds/ui-admin 0.0.32 → 0.0.33

package/dist/esm/src/components/modal/Modal.js

@@ -20,8 +20,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 Icon from '@ncds/ui-admin-icon';
 export var Modal = function (_a) {
   var isOpen = _a.isOpen,
     onClose = _a.onClose,
@@ -104,14 +104,12 @@ Modal.Header = function (_a) {
         }, {
           children: subtitle
         }))]
-      })), children, !hideCloseButton && _jsx("button", __assign({
+      })), children, !hideCloseButton && _jsx(ButtonCloseX, {
         className: "ncua-modal__close-button",
+        size: "sm",
+        theme: "light",
         onClick: onClose
-      }, {
-        children: _jsx(Icon, {
-          name: "x-close"
-        })
-      }))]
+      })]
     })), showDivider && _jsx("div", {
       className: "ncua-modal__header-divider"
     })]

package/dist/esm/src/components/notification/FloatingNotification.js

@@ -16,11 +16,14 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
-import Icon from '@ncds/ui-admin-icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } 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';
 var iconNameMap = {
   neutral: 'pin-02',
   error: 'alert-triangle',
@@ -30,22 +33,25 @@ var iconNameMap = {
 export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'neutral' : _b,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
-  var iconColor = variant;
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
+  var iconColor = color;
   var featuredIconProps = {
-    name: iconNameMap[variant],
+    name: iconNameMap[color],
     size: 'sm',
     color: iconColor,
     theme: 'dark-circle'
   };
+  var isMobile = useMediaQuery(MEDIA_QUERY.mobile, {
+    onMatched: onClose
+  });
   return _jsxs("div", __assign({
     ref: ref,
-    className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(variant), className),
+    className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: [_jsx("div", __assign({
@@ -54,14 +60,9 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
       children: _jsxs("div", __assign({
         className: "ncua-floating-notification__container"
       }, {
-        children: [iconNameMap[variant] && _jsxs(_Fragment, {
-          children: [_jsx(FeaturedIcon, __assign({}, featuredIconProps, {
-            className: "ncua-floating-notification__pc-icon"
-          })), _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
-            size: "md",
-            className: "ncua-floating-notification__mobile-icon"
-          }))]
-        }), _jsxs("div", __assign({
+        children: [iconNameMap[color] && _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+          size: isMobile ? 'md' : 'sm'
+        })), _jsxs("div", __assign({
           className: "ncua-floating-notification__text-container"
         }, {
           children: [_jsx("div", __assign({
@@ -79,19 +80,22 @@ export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
           })), actions && _jsx("div", __assign({
             className: "ncua-floating-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return _jsx(Button, {
+                size: "xs",
+                hierarchy: action.hierarchy || 'link',
+                label: action.label,
+                onClick: action === null || action === void 0 ? void 0 : action.onClick
+              }, "".concat(action.label, "-").concat(action.hierarchy));
+            })
           }))]
         }))]
       }))
-    })), onClose && _jsx("button", __assign({
-      type: "button",
+    })), onClose && _jsx(ButtonCloseX, {
+      theme: "light",
       className: "ncua-floating-notification__close-button",
-      onClick: onClose,
-      "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
-    }, {
-      children: _jsx(Icon, {
-        name: "x"
-      })
-    }))]
+      size: isMobile ? 'sm' : 'xs',
+      onClick: onClose
+    })]
   }));
 });

package/dist/esm/src/components/notification/FullWidthNotification.js

@@ -36,19 +36,19 @@ var iconColorMap = {
 export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var title = _a.title,
     supportingText = _a.supportingText,
-    _b = _a.variant,
-    variant = _b === void 0 ? 'neutral' : _b,
+    _b = _a.color,
+    color = _b === void 0 ? 'neutral' : _b,
     onClose = _a.onClose,
     className = _a.className,
     actions = _a.actions,
-    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
+    rest = __rest(_a, ["title", "supportingText", "color", "onClose", "className", "actions"]);
   var closeIconSize = {
     width: 20,
     height: 20
   };
   return _jsx("div", __assign({
     ref: ref,
-    className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(variant), className),
+    className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(color), className),
     role: "alert"
   }, rest, {
     children: _jsx("div", __assign({
@@ -61,10 +61,10 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
           className: "ncua-full-width-notification__content-wrapper"
         }, {
           children: [_jsx(Icon, {
-            name: iconNameMap[variant],
+            name: iconNameMap[color],
             width: 16,
             height: 16,
-            color: COLOR[iconColorMap[variant]],
+            color: COLOR[iconColorMap[color]],
             className: "ncua-full-width-notification__icon"
           }), _jsxs("div", __assign({
             className: "ncua-full-width-notification__text-container"
@@ -85,7 +85,14 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
           children: [actions && _jsx("div", __assign({
             className: "ncua-full-width-notification__actions"
           }, {
-            children: actions
+            children: actions.map(function (action) {
+              return _jsx("button", __assign({
+                onClick: action.onClick,
+                className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link'))
+              }, {
+                children: action.label
+              }), "".concat(action.label, "-").concat(action.hierarchy));
+            })
           })), onClose && _jsx("button", __assign({
             type: "button",
             className: "ncua-full-width-notification__close-button",
@@ -95,7 +102,7 @@ export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
             children: _jsx(Icon, __assign({
               name: "x-close"
             }, closeIconSize, {
-              color: COLOR[iconColorMap[variant]]
+              color: COLOR[iconColorMap[color]]
             }))
           }))]
         }))]

package/dist/esm/src/components/notification/Notification.js

@@ -16,43 +16,23 @@ var __rest = this && this.__rest || function (s, e) {
   }
   return t;
 };
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import classNames from 'classnames';
 import { FloatingNotification } from './FloatingNotification';
 import { FullWidthNotification } from './FullWidthNotification';
 export var Notification = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.type,
     type = _b === void 0 ? 'floating' : _b,
-    title = _a.title,
-    supportingText = _a.supportingText,
-    _c = _a.variant,
-    variant = _c === void 0 ? 'neutral' : _c,
-    onClose = _a.onClose,
-    className = _a.className,
-    actions = _a.actions,
-    rest = __rest(_a, ["type", "title", "supportingText", "variant", "onClose", "className", "actions"]);
-  var actionsContent = actions && actions.length > 0 ? _jsx(_Fragment, {
-    children: actions.map(function (action, index) {
-      return _jsx("button", __assign({
-        onClick: action.onClick,
-        className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link-gray'))
-      }, {
-        children: action.label
-      }), index);
-    })
-  }) : null;
-  var sharedProps = __assign({
-    title: title,
-    supportingText: supportingText,
-    variant: variant,
-    onClose: onClose,
-    className: className,
-    actions: actionsContent
-  }, rest);
-  return type === 'floating' ? _jsx(FloatingNotification, __assign({}, sharedProps, {
+    _c = _a.color,
+    color = _c === void 0 ? 'neutral' : _c,
+    rest = __rest(_a, ["type", "color"]);
+  return type === 'floating' ? _jsx(FloatingNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
-  })) : _jsx(FullWidthNotification, __assign({}, sharedProps, {
+  })) : _jsx(FullWidthNotification, __assign({
+    color: color
+  }, rest, {
     ref: ref
   }));
 });

package/dist/esm/src/components/notification/index.js

@@ -1,3 +1,3 @@
+export * from './Notification';
 export * from './FloatingNotification';
-export * from './FullWidthNotification';
-export * from './Notification';
+export * from './FullWidthNotification';

package/dist/esm/src/constant/breakpoint.js

@@ -0,0 +1,6 @@
+export var BREAKPOINT = {
+  mobile: '768px'
+};
+export var MEDIA_QUERY = {
+  mobile: "(max-width: ".concat(BREAKPOINT.mobile, ")")
+};

package/dist/esm/src/hooks/useMediaQuery.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+export var useMediaQuery = function (query, options) {
+  var _a = useState(false),
+    matches = _a[0],
+    setMatches = _a[1];
+  useEffect(function () {
+    var mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    var handleChange = function (e) {
+      var _a;
+      setMatches(e.matches);
+      if (e.matches) {
+        (_a = options === null || options === void 0 ? void 0 : options.onMatched) === null || _a === void 0 ? void 0 : _a.call(options);
+      }
+    };
+    mediaQuery.addEventListener('change', handleChange);
+    return function () {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, [query, options === null || options === void 0 ? void 0 : options.onMatched]);
+  return matches;
+};

package/dist/types/constant/color.d.ts

@@ -1,4 +1,5 @@
 export declare const COLOR: {
+    gray100: string;
     gray200: string;
     gray300: string;
     gray400: string;

package/dist/types/src/components/badge/BadgeGroup.d.ts

@@ -10,6 +10,8 @@ export type BadgeGroupProps = Omit<BadgeProps, 'type' | 'size' | 'color'> & {
     groupClassName?: string;
     size?: BadgeGroupSize;
     color?: BadgeGroupColor;
+    href?: string;
+    target?: string;
 };
-export declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BadgeGroup: ({ groupLabel, groupIcon, groupClassName, color, size, href, target, ...props }: BadgeGroupProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=BadgeGroup.d.ts.map

package/dist/types/src/components/button/Button.d.ts

@@ -2,7 +2,7 @@ import { ComponentProps, ReactNode } from 'react';
 import { Size } from '../../../constant/size';
 import { SideSlotType } from '../../types/side-slot';
 import { DotProps } from '../dot';
-export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'link' | 'destructive';
+export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'link' | 'link-gray' | 'destructive';
 export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
     label: string;

package/dist/types/src/components/button/ButtonCloseX.d.ts

@@ -0,0 +1,9 @@
+import { Size } from '../../../constant/size';
+export type ButtonCloseXProps = {
+    size: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+    theme?: 'dark' | 'light';
+    onClick?: () => void;
+    className?: string;
+};
+export declare const ButtonCloseX: ({ size, theme, className, onClick }: ButtonCloseXProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonCloseX.d.ts.map

package/dist/types/src/components/date-picker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import 'flatpickr/dist/flatpickr.css';
 import { Options } from 'flatpickr/dist/types/options';
-import { DateTimePickerProps } from 'react-flatpickr';
+import { DateTimePickerProps, DateTimePickerHandle } from 'react-flatpickr';
 import { Size } from '../../../constant/size';
 export type DatePickerProps = {
     size?: Extract<Size, 'sm' | 'md'>;
@@ -9,5 +9,5 @@ export type DatePickerProps = {
     datePickerOptions?: Options;
     onChangeDate: (date: string) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
-export declare const DatePicker: ({ shouldFocus, currentDate, size, onChangeDate, datePickerOptions, ...attrs }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;
 //# sourceMappingURL=DatePicker.d.ts.map

package/dist/types/src/components/date-picker/RangeDatePicker.d.ts

@@ -20,5 +20,5 @@ export type RangeDatePickerProps = {
         currentDate: string;
     }) => void;
 };
-export declare const RangeDatePicker: ({ startDateOptions, endDateOptions, validationOption, onDateValidation, }: RangeDatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePicker: import("react").ForwardRefExoticComponent<RangeDatePickerProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=RangeDatePicker.d.ts.map

package/dist/types/src/components/modal/Modal.d.ts

@@ -1,6 +1,6 @@
+import { IconName } from '@ncds/ui-admin-icon';
 import { ReactNode } from 'react';
 import { FeaturedIconColor, FeaturedIconTheme } from '../featured-icon';
-import { IconName } from '@ncds/ui-admin-icon';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 export type ModalHeaderAlign = 'left' | 'center' | 'horizontal';
 export type ModalAlign = 'center' | 'right' | 'stretch';

package/dist/types/src/components/notification/FloatingNotification.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-export type FloatingNotificationVariant = 'neutral' | 'error' | 'warning' | 'success';
-export type FloatingNotificationSize = 'desktop' | 'mobile';
+import { NotificationAction, NotificationColor } from './Notification';
 export interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * 알림 제목 텍스트
@@ -14,7 +13,7 @@ export interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef
      * 알림 색상 스타일
      * @default 'neutral'
      */
-    variant?: FloatingNotificationVariant;
+    color?: NotificationColor;
     /**
      * 닫기 버튼 클릭 이벤트 핸들러
      */
@@ -26,7 +25,7 @@ export interface FloatingNotificationProps extends Omit<ComponentPropsWithoutRef
     /**
      * 버튼 영역 (선택사항)
      */
-    actions?: ReactNode;
+    actions?: NotificationAction[];
 }
 export declare const FloatingNotification: import("react").ForwardRefExoticComponent<FloatingNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=FloatingNotification.d.ts.map

package/dist/types/src/components/notification/FullWidthNotification.d.ts

@@ -1,6 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-export type FullWidthNotificationVariant = 'neutral' | 'error' | 'warning' | 'success';
-export type FullWidthNotificationSize = 'desktop' | 'mobile';
+import { NotificationAction, NotificationColor } from './Notification';
 export interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
      * 알림 제목 텍스트
@@ -14,7 +13,7 @@ export interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRe
      * 알림 색상 스타일
      * @default 'neutral'
      */
-    variant?: FullWidthNotificationVariant;
+    color?: NotificationColor;
     /**
      * 닫기 버튼 클릭 이벤트 핸들러
      */
@@ -26,7 +25,7 @@ export interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRe
     /**
      * 버튼 영역 (선택사항)
      */
-    actions?: ReactNode;
+    actions?: NotificationAction[];
 }
 export declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=FullWidthNotification.d.ts.map

package/dist/types/src/components/notification/Notification.d.ts

@@ -1,8 +1,9 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { IconName } from '@ncds/ui-admin-icon';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ColorTone } from '../../../constant/color';
 import { ButtonTheme } from '../button';
 export type NotificationType = 'floating' | 'full-width';
-export type NotificationVariant = 'neutral' | 'error' | 'warning' | 'success';
+export type NotificationColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success'>;
 export type NotificationSize = 'desktop' | 'mobile';
 export interface NotificationAction {
     /**
@@ -16,7 +17,7 @@ export interface NotificationAction {
     /**
      * 액션 버튼 색상 (3가지만 지원)
      */
-    hierarchy?: Extract<ButtonTheme, 'secondary-gray' | 'link-gray' | 'link'>;
+    hierarchy?: Extract<ButtonTheme, 'link' | 'link-gray'>;
 }
 export interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
@@ -40,7 +41,7 @@ export interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * 알림 색상 스타일
      * @default 'neutral'
      */
-    variant?: NotificationVariant;
+    color?: NotificationColor;
     /**
      * 닫기 버튼 클릭 이벤트 핸들러
      */

package/dist/types/src/components/notification/index.d.ts

@@ -1,4 +1,4 @@
+export * from './Notification';
 export * from './FloatingNotification';
 export * from './FullWidthNotification';
-export * from './Notification';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/constant/breakpoint.d.ts

@@ -0,0 +1,7 @@
+export declare const BREAKPOINT: {
+    readonly mobile: "768px";
+};
+export declare const MEDIA_QUERY: {
+    readonly mobile: "(max-width: 768px)";
+};
+//# sourceMappingURL=breakpoint.d.ts.map

package/dist/types/src/hooks/useMediaQuery.d.ts

@@ -0,0 +1,6 @@
+interface UseMediaQueryOptions {
+    onMatched?: () => void;
+}
+export declare const useMediaQuery: (query: string, options?: UseMediaQueryOptions) => boolean;
+export {};
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/ui-admin/assets/styles/style.css

@@ -622,41 +622,46 @@ button {
   display: block;
 }
 
-.ncua-btn-close {
+.ncua-button-close-x {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: var(--gray-400);
   border-radius: 8px;
   cursor: pointer;
+  background-color: transparent;
 }
-.ncua-btn-close:hover {
+.ncua-button-close-x:hover {
   background-color: var(--gray-50);
   color: var(--gray-500);
 }
-.ncua-btn-close:focus {
+.ncua-button-close-x:focus {
   background-color: var(--gray-50);
 }
-.ncua-btn-close--sm {
+.ncua-button-close-x--xs {
+  width: 28px;
+  height: 28px;
+}
+.ncua-button-close-x--sm {
   width: 36px;
   height: 36px;
 }
-.ncua-btn-close--md {
+.ncua-button-close-x--md {
   width: 40px;
   height: 40px;
 }
-.ncua-btn-close--lg {
+.ncua-button-close-x--lg {
   width: 44px;
   height: 44px;
 }
-.ncua-btn-close--dark {
+.ncua-button-close-x--dark {
   color: var(--gray-100);
 }
-.ncua-btn-close--dark:hover {
+.ncua-button-close-x--dark:hover {
   color: var(--base-white);
   background-color: rgba(255, 255, 255, 0.2);
 }
-.ncua-btn-close--dark:focus {
+.ncua-button-close-x--dark:focus {
   color: var(--gray-100);
   background-color: rgba(255, 255, 255, 0.2);
 }
@@ -1397,7 +1402,7 @@ button {
   cursor: pointer;
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
-  padding: 5px 10px;
+  padding: 4px 10px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
@@ -1566,7 +1571,7 @@ button {
   flex: 1;
 }
 .ncua-modal__header--close-button.ncua-modal__header--left {
-  padding: 20px 56px 20px 16px;
+  padding: 20px 56px 20px 20px;
 }
 
 .ncua-modal__title {
@@ -1592,19 +1597,6 @@ button {
   position: absolute;
   top: 10px;
   right: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 8px;
-  color: var(--gray-400);
-  border-radius: 8px;
-}
-.ncua-modal__close-button svg {
-  width: 20px;
-  height: 20px;
 }
 
 .ncua-modal__content {
@@ -1774,24 +1766,8 @@ button {
 }
 .ncua-floating-notification__close-button {
   position: absolute;
-  top: 8px;
-  right: 8px;
-  display: grid;
-  place-items: center;
-  background: transparent;
-  border: none;
-  padding: 8px;
-  color: var(--gray-400);
-}
-.ncua-floating-notification__close-button svg {
-  width: 20px;
-  height: 20px;
-}
-@media (max-width: 768px) {
-  .ncua-floating-notification__close-button svg {
-    width: 24px;
-    height: 24px;
-  }
+  top: 12px;
+  right: 12px;
 }
 .ncua-floating-notification .ncua-notification__action-button {
   min-height: 20px;
@@ -1816,22 +1792,6 @@ button {
   color: var(--blue-500);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-floating-notification__pc-icon {
-  display: flex;
-}
-@media (max-width: 768px) {
-  .ncua-floating-notification__pc-icon {
-    display: none;
-  }
-}
-.ncua-floating-notification__mobile-icon {
-  display: none;
-}
-@media (max-width: 768px) {
-  .ncua-floating-notification__mobile-icon {
-    display: flex;
-  }
-}
 
 .ncua-full-width-notification {
   width: 100%;
@@ -3227,8 +3187,9 @@ button {
 .ncua-badge-group {
   display: inline-flex;
   align-items: center;
-  padding: 4px 10px 4px 4px;
+  padding: 3px 10px 3px 4px;
   border-radius: 16px;
+  cursor: pointer;
 }
 .ncua-badge-group__label {
   margin-left: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -16,7 +16,7 @@
     "publish:npm": "npm publish --access=public",
     "start": "webpack --node-env development",
     "test": "react-scripts test",
-    "tsc": "tsc"
+    "tsc": "tsc --pretty --listFiles"
   },
   "author": {
     "name": "nhn-commerce-fe",