@thefreshop/tb 1.0.26 → 1.0.28

package/dist/cjs/index.js

@@ -238,14 +238,14 @@ const TopMenu = ({ topMenuSetting: { title, icon, key }, menuStyle = {} }) => {
         React.createElement("div", { className: `${styles$8.top_menu_item_text} ${topkey === key ? styles$8.menu_hover : styles$8.menu_nomal}`, style: menuStyle.fontSize ? { fontSize: menuStyle.fontSize } : {} }, title)));
 };
 
-const Nav = ({ nav: { menuSet, openIcon, closeIcon }, islogin }) => {
+const Nav = ({ nav: { menuSet, openIcon, closeIcon }, islogin, frameStyle }) => {
     const { topkey, user } = useTbState();
     const currentMenu = menuSet.find((m) => m.parentkey === topkey);
     const userMenu = () => {
         let usermenutable = [];
         if (user?.user_group?.group_key === "master" || islogin === false) {
             currentMenu?.menuSetting.forEach((m, index) => {
-                usermenutable.push(React.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin }));
+                usermenutable.push(React.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin, frameStyle: frameStyle }));
             });
         }
         else {
@@ -253,14 +253,14 @@ const Nav = ({ nav: { menuSet, openIcon, closeIcon }, islogin }) => {
                 return user?.user_group?.group_menu_auth.includes(m.tab.key);
             });
             userCurrentMenu?.forEach((m, index) => {
-                usermenutable.push(React.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin }));
+                usermenutable.push(React.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin, frameStyle: frameStyle }));
             });
         }
         return usermenutable;
     };
-    return React.createElement("div", { className: styles$9.naviFrame }, userMenu());
+    return (React.createElement("div", { className: styles$9.naviFrame, style: frameStyle?.naviFrame }, userMenu()));
 };
-const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, openIcon, closeIcon, islogin, }) => {
+const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, openIcon, closeIcon, islogin, frameStyle, }) => {
     const { title, key, page } = tab;
     const [hover, setHover] = React.useState(false);
     const [subOpen, setSubOpen] = React.useState(false);
@@ -277,7 +277,7 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
         let usersubmenutable = [];
         if (user?.user_group?.group_key === "master" || islogin === false) {
             children?.forEach((m, index) => {
-                usersubmenutable.push(React.createElement(SubMenu, { key: index, menu_setting: m }));
+                usersubmenutable.push(React.createElement(SubMenu, { key: index, menu_setting: m, frameStyle: frameStyle }));
             });
         }
         else {
@@ -285,13 +285,16 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
                 return user?.user_group?.group_menu_auth.includes(m.tab.key);
             });
             userCurrentMenu?.forEach((m, index) => {
-                usersubmenutable.push(React.createElement(SubMenu, { key: index, menu_setting: m }));
+                usersubmenutable.push(React.createElement(SubMenu, { key: index, menu_setting: m, frameStyle: frameStyle }));
             });
         }
         return usersubmenutable;
     };
     return (React.createElement("div", null,
-        React.createElement("div", { className: `${styles$9.nav_item} ${currentTabKey === key ? styles$9.menu_select : hover ? styles$9.menu_hover : styles$9.menu_nomal}`, onMouseEnter: () => {
+        React.createElement("div", { className: `${styles$9.nav_item} ${currentTabKey === key ? styles$9.menu_select : hover ? styles$9.menu_hover : styles$9.menu_nomal}`, style: {
+                ...frameStyle?.nav_item,
+                ...(currentTabKey === key ? frameStyle?.menu_select : hover ? frameStyle?.menu_hover : frameStyle?.menu_nomal),
+            }, onMouseEnter: () => {
                 setHover(true);
             }, onMouseLeave: () => {
                 setHover(false);
@@ -303,17 +306,20 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
                 }
                 // console.log(tabs)
             } },
-            React.createElement("div", { className: styles$9.nav_icon }, icon),
-            React.createElement("div", { className: styles$9.nav_text }, title),
-            React.createElement("div", { className: styles$9.nav_open }, children && (subOpen ? React.createElement("div", null, openIcon) : React.createElement("div", null, closeIcon)))),
+            React.createElement("div", { className: styles$9.nav_icon, style: frameStyle?.nav_icon }, icon),
+            React.createElement("div", { className: styles$9.nav_text, style: frameStyle?.nav_text }, title),
+            React.createElement("div", { className: styles$9.nav_open, style: frameStyle?.nav_openIcon }, children && (subOpen ? React.createElement("div", null, openIcon) : React.createElement("div", null, closeIcon)))),
         children && subOpen && userSubMenu()));
 };
