@thefreshop/tb 1.0.15 → 1.0.17

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

@@ -1,25 +1,22 @@
 import { userType } from "./user.types";
-import { navType, tabType } from "./tbframe.types";
+import { tabType } from "./tbframe.types";
 export type ProviderType = {
     topkey: string;
     setTopkey: (value: string) => void;
-    tabs: tabType[];
-    currentTab?: tabType;
-    setCurrentTab: (value: tabType) => void;
-    addTabs: (value: tabType) => void;
-    removeTabs: (value: tabType) => void;
+    tabList: tabType[];
+    setTabList: (tabList: tabType[]) => void;
+    tabKeys: string[];
+    currentTabKey?: string;
+    setCurrentTabKey: (key: string) => void;
+    addTabKey: (key: string) => void;
+    removeTabKey: (key: string) => void;
+    startTabKey?: string;
+    setStartTabKey: (key: string) => void;
     loginUser: (value: userType | null) => void;
     logout: (force?: boolean) => void;
     user?: userType;
-    startpage?: React.ReactNode;
-    setStartpage: (value: React.ReactNode) => void;
     SetWarning: (value: ErrMsgType) => void;
     errMsg?: ErrMsgType;
-    setGlobalpages: (value: tabType[]) => void;
-    globalpages?: tabType[];
-    addGlobalTabs: (key: string) => void;
-    setMenupages: (value: navType) => void;
-    goTabs: (key: string) => void;
 };
 export type ErrMsgType = {
     err?: string;

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

@@ -2,10 +2,9 @@ export interface tbframeType {
     islogin?: boolean;
     isgroup?: boolean;
     isgroupauth?: boolean;
-    startpage?: React.ReactNode;
+    startTabKey?: string;
     loginpage?: React.ReactNode;
     logoutComponent?: React.ReactNode;
-    globalpages?: tabType[];
 }
 export declare const baseAdminDat: TbFrameType;
 export type TbFrameType = {
@@ -50,6 +49,7 @@ export type menuType = {
 };
 export type navType = {
     menuSet: menuSetType[];
+    globalTabs?: tabType[];
     openIcon?: React.ReactElement | JSX.Element;
     closeIcon?: React.ReactElement | JSX.Element;
 };

package/dist/esm/index.js

@@ -22,18 +22,17 @@ const tbContext = createContext(undefined);
 const SESSION_STORAGE_KEY = "tbFrameState";
 const TbProvider = ({ children }) => {
     const [topkey, setTopkey] = useState("");
-    const [currentTab, setCurrentTab] = useState();
+    const [tabList, setTabList] = useState([]);
+    const [currentTabKey, setCurrentTabKey] = useState();
+    const [startTabKey, setStartTabKey] = useState();
     const [user, setloginUser] = useState();
-    // const [tabs, setTabs] = useState<tabType[]>([]);
-    const [startpage, setStartpage] = useState();
     const [errMsg, setErrMsg] = useState();
-    const [globalpages, setGlobalpages] = useState();
-    const [menupages, setMenupages] = useState();
     // 1. 초기 상태를 sessionStorage 불러오도록 수정
-    const [tabs, setTabs] = useState(() => {
+    const [tabKeys, setTabKeys] = 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);
@@ -42,50 +41,33 @@ const TbProvider = ({ children }) => {
     });
     // 2. 상태가 변경될 때마다 sessionStorage 저장하는 useEffect 추가
     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);
             }
@@ -97,63 +79,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__default.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 = () => {
@@ -203,7 +171,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 = useNavigate();
     const userTop = () => {
         let topmenutable = [];
         if (user?.user_group?.group_key === "master" || setting.islogin === false) {
@@ -223,12 +192,11 @@ const Top = ({ setting, top: { title = topbase.title, titleimage, topMenuSetting
     };
     return (React__default.createElement("div", { className: styles$8.topframe },
         React__default.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__default.createElement("img", { src: titleimage, className: styles$8.toplogo, alt: "logo", style: imgstyle }) : null,
@@ -276,7 +244,7 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
     const { title, key, page } = tab;
     const [hover, setHover] = useState(false);
     const [subOpen, setSubOpen] = useState(false);
-    const { addTabs, currentTab, user } = useTbState();
+    const { addTabKey, currentTabKey, user } = useTbState();
     const navigate = useNavigate();
     useEffect(() => {
         if (defalultOpen) {
@@ -303,18 +271,14 @@ const Menu = ({ menu_setting: { tab, icon, children, hasPage, defalultOpen }, op
         return usersubmenutable;
     };
     return (React__default.createElement("div", null,
-        React__default.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__default.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)
@@ -327,19 +291,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] = useState(false);
-    const { addTabs, currentTab } = useTbState();
+    const { addTabKey, currentTabKey } = useTbState();
     const navigate = useNavigate();
-    return (React__default.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__default.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)
         } },
@@ -352,9 +312,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__default.createElement("div", { className: styles$7.bottom_item },
-        React__default.createElement("div", null, currentTab?.title),
+        React__default.createElement("div", null, tab?.title),
         React__default.createElement("div", { style: { display: "flex", gap: 16 } },
             React__default.createElement("div", null,
                 user?.user_name ?? "이름없음",
@@ -370,53 +331,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 = useNavigate();
     const location = useLocation();
     const findTabs = 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 추가
     useEffect(() => {
         const pathKey = location.pathname.substring(1); // 맨 앞의 '/' 제거
         findTabs(pathKey);
     }, []);
-    return (React__default.createElement("div", { className: styles$6.tabFrame }, tabs?.map((m) => {
-        return (React__default.createElement("div", { key: m.key, className: `${styles$6.tab_item} ${currentTab?.key === m.key ? styles$6.tab_select : styles$6.tab_normal}` },
+    return (React__default.createElement("div", { className: styles$6.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: () => {
-                    setCurrentTab(m);
-                    navigate("/" + m.key);
+                    setCurrentTabKey(key);
+                    navigate("/" + key);
                     // console.log('setCurrentTab', m)
-                } }, m.title),
-            !m.noremove && (React__default.createElement("div", { className: styles$6.tab_item_button },
-                React__default.createElement("button", { className: styles$6.tab_x_button, onClick: () => removeTabs(m) }, "x")))));
+                } }, 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")))));
     })));
 };
 
@@ -520,25 +472,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();
     useEffect(() => {
-        if (setting.startpage) {
-            setStartpage(setting.startpage);
-        }
-    }, [setting.startpage]);
-    useEffect(() => {
-        if (setting.globalpages) {
-            setGlobalpages(setting.globalpages);
-        }
-    }, [setting.globalpages]);
-    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]);
     useEffect(() => {
         if (!errMsg?.isPopup) ;
     }, [errMsg]);
+    useEffect(() => {
+        if (!startTabKey && setting?.startTabKey) {
+            setStartTabKey(setting?.startTabKey);
+        }
+    }, [setting.startTabKey]);
     const route = () => {
         let route = [];
         if (setting?.islogin) {
@@ -547,6 +506,12 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
                 element: setting?.loginpage ? setting.loginpage : React__default.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({
@@ -561,6 +526,11 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
                 });
             });
         });
+        // 일치하는 라우트가 없을 경우 메인으로 리다이렉트
+        route.push({
+            path: "*",
+            element: React__default.createElement(Navigate, { to: "/", replace: true }),
+        });
         return route;
     };
     const router = useMemo(() => {
@@ -568,7 +538,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return createHashRouter([
                 {
                     path: "/",
-                    element: (React__default.createElement(MainLayout, { errMsg: errMsg, startpage: startpage, 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 })),
                     children: route(),
                     errorElement: React__default.createElement(NullPage, null),
                 },
@@ -578,7 +548,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
             return createBrowserRouter([
                 {
                     path: "/",
-                    element: (React__default.createElement(MainLayout, { errMsg: errMsg, startpage: startpage, 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 })),
                     children: route(),
                     errorElement: React__default.createElement(NullPage, null),
                 },
@@ -587,13 +557,7 @@ const TbFrame = ({ setting, top, bottom, nav, top_banner, hashmode = false, }) =
     }, [hashmode, user]);
     return React__default.createElement(RouterProvider, { router: router });
 };
-const MainLayout = ({ errMsg, startpage, setting, top_banner, nav, user, top, bottom, }) => {
-    useCallback(() => {
-        if (startpage)
-            return setting?.loginpage ? setting.loginpage : React__default.createElement(LoginPage, null);
-        else
-            return null;
-    }, [setting?.loginpage, startpage]);
+const MainLayout = ({ errMsg, setting, top_banner, nav, user, top, bottom, }) => {
     const TOPBANNER = useCallback(() => {
         return top_banner ? top_banner : null;
     }, [top_banner]);