@pop-ui/core 0.0.10 → 0.0.12

package/dist/components/Dropdown/index.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input, Select, Tooltip } from "@mantine/core";
-import ic_tooltip from "../../assets/icons/ic_tooltip.svg";
-import ic_chevron_up from "../../assets/icons/ic_chevron_up.svg";
-import ic_chevron_down from "../../assets/icons/ic_chevron_down.svg";
-import styles from "./styles.module.scss";
-import { useState } from "react";
-/**
- * ----- dropdown props -----
- ** label: string, 라벨
- ** labelPosition: 'top' | 'left', 라벨위치
- ** size: 'sm' | 'md' | 'lg'
- ** tooltip: string, 툴팁
- ** tooltipPosition: 'top' | 'bottom' | 'left' | 'right', 툴팁 위치
- ** description: string, 상세 설명
- ** errorMsg: string, 에러 메시지
- ** 기타 props는 mantine select props 사용: https://v6.mantine.dev/core/select/?t=props
- */
-export const Dropdown = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, ...props }) => {
-    const [isOpen, setIsOpen] = useState(false);
-    let labelStyle = styles.md_label;
-    let selectStyle = styles.md_textfield;
-    let tooltipStyle = styles.md_tooltip;
-    let chevronSize = 18;
-    if (size === "sm") {
-        labelStyle = styles.sm_label;
-        selectStyle = styles.sm_textfield;
-        tooltipStyle = styles.sm_tooltip;
-        chevronSize = 14;
-    }
-    else if (size === "lg") {
-        labelStyle = styles.lg_label;
-        selectStyle = styles.lg_textfield;
-        tooltipStyle = styles.lg_tooltip;
-        chevronSize = 24;
-    }
-    return (_jsxs("div", { className: labelPosition === "top"
-            ? styles.top_label_textfield
-            : styles.left_label_textfield, children: [_jsxs("div", { children: [label && (_jsx(Input.Label, { required: required, className: labelStyle, children: label })), tooltip && (_jsx(Tooltip, { label: tooltip, position: tooltipPosition, children: _jsx("img", { className: tooltipStyle, src: ic_tooltip, alt: "tooltip_icon" }) }))] }), _jsxs("div", { children: [_jsx(Select, { ...props, size: size, error: errorMsg, className: selectStyle, rightSection: isOpen ? (_jsx("img", { width: chevronSize, src: ic_chevron_up })) : (_jsx("img", { width: chevronSize, src: ic_chevron_down })), onDropdownOpen: () => setIsOpen(true), onDropdownClose: () => setIsOpen(false), styles: () => ({
-                            item: {
-                                "&[data-selected]": {
-                                    "&, &:hover": {
-                                        backgroundColor: "#e7e7e7",
-                                        color: "#000000",
-                                    },
-                                },
-                            },
-                        }) }), description && (_jsx(Input.Description, { className: styles.input_description, children: description })), errorMsg && (_jsx(Input.Error, { className: styles.input_error_msg, children: errorMsg }))] })] }));
-};
-export default Dropdown;

package/dist/components/ImageUploader/ImageUploader.stories.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ImageUploader } from ".";
-export default {
-    title: "Core/ImageUploader",
-    component: ImageUploader,
-};
-const Template = (args) => (_jsx(ImageUploader, { ...args }));
-export const defaultImageUploader = Template.bind({});
-defaultImageUploader.args = {};