-const SubMenu = ({ menu_setting: { tab, icon, hasPage } }) => {
+const SubMenu = ({ menu_setting: { tab, icon, hasPage }, frameStyle }) => {
     const { title, key, page } = tab;
     const [hover, setHover] = React.useState(false);
     const { addTabKey, currentTabKey } = useTbState();
     const navigate = reactRouter.useNavigate();
-    return (React.createElement("div", { className: `${styles$9.sub_item} ${currentTabKey === key ? styles$9.menu_select : hover ? styles$9.menu_hover : styles$9.menu_nomal}`, onMouseEnter: () => {
+    return (React.createElement("div", { className: `${styles$9.sub_item} ${currentTabKey === key ? styles$9.menu_select : hover ? styles$9.menu_hover : styles$9.menu_nomal}`, style: {
+            ...frameStyle?.sub_item,
+            ...(currentTabKey === key ? frameStyle?.menu_select : hover ? frameStyle?.menu_hover : frameStyle?.menu_nomal),
+        }, onMouseEnter: () => {
             setHover(true);
         }, onMouseLeave: () => {
             setHover(false);
@@ -323,8 +329,8 @@ const SubMenu = ({ menu_setting: { tab, icon, hasPage } }) => {
             navigate("/" + key);
             // console.log(tabs)
         } },
-        React.createElement("div", { className: styles$9.nav_icon }, icon),
-        React.createElement("div", { className: styles$9.nav_text }, title)));
+        React.createElement("div", { className: styles$9.nav_icon, style: frameStyle?.nav_icon }, icon),
+        React.createElement("div", { className: styles$9.nav_text, style: frameStyle?.nav_text }, title)));
 };
 
 var css_248z$9 = ".bottom-module_bottom_item__fac0H{display:flex;font-size:15px;justify-content:space-between;padding-left:10px;width:100%}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImJvdHRvbS5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtDQUlFLFlBQWEsQ0FGYixjQUFlLENBR2YsNkJBQThCLENBSjlCLGlCQUFrQixDQUVsQixVQUdGIiwiZmlsZSI6ImJvdHRvbS5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmJvdHRvbV9pdGVtIHtcclxuICBwYWRkaW5nLWxlZnQ6IDEwcHg7XHJcbiAgZm9udC1zaXplOiAxNXB4O1xyXG4gIHdpZHRoOiAxMDAlO1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xyXG59XHJcbiJdfQ== */";
@@ -373,7 +379,7 @@ const Tabs = ({ nav: { menuSet, openIcon, closeIcon } }) => {
         if (tabInfo) {
             addTabKey(tabInfo);
         }
-    }, [tabKeys]);
+    }, [tabKeys, menuSet, tabList]);
     // 3. 페이지 로드 시 URL을 기반으로 currentTab을 설정하는 useEffect 추가
     React.useEffect(() => {
         const pathKey = location.pathname.substring(1); // 맨 앞의 '/' 제거
@@ -491,25 +497,23 @@ const NullPage = () => {
         React.createElement("div", null, "\uD398\uC774\uC9C0\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.")));
 };
 
-const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) => {
+const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, frameStyle, }) => {
     const { user, errMsg, tabList, setTabList, startTabKey, setStartTabKey } = useTbState();
     React.useEffect(() => {
-        if (tabList.length === 0) {
-            let p_tabList = [];
-            nav.menuSet.forEach((item) => {
-                item.menuSetting.forEach((sub) => {
-                    p_tabList.push(sub.tab);
-                    sub.children?.forEach((page) => {
-                        p_tabList.push(page.tab);
-                    });
+        let p_tabList = [];
+        nav.menuSet.forEach((item) => {
+            item.menuSetting.forEach((sub) => {
+                p_tabList.push(sub.tab);
+                sub.children?.forEach((page) => {
+                    p_tabList.push(page.tab);
                 });
             });
-            nav?.globalTabs?.forEach((item) => {
-                p_tabList.push(item);
-            });
-            setTabList(p_tabList);
-        }
-    }, [tabList]);
+        });
+        nav?.globalTabs?.forEach((item) => {
+            p_tabList.push(item);
+        });
+        setTabList(p_tabList);
+    }, [nav.menuSet]);
     React.useEffect(() => {
         if (!errMsg?.isPopup) ;
     }, [errMsg]);
@@ -558,7 +562,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return reactRouter.createHashRouter([
                 {
                     path: "/",
-                    element: (React.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom })),
+                    element: (React.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom, frameStyle: frameStyle })),
                     children: route(),
                     errorElement: React.createElement(NullPage, null),
                 },
@@ -568,16 +572,16 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return reactRouter.createBrowserRouter([
                 {
                     path: "/",
-                    element: (React.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom })),
+                    element: (React.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom, frameStyle: frameStyle })),
                     children: route(),
                     errorElement: React.createElement(NullPage, null),
                 },
             ]);
         }
