@thefreshop/tb 1.0.26 → 1.0.28

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

@@ -1,11 +1,12 @@
 import React from "react";
-import { tbframeType, topType, navType, bottomType } from "../../types";
-declare const TbFrame: ({ setting, top, bottom, nav, top_banner, hashmode, }: {
+import { tbframeType, topType, navType, bottomType, FrameStyleType } from "../../types";
+declare const TbFrame: ({ setting, top, bottom, nav, top_banner, hashmode, frameStyle, }: {
     setting: tbframeType;
     top: topType;
     bottom?: bottomType;
     nav: navType;
     top_banner?: React.ReactNode;
     hashmode?: boolean;
+    frameStyle?: FrameStyleType;
 }) => React.JSX.Element;
 export default TbFrame;

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

@@ -1,7 +1,8 @@
 import React from "react";
-import { navType } from "../../types";
-declare const Nav: ({ nav: { menuSet, openIcon, closeIcon }, islogin }: {
+import { navType, FrameStyleType } from "../../types";
+declare const Nav: ({ nav: { menuSet, openIcon, closeIcon }, islogin, frameStyle }: {
     nav: navType;
     islogin: boolean;
+    frameStyle?: FrameStyleType;
 }) => React.JSX.Element;
 export default Nav;

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

@@ -7,6 +7,22 @@ export interface tbframeType {
     logoutComponent?: React.ReactNode;
 }
 export declare const baseAdminDat: TbFrameType;
+export type FrameStyleType = {
+    main?: React.CSSProperties;
+    mainframe?: React.CSSProperties;
+    centerFrame?: React.CSSProperties;
+    contentsFrame?: React.CSSProperties;
+    bottomFrame?: React.CSSProperties;
+    naviFrame?: React.CSSProperties;
+    nav_item?: React.CSSProperties;
+    menu_select?: React.CSSProperties;
+    menu_hover?: React.CSSProperties;
+    menu_nomal?: React.CSSProperties;
+    nav_icon?: React.CSSProperties;
+    nav_text?: React.CSSProperties;
+    nav_openIcon?: React.CSSProperties;
+    sub_item?: React.CSSProperties;
+};
 export type TbFrameType = {
     admin_account_id: number;
     admin_profile_id: number;

package/dist/esm/index.js

@@ -218,14 +218,14 @@ const TopMenu = ({ topMenuSetting: { title, icon, key }, menuStyle = {} }) => {
         React__default.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__default.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin }));
+                usermenutable.push(React__default.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin, frameStyle: frameStyle }));
             });
         }
         else {
@@ -233,14 +233,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__default.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin }));
+                usermenutable.push(React__default.createElement(Menu, { key: index, menu_setting: m, openIcon: openIcon, closeIcon: closeIcon, islogin: islogin, frameStyle: frameStyle }));
             });
         }
         return usermenutable;
     };
-    return React__default.createElement("div", { className: styles$9.naviFrame }, userMenu());
+    return (React__default.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] = useState(false);
     const [subOpen, setSubOpen] = useState(false);
@@ -257,7 +257,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__default.createElement(SubMenu, { key: index, menu_setting: m }));
+                usersubmenutable.push(React__default.createElement(SubMenu, { key: index, menu_setting: m, frameStyle: frameStyle }));
             });
         }
         else {
@@ -265,13 +265,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__default.createElement(SubMenu, { key: index, menu_setting: m }));
+                usersubmenutable.push(React__default.createElement(SubMenu, { key: index, menu_setting: m, frameStyle: frameStyle }));
             });
         }
         return usersubmenutable;
     };
     return (React__default.createElement("div", null,
-        React__default.createElement("div", { className: `${styles$9.nav_item} ${currentTabKey === key ? styles$9.menu_select : hover ? styles$9.menu_hover : styles$9.menu_nomal}`, onMouseEnter: () => {
+        React__default.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);
@@ -283,17 +286,20 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
                 }
                 // console.log(tabs)
             } },
-            React__default.createElement("div", { className: styles$9.nav_icon }, icon),
-            React__default.createElement("div", { className: styles$9.nav_text }, title),
-            React__default.createElement("div", { className: styles$9.nav_open }, children && (subOpen ? React__default.createElement("div", null, openIcon) : React__default.createElement("div", null, closeIcon)))),
+            React__default.createElement("div", { className: styles$9.nav_icon, style: frameStyle?.nav_icon }, icon),
+            React__default.createElement("div", { className: styles$9.nav_text, style: frameStyle?.nav_text }, title),
+            React__default.createElement("div", { className: styles$9.nav_open, style: frameStyle?.nav_openIcon }, children && (subOpen ? React__default.createElement("div", null, openIcon) : React__default.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] = useState(false);
     const { addTabKey, currentTabKey } = useTbState();
     const navigate = useNavigate();
-    return (React__default.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__default.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);
@@ -303,8 +309,8 @@ const SubMenu = ({ menu_setting: { tab, icon, hasPage } }) => {
             navigate("/" + key);
             // console.log(tabs)
         } },