package/dist/components/ImageUploader/index.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-import { Dropzone, IMAGE_MIME_TYPE, } from "@mantine/dropzone";
-import styles from "./styles.module.scss";
-import ic_image_colored from "../../assets/icons/ic_image_colored.svg";
-import ic_cancel_circle from "../../assets/icons/ic_cancel_circle.svg";
-/**
- * ----- image uploader props -----
- ** width: number
- ** height: number
- ** defaultMsg: ReactNode, placeholder 대체
- ** file: string | FileWithPath
- ** showClearButton: boolean, 업로드 파일 clear 버튼 노출 여부
- ** onClear: () => void, 업로드 파일 clear시 실행될 함수
- ** 기타 props는 mantine dropzone props 사용: https://v6.mantine.dev/others/dropzone/?t=props
- */
-export const ImageUploader = ({ width, height, defaultMsg = "이미지 업로드", file, onDrop, showClearButton, onClear, ...props }) => {
-    const [fileData, setFileData] = useState(file);
-    const handleFileDataClear = useCallback(() => {
-        setFileData(undefined);
-        if (onClear) {
-            onClear();
-        }
-    }, [onClear]);
-    return (_jsxs("div", { className: styles.image_uploader_wrapper, children: [showClearButton && fileData ? (_jsx("div", { className: styles.file_clear_button, onClick: handleFileDataClear, children: _jsx("img", { src: ic_cancel_circle, alt: "clear_file_data" }) })) : null, _jsx(Dropzone, { ...props, maxFiles: 1, className: styles.image_uploader, accept: IMAGE_MIME_TYPE, onDrop: (e) => {
-                    setFileData(e[0]);
-                    if (onDrop) {
-                        onDrop(e);
-                    }
-                }, style: {
-                    width,
-                    height,
-                }, children: _jsx(_Fragment, { children: fileData ? (_jsx("img", { className: styles.preview, src: typeof fileData === "string"
-                            ? fileData
-                            : URL.createObjectURL(fileData), alt: `파일명: ${typeof fileData === "string" ? fileData : fileData.name}`, title: `파일명: ${typeof fileData === "string" ? fileData : fileData.name}` })) : (_jsxs("div", { children: [_jsx("img", { src: ic_image_colored, alt: "ic_image_colored" }), _jsx("span", { children: defaultMsg })] })) }) })] }));
-};
-export default ImageUploader;

package/dist/components/Modal/Modal.stories.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Modal } from ".";
-export default {
-    title: "Core/Modal",
-    component: Modal,
-};
-const Template = (args) => _jsx(Modal, { ...args });
-export const defaultModal = Template.bind({});
-defaultModal.args = {
-    children: "test",
-    opened: true,
-    centered: false,
-};

package/dist/components/Modal/index.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Modal as MantineModal, } from "@mantine/core";
-/**
- * ----- modal props -----
- ** size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- ** width: number
- ** 기타 props는 mantine modal props 사용: https://v6.mantine.dev/core/modal/?t=props
- */
-export const Modal = ({ size = "md", width, withCloseButton = false, ...props }) => {
-    let sizeNumber = 768;
-    if (size === "xs") {
-        sizeNumber = 360;
-    }
-    else if (size === "sm") {
-        sizeNumber = 544;
-    }
-    else if (size === "lg") {
-        sizeNumber = 1000;
-    }
-    else if (size === "xl") {
-        sizeNumber = 1200;
-    }
-    return (_jsx(MantineModal, { size: width || sizeNumber, withCloseButton: withCloseButton, ...props }));
-};
-export default Modal;

package/dist/components/Pagination/Pagination.stories.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Pagination } from ".";
-export default {
-    title: "Core/Pagination",
-    component: Pagination,
-};
-const Template = (args) => _jsx(Pagination, { ...args });
-export const defaultPagination = Template.bind({});
-defaultPagination.args = {
-    currentPageIdx: 0,
-    rowsPerPage: 10,
-    totalLength: 50,
-    paginationSize: 5,
-};