-    }, [hashmode, user, top, nav, setting, top_banner, bottom]);
+    }, [hashmode, user, top, nav, setting, top_banner, bottom, frameStyle]);
     return React.createElement(reactRouter.RouterProvider, { router: router });
 };
-const MainLayout = ({ errMsg, setting, top_banner, nav, user, top, bottom, }) => {
+const MainLayout = ({ errMsg, setting, top_banner, nav, user, top, bottom, frameStyle, }) => {
     const TOPBANNER = React.useCallback(() => {
         return top_banner ? top_banner : null;
     }, [top_banner]);
@@ -612,17 +616,17 @@ const MainLayout = ({ errMsg, setting, top_banner, nav, user, top, bottom, }) =>
                         fontSize: "10px",
                     } }, errMsg?.err))));
     };
-    return (React.createElement("div", { className: styles$9.main }, errMsg ? (errMsg.isPopup ? (React.createElement(ErrWarning, null)) : null) : setting?.islogin && !user ? (React.createElement("div", null,
+    return (React.createElement("div", { className: styles$9.main, style: frameStyle?.main }, errMsg ? (errMsg.isPopup ? (React.createElement(ErrWarning, null)) : null) : setting?.islogin && !user ? (React.createElement("div", null,
         React.createElement(reactRouter.Outlet, null),
-        React.createElement(reactRouter.Navigate, { to: "/login", replace: true }))) : (React.createElement("div", { className: styles$9.mainframe },
+        React.createElement(reactRouter.Navigate, { to: "/login", replace: true }))) : (React.createElement("div", { className: styles$9.mainframe, style: frameStyle?.mainframe },
         React.createElement(Top, { setting: setting, top: top }),
         React.createElement(TOPBANNER, null),
-        React.createElement("div", { className: styles$9.centerFrame, style: top_banner ? { height: "calc(100vh - 120px)" } : { height: "calc(100vh - 80px)" } },
-            React.createElement(Nav, { nav: nav, islogin: setting.islogin ?? false }),
-            React.createElement("div", { className: styles$9.contentsFrame },
+        React.createElement("div", { className: styles$9.centerFrame, style: { ...frameStyle?.centerFrame, ...(top_banner ? { height: "calc(100vh - 120px)" } : { height: "calc(100vh - 80px)" }) } },
+            React.createElement(Nav, { nav: nav, islogin: setting.islogin ?? false, frameStyle: frameStyle }),
+            React.createElement("div", { className: styles$9.contentsFrame, style: frameStyle?.contentsFrame },
                 React.createElement(Tabs, { nav: nav }),
                 React.createElement(Main, null))),
-        React.createElement("div", { className: styles$9.bottomFrame }, bottom && React.createElement(Bottom, { bottom: bottom }))))));
+        React.createElement("div", { className: styles$9.bottomFrame, style: frameStyle?.bottomFrame }, bottom && React.createElement(Bottom, { bottom: bottom }))))));
 };
 
 //component