@thefreshop/tb 1.0.27 → 1.0.29

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { bottomType } from "../../types";
-declare const Bottom: ({ bottom }: {
+declare const Bottom: ({ bottom, frameStyle }: {
     bottom: bottomType;
+    frameStyle?: any;
 }) => React.JSX.Element;
 export default Bottom;

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/tbframe/layout/tabs.d.ts

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

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

@@ -7,6 +7,30 @@ 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;
+    bottom_item?: React.CSSProperties;
+    tabFrame?: React.CSSProperties;
+    tab_item?: React.CSSProperties;
+    tab_item_text?: React.CSSProperties;
+    tab_item_button?: React.CSSProperties;
+    tab_x_button?: React.CSSProperties;
+    tab_normal?: React.CSSProperties;
+    tab_select?: 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,18 +309,18 @@ 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== */";
 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__default.createElement("div", { className: styles$7.bottom_item },
+    return (React__default.createElement("div", { className: styles$7.bottom_item, style: frameStyle?.bottom_item },
         React__default.createElement("div", null, tab?.title),
         React__default.createElement("div", { style: { display: "flex", gap: 16 } },
             React__default.createElement("div", null,
@@ -330,7 +336,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 = useNavigate();
     const location = useLocation();
@@ -359,16 +365,16 @@ const Tabs = ({ nav: { menuSet, openIcon, closeIcon } }) => {
         const pathKey = location.pathname.substring(1); // 맨 앞의 '/' 제거
         findTabs(pathKey);
     }, []);
-    return (React__default.createElement("div", { className: styles$6.tabFrame }, tabKeys?.map((key) => {
+    return (React__default.createElement("div", { className: styles$6.tabFrame, style: frameStyle?.tabFrame }, tabKeys?.map((key) => {
         const tab = tabList.find((tab) => tab.key === key);
-        return (React__default.createElement("div", { key: key, className: `${styles$6.tab_item} ${currentTabKey === key ? styles$6.tab_select : styles$6.tab_normal}` },
-            React__default.createElement("div", { className: styles$6.tab_item_text, onClick: () => {
+        return (React__default.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__default.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__default.createElement("div", { className: styles$6.tab_item_button },
-                React__default.createElement("button", { className: styles$6.tab_x_button, onClick: () => removeTabKey(key) }, "x")))));
+            !tab?.noremove && (React__default.createElement("div", { className: styles$6.tab_item_button, style: frameStyle?.tab_item_button },
+                React__default.createElement("button", { className: styles$6.tab_x_button, style: frameStyle?.tab_x_button, onClick: () => removeTabKey(key) }, "x")))));
     })));
 };
 
@@ -471,7 +477,7 @@ 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(() => {
         let p_tabList = [];
@@ -536,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),
                 },
@@ -546,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]);
@@ -590,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(Tabs, { nav: nav }),
+        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, frameStyle: frameStyle }),
                 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, frameStyle: frameStyle }))))));
 };
 
 //component