package/dist/components/Pagination/index.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import chevron_left from "../../assets/icons/ic_chevron_left.svg";
-import chevron_right from "../../assets/icons/ic_chevron_right.svg";
-import style from "./style.module.scss";
-/**
- * ----- pagination props -----
- ** currentPageIdx: 0부터 시작, 현재 page index
- ** rowsPerPage: 한 페이지에 보이는 아이템 개수
- ** totalLength: 페이지네이션 사용할 data의 총 개수
- ** paginationSize: 페이지네이션 숫자 노출 수 default: 5 (1~5)
- ** onPageChange: (page: number) => void
- */
-export const Pagination = ({ currentPageIdx, rowsPerPage, totalLength, paginationSize, onPageChange, ...props }) => {
-    const [currentIdx, setCurrentIdx] = useState(currentPageIdx);
-    const [maxPageRows, setMaxPageRows] = useState(50);
-    const [totalrows, setTotalRows] = useState(1);
-    const [paginationLength, setPaginationLength] = useState(5);
-    useMemo(() => {
-        setCurrentIdx(currentPageIdx);
-        setMaxPageRows(rowsPerPage || 50);
-        setTotalRows(totalLength || 1);
-        setPaginationLength(paginationSize || 5);
-    }, [currentPageIdx, rowsPerPage, totalLength, paginationSize]);
-    const onClickPrev = () => {
-        if (onPageChange) {
-            onPageChange(currentIdx - ((currentIdx % paginationLength) + 1));
-        }
-        setCurrentIdx((prev) => prev - ((prev % paginationLength) + 1));
-    };
-    const onClickNext = () => {
-        if (onPageChange) {
-            onPageChange(currentIdx + paginationLength - (currentIdx % paginationLength));
-        }
-        setCurrentIdx((prev) => prev + paginationLength - (prev % paginationLength));
-    };
-    return (_jsxs("div", { ...props, className: style.pagination, children: [currentIdx >= paginationLength ? (_jsx("button", { className: style.arrow, onClick: onClickPrev, children: _jsx("img", { src: chevron_left, alt: "prev" }) })) : null, new Array(paginationLength).fill(0).map((_v, index) => {
-                const indexNumber = Math.floor(currentIdx / paginationLength) * paginationLength +
-                    index +
-                    1;
-                if (indexNumber > Math.ceil(totalrows / maxPageRows)) {
-                    return;
-                }
-                return (_jsx("button", { className: currentIdx === indexNumber - 1
-                        ? style.page_index_active
-                        : style.page_index, onClick: () => {
-                        setCurrentIdx(indexNumber - 1);
-                        if (onPageChange) {
-                            onPageChange(indexNumber - 1);
-                        }
-                    }, children: indexNumber }, `pagination_${index}`));
-            }), Math.floor(currentIdx / paginationLength) * paginationLength +
-                paginationLength <
-                Math.ceil(totalrows / maxPageRows) ? (_jsx("button", { className: style.arrow, onClick: onClickNext, children: _jsx("img", { src: chevron_right, alt: "next" }) })) : null] }));
-};
-export default Pagination;

package/dist/components/Radio/Radio.stories.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio } from ".";
-export default {
-    title: "Core/Radio",
-    component: Radio,
-};
-const Template = (args) => _jsx(Radio, { ...args });
-export const defaultRadio = Template.bind({});
-defaultRadio.args = {
-    label: "radio label",
-    description: "description text",
-    size: "md",
-    disabled: false,
-};

package/dist/components/Radio/index.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Radio as MantineRadio, } from "@mantine/core";
-import styles from "./styles.module.scss";
-/**
- * ----- radio props -----
- ** size: 'sm' | 'md' | 'lg'
- ** 기타 props는 mantine radio props 사용: https://v6.mantine.dev/core/radio/?t=props
- */
-export const Radio = ({ size = "md", ...props }) => {
-    let sizeStyle = styles.md_radio;
-    if (size === "sm") {
-        sizeStyle = styles.sm_radio;
-    }
-    else if (size === "lg") {
-        sizeStyle = styles.lg_radio;
-    }
-    return _jsx(MantineRadio, { className: sizeStyle, size: size, ...props });
-};
-export default Radio;

package/dist/components/SearchBar/SearchBar.stories.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SearchBar } from ".";
-export default {
-    title: "Core/SearchBar",
-    component: SearchBar,
-};
-const Template = (args) => _jsx(SearchBar, { ...args });
-export const defaultSearchBar = Template.bind({});
-defaultSearchBar.args = {
-    label: "label text",
-    labelPosition: "top",
-    size: "md",
-    required: false,
-    disabled: false,
-    data: ["select 1", "select 2", "select 3"],
-};

