@thefreshop/tb 1.0.7 → 1.0.9

package/dist/esm/index.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import React__default, { createContext, useState, useContext, useEffect, useCallback, useRef, forwardRef, useImperativeHandle, memo, useMemo } from 'react';
+import React__default, { createContext, useState, useEffect, useContext, useCallback, useMemo, useRef, forwardRef, useImperativeHandle, memo } from 'react';
+import { useNavigate, useLocation, Outlet, createBrowserRouter, RouterProvider } from 'react-router';
 import Editor from '@monaco-editor/react';
 import { DownOutlined, UpOutlined, DoubleRightOutlined, DoubleLeftOutlined, LoadingOutlined, ReloadOutlined, SearchOutlined, UploadOutlined, ExclamationCircleOutlined, RedoOutlined, TagOutlined } from '@ant-design/icons';
-import { Typography, Row, Col, Space, Button, Input, Tag, Image as Image$1, Tooltip, Upload, Form, Select, DatePicker, Switch, InputNumber, Flex, Modal, Table, Checkbox, Tree, ConfigProvider, Result, Spin } from 'antd';
+import { Typography, Row, Col, Space, Button, Input, Tag, Image as Image$1, Tooltip, Upload, Form, Select, DatePicker, Switch, InputNumber, Flex, Modal, Table, List, Card, Checkbox, Tree, ConfigProvider, Result, Spin } from 'antd';
 import moment$1 from 'moment-timezone';
 import require$$1 from 'react-dom';
 import dayjs from 'dayjs';
@@ -18,16 +19,35 @@ import 'dayjs/locale/ko';
 
 const tbContext = createContext(undefined);
 
