maru_design2 0.0.4 → 0.1.0

package/dist/components/molecules/dropdown/Dropdown.d.ts

@@ -20,7 +20,7 @@ interface DropdownProps<T extends Record<string, any>> {
     /**
      * 컴포넌트 위치의 기준이 될 엘리먼트 사용자 정의. (@v1 portalAnchor)
      */
-    anchorEl?: HTMLElement;
+    anchorEl?: HTMLElement | null;
     className?: string;
     /**
      * ['primary', 'secondary', 'positive', 'warning', 'danger']
@@ -46,14 +46,6 @@ interface DropdownProps<T extends Record<string, any>> {
      * 토글 안 좌측 상단에 노출할 라벨. (@v1 insideLabel)
      */
     inlineLabel?: string;
-    /**
-     * 메뉴 세로 크기(px). default=auto. (@v1 menuPosition.height)
-     */
-    height?: number;
-    /**
-     * 메뉴 아이템의 방향이 가로방향인지 여부. true인 경우 메뉴 뜨는 위치는 토글의 bottom-end. (@v1 isHorizonMenu)
-     */
-    horizonMenu?: boolean;
     label?: string;
     /**
      * 데이터가 없을때 메시지
@@ -84,6 +76,10 @@ interface DropdownProps<T extends Record<string, any>> {
      * 토글, 메뉴 가로 크기(px). default=100%. (@v1 menuPosition.width)
      */
     width?: number;
+    /**
+     * 메뉴 세로 크기(px). default=auto. (@v1 menuPosition.height)
+     */
+    height?: number;
 }