package/dist/components/SearchBar/index.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Autocomplete, Input, Tooltip } from "@mantine/core";
-import ic_tooltip from "../../assets/icons/ic_tooltip.svg";
-import ic_input_clear from "../../assets/icons/ic_input_clear.svg";
-import ic_search from "../../assets/icons/ic_search.svg";
-import styles from "./styles.module.scss";
-import { useCallback, useState } from "react";
-/**
- * ----- search bar props -----
- ** label?: string, 라벨
- ** labelPosition?: "top" | "left", 라벨 위치
- ** size?: "sm" | "md" | "lg"
- ** tooltip?: string, 툴팁
- ** tooltipPosition?: "top" | "bottom" | "left" | "right", 툴팁 위치
- ** description?: string, 상세 텍스트
- ** errorMsg?: string, 에러 메시지
- ** onChange?: (event: any) => void
- ** onClear?: () => void, clear button 노출시 필요
- ** 기타 props는 mantine autocomplete props 사용: https://v6.mantine.dev/core/autocomplete/?t=props
- */
-export const SearchBar = ({ label, labelPosition = "top", size = "md", required, tooltip, tooltipPosition = "top", errorMsg, description, onChange, onClear, ...props }) => {
-    const [textCount, setTextCount] = useState(0);
-    let labelStyle = styles.md_label;
-    let searchBarStyle = styles.md_textfield;
-    let tooltipStyle = styles.md_tooltip;
-    if (size === "sm") {
-        labelStyle = styles.sm_label;
-        searchBarStyle = styles.sm_textfield;
-        tooltipStyle = styles.sm_tooltip;
-    }
-    else if (size === "lg") {
-        labelStyle = styles.lg_label;
-        searchBarStyle = styles.lg_textfield;
-        tooltipStyle = styles.lg_tooltip;
-    }
-    const onChangeHandler = useCallback((value) => {
-        if (onChange) {
-            setTextCount(value?.length);
-            onChange(value);
-        }
-    }, [onChange]);
-    return (_jsxs("div", { className: labelPosition === "top"
-            ? styles.top_label_textfield
-            : styles.left_label_textfield, children: [_jsxs("div", { children: [label && (_jsx(Input.Label, { required: required, className: labelStyle, children: label })), tooltip && (_jsx(Tooltip, { label: tooltip, position: tooltipPosition, children: _jsx("img", { className: tooltipStyle, src: ic_tooltip, alt: "tooltip_icon" }) }))] }), _jsxs("div", { children: [_jsx("div", { className: styles.textfield_wrapper, children: _jsx(Autocomplete, { ...props, size: size, error: errorMsg, className: searchBarStyle, onChange: onChangeHandler, icon: _jsx("img", { src: ic_search }), iconWidth: 48, rightSection: onClear && textCount > 0 ? (_jsx("div", { className: styles.clear_button, onClick: onClear, children: _jsx("img", { src: ic_input_clear }) })) : undefined }) }), description && (_jsx(Input.Description, { className: styles.input_description, children: description })), errorMsg && (_jsx(Input.Error, { className: styles.input_error_msg, children: errorMsg }))] })] }));
-};
-export default SearchBar;

package/dist/components/SegmentButton/SegmentButton.stories.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SegmentButton } from ".";
-export default {
-    title: "Core/SegmentButton",
-    component: SegmentButton,
-};
-const Template = (args) => (_jsx(SegmentButton, { ...args }));
-export const defaultSegmentButton = Template.bind({});
-defaultSegmentButton.args = {
-    data: ["data1", "data2", "data3"],
-    size: "md",
-    radius: 6,
-    disabled: false,
-};

