maru_design2 0.0.4 → 2.0.0

package/dist/components/atoms/icon/index.d.ts

@@ -1 +1,2 @@
 export * from './Icon';
+export { ICONS } from './iconmap';

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

@@ -234,12 +234,7 @@ var iconmap = {
       "d": "M3 3.8742L3.19433 2.25H7.8583L8.05263 3.8742C7.83887 4.12261 7.47611 4.34236 6.96437 4.53344V13.4761C7.47611 13.6799 7.83887 13.8965 8.05263 14.1258L7.8583 15.75H3.19433L3 14.1258C3.1749 13.9029 3.54089 13.6863 4.09798 13.4761V4.53344C3.54737 4.34236 3.18138 4.12261 3 3.8742ZM15 14.1258L14.796 15.75H11.4923L7.08097 8.7086L10.404 4.36146C10.0283 4.18312 9.76923 4.00796 9.62672 3.83599L9.82105 2.25H14.3587L14.5628 3.83599C14.3749 4.04618 14.0283 4.25318 13.5231 4.45701L10.0834 8.63217L13.2316 13.285C14.0802 13.4634 14.6696 13.7436 15 14.1258Z",
       "fill": "#8C8C8C"
     }],
-    "circles": [{
-      "cx": "9",
-      "cy": "9",
-      "r": "9",
-      "fill": "white"
-    }]
+    "circles": []
   },
   "T": {
     "width": "18",
@@ -261,12 +256,7 @@ var iconmap = {
       "d": "M14.4038 4.60278L10.648 15.75H7.9166L4.12184 4.51739C3.54954 4.32133 3.17559 4.10313 3 3.86279L3.1951 2.25H7.87758L8.07269 3.86279C7.88409 4.11578 7.54591 4.32133 7.05815 4.47944L8.75555 10.2381C8.89862 10.6808 9.01243 11.1109 9.09698 11.5283C9.18152 11.9394 9.24005 12.3315 9.27257 12.7047L9.29208 13.0367H9.57498C9.58799 12.2461 9.75383 11.3259 10.0725 10.276L11.8479 4.49842C11.3472 4.3403 10.996 4.12843 10.7944 3.86279L10.9895 2.25H15.5451L15.75 3.86279C15.5094 4.1474 15.0606 4.39406 14.4038 4.60278Z",
       "fill": "#8C8C8C"
     }],
-    "circles": [{
-      "cx": "9",
-      "cy": "9",
-      "r": "9",
-      "fill": "white"
-    }]
+    "circles": []
   },
   "AddLineThin": {
     "width": "18",
@@ -2861,30 +2851,24 @@ function Icon(_a) {
     fill: fill,
     xmlns: "http://www.w3.org/2000/svg"
   }, {
-    children: [circles.map(function (circle) {
-      return (
-        // eslint-disable-next-line react/jsx-key
-        jsx("circle", {
-          cx: circle.cx,
-          cy: circle.cy,
-          r: circle.r,
-          fill: circle.fill && keyColor
-        })
-      );
-    }), paths.map(function (path) {
-      return (
-        // eslint-disable-next-line react/jsx-key
-        jsx("path", {
-          d: path.d,
-          fill: path.fill && keyColor,
-          fillRule: path.fillRule,
-          clipRule: path.clipRule,
-          stroke: path.stroke && keyColor,
-          strokeWidth: path.strokeWidth,
-          strokeLinecap: path.strokeLinecap,
-          strokeLinejoin: path.strokeLinejoin
-        })
-      );
+    children: [circles.map(function (circle, idx) {
+      return jsx("circle", {
+        cx: circle.cx,
+        cy: circle.cy,
+        r: circle.r,
+        fill: circle.fill && keyColor
+      }, "circle-".concat(idx));
+    }), paths.map(function (path, idx) {
+      return jsx("path", {
+        d: path.d,
+        fill: path.fill && keyColor,
+        fillRule: path.fillRule,
+        clipRule: path.clipRule,
+        stroke: path.stroke && keyColor,
+        strokeWidth: path.strokeWidth,
+        strokeLinecap: path.strokeLinecap,
+        strokeLinejoin: path.strokeLinejoin
+      }, "path-".concat(idx));
     })]
   }));
 }
@@ -2932,7 +2916,7 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     }
     return (_a = icon === null || icon === void 0 ? void 0 : icon.color) !== null && _a !== void 0 ? _a : 'secondary';
   };
