@thefreshop/tb 1.0.8 → 1.0.10

package/dist/cjs/tbframe/layout/main.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 declare const Main: () => React.JSX.Element;
 export default Main;

package/dist/cjs/tbframe/layout/tabs.d.ts

@@ -1,3 +1,6 @@
-import React from 'react';
-declare const Tabs: () => React.JSX.Element;
+import React from "react";
+import { navType } from "../../types";
+declare const Tabs: ({ nav: { menuSet, openIcon, closeIcon } }: {
+    nav: navType;
+}) => React.JSX.Element;
 export default Tabs;

package/dist/cjs/types/provider.types.d.ts

@@ -16,6 +16,7 @@ export type ProviderType = {
     SetWarning: (value: ErrMsgType) => void;
     errMsg?: ErrMsgType;
     setGlobalpages: (value: tabType[]) => void;
+    globalpages?: tabType[];
     addGlobalTabs: (key: string) => void;
     setMenupages: (value: navType) => void;
     goTabs: (key: string) => void;

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 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, List, Card, Checkbox, Tree, ConfigProvider, Result, Spin } from 'antd';
@@ -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;