package/dist/components/SegmentButton/index.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SegmentedControl } from "@mantine/core";
-import styles from "./styles.module.scss";
-/**
- * ----- segment button props -----
- ** size: 'sm' | 'md' | 'lg'
- ** radius: number | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- ** 기타 props는 mantine segmented control props 사용: https://v6.mantine.dev/core/segmented-control/?t=props
- */
-export const SegmentButton = ({ size = "md", radius = 6, ...props }) => {
-    let sizeStyle = styles.md_segment_button;
-    if (size === "sm") {
-        sizeStyle = styles.sm_segment_button;
-    }
-    else if (size === "lg") {
-        sizeStyle = styles.lg_segment_button;
-    }
-    return (_jsx(SegmentedControl, { className: sizeStyle, size: size, radius: radius, styles: {
-            control: {
-                borderWidth: "0 !important",
-            },
-        }, ...props }));
-};
-export default SegmentButton;

package/dist/components/Tab/Tab.stories.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Tab } from ".";
-export default {
-    title: "Core/Tab",
-    component: Tab,
-};
-const Template = (args) => _jsx(Tab, { ...args });
-export const defaultTab = Template.bind({});
-defaultTab.args = {
-    tabList: [
-        {
-            title: "tab title 1",
-            value: "default tab 1",
-            body: _jsx(_Fragment, { children: "default tab body 1" }),
-        },
-        {
-            title: "tab title 2",
-            value: "default tab 2",
-            body: _jsx(_Fragment, { children: "default tab body 2" }),
-        },
-        {
-            title: "tab title 3",
-            value: "default tab 3",
-            body: _jsx(_Fragment, { children: "default tab body 3" }),
-        },
-    ],
-    defaultValue: "default tab 1",
-};

package/dist/components/Tab/index.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Tabs } from "@mantine/core";
-import styles from "./styles.module.scss";
-/**
- * ----- tab props -----
- ** tabList: {
-      title: string;
-      value: string;
-      body: ReactNode;
-      icon?: ReactNode;
-    }[];
- ** containerPaddingTop?: "xs" | "sm" | "md" | "lg" | "xl";
- ** 기타 props는 mantine tabs props 사용: https://v6.mantine.dev/core/tabs/?t=props
- */
-export const Tab = ({ tabList = [], containerPaddingTop, ...props }) => {
-    return (_jsxs(Tabs, { ...props, children: [_jsx(Tabs.List, { className: styles.tab_title_list, children: tabList?.map((tab, index) => (_jsxs(Tabs.Tab, { value: tab.value, icon: tab.icon, children: [tab.title, _jsx("div", { className: styles.border_bottom })] }, `tab_${index}`))) }), tabList?.map((tab, index) => (_jsx(Tabs.Panel, { value: tab.value, pt: containerPaddingTop, children: tab.body }, `tab_panel_${index}`)))] }));
-};
-export default Tab;

package/dist/components/Table/Table.stories.js