-  return jsxs("button", __assign({
+  return jsxs("button", __assign({}, props, {
     ref: ref,
     type: "button",
     className: classNames('maru-button', "maru-button-".concat(color, "-").concat(variant), "size-".concat(size), {
@@ -2960,7 +2944,7 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     onBlur: function onBlur() {
       return setIsFocused(false);
     }
-  }, props, {
+  }, {
     children: [startIcon && jsx(Icon, {
       name: startIcon.name,
       size: startIcon.size,
@@ -3031,7 +3015,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 +3082,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 +5298,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 +5348,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 +5436,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 +5471,6 @@ function Clear(_a) {
     }, {
       children: jsx(Icon, {
         name: ICONS.XSmallThin,
-        color: "gray",
         size: 20
       })
     }))
@@ -5510,6 +5496,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 +5511,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 +5538,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 +5555,7 @@ function DropdownToggleButton(_a) {
         initFilteredData: initFilteredData
       }), !startArrow && !disabled && jsx(Arrow, {
         open: open,
+        focus: focus,
         color: color
       })]
     }))]
@@ -5578,6 +5581,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 +5601,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 +5624,7 @@ function DropdownToggleInput(_a) {
     }, {
       children: [startArrow && !disabled && jsx(Arrow, {
         open: open,
+        focus: focus,
         color: color
       }), jsx("input", {
         "aria-autocomplete": "none",
@@ -5622,6 +5641,7 @@ function DropdownToggleInput(_a) {
         initFilteredData: initFilteredData
       }), !startArrow && !disabled && jsx(Arrow, {
         open: open,
+        focus: focus,
         color: color
       })]
     }))]
@@ -5635,11 +5655,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 +5674,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 +5690,8 @@ function DropdownMenu(_a) {
         menuWrapperRef.current.style.display = 'block';
       }
     }
-  }, [horizonMenu]);
+  }, [width]);
+  // }, [horizonMenu]);
   var handleWrapperClick = function handleWrapperClick(e) {
     e.stopPropagation();
     closeMenu();
@@ -5760,6 +5779,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 +5795,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 +5804,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 +5976,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 +5987,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 +6026,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 +6036,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 +6048,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 +6064,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 +6082,7 @@ function Modal(_a) {
         }, {
           children: [cancelButton && jsx(Button, __assign({
             color: "secondary",
-            onClick: handleCancelClick,
+            onClick: handleClose,
             onKeyDown: handleFooterKeyDown,
             disabled: cancelButton.disabled
           }, {
@@ -6093,36 +6115,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;
@@ -6305,4 +6328,4 @@ function Pagination(_a) {
   }));
 }
 
-export { Button, Checkbox, Chip, Dropdown, Icon, Input, Modal, Pagination, Popover, Radio, StyleProvider, Toggle, Tooltip };
+export { Button, Checkbox, Chip, Dropdown, ICONS, Icon, Input, Modal, Pagination, Popover, Radio, StyleProvider, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "0.0.4",
+  "version": "2.0.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",
@@ -64,6 +64,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "rollup -c",
-    "release": "rm -rf dist && yarn build && mv README.md temp.md && yarn publish && mv temp.md README.md"
+    "release": "rm -rf dist && yarn build && mv README.md temp.md && yarn publish && mv temp.md README.md",
+    "svg": "node ./scripts/svg-parser.js"
   }
 }

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();