@thefreshop/tb 1.0.27 → 1.0.29

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,18 +329,18 @@ 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== */";
 var styles$7 = {"bottom_item":"bottom-module_bottom_item__fac0H"};
 styleInject(css_248z$9);
 
-const Bottom = ({ bottom }) => {
+const Bottom = ({ bottom, frameStyle }) => {
     const { currentTabKey, user, tabList } = useTbState();
     const tab = tabList.find((tab) => tab.key === currentTabKey);
-    return (React.createElement("div", { className: styles$7.bottom_item },
+    return (React.createElement("div", { className: styles$7.bottom_item, style: frameStyle?.bottom_item },
         React.createElement("div", null, tab?.title),
         React.createElement("div", { style: { display: "flex", gap: 16 } },
             React.createElement("div", null,
@@ -350,7 +356,7 @@ var css_248z$8 = ".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$8);
 
-const Tabs = ({ nav: { menuSet, openIcon, closeIcon } }) => {
+const Tabs = ({ nav: { menuSet, openIcon, closeIcon }, frameStyle }) => {
     const { tabList, tabKeys, removeTabKey, setCurrentTabKey, addTabKey, currentTabKey } = useTbState();
     const navigate = reactRouter.useNavigate();
     const location = reactRouter.useLocation();
@@ -379,16 +385,16 @@ const Tabs = ({ nav: { menuSet, openIcon, closeIcon } }) => {
         const pathKey = location.pathname.substring(1); // 맨 앞의 '/' 제거
         findTabs(pathKey);
     }, []);
-    return (React.createElement("div", { className: styles$6.tabFrame }, tabKeys?.map((key) => {
+    return (React.createElement("div", { className: styles$6.tabFrame, style: frameStyle?.tabFrame }, tabKeys?.map((key) => {
         const tab = tabList.find((tab) => tab.key === key);
-        return (React.createElement("div", { key: key, className: `${styles$6.tab_item} ${currentTabKey === key ? styles$6.tab_select : styles$6.tab_normal}` },
-            React.createElement("div", { className: styles$6.tab_item_text, onClick: () => {
+        return (React.createElement("div", { key: key, className: `${styles$6.tab_item} ${currentTabKey === key ? styles$6.tab_select : styles$6.tab_normal}`, style: { ...frameStyle?.tab_item, ...(currentTabKey === key ? frameStyle?.tab_select : frameStyle?.tab_normal) } },
+            React.createElement("div", { className: styles$6.tab_item_text, style: frameStyle?.tab_item_text, onClick: () => {
                     setCurrentTabKey(key);
                     navigate("/" + key);
                     // console.log('setCurrentTab', m)
                 } }, tab?.title),
-            !tab?.noremove && (React.createElement("div", { className: styles$6.tab_item_button },
-                React.createElement("button", { className: styles$6.tab_x_button, onClick: () => removeTabKey(key) }, "x")))));
+            !tab?.noremove && (React.createElement("div", { className: styles$6.tab_item_button, style: frameStyle?.tab_item_button },
+                React.createElement("button", { className: styles$6.tab_x_button, style: frameStyle?.tab_x_button, onClick: () => removeTabKey(key) }, "x")))));
     })));
 };
 
@@ -491,7 +497,7 @@ 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(() => {
         let p_tabList = [];
@@ -556,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),
                 },
@@ -566,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]);
@@ -610,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(Tabs, { nav: nav }),
+        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, frameStyle: frameStyle }),
                 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, frameStyle: frameStyle }))))));
 };
 
 //component