@@ -1,127 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Table } from ".";
-export default {
-    title: "Core/Table",
-    component: Table,
-};
-const Template = (args) => _jsx(Table, { ...args });
-export const defaultTable = Template.bind({});
-defaultTable.args = {
-    headerList: ["전기", "불", "물", "풀"],
-    striped: true,
-    draggable: false,
-    tableData: [
-        {
-            electric: { cell: "피츄", sortTarget: "피츄" },
-            fire: { cell: "파이리", sortTarget: "파이리" },
-            water: { cell: "꼬부기", sortTarget: "꼬부기" },
-            leaf: { cell: "이상해씨", sortTarget: "이상해씨" },
-        },
-        {
-            electric: { cell: "피카츄", sortTarget: "피카츄" },
-            fire: { cell: "리자드", sortTarget: "리자드" },
-            water: { cell: "어니부기", sortTarget: "어니부기" },
-            leaf: { cell: "이상해풀", sortTarget: "이상해풀" },
-        },
-        {
-            electric: { cell: "라이츄", sortTarget: "라이츄" },
-            fire: { cell: "리자몽", sortTarget: "리자몽" },
-            water: { cell: "거북왕", sortTarget: "거북왕" },
-            leaf: { cell: "이상해꽃", sortTarget: "이상해꽃" },
-        },
-        {
-            electric: { cell: "찌리리공", sortTarget: "찌리리공" },
-            fire: { cell: "식스테일", sortTarget: "식스테일" },
-            water: { cell: "갸라도스", sortTarget: "갸라도스" },
-            leaf: { cell: "뚜벅초", sortTarget: "뚜벅초" },
-        },
-    ],
-};
-export const sortableTable = Template.bind({});
-sortableTable.args = {
-    headerList: ["전기", "불", "물", "풀", "순번", "선택(정렬테스트용)"],
-    striped: true,
-    sortable: true,
-    tableData: [
-        {
-            electric: { cell: "피츄", sortTarget: "피츄" },
-            fire: { cell: "파이리", sortTarget: "파이리" },
-            water: { cell: "꼬부기", sortTarget: "꼬부기" },
-            leaf: { cell: "이상해씨", sortTarget: "이상해씨" },
-            num: { cell: 1, sortTarget: 1 },
-            select: {
-                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: true }),
-                sortTarget: true,
-            },
-        },
-        {
-            electric: { cell: "피카츄", sortTarget: "피카츄" },
-            fire: { cell: "리자드", sortTarget: "리자드" },
-            water: { cell: "어니부기", sortTarget: "어니부기" },
-            leaf: { cell: "이상해풀", sortTarget: "이상해풀" },
-            num: { cell: 2, sortTarget: 2 },
-            select: {
-                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: false }),
-                sortTarget: false,
-            },
-        },
-        {
-            electric: { cell: "라이츄", sortTarget: "라이츄" },
-            fire: { cell: "리자몽", sortTarget: "리자몽" },
-            water: { cell: "거북왕", sortTarget: "거북왕" },
-            leaf: { cell: "이상해꽃", sortTarget: "이상해꽃" },
-            num: { cell: 3, sortTarget: 3 },
-            select: {
-                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: true }),
-                sortTarget: true,
-            },
-        },
-        {
-            electric: { cell: "찌리리공", sortTarget: "찌리리공" },
-            fire: { cell: "식스테일", sortTarget: "식스테일" },
-            water: { cell: "갸라도스", sortTarget: "갸라도스" },
-            leaf: { cell: "뚜벅초", sortTarget: "뚜벅초" },
-            num: { cell: 4, sortTarget: 4 },
-            select: {
-                cell: _jsx("input", { type: "checkbox", readOnly: true, checked: false }),
-                sortTarget: false,
-            },
-        },
-    ],
-};
-export const draggableTable = Template.bind({});
-draggableTable.args = {
-    headerList: ["전기", "불", "물", "풀"],
-    striped: true,
-    sortable: false,
-    draggable: true,
-    onDragEnd: (rows) => {
-        console.log(rows);
-    },
-    tableData: [
-        {
-            electric: { cell: "피츄", sortTarget: "피츄", dndId: 0 },
-            fire: { cell: "파이리", sortTarget: "파이리" },
-            water: { cell: "꼬부기", sortTarget: "꼬부기" },
-            leaf: { cell: "이상해씨", sortTarget: "이상해씨" },
-        },
-        {
-            electric: { cell: "피카츄", sortTarget: "피카츄", dndId: 1 },
-            fire: { cell: "리자드", sortTarget: "리자드" },
-            water: { cell: "어니부기", sortTarget: "어니부기" },
-            leaf: { cell: "이상해풀", sortTarget: "이상해풀" },
-        },
-        {
-            electric: { cell: "라이츄", sortTarget: "라이츄", dndId: 2 },
-            fire: { cell: "리자몽", sortTarget: "리자몽" },
-            water: { cell: "거북왕", sortTarget: "거북왕" },
-            leaf: { cell: "이상해꽃", sortTarget: "이상해꽃" },
-        },
-        {
-            electric: { cell: "찌리리공", sortTarget: "찌리리공", dndId: 3 },
-            fire: { cell: "식스테일", sortTarget: "식스테일" },
-            water: { cell: "갸라도스", sortTarget: "갸라도스" },
-            leaf: { cell: "뚜벅초", sortTarget: "뚜벅초" },
-        },
-    ],
-};