-        React__default.createElement("div", { className: styles$9.nav_icon }, icon),
-        React__default.createElement("div", { className: styles$9.nav_text }, title)));
+        React__default.createElement("div", { className: styles$9.nav_icon, style: frameStyle?.nav_icon }, icon),
+        React__default.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== */";
@@ -353,7 +359,7 @@ const Tabs = ({ nav: { menuSet, openIcon, closeIcon } }) => {
         if (tabInfo) {
             addTabKey(tabInfo);
         }
-    }, [tabKeys]);
+    }, [tabKeys, menuSet, tabList]);
     // 3. 페이지 로드 시 URL을 기반으로 currentTab을 설정하는 useEffect 추가
     useEffect(() => {
         const pathKey = location.pathname.substring(1); // 맨 앞의 '/' 제거
@@ -471,25 +477,23 @@ const NullPage = () => {
         React__default.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();
     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]);
     useEffect(() => {
         if (!errMsg?.isPopup) ;
     }, [errMsg]);
@@ -538,7 +542,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return createHashRouter([
                 {
                     path: "/",
-                    element: (React__default.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom })),
+                    element: (React__default.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom, frameStyle: frameStyle })),
                     children: route(),
                     errorElement: React__default.createElement(NullPage, null),
                 },
@@ -548,16 +552,16 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return createBrowserRouter([
                 {
                     path: "/",
-                    element: (React__default.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom })),
+                    element: (React__default.createElement(MainLayout, { errMsg: errMsg, setting: setting, top_banner: top_banner, nav: nav, user: user, top: top, bottom: bottom, frameStyle: frameStyle })),
                     children: route(),
                     errorElement: React__default.createElement(NullPage, null),
                 },
             ]);
         }
-    }, [hashmode, user, top, nav, setting, top_banner, bottom]);
+    }, [hashmode, user, top, nav, setting, top_banner, bottom, frameStyle]);
     return React__default.createElement(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 = useCallback(() => {
         return top_banner ? top_banner : null;
     }, [top_banner]);
@@ -592,17 +596,17 @@ const MainLayout = ({ errMsg, setting, top_banner, nav, user, top, bottom, }) =>
                         fontSize: "10px",
                     } }, errMsg?.err))));
     };
-    return (React__default.createElement("div", { className: styles$9.main }, errMsg ? (errMsg.isPopup ? (React__default.createElement(ErrWarning, null)) : null) : setting?.islogin && !user ? (React__default.createElement("div", null,
+    return (React__default.createElement("div", { className: styles$9.main, style: frameStyle?.main }, errMsg ? (errMsg.isPopup ? (React__default.createElement(ErrWarning, null)) : null) : setting?.islogin && !user ? (React__default.createElement("div", null,
         React__default.createElement(Outlet, null),
-        React__default.createElement(Navigate, { to: "/login", replace: true }))) : (React__default.createElement("div", { className: styles$9.mainframe },
+        React__default.createElement(Navigate, { to: "/login", replace: true }))) : (React__default.createElement("div", { className: styles$9.mainframe, style: frameStyle?.mainframe },
         React__default.createElement(Top, { setting: setting, top: top }),
         React__default.createElement(TOPBANNER, null),
-        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("div", { className: styles$9.centerFrame, style: { ...frameStyle?.centerFrame, ...(top_banner ? { height: "calc(100vh - 120px)" } : { height: "calc(100vh - 80px)" }) } },
+            React__default.createElement(Nav, { nav: nav, islogin: setting.islogin ?? false, frameStyle: frameStyle }),
+            React__default.createElement("div", { className: styles$9.contentsFrame, style: frameStyle?.contentsFrame },
                 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 }))))));
+        React__default.createElement("div", { className: styles$9.bottomFrame, style: frameStyle?.bottomFrame }, bottom && React__default.createElement(Bottom, { bottom: bottom }))))));
 };
 
 //component