-// export const TbBase = createContext<TbBaseProviderType>({})
+const SESSION_STORAGE_KEY = "tbFrameState";
 const TbProvider = ({ children }) => {
     const [topkey, setTopkey] = useState("");
     const [currentTab, setCurrentTab] = useState();
     const [user, setloginUser] = useState();
-    const [tabs, setTabs] = useState([]);
+    // const [tabs, setTabs] = useState<tabType[]>([]);
     const [startpage, setStartpage] = useState();
     const [errMsg, setErrMsg] = useState();
     const [globalpages, setGlobalpages] = useState();
     const [menupages, setMenupages] = useState();
+    // 1. 초기 상태를 sessionStorage 불러오도록 수정
+    const [tabs, setTabs] = useState(() => {
+        try {
+            const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
+            return savedState ? JSON.parse(savedState).tabs : [];
+        }
+        catch (error) {
+            console.error("Failed to parse state from sessionStorage", error);
+            return [];
+        }
+    });
+    // 2. 상태가 변경될 때마다 sessionStorage 저장하는 useEffect 추가
+    useEffect(() => {
+        const stateToSave = {
+            tabs,
+            // ... 저장할 다른 상태들 ...
+        };
+        sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
+    }, [tabs, currentTab /* ... 다른 상태 의존성 ... */]);
     const addTabs = (tab) => {
         setCurrentTab(tab);
         if (tabs.find((m) => m.key === tab.key) === undefined) {
@@ -128,6 +148,7 @@ const TbProvider = ({ children }) => {
             SetWarning,
             errMsg,
             setGlobalpages,
+            globalpages,
             addGlobalTabs,
             setMenupages,
             goTabs,
@@ -253,6 +274,7 @@ const Menu = ({ menu_setting: { title, icon, key, children, hasPage, page, defal
     const [hover, setHover] = useState(false);
     const [subOpen, setSubOpen] = useState(false);
     const { addTabs, currentTab, user } = useTbState();
+    const navigate = useNavigate();
     useEffect(() => {
         if (defalultOpen) {
             setSubOpen(true);
@@ -284,12 +306,14 @@ const Menu = ({ menu_setting: { title, icon, key, children, hasPage, page, defal
                 setHover(false);
             }, onClick: () => {
                 setSubOpen((prev) => !prev);
-                if (hasPage && currentTab?.key !== key)
+                if (hasPage && currentTab?.key !== key) {
                     addTabs({
                         title,
                         key,
                         page,
                     });
+                    navigate("/" + key);
+                }
                 // console.log(tabs)
             } },
             React__default.createElement("div", { className: styles$9.nav_icon }, icon),
@@ -300,6 +324,7 @@ const Menu = ({ menu_setting: { title, icon, key, children, hasPage, page, defal
 const SubMenu = ({ menu_setting: { title, icon, key, page, hasPage } }) => {
     const [hover, setHover] = useState(false);
     const { addTabs, currentTab } = useTbState();
+    const navigate = useNavigate();
     return (React__default.createElement("div", { className: `${styles$9.sub_item} ${currentTab?.key === key ? styles$9.menu_select : hover ? styles$9.menu_hover : styles$9.menu_nomal}`, onMouseEnter: () => {
             setHover(true);
         }, onMouseLeave: () => {
@@ -311,6 +336,7 @@ const SubMenu = ({ menu_setting: { title, icon, key, page, hasPage } }) => {
                     key,
                     page,
                 });
+            navigate("/" + key);
             // console.log(tabs)
         } },
         React__default.createElement("div", { className: styles$9.nav_icon }, icon),
@@ -339,12 +365,45 @@ var css_248z$9 = ".tabs-module_tabFrame__qyHsD{background-color:#fff;display:fle
 var styles$6 = {"tabFrame":"tabs-module_tabFrame__qyHsD","tab_item":"tabs-module_tab_item__dtp6M","tab_item_text":"tabs-module_tab_item_text__w9h73","tab_item_button":"tabs-module_tab_item_button__2CdJE","tab_x_button":"tabs-module_tab_x_button__To6OB","tab_normal":"tabs-module_tab_normal__Ky5vz","tab_select":"tabs-module_tab_select__kEPQi"};
 styleInject(css_248z$9);
 
-const Tabs = () => {
-    const { tabs, removeTabs, setCurrentTab, currentTab } = useTbState();
-    return (React__default.createElement("div", { className: styles$6.tabFrame }, tabs?.map((m, index) => {
-        return (React__default.createElement("div", { key: index, className: `${styles$6.tab_item} ${currentTab?.key === m.key ? styles$6.tab_select : styles$6.tab_normal}` },
+const Tabs = ({ nav: { menuSet, openIcon, closeIcon } }) => {
+    const { tabs, removeTabs, setCurrentTab, addTabs, currentTab, globalpages } = useTbState();
+    const navigate = useNavigate();
+    const location = useLocation();
+    const findTabs = useCallback((pathKey) => {
+        // 1. 현재 열린 탭 중에 있는지 확인
+        const existingTab = tabs.find((t) => t.key === pathKey);
+        if (existingTab) {
+            setCurrentTab(existingTab);
+            return;
+        }
+        // 2. 없다면, 전체 페이지 목록에서 찾아서 추가
+        let tabInfo;
+        // 2-1. 메뉴 페이지에서 찾기
+        menuSet.forEach((item) => {
+            item.menuSetting.forEach((sub) => {
+                if (sub.key === pathKey)
+                    tabInfo = sub;
+            });
+        });
+        // 2-2. 전역 페이지에서 찾기 (메뉴에 없으면)
+        if (!tabInfo) {
+            tabInfo = globalpages?.find((m) => m.key === pathKey);
+        }
+        if (tabInfo) {
+            addTabs(tabInfo);
+        }
+    }, [tabs, globalpages]);
+    // 3. 페이지 로드 시 URL을 기반으로 currentTab을 설정하는 useEffect 추가
+    useEffect(() => {
+        const pathKey = location.pathname.substring(1); // 맨 앞의 '/' 제거
+        findTabs(pathKey);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // 이 효과는 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.
+    return (React__default.createElement("div", { className: styles$6.tabFrame }, tabs?.map((m) => {
+        return (React__default.createElement("div", { key: m.key, className: `${styles$6.tab_item} ${currentTab?.key === m.key ? styles$6.tab_select : styles$6.tab_normal}` },
             React__default.createElement("div", { className: styles$6.tab_item_text, onClick: () => {
                     setCurrentTab(m);
+                    navigate("/" + m.key);
                     // console.log('setCurrentTab', m)
                 } }, m.title),
             !m.noremove && (React__default.createElement("div", { className: styles$6.tab_item_button },
@@ -356,30 +415,21 @@ var css_248z$8 = ".main-module_mainFrame__Etjvl{height:100%;width:100%}\n/*# sou
 var styles$5 = {"mainFrame":"main-module_mainFrame__Etjvl"};
 styleInject(css_248z$8);
 
-var css_248z$7 = ".nullpage-module_nullpage__aLHyg{align-items:center;display:flex;flex-direction:row;height:30vh;justify-content:center;width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm51bGxwYWdlLm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsaUNBSUUsa0JBQW1CLENBSG5CLFlBQWEsQ0FDYixrQkFBbUIsQ0FJbkIsV0FBWSxDQUhaLHNCQUF1QixDQUV2QixVQUVGIiwiZmlsZSI6Im51bGxwYWdlLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubnVsbHBhZ2Uge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGhlaWdodDogMzB2aDtcclxufVxyXG4iXX0= */";
-var styles$4 = {"nullpage":"nullpage-module_nullpage__aLHyg"};
-styleInject(css_248z$7);
-
-const NullPage = () => {
-    return (React__default.createElement("div", { className: styles$4.nullpage },
-        React__default.createElement("div", null, "\uD398\uC774\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.")));
-};
-
 const Main = () => {
-    const { currentTab } = useTbState();
-    return (React__default.createElement("div", { className: styles$5.mainFrame }, currentTab?.page ? currentTab.page : React__default.createElement(NullPage, null)));
+    return (React__default.createElement("div", { className: styles$5.mainFrame },
+        React__default.createElement(Outlet, null)));
 };
 
-var css_248z$6 = ".loginpage-module_loginpage__TF9Rl{align-items:center;display:flex;flex-direction:column;height:100vh;justify-content:center;width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvZ2lucGFnZS5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1DQUlFLGtCQUFtQixDQUhuQixZQUFhLENBQ2IscUJBQXNCLENBSXRCLFlBQWEsQ0FIYixzQkFBdUIsQ0FFdkIsVUFFRiIsImZpbGUiOiJsb2dpbnBhZ2UubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5sb2dpbnBhZ2Uge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGhlaWdodDogMTAwdmg7XHJcbn1cclxuIl19 */";
-var styles$3 = {"loginpage":"loginpage-module_loginpage__TF9Rl"};
-styleInject(css_248z$6);
+var css_248z$7 = ".loginpage-module_loginpage__TF9Rl{align-items:center;display:flex;flex-direction:column;height:100vh;justify-content:center;width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvZ2lucGFnZS5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1DQUlFLGtCQUFtQixDQUhuQixZQUFhLENBQ2IscUJBQXNCLENBSXRCLFlBQWEsQ0FIYixzQkFBdUIsQ0FFdkIsVUFFRiIsImZpbGUiOiJsb2dpbnBhZ2UubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5sb2dpbnBhZ2Uge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGhlaWdodDogMTAwdmg7XHJcbn1cclxuIl19 */";
+var styles$4 = {"loginpage":"loginpage-module_loginpage__TF9Rl"};
+styleInject(css_248z$7);
 
 const LoginPage = () => {
     const { loginUser } = useTbState();
     const [user, setUser] = useState(defaultuser);
     const [isTypeCheck, setTypeCheck] = useState(true);
     const [editorValue, setEditorValue] = useState(JSON.stringify(defaultuser, null, 2));
-    return (React__default.createElement("div", { className: styles$3.loginpage },
+    return (React__default.createElement("div", { className: styles$4.loginpage },
         React__default.createElement("div", { style: { display: "flex" } },
             React__default.createElement("button", { onClick: () => {
                     setEditorValue(JSON.stringify(alluser, null, 2));
@@ -451,6 +501,15 @@ const testuser = {
     },
 };
 
+var css_248z$6 = ".nullpage-module_nullpage__aLHyg{align-items:center;display:flex;flex-direction:row;height:30vh;justify-content:center;width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm51bGxwYWdlLm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsaUNBSUUsa0JBQW1CLENBSG5CLFlBQWEsQ0FDYixrQkFBbUIsQ0FJbkIsV0FBWSxDQUhaLHNCQUF1QixDQUV2QixVQUVGIiwiZmlsZSI6Im51bGxwYWdlLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIubnVsbHBhZ2Uge1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxuICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGhlaWdodDogMzB2aDtcclxufVxyXG4iXX0= */";
+var styles$3 = {"nullpage":"nullpage-module_nullpage__aLHyg"};
+styleInject(css_248z$6);
+
+const NullPage = () => {
+    return (React__default.createElement("div", { className: styles$3.nullpage },
+        React__default.createElement("div", null, "\uD398\uC774\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.")));
+};
+
 const TbFrame = ({ setting, top, bottom, nav, top_banner, }) => {
     const { user, startpage, setStartpage, errMsg, setGlobalpages, setMenupages } = useTbState();
     useEffect(() => {
@@ -471,6 +530,29 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, }) => {
     useEffect(() => {
         if (!errMsg?.isPopup) ;
     }, [errMsg]);
+    const route = () => {
+        let route = [];
+        nav.menuSet.forEach((m) => {
+            m.menuSetting.forEach((m) => {
+                route.push({
+                    path: "/" + m.key,
+                    element: m.page,
+                });
+            });
+        });
+        return route;
+    };
+    const router = useMemo(() => createBrowserRouter([
+        {
+            path: "/",
+            element: (React__default.createElement(MainLayout, { errMsg: errMsg, startpage: startpage, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom })),
+            children: route(),
+            errorElement: React__default.createElement(NullPage, null),
+        },
+    ]), []);
+    return React__default.createElement(RouterProvider, { router: router });
+};
+const MainLayout = ({ errMsg, startpage, setting, top_banner, nav, user, top, bottom, }) => {
     const LOGIN = useCallback(() => {
         if (startpage)
             return setting?.loginpage ? setting.loginpage : React__default.createElement(LoginPage, null);
@@ -517,7 +599,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, }) => {
         React__default.createElement("div", { className: styles$9.centerFrame, style: top_banner ? { height: "calc(100vh - 120px)" } : { height: "calc(100vh - 80px)" } },
             React__default.createElement(Nav, { nav: nav, islogin: setting.islogin ?? false }),
             React__default.createElement("div", { className: styles$9.contentsFrame },
-                React__default.createElement(Tabs, null),
+                React__default.createElement(Tabs, { nav: nav }),
                 React__default.createElement(Main, null))),
         React__default.createElement("div", { className: styles$9.bottomFrame }, bottom && React__default.createElement(Bottom, { bottom: bottom }))))));
 };
@@ -22382,10 +22464,11 @@ var Cropper = /** @class */function (_super) {
       }
     };
     _this.recomputeCropPosition = function () {
+      var _a, _b;
       if (!_this.state.cropSize) return;
       var adjustedCrop = _this.props.crop;
       // Only scale if we're initialized and this is a legitimate resize
-      if (_this.isInitialized && _this.previousCropSize) {
+      if (_this.isInitialized && ((_a = _this.previousCropSize) === null || _a === void 0 ? void 0 : _a.width) && ((_b = _this.previousCropSize) === null || _b === void 0 ? void 0 : _b.height)) {
         var sizeChanged = Math.abs(_this.previousCropSize.width - _this.state.cropSize.width) > 1e-6 || Math.abs(_this.previousCropSize.height - _this.state.cropSize.height) > 1e-6;
         if (sizeChanged) {
           var scaleX = _this.state.cropSize.width / _this.previousCropSize.width;
@@ -23218,8 +23301,8 @@ const AntBaseModalCreate = ({ modalProps, formProps, props }) => {
                 React__default.createElement(Button, { htmlType: "submit" }, props.buttonName ?? (isModify ? FORM_MODIFY : FORM_CREATE))))));
 };
 
-const { Title } = Typography;
-const { confirm } = Modal;
+const { Title: Title$1 } = Typography;
+const { confirm: confirm$1 } = Modal;
 const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, initData, customColumn, customValue, columns, expandable, size, onDoubleClick, onClick, selectProps, addProps, modifyProps, deleteProps, removeProps, resetProps, customProps, topProps, bottomProps, upProps, downProps, pageProps, scroll, onRefresh, isCounter, autoRefreshTime, createModalWidth = 1000, onCreateClose, }, ref) => {
     const [selectedRowKeys, setSelectedRowKeys] = useState([]);
     const [selectedRow, setSelectedRow] = useState();
@@ -23348,7 +23431,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "삭제 하시겠습니까?",
                             icon: React__default.createElement(ExclamationCircleOutlined, null),
                             content: content,
@@ -23375,7 +23458,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "복구 하시겠습니까?",
                             icon: React__default.createElement(ExclamationCircleOutlined, null),
                             content: content,
@@ -23402,7 +23485,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
                             : typeof rowKey === "function"
                                 ? rowKey(selectedRow)
                                 : selectedRow[rowKey]);
-                        confirm({
+                        confirm$1({
                             title: "완전 삭제 하시겠습니까?",
                             icon: React__default.createElement(ExclamationCircleOutlined, null),
                             content: content,
@@ -23537,7 +23620,7 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
         React__default.createElement(AntBaseModalCreate, { modalProps: {
                 width: createModalWidth,
                 title: (React__default.createElement("div", { style: { marginBottom: 20, marginTop: 10 } },
-                    React__default.createElement(Title, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
+                    React__default.createElement(Title$1, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
                 maskClosable: false,
                 open: popupCreate,
                 onCancel: () => {
@@ -23582,6 +23665,288 @@ const AntBaseTable$1 = ({ bordered, className, rowKey, rowName, dataSource, init
 */
 var AntBaseTable = forwardRef(AntBaseTable$1);
 
+const { Title } = Typography;
+const { confirm } = Modal;
+const AntBaseList$1 = ({ tableProps, render, }, ref) => {
+    const { bordered, className, rowKey, rowName, dataSource, initData, customColumn, customValue, columns, expandable, size, onDoubleClick, onClick, selectProps, addProps, modifyProps, deleteProps, removeProps, resetProps, customProps, topProps, bottomProps, upProps, downProps, pageProps, scroll, onRefresh, isCounter, autoRefreshTime, createModalWidth = 1000, onCreateClose, } = tableProps;
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [selectedRow, setSelectedRow] = useState();
+    const [popupCreate, setPopupCreate] = useState(false);
+    const [popupModify, setPopupModify] = useState(false);
+    useEffect(() => {
+        setSelectedRow(dataSource?.find((m) => {
+            if (m) {
+                let key = typeof rowKey === "function" ? rowKey(m) : m[rowKey];
+                return key === selectedRowKeys[0];
+            }
+            return false;
+        }));
+    }, [dataSource, rowKey, selectedRowKeys]);
+    //선택 리셋
+    const resetSelection = () => {
+        setSelectedRowKeys([]);
+        setSelectedRow(undefined);
+    };
+    //재 선택??
+    const reSelection = () => {
+        if (selectProps) {
+            if (selectedRowKeys.length !== 0 && dataSource?.length !== 0) {
+                setSelectedRow(dataSource?.find((m) => {
+                    if (m) {
+                        let key = typeof rowKey === "function" ? rowKey(m) : m[rowKey];
+                        return key === selectedRowKeys[0];
+                    }
+                    return false;
+                }));
+                if (selectProps.onUpdateData) {
+                    selectProps.onUpdateData(dataSource?.find((m) => {
+                        if (m) {
+                            let key = typeof rowKey === "function" ? rowKey(m) : m[rowKey];
+                            return key === selectedRowKeys[0];
+                        }
+                        return false;
+                    }));
+                }
+            }
+        }
+    };
+    //ref 함수
+    useImperativeHandle(ref, () => ({
+        resetSelection,
+        reSelection,
+        popupCreate,
+        popupModify,
+        selectedRow,
+    }), [selectedRow, popupCreate, popupModify]);
+    // 추가 팝업 on/off
+    const showCreatePopup = (show) => {
+        setPopupCreate(show);
+        setPopupModify(false);
+    };
+    // 추가/수정 완료
+    const onCreate = (value) => {
+        setPopupCreate(false);
+        setPopupModify(false);
+        if (popupModify && modifyProps) {
+            let key = typeof rowKey === "function" ? rowKey(selectedRow) : rowKey;
+            modifyProps.onFun({ [key.toString()]: key, ...value }, selectedRow);
+            // 키 값과 함꼐 전달
+        }
+        else if (addProps) {
+            addProps.onFun(value);
+        }
+        setSelectedRowKeys([]);
+        setSelectedRow(undefined);
+    };
+    // 수정 창 열기전 beforeModify 확인후 수정 작업
+    const showModify = () => {
+        if (modifyProps?.beforeCheck) {
+            modifyProps
+                .beforeCheck(selectedRow)
+                .then((newValue) => {
+                setSelectedRow(newValue);
+                setPopupCreate(true);
+                setPopupModify(true);
+            })
+                .catch();
+        }
+        else {
+            setPopupCreate(true);
+            setPopupModify(true);
+        }
+    };
+    //선택 유무
+    const isSelect = selectedRowKeys.length !== 0;
+    return (React__default.createElement("div", { className: className, style: {
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            gap: 10,
+            height: "100%",
+            padding: "20px",
+        } },
+        React__default.createElement(TableTopButtonGroup, { isSelect: isSelect, isCounter: isCounter, onRefresh: onRefresh, autoRefreshTime: autoRefreshTime, addProps: addProps && {
+                ...addProps,
+                onFun: () => {
+                    if (addProps.customModal) {
+                        addProps.onFun(selectedRow);
+                    }
+                    else {
+                        showCreatePopup(true);
+                    }
+                },
+            }, modifyProps: modifyProps && {
+                ...modifyProps,
+                onFun() {
+                    if (modifyProps.customModal) {
+                        modifyProps.onFun(selectedRow);
+                    }
+                    else {
+                        showModify();
+                    }
+                },
+            }, deleteProps: deleteProps && {
+                ...deleteProps,
+                onFun() {
+                    if (selectedRow) {
+                        let content = (rowName
+                            ? typeof rowName === "function"
+                                ? rowName(selectedRow)
+                                : selectedRow[rowName]
+                            : typeof rowKey === "function"
+                                ? rowKey(selectedRow)
+                                : selectedRow[rowKey]);
+                        confirm({
+                            title: "삭제 하시겠습니까?",
+                            icon: React__default.createElement(ExclamationCircleOutlined, null),
+                            content: content,
+                            okText: "Yes",
+                            okType: "danger",
+                            cancelText: "No",
+                            onOk: () => {
+                                deleteProps.onFun(selectedRow);
+                            },
+                            onCancel() {
+                                console.log("Cancel");
+                            },
+                        });
+                    }
+                },
+            }, resetProps: resetProps && {
+                ...resetProps,
+                onFun() {
+                    if (selectedRow) {
+                        let content = (rowName
+                            ? typeof rowName === "function"
+                                ? rowName(selectedRow)
+                                : selectedRow[rowName]
+                            : typeof rowKey === "function"
+                                ? rowKey(selectedRow)
+                                : selectedRow[rowKey]);
+                        confirm({
+                            title: "복구 하시겠습니까?",
+                            icon: React__default.createElement(ExclamationCircleOutlined, null),
+                            content: content,
+                            okText: "Yes",
+                            okType: "primary",
+                            cancelText: "No",
+                            onOk: () => {
+                                resetProps.onFun(selectedRow);
+                            },
+                            onCancel() {
+                                console.log("Cancel");
+                            },
+                        });
+                    }
+                },
+            }, removeProps: removeProps && {
+                ...removeProps,
+                onFun() {
+                    if (selectedRow) {
+                        let content = (rowName
+                            ? typeof rowName === "function"
+                                ? rowName(selectedRow)
+                                : selectedRow[rowName]
+                            : typeof rowKey === "function"
+                                ? rowKey(selectedRow)
+                                : selectedRow[rowKey]);
+                        confirm({
+                            title: "완전 삭제 하시겠습니까?",
+                            icon: React__default.createElement(ExclamationCircleOutlined, null),
+                            content: content,
+                            okText: "Yes",
+                            okType: "danger",
+                            cancelText: "No",
+                            onOk: () => {
+                                removeProps.onFun(selectedRow);
+                            },
+                            onCancel() {
+                                console.log("Cancel");
+                            },
+                        });
+                    }
+                },
+            }, customProps: customProps && {
+                ...customProps,
+                render: () => {
+                    if (customProps.render)
+                        return customProps.render(isSelect, selectedRow);
+                    else
+                        return null;
+                },
+                leftRender: () => {
+                    if (customProps.leftRender)
+                        return customProps.leftRender(isSelect, selectedRow);
+                    else
+                        return null;
+                },
+                rightRender: () => {
+                    if (customProps.rightRender)
+                        return customProps.rightRender(isSelect, selectedRow);
+                    else
+                        return null;
+                },
+            } }),
+        React__default.createElement(List, { dataSource: dataSource?.map((i) => i), grid: { gutter: 1, column: 1 }, renderItem: (item, index) => (React__default.createElement(List.Item, null,
+                React__default.createElement(Card, null, render ? render(item, index) : React__default.createElement("div", null, JSON.stringify(item))))) }),
+        React__default.createElement(TableBottomButtonGroup, { isSelect: isSelect, topProps: topProps && {
+                ...topProps,
+                onFun() {
+                    if (selectedRow)
+                        topProps.onFun(selectedRow);
+                },
+            }, bottomProps: bottomProps && {
+                ...bottomProps,
+                onFun() {
+                    if (selectedRow)
+                        bottomProps.onFun(selectedRow);
+                },
+            }, upProps: upProps && {
+                ...upProps,
+                onFun() {
+                    if (selectedRow)
+                        upProps.onFun(selectedRow);
+                },
+            }, downProps: downProps && {
+                ...downProps,
+                onFun() {
+                    if (selectedRow)
+                        downProps.onFun(selectedRow);
+                },
+            } }),
+        React__default.createElement(AntBaseModalCreate, { modalProps: {
+                width: createModalWidth,
+                title: (React__default.createElement("div", { style: { marginBottom: 20, marginTop: 10 } },
+                    React__default.createElement(Title, { level: 4, style: { margin: 0 } }, popupModify ? "정보 수정" : "신규 등록"))),
+                maskClosable: false,
+                open: popupCreate,
+                onCancel: () => {
+                    if (onCreateClose)
+                        onCreateClose();
+                    showCreatePopup(false);
+                },
+            }, formProps: {
+                initialValues: popupModify
+                    ? convert2FormData({
+                        data: selectedRow,
+                        columns: columns,
+                    })
+                    : initData
+                        ? convert2FormData({
+                            data: initData,
+                            columns: columns,
+                        })
+                        : {},
+                onFinish: onCreate,
+            }, props: {
+                customColumn,
+                customValue,
+                columns: popupModify ? (modifyProps?.columns ? modifyProps?.columns : columns) : addProps?.columns ? addProps?.columns : columns,
+                isModify: popupModify,
+            } })));
+};
+var AntBaseList = forwardRef(AntBaseList$1);
+
 var css_248z$2 = ".searchbox-module_searchboxFrame__VAWWj{background:#f0f8ff;display:flex;flex-direction:row;padding-bottom:25px;padding-top:15px;width:100%}.searchbox-module_searchboxRow__wzY7N{display:flex;flex-direction:column;justify-content:center;line-height:32px;padding-left:20px;width:100%}.searchbox-module_searchboxBtn__d8Bc6{align-items:flex-end;justify-content:center;width:300px}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaGJveC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHdDQU1FLGtCQUFxQixDQUxyQixZQUFhLENBQ2Isa0JBQW1CLENBR25CLG1CQUFvQixDQURwQixnQkFBaUIsQ0FEakIsVUFJRixDQUVBLHNDQUNFLFlBQWEsQ0FDYixxQkFBc0IsQ0FHdEIsc0JBQXVCLENBRHZCLGdCQUFpQixDQUVqQixpQkFBa0IsQ0FIbEIsVUFLRixDQUNBLHNDQUVFLG9CQUFxQixDQUNyQixzQkFBdUIsQ0FGdkIsV0FHRiIsImZpbGUiOiJzZWFyY2hib3gubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zZWFyY2hib3hGcmFtZSB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWRpcmVjdGlvbjogcm93O1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIHBhZGRpbmctdG9wOiAxNXB4O1xyXG4gIHBhZGRpbmctYm90dG9tOiAyNXB4O1xyXG4gIGJhY2tncm91bmQ6IGFsaWNlYmx1ZTtcclxufVxyXG5cclxuLnNlYXJjaGJveFJvdyB7XHJcbiAgZGlzcGxheTogZmxleDtcclxuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGxpbmUtaGVpZ2h0OiAzMnB4O1xyXG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gIHBhZGRpbmctbGVmdDogMjBweDtcclxuXHJcbn1cclxuLnNlYXJjaGJveEJ0biB7XHJcbiAgd2lkdGg6IDMwMHB4O1xyXG4gIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcclxuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcclxufVxyXG4iXX0= */";
 var styles$2 = {"searchboxFrame":"searchbox-module_searchboxFrame__VAWWj","searchboxRow":"searchbox-module_searchboxRow__wzY7N","searchboxBtn":"searchbox-module_searchboxBtn__d8Bc6"};
 styleInject(css_248z$2);
@@ -23999,7 +24364,7 @@ const LoadingLayout = ({ tip, isLoading, error, isError, style, children, classN
 const Tbpage = ({ tableProps, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, }) => {
     const { user } = useTbState();
     return (React__default.createElement("div", { className: styles$1.tableFrame },
-        title || decs ? React__default.createElement(TitleBox$1, { title: title, decs: decs }) : null,
+        title || decs ? React__default.createElement(TitleBox$2, { title: title, decs: decs }) : null,
         searchOption && (React__default.createElement(SearchBox, { searchOption: searchOption, onSubmit: onSubmit, searchDisabled: searchDisabled, onReset: () => {
                 if (onSubmit)
                     onSubmit(null, null, true);
@@ -24008,7 +24373,7 @@ const Tbpage = ({ tableProps, searchOption, searchDisabled = false, onSubmit, is
             React__default.createElement("div", { className: styles$1.multiFrame },
                 React__default.createElement(AntBaseTable, { ...tableProps })))));
 };
-const TitleBox$1 = ({ title, decs }) => {
+const TitleBox$2 = ({ title, decs }) => {
     return (React__default.createElement("div", { className: styles$1.titleBox },
         React__default.createElement("div", { className: styles$1.title }, title),
         React__default.createElement("div", { className: styles$1.decs }, decs)));
@@ -24026,6 +24391,24 @@ const TbpageSm = ({ tableProps, searchOption, onSubmit, isLoading, title, decs,
                 React__default.createElement(AntBaseTable, { ...tableProps })))));
 };
 
+const Tblist = ({ tableProps, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, render, }) => {
+    const { user } = useTbState();
+    return (React__default.createElement("div", { className: styles$1.tableFrame },
+        title || decs ? React__default.createElement(TitleBox$1, { title: title, decs: decs }) : null,
+        searchOption && (React__default.createElement(SearchBox, { searchOption: searchOption, onSubmit: onSubmit, searchDisabled: searchDisabled, onReset: () => {
+                if (onSubmit)
+                    onSubmit(null, null, true);
+            } })),
+        React__default.createElement(LoadingLayout, { isLoading: isLoading },
+            React__default.createElement("div", { className: styles$1.multiFrame },
+                React__default.createElement(AntBaseList, { tableProps: tableProps, render: render })))));
+};
+const TitleBox$1 = ({ title, decs }) => {
+    return (React__default.createElement("div", { className: styles$1.titleBox },
+        React__default.createElement("div", { className: styles$1.title }, title),
+        React__default.createElement("div", { className: styles$1.decs }, decs)));
+};
+
 const TbpageMulti = ({ arrtableProps, arrflex, searchOption, searchDisabled = false, onSubmit, isLoading, title, decs, direction, }) => {
     const { user } = useTbState();
     return (React__default.createElement("div", { className: styles$1.tableFrame, style: direction === "column" ? { flexDirection: "column" } : {} },
@@ -24056,5 +24439,5 @@ const TitleBox = ({ title, decs }) => {
         React__default.createElement("div", { className: styles$1.decs }, decs)));
 };
 
-export { AntBaseModalCreate, AntBaseTable, AuthTable, ContentLayout, TbFrame, TbProvider, TbpProvider, Tbpage, TbpageMulti, TbpageSm, tbContext, useTbState };
+export { AntBaseModalCreate, AntBaseTable, AuthTable, ContentLayout, TbFrame, TbProvider, Tblist, TbpProvider, Tbpage, TbpageMulti, TbpageSm, tbContext, useTbState };
 //# sourceMappingURL=index.js.map