@thefreshop/tb 1.0.15 → 1.0.17

package/dist/cjs/index.js

@@ -42,18 +42,17 @@ const tbContext = React.createContext(undefined);
 const SESSION_STORAGE_KEY = "tbFrameState";
 const TbProvider = ({ children }) => {
     const [topkey, setTopkey] = React.useState("");
-    const [currentTab, setCurrentTab] = React.useState();
+    const [tabList, setTabList] = React.useState([]);
+    const [currentTabKey, setCurrentTabKey] = React.useState();
+    const [startTabKey, setStartTabKey] = React.useState();
     const [user, setloginUser] = React.useState();
-    // const [tabs, setTabs] = useState<tabType[]>([]);
-    const [startpage, setStartpage] = React.useState();
     const [errMsg, setErrMsg] = React.useState();
-    const [globalpages, setGlobalpages] = React.useState();
-    const [menupages, setMenupages] = React.useState();
     // 1. 초기 상태를 sessionStorage 불러오도록 수정
-    const [tabs, setTabs] = React.useState(() => {
+    const [tabKeys, setTabKeys] = React.useState(() => {
         try {
             const savedState = sessionStorage.getItem(SESSION_STORAGE_KEY);
-            return savedState ? JSON.parse(savedState).tabs : [];
+            const tt = savedState ? JSON.parse(savedState).tabs : [];
+            return tt === undefined ? [] : tt;
         }
         catch (error) {
             console.error("Failed to parse state from sessionStorage", error);
@@ -62,50 +61,33 @@ const TbProvider = ({ children }) => {
     });
     // 2. 상태가 변경될 때마다 sessionStorage 저장하는 useEffect 추가
     React.useEffect(() => {
-        // page 속성(React 컴포넌트)을 제외하고 sessionStorage에 저장
-        const tabsToSave = tabs.map(({ page, ...rest }) => rest);
-        const stateToSave = {
-            tabs: tabsToSave,
-            // ... 저장할 다른 상태들 ...
-        };
-        sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave)); // 순환 구조 오류 방지
-    }, [tabs, currentTab /* ... 다른 상태 의존성 ... */]);
-    const addTabs = (tab) => {
-        setCurrentTab(tab);
-        if (tabs.find((m) => m.key === tab.key) === undefined) {
-            setTabs([...tabs, tab]);
+        // 불러올 때의 데이터 구조({ tabs: ... })와 일치시키기 위해 객체 형태로 저장
+        const stateToSave = { tabs: tabKeys };
+        sessionStorage.setItem(SESSION_STORAGE_KEY, JSON.stringify(stateToSave));
+    }, [tabKeys, currentTabKey /* ... 다른 상태 의존성 ... */]);
+    const addTabKey = (key) => {
+        setCurrentTabKey(key);
+        if (tabKeys.find((m) => m === key) === undefined) {
+            setTabKeys([...tabKeys, key]);
         }
     };
-    const removeTabs = (tab) => {
+    const removeTabKey = (key) => {
         // console.log('tab', tab)
-        let newTabs = [...tabs];
-        const itemToFind = newTabs.find((m) => m.key === tab.key);
+        let newTabs = [...tabKeys];
+        const itemToFind = newTabs.find((m) => m === key);
         if (itemToFind !== undefined) {
             const idx = newTabs.indexOf(itemToFind);
             if (idx > -1)
                 newTabs.splice(idx, 1);
-            setTabs(newTabs);
+            setTabKeys(newTabs);
             // console.log('newTabs', newTabs)
-            if (currentTab === tab) {
-                setCurrentTab(newTabs[idx === 0 ? 0 : idx - 1]);
+            if (currentTabKey === key) {
+                setCurrentTabKey(newTabs[idx === 0 ? 0 : idx - 1]);
             }
         }
     };
     const loginUser = (user) => {
         if (user !== null) {
-            if (startpage) {
-                addTabs({
-                    title: "HOME",
-                    key: "HOME",
-                    page: startpage,
-                    noremove: true,
-                });
-                setCurrentTab({
-                    title: "HOME",
-                    key: "HOME",
-                    page: startpage,
-                });
-            }
             if (user?.user_group?.group_section_start) {
                 setTopkey(user?.user_group?.group_section_start);
             }
@@ -117,63 +99,49 @@ const TbProvider = ({ children }) => {
     };
     const logout = (force = false) => {
         setloginUser(undefined);
-        setCurrentTab(undefined);
-        setTabs([]);
+        setCurrentTabKey(undefined);
+        setTabKeys([]);
         setTopkey("");
         if (force)
             window.location.reload();
     };
-    const addGlobalTabs = (key) => {
-        // console.log(key)
-        const newtab = globalpages?.find((m) => {
-            return m.key === key;
-        });
-        // console.log(globalpages, newtab)
-        if (newtab) {
-            addTabs(newtab);
-        }
-    };
-    const goTabs = (key) => {
-        let gotab;
-        menupages?.menuSet.forEach((item) => {
-            item.menuSetting.forEach((sub) => {
-                sub.children?.forEach((page) => {
-                    if (page.tab.key === key)
-                        gotab = page;
-                });
-            });
-        });
-        if (gotab) {
-            addTabs(gotab);
-        }
-        const newtab = globalpages?.find((m) => {
-            return m.key === key;
-        });
-        // console.log(globalpages, newtab)
-        if (newtab) {
-            addTabs(newtab);
-        }
-    };
+    // const goTabKey = (key: string) => {
+    //     let gotab;
+    //     menupages?.menuSet.forEach((item: menuSetType) => {
+    //         item.menuSetting.forEach((sub) => {
+    //             sub.children?.forEach((page) => {
+    //                 if (page.tab.key === key) gotab = page;
+    //             });
+    //         });
+    //     });
+    //     if (gotab) {
+    //         addTabKey(gotab);
+    //     }
+    //     const newtab = globalpages?.find((m) => {
+    //         return m.key === key;
+    //     });
+    //     // console.log(globalpages, newtab)
+    //     if (newtab) {
+    //         addTabKey(newtab);
+    //     }
+    // };
     return (React.createElement(tbContext.Provider, { value: {
             topkey,
             setTopkey,
-            tabs,
-            addTabs,
-            removeTabs,
-            currentTab,
-            setCurrentTab,
+            tabKeys,
+            removeTabKey,
+            currentTabKey,
+            setCurrentTabKey,
+            addTabKey,
             loginUser,
             logout,
             user,
-            startpage,
-            setStartpage,
+            startTabKey,
+            setStartTabKey,
             SetWarning,
             errMsg,
-            setGlobalpages,
-            globalpages,
-            addGlobalTabs,
-            setMenupages,
-            goTabs,
+            tabList,
+            setTabList,
         } }, children));
 };
 const useTbState = () => {
@@ -223,7 +191,8 @@ var styles$8 = {"topframe":"top-module_topframe__LhKDg","top_left":"top-module_t
 styleInject(css_248z$a);
 
 const Top = ({ setting, top: { title = topbase.title, titleimage, topMenuSetting, menuStyle, imgstyle, titleStyle, topRight }, }) => {
-    const { logout, user, setCurrentTab, startpage } = useTbState();
+    const { logout, user, addTabKey, setCurrentTabKey } = useTbState();
+    const navigate = reactRouter.useNavigate();
     const userTop = () => {
         let topmenutable = [];
         if (user?.user_group?.group_key === "master" || setting.islogin === false) {
@@ -243,12 +212,11 @@ const Top = ({ setting, top: { title = topbase.title, titleimage, topMenuSetting
     };
     return (React.createElement("div", { className: styles$8.topframe },
         React.createElement("div", { className: styles$8.top_left, style: { cursor: "pointer" }, onClick: () => {
-                if (startpage)
-                    setCurrentTab({
-                        title: "startpage",
-                        key: "startpage",
-                        page: startpage,
-                    });
+                if (setting?.startTabKey) {
+                    addTabKey(setting?.startTabKey);
+                    setCurrentTabKey(setting?.startTabKey);
+                    navigate("/" + setting?.startTabKey);
+                }
                 console.log("home");
             } },
             titleimage ? React.createElement("img", { src: titleimage, className: styles$8.toplogo, alt: "logo", style: imgstyle }) : null,
@@ -296,7 +264,7 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
     const { title, key, page } = tab;
     const [hover, setHover] = React.useState(false);
     const [subOpen, setSubOpen] = React.useState(false);
-    const { addTabs, currentTab, user } = useTbState();
+    const { addTabKey, currentTabKey, user } = useTbState();
     const navigate = reactRouter.useNavigate();
     React.useEffect(() => {
         if (defalultOpen) {
@@ -323,18 +291,14 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
         return usersubmenutable;
     };
     return (React.createElement("div", null,
-        React.createElement("div", { className: `${styles$9.nav_item} ${currentTab?.key === 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}`, onMouseEnter: () => {
                 setHover(true);
             }, onMouseLeave: () => {
                 setHover(false);
             }, onClick: () => {
                 setSubOpen((prev) => !prev);
-                if (hasPage && currentTab?.key !== key) {
-                    addTabs({
-                        title,
-                        key,
-                        page,
-                    });
+                if (hasPage && currentTabKey !== key) {
+                    addTabKey(key);
                     navigate("/" + key);
                 }
                 // console.log(tabs)
@@ -347,19 +311,15 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
 const SubMenu = ({ menu_setting: { tab, icon, hasPage } }) => {
     const { title, key, page } = tab;
     const [hover, setHover] = React.useState(false);
-    const { addTabs, currentTab } = useTbState();
+    const { addTabKey, currentTabKey } = useTbState();
     const navigate = reactRouter.useNavigate();
-    return (React.createElement("div", { className: `${styles$9.sub_item} ${currentTab?.key === 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}`, onMouseEnter: () => {
             setHover(true);
         }, onMouseLeave: () => {
             setHover(false);
         }, onClick: () => {
-            if (hasPage && currentTab?.key !== key)
-                addTabs({
-                    title,
-                    key,
-                    page,
-                });
+            if (hasPage && currentTabKey !== key)
+                addTabKey(key);
             navigate("/" + key);
             // console.log(tabs)
         } },
@@ -372,9 +332,10 @@ var styles$7 = {"bottom_item":"bottom-module_bottom_item__fac0H"};
 styleInject(css_248z$9);
 
 const Bottom = ({ bottom }) => {
-    const { currentTab, user } = useTbState();
+    const { currentTabKey, user, tabList } = useTbState();
+    const tab = tabList.find((tab) => tab.key === currentTabKey);
     return (React.createElement("div", { className: styles$7.bottom_item },
-        React.createElement("div", null, currentTab?.title),
+        React.createElement("div", null, tab?.title),
         React.createElement("div", { style: { display: "flex", gap: 16 } },
             React.createElement("div", null,
                 user?.user_name ?? "이름없음",
@@ -390,53 +351,44 @@ var styles$6 = {"tabFrame":"tabs-module_tabFrame__qyHsD","tab_item":"tabs-module
 styleInject(css_248z$8);
 
 const Tabs = ({ nav: { menuSet, openIcon, closeIcon } }) => {
-    const { tabs, removeTabs, setCurrentTab, addTabs, currentTab, globalpages } = useTbState();
+    const { tabList, tabKeys, removeTabKey, setCurrentTabKey, addTabKey, currentTabKey } = useTbState();
     const navigate = reactRouter.useNavigate();
     const location = reactRouter.useLocation();
     const findTabs = React.useCallback((pathKey) => {
         // 1. 현재 열린 탭 중에 있는지 확인
-        const existingTab = tabs.find((t) => t.key === pathKey);
-        if (existingTab) {
-            setCurrentTab(existingTab);
+        const existingTabKey = tabKeys.find((key) => key === pathKey);
+        if (existingTabKey) {
+            setCurrentTabKey(existingTabKey);
             return;
         }
         // 2. 없다면, 전체 페이지 목록에서 찾아서 추가
         let tabInfo;
         // 2-1. 메뉴 페이지에서 찾기
         menuSet.forEach((item) => {
-            item.menuSetting.forEach((sub) => {
-                if (sub.tab.key === pathKey)
-                    tabInfo = sub;
-                else {
-                    sub.children?.forEach((page) => {
-                        if (page.tab.key === pathKey)
-                            tabInfo = page;
-                    });
-                }
+            tabList.forEach((tab) => {
+                if (tab.key === pathKey)
+                    tabInfo = pathKey;
             });
         });
-        // 2-2. 전역 페이지에서 찾기 (메뉴에 없으면)
-        if (!tabInfo) {
-            tabInfo = globalpages?.find((m) => m.key === pathKey);
-        }
         if (tabInfo) {
-            addTabs(tabInfo);
+            addTabKey(tabInfo);
         }
-    }, [tabs, globalpages]);
+    }, [tabKeys]);
     // 3. 페이지 로드 시 URL을 기반으로 currentTab을 설정하는 useEffect 추가
     React.useEffect(() => {
         const pathKey = location.pathname.substring(1); // 맨 앞의 '/' 제거
         findTabs(pathKey);
     }, []);
-    return (React.createElement("div", { className: styles$6.tabFrame }, tabs?.map((m) => {
-        return (React.createElement("div", { key: m.key, className: `${styles$6.tab_item} ${currentTab?.key === m.key ? styles$6.tab_select : styles$6.tab_normal}` },
+    return (React.createElement("div", { className: styles$6.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: () => {
-                    setCurrentTab(m);
-                    navigate("/" + m.key);
+                    setCurrentTabKey(key);
+                    navigate("/" + key);
                     // console.log('setCurrentTab', m)
-                } }, m.title),
-            !m.noremove && (React.createElement("div", { className: styles$6.tab_item_button },
-                React.createElement("button", { className: styles$6.tab_x_button, onClick: () => removeTabs(m) }, "x")))));
+                } }, 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")))));
     })));
 };
 
@@ -540,25 +492,32 @@ const NullPage = () => {
 };
 
 const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) => {
-    const { user, startpage, setStartpage, errMsg, setGlobalpages, setMenupages } = useTbState();
+    const { user, errMsg, tabList, setTabList, startTabKey, setStartTabKey } = useTbState();
     React.useEffect(() => {
-        if (setting.startpage) {
-            setStartpage(setting.startpage);
-        }
-    }, [setting.startpage]);
-    React.useEffect(() => {
-        if (setting.globalpages) {
-            setGlobalpages(setting.globalpages);
-        }
-    }, [setting.globalpages]);
-    React.useEffect(() => {
-        if (nav) {
-            setMenupages(nav);
+        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);
+                    });
+                });
+            });
+            nav?.globalTabs?.forEach((item) => {
+                p_tabList.push(item);
+            });
+            setTabList(p_tabList);
         }
-    }, [nav]);
+    }, [tabList]);
     React.useEffect(() => {
         if (!errMsg?.isPopup) ;
     }, [errMsg]);
+    React.useEffect(() => {
+        if (!startTabKey && setting?.startTabKey) {
+            setStartTabKey(setting?.startTabKey);
+        }
+    }, [setting.startTabKey]);
     const route = () => {
         let route = [];
         if (setting?.islogin) {
@@ -567,6 +526,12 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
                 element: setting?.loginpage ? setting.loginpage : React.createElement(LoginPage, null),
             });
         }
+        nav.globalTabs?.forEach((item) => {
+            route.push({
+                path: "/" + item.key,
+                element: item.page,
+            });
+        });
         nav.menuSet.forEach((item) => {
             item.menuSetting.forEach((sub) => {
                 route.push({
@@ -581,6 +546,11 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
                 });
             });
         });
+        // 일치하는 라우트가 없을 경우 메인으로 리다이렉트
+        route.push({
+            path: "*",
+            element: React.createElement(reactRouter.Navigate, { to: "/", replace: true }),
+        });
         return route;
     };
     const router = React.useMemo(() => {
@@ -588,7 +558,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return reactRouter.createHashRouter([
                 {
                     path: "/",
-                    element: (React.createElement(MainLayout, { errMsg: errMsg, startpage: startpage, 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 })),
                     children: route(),
                     errorElement: React.createElement(NullPage, null),
                 },
@@ -598,7 +568,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return reactRouter.createBrowserRouter([
                 {
                     path: "/",
-                    element: (React.createElement(MainLayout, { errMsg: errMsg, startpage: startpage, 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 })),
                     children: route(),
                     errorElement: React.createElement(NullPage, null),
                 },
@@ -607,13 +577,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
     }, [hashmode, user]);
     return React.createElement(reactRouter.RouterProvider, { router: router });
 };
-const MainLayout = ({ errMsg, startpage, setting, top_banner, nav, user, top, bottom, }) => {
-    React.useCallback(() => {
-        if (startpage)
-            return setting?.loginpage ? setting.loginpage : React.createElement(LoginPage, null);
-        else
-            return null;
-    }, [setting?.loginpage, startpage]);
+const MainLayout = ({ errMsg, setting, top_banner, nav, user, top, bottom, }) => {
     const TOPBANNER = React.useCallback(() => {
         return top_banner ? top_banner : null;
     }, [top_banner]);