-export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, anchorEl, className, color, customButton, customMenuItem, disabled, errorMessage, inlineLabel, height, horizonMenu, label, noDataMessage, noSearchedMessage, onClear, placeholder, startArrow, toggleEndNode, type, width, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown<T extends Record<string, any>>({ data, selectedId, onSelect, idKey, displayKey, anchorEl, className, color, customButton, customMenuItem, disabled, errorMessage, inlineLabel, label, noDataMessage, noSearchedMessage, onClear, placeholder, startArrow, toggleEndNode, type, width, height, }: DropdownProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/molecules/dropdown/Menu.d.ts

@@ -6,7 +6,6 @@ interface Props<T extends Record<string, any>> {
     idKey: string;
     displayKey: string;
     filteredData: T[];
-    horizonMenu?: boolean;
     width?: number;
     height?: number;
     noMessage?: string;
@@ -17,5 +16,5 @@ interface Props<T extends Record<string, any>> {
     onSelect: (id?: string) => void;
     closeMenu: () => void;
 }
-declare function DropdownMenu<T extends Record<string, any>>({ parent, menuItemEls, selectedId, idKey, displayKey, filteredData, horizonMenu, width, height, noMessage, customMenuItem: CustomMenuItem, onSelect, closeMenu, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenu<T extends Record<string, any>>({ parent, menuItemEls, selectedId, idKey, displayKey, filteredData, width, height, noMessage, customMenuItem: CustomMenuItem, onSelect, closeMenu, }: Props<T>): import("react/jsx-runtime").JSX.Element;
 export default DropdownMenu;

package/dist/components/molecules/dropdown/toggles/Arrow.d.ts

@@ -1,7 +1,8 @@
 import { TColor } from '../../../../enums/color';
 interface Props {
     open: boolean;
+    focus: boolean;
     color: TColor;
 }
-declare function Arrow({ open, color }: Props): import("react/jsx-runtime").JSX.Element;
+declare function Arrow({ open, focus, color }: Props): import("react/jsx-runtime").JSX.Element;
 export default Arrow;

package/dist/components/molecules/pagination/Pagination.d.ts

@@ -15,12 +15,12 @@ export interface PaginationProps {
     totalPage: number;
     className?: string;
     /**
-     * 페이지네이션의 전후 버튼 숨김 여부. (@v1 buttonVisibility)
+     * prev, next 버튼 공간 차지 여부
      */
-    hiddenButton?: boolean;
+    buttonVisibility?: 'visible' | 'hidden';
     /**
      * 데이터 타입. ['button', 'input'] (@v1 isSearch)
      */
     type?: TButtonType;
 }
-export declare function Pagination({ page, onPageChange, totalPage, className, hiddenButton, type, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare function Pagination({ page, onPageChange, totalPage, className, buttonVisibility, type, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -3031,7 +3031,7 @@ function uuidv4(length) {
   }
 }
 
-var css_248z$9 = ".maru-checkbox-wrapper-4px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n\n.maru-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.maru-checkbox-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n  color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n  cursor: default;\n}";
+var css_248z$9 = ".maru-checkbox-wrapper-4px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 4px;\n}\n\n.maru-checkbox-wrapper-8px {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  gap: 8px;\n}\n\n.maru-checkbox-inner-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n  position: relative;\n}\n\n.maru-checkbox {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n}\n\n.maru-checkbox-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n  cursor: pointer;\n}\n.maru-checkbox-label.label-disabled {\n  color: #8c8c8c;\n}\n\n.maru-checkbox:disabled,\n.label-disabled {\n  cursor: default;\n}";
 styleInject(css_248z$9);
 
 var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
@@ -3098,11 +3098,10 @@ function Chip(_a) {
   return jsxs("div", __assign({
     className: classNames('maru-chip', "maru-chip-".concat(color, "-").concat(variant), "maru-chip-size-".concat(size), className)
   }, {
-    children: [variant === 'dot' &&
-    // TODO: modify icon color to enum+string
-    jsx(Icon, {
+    children: [variant === 'dot' && jsx(Icon, {
       name: ICONS.StateThin,
-      size: 16
+      size: 16,
+      color: color
     }), jsx("span", {
       children: content.toLocaleString('en')
     })]
@@ -5315,7 +5314,7 @@ function Toggle(_a) {
   });
 }
 
-var css_248z$3 = ".maru-tooltip-wrapper {\n  position: relative;\n  display: inline-flex;\n}\n\n.maru-tooltip {\n  z-index: 1612;\n  position: absolute;\n  border-radius: 5px;\n  padding: 2px 4px;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.maru-tooltip-default {\n  background-color: rgba(92, 92, 92, 0.5019607843);\n}\n.maru-tooltip-default,\n.maru-tooltip-default span,\n.maru-tooltip-default p,\n.maru-tooltip-default pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n\n.maru-tooltip-danger {\n  background-color: rgba(229, 62, 62, 0.1019607843);\n}\n.maru-tooltip-danger,\n.maru-tooltip-danger span,\n.maru-tooltip-danger p,\n.maru-tooltip-danger pre {\n  color: #e53e3e;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
+var css_248z$3 = ".maru-tooltip {\n  z-index: 1612;\n  border-radius: 5px;\n  padding: 2px 4px;\n  display: none;\n}\n.maru-tooltip[data-open=true] {\n  display: block;\n}\n.maru-tooltip[data-open=false] {\n  display: none;\n}\n\n.maru-tooltip-default {\n  background-color: rgba(92, 92, 92, 0.5019607843);\n}\n.maru-tooltip-default,\n.maru-tooltip-default span,\n.maru-tooltip-default p,\n.maru-tooltip-default pre {\n  color: white;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n\n.maru-tooltip-danger {\n  background-color: rgba(229, 62, 62, 0.1019607843);\n}\n.maru-tooltip-danger,\n.maru-tooltip-danger span,\n.maru-tooltip-danger p,\n.maru-tooltip-danger pre {\n  color: #e53e3e;\n  white-space: pre-wrap;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}";
 styleInject(css_248z$3);
 
 function Tooltip(_a) {
@@ -5365,15 +5364,18 @@ function Tooltip(_a) {
       instance_1.update();
     }
   }, [open]);
-  var Tootip = open ? jsx("div", __assign({
-    ref: tooltipRef,
-    className: classNames('maru-tooltip', "maru-tooltip-".concat(color)),
-    role: "tooltip"
-  }, {
-    children: content
-  })) : null;
+  var Tootip = useMemo(function () {
+    return jsx("div", __assign({
+      className: classNames('maru-tooltip', "maru-tooltip-".concat(color)),
+      ref: tooltipRef,
+      role: "tooltip",
+      "data-open": open
+    }, {
+      children: content
+    }));
+  }, [open]);
   return jsxs("div", __assign({
-    className: classNames('maru-tooltip-wrapper', className),
+    className: className,
     ref: wrapperRef,
     onMouseOver: function onMouseOver() {
       return setOpen(true);
@@ -5450,13 +5452,14 @@ var setHighlightTextOnDataExceptSpace = function setHighlightTextOnDataExceptSpa
 
 function Arrow(_a) {
   var open = _a.open,
+    focus = _a.focus,
     color = _a.color;
   return jsx("span", __assign({
     className: "maru-dropdown-toggle-arrow"
   }, {
     children: jsx(Icon, {
       name: open ? ICONS.ChevronUp : ICONS.ChevronDown,
-      color: color,
+      color: focus || open ? color : '#e4e4e4',
       size: 16
     })
   }));
@@ -5484,7 +5487,6 @@ function Clear(_a) {
     }, {
       children: jsx(Icon, {
         name: ICONS.XSmallThin,
-        color: "gray",
         size: 20
       })
     }))
@@ -5510,6 +5512,9 @@ function DropdownToggleButton(_a) {
     clearSelected = _a.clearSelected,
     onClear = _a.onClear,
     onKeyDown = _a.onKeyDown;
+  var _b = useState(false),
+    focus = _b[0],
+    setFocus = _b[1];
   var handleClick = function handleClick() {
     if (disabled) return;
     initFilteredData();
@@ -5522,6 +5527,18 @@ function DropdownToggleButton(_a) {
     }),
     style: {
       width: width || '100%'
+    },
+    onMouseOver: function onMouseOver() {
+      return setFocus(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setFocus(open);
+    },
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
     }
   }, {
     children: [inlineLabel && jsx("span", __assign({
@@ -5537,6 +5554,7 @@ function DropdownToggleButton(_a) {
     }, {
       children: [startArrow && !disabled && jsx(Arrow, {
         open: open,
+        focus: focus,
         color: color
       }), jsx("span", __assign({
         className: classNames('maru-dropdown-button-contents', {
@@ -5553,6 +5571,7 @@ function DropdownToggleButton(_a) {
         initFilteredData: initFilteredData
       }), !startArrow && !disabled && jsx(Arrow, {
         open: open,
+        focus: focus,
         color: color
       })]
     }))]
@@ -5578,6 +5597,9 @@ function DropdownToggleInput(_a) {
     clearSelected = _a.clearSelected,
     onClear = _a.onClear,
     onKeyDown = _a.onKeyDown;
+  var _b = useState(false),
+    focus = _b[0],
+    setFocus = _b[1];
   var handleClick = function handleClick() {
     if (disabled) return;
     initFilteredData();
@@ -5595,7 +5617,19 @@ function DropdownToggleInput(_a) {
     style: {
       width: width || '100%'
     },
-    onKeyDown: onKeyDown
+    onKeyDown: onKeyDown,
+    onMouseOver: function onMouseOver() {
+      return setFocus(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setFocus(open);
+    },
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
+    }
   }, {
     children: [inlineLabel && jsx("span", __assign({
       className: "inline-label"
@@ -5606,6 +5640,7 @@ function DropdownToggleInput(_a) {
     }, {
       children: [startArrow && !disabled && jsx(Arrow, {
         open: open,
+        focus: focus,
         color: color
       }), jsx("input", {
         "aria-autocomplete": "none",
@@ -5622,6 +5657,7 @@ function DropdownToggleInput(_a) {
         initFilteredData: initFilteredData
       }), !startArrow && !disabled && jsx(Arrow, {
         open: open,
+        focus: focus,
         color: color
       })]
     }))]
@@ -5635,11 +5671,9 @@ function DropdownMenu(_a) {
     idKey = _a.idKey,
     displayKey = _a.displayKey,
     filteredData = _a.filteredData,
-    horizonMenu = _a.horizonMenu,
     width = _a.width,
     height = _a.height,
     noMessage = _a.noMessage,
-    // menuBottomButton,
     CustomMenuItem = _a.customMenuItem,
     onSelect = _a.onSelect,
     closeMenu = _a.closeMenu;
@@ -5656,12 +5690,12 @@ function DropdownMenu(_a) {
         pl = _a.left;
       var newWidth = width || pw;
       menu.style.width = "".concat(newWidth, "px");
-      if (!horizonMenu) {
-        menu.style.left = "".concat(pl, "px");
-      } else {
-        // TODO: horizon menu test
-        menu.style.left = "".concat(pl + pw - newWidth, "px");
-      }
+      // if (!horizonMenu) {
+      menu.style.left = "".concat(pl, "px");
+      // } else {
+      // TODO: horizon menu test
+      // menu.style.left = `${pl + pw - newWidth}px`;
+      // }
       // FIXME: 무슨 조건인지 잘 모르겠음
       if (ph + pt + menu.offsetHeight + 10 > document.body.offsetHeight) {
         menu.style.top = "".concat(pt - menu.offsetHeight - 4, "px");
@@ -5672,7 +5706,8 @@ function DropdownMenu(_a) {
         menuWrapperRef.current.style.display = 'block';
       }
     }
-  }, [horizonMenu]);
+  }, [width]);
+  // }, [horizonMenu]);
   var handleWrapperClick = function handleWrapperClick(e) {
     e.stopPropagation();
     closeMenu();
@@ -5760,6 +5795,7 @@ function DropdownMenu(_a) {
 var css_248z$2 = ".maru-dropdown .maru-dropdown-label {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 600;\n  color: #5c5c5c;\n  display: block;\n  margin-bottom: 4px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper {\n  width: 100%;\n  border-radius: 8px;\n  border: 1px solid #e4e4e4;\n  cursor: pointer;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover {\n  border: 1px solid var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:hover .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within {\n  border: 1px solid var(--p);\n  outline: none;\n  background-color: var(--p-10);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-primary:focus-within .maru-dropdown-input > input {\n  color: var(--p);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover {\n  border: 1px solid #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:hover .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within {\n  border: 1px solid #8c8c8c;\n  outline: none;\n  background-color: #fafafa;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-secondary:focus-within .maru-dropdown-input > input {\n  color: #8c8c8c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover {\n  border: 1px solid #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:hover .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within {\n  border: 1px solid #58c5a6;\n  outline: none;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-positive:focus-within .maru-dropdown-input > input {\n  color: #58c5a6;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover {\n  border: 1px solid #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:hover .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within {\n  border: 1px solid #ffb020;\n  outline: none;\n  background-color: #fff7e9;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-warning:focus-within .maru-dropdown-input > input {\n  color: #ffb020;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover {\n  border: 1px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:hover .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within {\n  border: 1px solid #e53e3e;\n  outline: none;\n  background-color: #fcecec;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:active .maru-dropdown-input > input, .maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-button,\n.maru-dropdown .maru-dropdown-toggle-wrapper.maru-dropdown-toggle-wrapper-danger:focus-within .maru-dropdown-input > input {\n  color: #e53e3e;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.inline-label-wrapper .maru-dropdown-button {\n  padding: 2px 10px 2px 14px;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .inline-label {\n  display: block;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 10px;\n  letter-spacing: -0.4px;\n  font-weight: 500;\n  color: #bdbdbd;\n  padding: 2px 10px 0 14px;\n  transform: translateY(3px);\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-button .maru-dropdown-button-contents.placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  height: 37px;\n  border: unset;\n  border-radius: 8px;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 8px 10px 8px 14px;\n  color: #5c5c5c;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input {\n  width: 100%;\n  height: 100%;\n  border: unset;\n  outline: unset;\n  background-color: unset;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-input > input::placeholder {\n  color: #bdbdbd;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper .maru-dropdown-toggle-arrow {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-dropdown .maru-dropdown-toggle-wrapper.errored {\n  border: 2px solid #e53e3e;\n}\n.maru-dropdown .maru-dropdown-error-message {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n  display: block;\n  margin-top: 4px;\n}\n\n.maru-dropdown-menu-wrapper {\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  z-index: 1600;\n  display: none;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu {\n  margin-top: 4px;\n  position: absolute;\n  z-index: 1601;\n  border-radius: 8px;\n  box-shadow: 0px 0px 6px #e4e4e4;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper {\n  overflow-y: auto;\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  width: 100%;\n  background-color: white;\n  border: unset;\n  cursor: pointer;\n  height: 37px;\n  padding: 8px 14px;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 500;\n  color: #5c5c5c;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-selected, .maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item:hover {\n  background-color: #fafafa;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n  text-align: start;\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-item-span em {\n  font-style: unset;\n  background-color: var(--p-20-per);\n}\n.maru-dropdown-menu-wrapper .maru-dropdown-menu .maru-dropdown-menu-item-wrapper .maru-dropdown-menu-no-data {\n  background-color: transparent;\n  border: unset;\n}";
 styleInject(css_248z$2);
 
+// eslint-disable-next-line import/prefer-default-export
 function Dropdown(_a) {
   var data = _a.data,
     selectedId = _a.selectedId,
@@ -5775,8 +5811,6 @@ function Dropdown(_a) {
     disabled = _a.disabled,
     errorMessage = _a.errorMessage,
     inlineLabel = _a.inlineLabel,
-    height = _a.height,
-    horizonMenu = _a.horizonMenu,
     label = _a.label,
     noDataMessage = _a.noDataMessage,
     noSearchedMessage = _a.noSearchedMessage,
@@ -5786,7 +5820,8 @@ function Dropdown(_a) {
     toggleEndNode = _a.toggleEndNode,
     _c = _a.type,
     type = _c === void 0 ? 'button' : _c,
-    width = _a.width;
+    width = _a.width,
+    height = _a.height;
   var _d = useState(false),
     open = _d[0],
     setOpen = _d[1];
@@ -5957,11 +5992,9 @@ function Dropdown(_a) {
         idKey: idKey,
         displayKey: displayKey,
         filteredData: filteredData,
-        horizonMenu: horizonMenu,
         width: width,
         height: height,
         noMessage: type === 'button' ? noDataMessage : noSearchedMessage,
-        // menuBottomButton={menuBottomButton}
         customMenuItem: customMenuItem,
         onSelect: onSelect,
         closeMenu: closeMenu
@@ -5970,7 +6003,7 @@ function Dropdown(_a) {
   }));
 }
 
-var css_248z$1 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: rgba(92, 92, 92, 0.5019607843);\n  display: none;\n  z-index: 6006;\n}\n.maru-modal-wrapper[data-show=true] {\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: white;\n  padding: 40px;\n  border-radius: 20px;\n  box-shadow: 0px 5px 20px 5px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1160px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 700;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0 0 0 8px;\n}";
+var css_248z$1 = ".maru-modal-wrapper {\n  width: 100vw;\n  height: 100vh;\n  position: fixed;\n  top: 0;\n  left: 0;\n  background-color: rgba(92, 92, 92, 0.5019607843);\n  z-index: 6006;\n  display: block;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-modal-wrapper .maru-modal {\n  background-color: white;\n  padding: 40px;\n  border-radius: 20px;\n  box-shadow: 0px 5px 20px 5px #8c8c8c;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xs {\n  width: 300px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-s {\n  width: 400px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m {\n  width: 550px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-m .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l {\n  width: 860px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-l .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl {\n  width: 1160px;\n}\n.maru-modal-wrapper .maru-modal.maru-modal-xl .maru-modal-header {\n  padding-bottom: 8px;\n  border-bottom: 1px solid #e4e4e4;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  margin-bottom: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-header > h1 {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 16px;\n  letter-spacing: -0.64px;\n  font-weight: 700;\n  color: #5c5c5c;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  flex-direction: row;\n  margin-top: 24px;\n}\n.maru-modal-wrapper .maru-modal .maru-modal-footer button {\n  margin: 0 0 0 8px;\n}";
 styleInject(css_248z$1);
 
 function Modal(_a) {
@@ -6009,6 +6042,9 @@ function Modal(_a) {
       (_a = okButton === null || okButton === void 0 ? void 0 : okButton.onClick) === null || _a === void 0 ? void 0 : _a.call(okButton);
     }
   };
+  var handleClose = function handleClose() {
+    onClose();
+  };
   var handleModalClick = function handleModalClick(e) {
     e.stopPropagation();
   };
@@ -6016,9 +6052,6 @@ function Modal(_a) {
     e.stopPropagation();
   };
   // FIXME: 취소에서 탭 > 엔터하면 confirm 동작. 확인 필요
-  var handleCancelClick = function handleCancelClick() {
-    onClose();
-  };
   var handleOkButtonClick = function handleOkButtonClick() {
     var _a;
     (_a = okButton === null || okButton === void 0 ? void 0 : okButton.onClick) === null || _a === void 0 ? void 0 : _a.call(okButton);
@@ -6031,7 +6064,6 @@ function Modal(_a) {
       className: "maru-modal-wrapper",
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex: 0,
-      "data-show": open,
       onClick: handleWrapperClick,
       onKeyDown: handleWrapperKeyDown,
       role: "presentation"
@@ -6048,8 +6080,14 @@ function Modal(_a) {
         }, {
           children: [title && jsx("h1", {
             children: title
-          }), !hiddenCloseButton && jsx("span", {
-            children: "X"
+          }), !hiddenCloseButton && jsx(Button, {
+            startIcon: {
+              name: ICONS.XLarge,
+              size: 20,
+              color: '#5c5c5c'
+            },
+            color: "secondary",
+            onClick: handleClose
           })]
         })), jsx("main", __assign({
           className: "maru-modal-body"
@@ -6060,7 +6098,7 @@ function Modal(_a) {
         }, {
           children: [cancelButton && jsx(Button, __assign({
             color: "secondary",
-            onClick: handleCancelClick,
+            onClick: handleClose,
             onKeyDown: handleFooterKeyDown,
             disabled: cancelButton.disabled
           }, {
@@ -6093,36 +6131,37 @@ function Pagination(_a) {
     onPageChange = _a.onPageChange,
     totalPage = _a.totalPage,
     className = _a.className,
-    hiddenButton = _a.hiddenButton,
-    _b = _a.type,
-    type = _b === void 0 ? 'button' : _b;
-  var _c = useState(false),
-    prevDisabled = _c[0],
-    setPrevDisabled = _c[1];
+    _b = _a.buttonVisibility,
+    buttonVisibility = _b === void 0 ? 'visible' : _b,
+    _c = _a.type,
+    type = _c === void 0 ? 'button' : _c;
   var _d = useState(false),
-    nextDisabled = _d[0],
-    setNextDisabled = _d[1];
-  var _e = useState(-1),
-    inputValue = _e[0],
-    setInputValue = _e[1];
+    prevDisabled = _d[0],
+    setPrevDisabled = _d[1];
+  var _e = useState(false),
+    nextDisabled = _e[0],
+    setNextDisabled = _e[1];
+  var _f = useState(-1),
+    inputValue = _f[0],
+    setInputValue = _f[1];
   var prevVisibility = useMemo(function () {
     if (totalPage > 1 && !prevDisabled) {
       return 'visible';
     }
-    if (hiddenButton) {
+    if (buttonVisibility === 'hidden') {
       return 'hidden';
     }
     return undefined;
-  }, [totalPage, prevDisabled, hiddenButton]);
+  }, [totalPage, prevDisabled, buttonVisibility]);
   var nextVisibility = useMemo(function () {
     if (totalPage > 1 && !nextDisabled) {
       return 'visible';
     }
-    if (hiddenButton) {
+    if (buttonVisibility === 'hidden') {
       return 'hidden';
     }
     return undefined;
-  }, [totalPage, nextDisabled, hiddenButton]);
+  }, [totalPage, nextDisabled, buttonVisibility]);
   var defaultRange = useMemo(function () {
     var pageRange = [];
     var start = Math.floor((page - 1) / 10) * 10;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",

package/.babelrc.json

@@ -1,18 +0,0 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "chrome": 100
-        }
-      }
-    ],
-    [
-      "@babel/preset-react",
-      { "runtime": "automatic" }
-    ],
-    ["@babel/preset-typescript"]
-  ],
-}

package/.eslintrc.json

@@ -1,110 +0,0 @@
-{
-  "extends": [
-    "airbnb",
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "plugins": ["react", "@typescript-eslint", "prettier", "simple-import-sort"],
-  "rules": {
-    "no-tabs": [
-      "error",
-      {
-        "allowIndentationTabs": true
-      }
-    ],
-    "no-mixed-spaces-and-tabs": 0,
-    "simple-import-sort/imports": [
-      "warn",
-      {
-        "groups": [
-          ["^react", "^(?!src)(?=@?\\w)"],
-          [
-            "constants",
-            "hooks",
-            "reducers",
-            "routes",
-            "store",
-            "types",
-            "utils"
-          ],
-          [
-            "views",
-            "^\\.\\.(?!/?$)",
-            "^\\.\\./?$",
-            "^\\./(?=.*/)(?!/?$)",
-            "^\\.(?!/?$)",
-            "^\\./?$",
-            "components"
-          ],
-          ["assets", "^.+\\.s?css$"]
-        ]
-      }
-    ],
-    "import/order": "off",
-    "import/extensions": [
-      "off",
-      {
-        "ts": "always",
-        "tsx": "always",
-        "js": "always",
-        "jsx": "always"
-      }
-    ],
-    "import/no-unresolved": "off",
-    "react/jsx-filename-extension": [
-      "warn",
-      {
-        "extensions": [".ts", ".tsx"]
-      }
-    ],
-    "react/destructuring-assignment": 0,
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"],
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": true,
-        "optionalDependencies": true,
-        "peerDependencies": true
-      }
-    ],
-    "linebreak-style": "off",
-    "object-curly-newline": "off",
-    "comma-dangle": "off",
-    "react/prop-types": "off",
-    "operator-linebreak": "off",
-    "import/prefer-default-export": "warn",
-    "no-console": "off",
-    "implicit-arrow-linebreak": "off",
-    "react/jsx-curly-newline": "off",
-    "no-param-reassign": [
-      "error",
-      {
-        "props": false
-      }
-    ],
-    "@typescript-eslint/ban-types": "warn",
-    "no-nested-ternary": "off",
-    "indent": "off",
-    "camelcase": "off",
-    "no-confusing-arrow": "off",
-    "function-paren-newline": "off",
-    "@typescript-eslint/no-empty-function": "warn",
-    "no-plusplus": "warn",
-    "react/jsx-wrap-multilines": "off",
-    "no-restricted-syntax": "off",
-    "no-await-in-loop": "off",
-    "react/require-default-props": [
-      1,
-      {
-        "functions": "ignore"
-      }
-    ],
-    "jsx-a11y/label-has-associated-control": [
-    2,
-    {
-      "labelAttributes": ["htmlFor"]
-    }
-    ]
-  }
-}

package/.github/workflows/chromatic.yml

@@ -1,19 +0,0 @@
-name: "Chromatic"
-
-on: push
-
-jobs:
-  chromatic-release:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - run: yarn
-      - uses: chromaui/action@latest
-        with:
-          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          token: ${{ secrets.GITHUB_TOKEN }}

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true,
-  "useTabs": false,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "printWidth": 80
-}

package/build-storybook.log

@@ -1,29 +0,0 @@
-yarn run v1.22.22
-$ storybook build --output-dir /var/folders/px/wfswfhnj2_96379m3pn48snm0000gn/T/chromatic--60662-3uZghrajfe3J
-@storybook/cli v8.0.6
-
-info => Cleaning outputDir: ../../../../../var/folders/px/wfswfhnj2_96379m3pn48snm0000gn/T/chromatic--60662-3uZghrajfe3J
-info => Loading presets
-info => Building manager..
-info => Manager built (106 ms)
-info => Building preview..
-WARN No story files found for the specified pattern: src/**/*.mdx
-info Addon-docs: using MDX3
-info => Using implicit CSS loaders
-info => Using default Webpack5 setup
-info Using tsconfig paths for react-docgen
-WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
-WARN This can impact web performance.
-WARN Assets: 
-WARN   841.8b90d07c.iframe.bundle.js (1.51 MiB)
-WARN   589.80a80dfc.iframe.bundle.js (628 KiB)
-WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
-WARN Entrypoints:
-WARN   main (1.53 MiB)
-WARN       runtime~main.fb7a63fd.iframe.bundle.js
-WARN       841.8b90d07c.iframe.bundle.js
-WARN       main.26a48fe5.iframe.bundle.js
-WARN 
-info => Preview built (5.97 s)
-info => Output directory: /var/folders/px/wfswfhnj2_96379m3pn48snm0000gn/T/chromatic--60662-3uZghrajfe3J
-Done in 8.54s.

package/scripts/svg-parser.js

@@ -1,224 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const fs = require('fs');
-const path = require('path');
-
-const inputDir = './src/assets/icons';
-const outputDir = './src/components/atoms/icon';
-const svgs = fs.readdirSync(inputDir);
-
-// 아이콘의 정보들을 모을 객체
-const icons = {};
-// 아이콘의 이름을 모을 객체
-const names = {};
-
-const toCamelCase = (pascalStr) =>
-  pascalStr
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join('');
-
-const readFile = (filePath, fileName, fileExtension) =>
-  new Promise((resolve, reject) => {
-    fs.readFile(filePath, 'utf8', (err, data) => {
-      if (err) {
-        reject(err);
-        return;
-      }
-
-      console.log('---------- parsing start ----------');
-
-      console.log('((data))', data);
-
-      // svg args 추출
-      const svgStartRegex = /<svg/g;
-      const svgEndRegex = />/;
-      const svgArgs = data.split(svgStartRegex)[1].split(svgEndRegex)[0];
-
-      console.log('**svgArgs', svgArgs);
-
-      // width 추출
-      const widthRegex = /width=".{1,9}"/g;
-      const width = svgArgs.match(widthRegex)?.[0]?.split('"')?.[1];
-      console.log('*width', width);
-
-      // height 추출
-      const heightRegex = /height=".{1,9}"/g;
-      const height = svgArgs.match(heightRegex)?.[0]?.split('"')?.[1];
-      console.log('*height', height);
-
-      // viewBox 추출
-      const viewBoxRegex = /viewBox="[0-9\s-.]*"/;
-      const viewBox = svgArgs.match(viewBoxRegex)?.[0]?.split('"')?.[1];
-      console.log('*viewBox', viewBox);
-
-      // svgFill 추출
-      const fillRegex = /fill=".{1,9}"/g;
-      const svgFill = svgArgs.match(fillRegex)?.[0]?.split('"')?.[1];
-      console.log('*svgFill', svgFill);
-
-      // path args 추출
-      const pathStartRegex = /<path/g;
-      const paths = data
-        .split(pathStartRegex)
-        .filter((_, idx) => idx > 0)
-        .map((pathArgs) => {
-          // d 추출
-          const dRegex = /d=".*"/g;
-          const d = pathArgs.match(dRegex)?.[0]?.split('"')?.[1];
-          console.log('*d', d);
-
-          // pathFill 추출
-          const pathFill = pathArgs.match(fillRegex)?.[0]?.split('"')?.[1];
-          console.log('*pathFill', pathFill);
-
-          // fillRule 추출
-          const fillRuleRegex = /fill-rule=".{1,9}"/g;
-          const fillRule = pathArgs.match(fillRuleRegex)?.[0]?.split('"')?.[1];
-          console.log('*fillRule', fillRule);
-
-          // clipRule 추출
-          const clipRuleRegex = /clip-rule=".{1,9}"/g;
-          const clipRule = pathArgs.match(clipRuleRegex)?.[0]?.split('"')?.[1];
-          console.log('*clipRule', clipRule);
-
-          // stroke 추출
-          const strokeRegex = /stroke=".{1,9}"/g;
-          const stroke = pathArgs.match(strokeRegex)?.[0]?.split('"')?.[1];
-          console.log('*stroke', stroke);
-
-          // strokeWidth 추출
-          const strokeWidthRegex = /stroke-width=".{1,9}"/g;
-          const strokeWidth = pathArgs
-            .match(strokeWidthRegex)?.[0]
-            ?.split('"')?.[1];
-          console.log('*strokeWidth', strokeWidth);
-
-          // strokeLinecap 추출
-          const strokeLinecapRegex = /stroke-linecap=".{1,9}"/g;
-          const strokeLinecap = pathArgs
-            .match(strokeLinecapRegex)?.[0]
-            ?.split('"')?.[1];
-          console.log('*strokeLinecap', strokeLinecap);
-
-          // strokeLinejoin 추출
-          const strokeLinejoinRegex = /stroke-linejoin=".{1,9}"/g;
-          const strokeLinejoin = pathArgs
-            .match(strokeLinejoinRegex)?.[0]
-            ?.split('"')?.[1];
-          console.log('*strokeLinejoin', strokeLinejoin);
-
-          return {
-            d,
-            fill: pathFill,
-            fillRule,
-            clipRule,
-            stroke,
-            strokeWidth,
-            strokeLinecap,
-            strokeLinejoin,
-          };
-        });
-
-      // circle args 추출
-      const circleStartRegex = /<circle/g;
-      const circles = data
-        .split(circleStartRegex)
-        .filter((_, idx) => idx > 0)
-        .map((circleArgs) => {
-          // cx 추출
-          const cxRegex = /cx=".{1,9}"/g;
-          const cx = circleArgs.match(cxRegex)?.[0]?.split('"')?.[1];
-          console.log('*cx', cx);
-
-          // cy 추출
-          const cyRegex = /cy=".{1,9}"/g;
-          const cy = circleArgs.match(cyRegex)?.[0]?.split('"')?.[1];
-          console.log('*cy', cy);
-
-          // r 추출
-          const rRegex = /r=".{1,9}"/g;
-          const r = circleArgs.match(rRegex)?.[0]?.split('"')?.[1];
-          console.log('*r', r);
-
-          // circleFill 추출
-          const circleFill = circleArgs.match(fillRegex)?.[0]?.split('"')?.[1];
-          console.log('*circleFill', circleFill);
-
-          return { cx, cy, r, fill: circleFill };
-        });
-
-      const fileNameWithoutExtension = toCamelCase(
-        fileName.split(fileExtension)[0],
-      );
-      console.log('fileNameWithoutExtension', fileNameWithoutExtension);
-
-      icons[fileNameWithoutExtension] = {
-        width,
-        height,
-        viewBox,
-        fill: svgFill,
-        paths,
-        circles,
-      };
-      names[fileNameWithoutExtension] = fileNameWithoutExtension;
-
-      resolve();
-    });
-  });
-
-async function main() {
-  for (const svg of svgs) {
-    const extension = path.extname(svg);
-    if (extension === '.svg' && !svg.includes('NoConvert')) {
-      await readFile(`${inputDir}/${svg}`, svg, extension);
-    }
-  }
-
-  console.log('### icons', icons);
-  console.log('### names', names);
-
-  fs.writeFileSync(
-    `${outputDir}/iconmap.ts`,
-    `/* eslint-disable no-multiple-empty-lines */
-    /* eslint-disable no-trailing-spaces */
-    /* eslint-disable eol-last */
-    /* eslint-disable object-curly-spacing */
-    /* eslint-disable comma-spacing */
-    /* eslint-disable key-spacing */
-    /* eslint-disable quotes */
-    /* eslint-disable quote-props */
-    export const iconmap: {
-      [key: string]: {
-        width: string;
-        height: string;
-        viewBox: string;
-        fill: string;
-        paths: {
-          d: string;
-          fill?: string;
-          fillRule?: string;
-          clipRule?: string;
-          stroke?: string;
-          strokeWidth?: string;
-          strokeLinecap?: string;
-          strokeLinejoin?: string;
-        }[];
-        circles: {
-          cx: string;
-          cy: string;
-          r: string;
-          fill: string;
-        }[];
-      };
-    } = ${JSON.stringify(icons)};
-    export const ICONS = ${JSON.stringify(names)} as const;
-    export type TIcons = (typeof ICONS)[keyof typeof ICONS];
-    `,
-    'utf8',
-    (error) => {
-      if (error) throw error;
-    },
-  );
-}
-
-main();