@farmzone/fz-template-react 1.0.6 → 1.0.8

package/template/src/app/api/queryKey.ts

@@ -1,7 +1,7 @@
-export const AUTH_QUERY_KEY = "auth";
-export const SAMPLE_QUERY_KEY = "sample";
-export const POST_QUERY_KEY = "post";
-export const COMMENT_QUERY_KEY = "comment";
-export const USER_QUERY_KEY = "user";
-export const LOG_QUERY_KEY = "log";
-export const DASHBOARD_QUERY_KEY = "dashboard";
+export const AUTH_QUERY_KEY = "auth";
+export const SAMPLE_QUERY_KEY = "sample";
+export const POST_QUERY_KEY = "post";
+export const COMMENT_QUERY_KEY = "comment";
+export const USER_QUERY_KEY = "user";
+export const LOG_QUERY_KEY = "log";
+export const DASHBOARD_QUERY_KEY = "dashboard";

package/template/src/app/api/token.ts

@@ -1,7 +1,8 @@
-import Cookies from "js-cookie";
-
-export const clearUserToken = () => {
-  Cookies.remove("AccessToken");
-  Cookies.remove("RefreshToken");
-  localStorage.removeItem("currentId");
-};
+import Cookies from "js-cookie";
+
+export const clearUserToken = () => {
+  Cookies.remove("AccessToken");
+  Cookies.remove("RefreshToken");
+  localStorage.removeItem("currentId");
+  localStorage.removeItem("multi-tab-store");
+};

package/template/src/app/layout/Layout.tsx

@@ -1,33 +1,33 @@
-import { useEffect, useRef } from "react";
-import { Outlet, useLocation } from "react-router";
-import { toast } from "@farmzone/fz-react-ui";
-
-import { useTabSwitchStore } from "./tabSwitchStore";
-import MultiTabNav from "./MultiTabNav";
-import Sidebar from "./Sidebar";
-
-export default function Layout() {
-  const { pathname } = useLocation();
-  const prevPathnameRef = useRef(pathname);
-  const { tabSwitchKey } = useTabSwitchStore();
-
-  // 페이지 전환 시 success toast 외 모두 제거
-  useEffect(() => {
-    const prev = prevPathnameRef.current;
-    prevPathnameRef.current = pathname;
-    if (prev === pathname) return;
-    toast.dismissAllExcept("success");
-  }, [pathname]);
-
-  return (
-    <div className="flex h-screen bg-gray-50">
-      <Sidebar />
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <MultiTabNav />
-        <main className="flex-1 overflow-y-auto">
-          <Outlet key={tabSwitchKey} />
-        </main>
-      </div>
-    </div>
-  );
-}
+import { useEffect, useRef } from "react";
+import { Outlet, useLocation } from "react-router";
+import { toast } from "@farmzone/fz-react-ui";
+
+import { useTabSwitchStore } from "./tabSwitchStore";
+import MultiTabNav from "./MultiTabNav";
+import Sidebar from "./Sidebar";
+
+export default function Layout() {
+  const { pathname } = useLocation();
+  const prevPathnameRef = useRef(pathname);
+  const { tabSwitchKey } = useTabSwitchStore();
+
+  // 페이지 전환 시 success toast 외 모두 제거
+  useEffect(() => {
+    const prev = prevPathnameRef.current;
+    prevPathnameRef.current = pathname;
+    if (prev === pathname) return;
+    toast.dismissAllExcept("success");
+  }, [pathname]);
+
+  return (
+    <div className="flex h-screen bg-gray-50">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <MultiTabNav />
+        <main className="flex-1 overflow-y-auto">
+          <Outlet key={tabSwitchKey} />
+        </main>
+      </div>
+    </div>
+  );
+}

package/template/src/app/layout/ListContents.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from "react";
-
-interface ListContentsProps {
-  children: ReactNode;
-}
-
-export default function ListContents({ children }: ListContentsProps) {
-  return <div className="mt-4 flex flex-col gap-3">{children}</div>;
-}
+import type { ReactNode } from "react";
+
+interface ListContentsProps {
+  children: ReactNode;
+}
+
+export default function ListContents({ children }: ListContentsProps) {
+  return <div className="mt-4 flex flex-col gap-3">{children}</div>;
+}

package/template/src/app/layout/ListHeader.tsx

@@ -1,41 +1,41 @@
-import type { ReactNode } from "react";
-import { useLocation } from "react-router";
-
-import { MENU_SECTIONS } from "./menu";
-
-function findPathText(pathname: string): string {
-  for (const section of MENU_SECTIONS) {
-    for (const item of section.items) {
-      if (item.children?.length) {
-        for (const child of item.children) {
-          if (child.path && (pathname === child.path || pathname.startsWith(`${child.path}/`))) {
-            return `${item.label} > ${child.label}`;
-          }
-        }
-      } else if (item.path && (pathname === item.path || pathname.startsWith(`${item.path}/`))) {
-        return section.title ? `${section.title} > ${item.label}` : item.label;
-      }
-    }
-  }
-  return "";
-}
-
-interface ListHeaderProps {
-  title: string;
-  rightArea?: ReactNode;
-}
-
-export default function ListHeader({ title, rightArea }: ListHeaderProps) {
-  const { pathname } = useLocation();
-  const pathText = findPathText(pathname);
-
-  return (
-    <div className="flex min-h-8 items-end justify-between">
-      <div className="flex flex-col gap-0.5">
-        {pathText && <span className="text-xs text-gray-400">{pathText}</span>}
-        <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
-      </div>
-      {rightArea && <div className="flex items-center">{rightArea}</div>}
-    </div>
-  );
-}
+import type { ReactNode } from "react";
+import { useLocation } from "react-router";
+
+import { MENU_SECTIONS } from "./menu";
+
+function findPathText(pathname: string): string {
+  for (const section of MENU_SECTIONS) {
+    for (const item of section.items) {
+      if (item.children?.length) {
+        for (const child of item.children) {
+          if (child.path && (pathname === child.path || pathname.startsWith(`${child.path}/`))) {
+            return `${item.label} > ${child.label}`;
+          }
+        }
+      } else if (item.path && (pathname === item.path || pathname.startsWith(`${item.path}/`))) {
+        return section.title ? `${section.title} > ${item.label}` : item.label;
+      }
+    }
+  }
+  return "";
+}
+
+interface ListHeaderProps {
+  title: string;
+  rightArea?: ReactNode;
+}
+
+export default function ListHeader({ title, rightArea }: ListHeaderProps) {
+  const { pathname } = useLocation();
+  const pathText = findPathText(pathname);
+
+  return (
+    <div className="flex min-h-8 items-end justify-between">
+      <div className="flex flex-col gap-0.5">
+        {pathText && <span className="text-xs text-gray-400">{pathText}</span>}
+        <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
+      </div>
+      {rightArea && <div className="flex items-center">{rightArea}</div>}
+    </div>
+  );
+}

package/template/src/app/layout/MultiTabNav.tsx

@@ -1,101 +1,106 @@
-import { useEffect, useRef } from "react";
-import { useLocation, useNavigate } from "react-router";
-import { MultiTab, useMultiTabStore } from "@farmzone/fz-react-ui";
-
-import { findTabInfoForPath } from "./menu";
-import { useTabSwitchStore } from "./tabSwitchStore";
-
-const DASHBOARD_TAB = { basePath: "/", label: "대시보드" } as const;
-
-export default function MultiTabNav() {
-  const { tabs, activeTabId, hasHydrated, openTab, addTab, switchToTab, closeTab, updateCurrentPath } =
-    useMultiTabStore();
-  const { commitTabSwitch } = useTabSwitchStore();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { pathname } = location;
-  const pendingSwitch = useRef(false);
-
-  // hydration 완료 후 최초 1회: 탭 없으면 대시보드 생성, 있으면 활성 탭 경로 복원
-  useEffect(() => {
-    if (!hasHydrated) return;
-    if (tabs.length === 0) {
-      openTab(DASHBOARD_TAB.basePath, DASHBOARD_TAB.label);
-      navigate(DASHBOARD_TAB.basePath);
-      return;
-    }
-    const activeTab = tabs.find((t) => t.id === activeTabId);
-    if (activeTab && pathname !== activeTab.currentPath) {
-      navigate(activeTab.currentPath, { replace: true });
-    }
-  // hasHydrated 변경 시 1회만 실행
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hasHydrated]);
-
-  // 탭 전환 후 URL이 실제로 바뀌면 commitTabSwitch 호출 → Outlet 강제 리마운트
-  useEffect(() => {
-    if (!pendingSwitch.current) return;
-    pendingSwitch.current = false;
-    commitTabSwitch();
-  // location.key 변경 시 실행 (실제 URL 변경 감지)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.key]);
-
-  // pathname 변경 시: 탭 소유권 확인 → auto-switch / auto-create / currentPath 동기화
-  // getState() 사용으로 stale closure 방지
-  useEffect(() => {
-    if (!hasHydrated) return;
-    const { tabs: currentTabs, activeTabId: currentActiveTabId } = useMultiTabStore.getState();
-
-    const ownerTab = currentTabs.find(
-      (t) => pathname === t.basePath || pathname.startsWith(`${t.basePath}/`),
-    );
-
-    if (ownerTab) {
-      if (ownerTab.id !== currentActiveTabId) {
-        // Sidebar 등에서 다른 탭 도메인으로 직접 navigate된 경우 — 활성 탭 전환
-        const fromTab = currentTabs.find((t) => t.id === currentActiveTabId);
-        useMultiTabStore.getState().switchToTab(ownerTab.id, fromTab?.currentPath ?? pathname);
-      }
-      if (ownerTab.currentPath !== pathname) {
-        updateCurrentPath(ownerTab.id, pathname);
-      }
-    } else {
-      // 어떤 탭에도 속하지 않는 경로 — 메뉴 정보로 탭 자동 생성
-      const info = findTabInfoForPath(pathname);
-      if (info) openTab(info.basePath, info.label, pathname);
-    }
-  }, [pathname, hasHydrated]);
-
-  if (!tabs.length) return null;
-
-  const activeTab = tabs.find((t) => t.id === activeTabId);
-
-  const handleTabClick = (tabId: string) => {
-    if (tabId === activeTabId) return;
-    pendingSwitch.current = true;
-    const targetPath = switchToTab(tabId, pathname);
-    navigate(targetPath);
-  };
-
-  const handleTabClose = (tabId: string) => {
-    const nextPath = closeTab(tabId);
-    if (nextPath != null) navigate(nextPath);
-  };
-
-  const handleTabAdd = () => {
-    if (!activeTab) return;
-    const newPath = addTab(activeTab.basePath, activeTab.label, activeTab.currentPath);
-    navigate(newPath);
-  };
-
-  return (
-    <MultiTab
-      tabs={tabs}
-      activeTabId={activeTabId}
-      onTabClick={handleTabClick}
-      onTabClose={handleTabClose}
-      onTabAdd={handleTabAdd}
-    />
-  );
-}
+import { useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router";
+import { MultiTab, useMultiTabStore } from "@farmzone/fz-react-ui";
+
+import { findTabInfoForPath } from "./menu";
+import { useTabSwitchStore } from "./tabSwitchStore";
+
+const DASHBOARD_TAB = { basePath: "/", label: "대시보드" } as const;
+
+export default function MultiTabNav() {
+  const { tabs, activeTabId, hasHydrated, openTab, addTab, switchToTab, closeTab, updateCurrentPath } =
+    useMultiTabStore();
+  const { commitTabSwitch } = useTabSwitchStore();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { pathname } = location;
+  const pendingSwitch = useRef(false);
+
+  // hydration 완료 후 최초 1회: 탭 없으면 대시보드 생성, 있으면 활성 탭 경로 복원
+  useEffect(() => {
+    if (!hasHydrated) return;
+    if (tabs.length === 0) {
+      openTab(DASHBOARD_TAB.basePath, DASHBOARD_TAB.label);
+      navigate(DASHBOARD_TAB.basePath);
+      return;
+    }
+    const activeTab = tabs.find((t) => t.id === activeTabId);
+    if (activeTab && pathname !== activeTab.currentPath) {
+      navigate(activeTab.currentPath, { replace: true });
+    }
+  // hasHydrated 변경 시 1회만 실행
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasHydrated]);
+
+  // 탭 전환 후 URL이 실제로 바뀌면 commitTabSwitch 호출 → Outlet 강제 리마운트
+  useEffect(() => {
+    if (!pendingSwitch.current) return;
+    pendingSwitch.current = false;
+    commitTabSwitch();
+  // location.key 변경 시 실행 (실제 URL 변경 감지)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.key]);
+
+  // pathname 변경 시: 탭 소유권 확인 → auto-switch / auto-create / currentPath 동기화
+  // getState() 사용으로 stale closure 방지
+  useEffect(() => {
+    if (!hasHydrated) return;
+    const { tabs: currentTabs, activeTabId: currentActiveTabId } = useMultiTabStore.getState();
+
+    // 등록된 더 구체적인 경로가 있으면 prefix startsWith 흡수를 막음
+    // (예: /sample 탭이 /sample/modal, /sample/123 을 흡수하지 않도록)
+    const registeredInfo = findTabInfoForPath(pathname);
+    const ownerTab = currentTabs.find((t) => {
+      if (pathname === t.basePath) return true;
+      if (registeredInfo && registeredInfo.basePath !== t.basePath) return false;
+      return pathname.startsWith(`${t.basePath}/`);
+    });
+
+    if (ownerTab) {
+      if (ownerTab.id !== currentActiveTabId) {
+        // Sidebar 등에서 다른 탭 도메인으로 직접 navigate된 경우 — 활성 탭 전환
+        const fromTab = currentTabs.find((t) => t.id === currentActiveTabId);
+        useMultiTabStore.getState().switchToTab(ownerTab.id, fromTab?.currentPath ?? pathname);
+      }
+      if (ownerTab.currentPath !== pathname) {
+        updateCurrentPath(ownerTab.id, pathname);
+      }
+    } else {
+      // 어떤 탭에도 속하지 않는 경로 — 메뉴 정보로 탭 자동 생성
+      const info = findTabInfoForPath(pathname);
+      if (info) openTab(info.basePath, info.label, pathname);
+    }
+  }, [pathname, hasHydrated]);
+
+  if (!tabs.length) return null;
+
+  const activeTab = tabs.find((t) => t.id === activeTabId);
+
+  const handleTabClick = (tabId: string) => {
+    if (tabId === activeTabId) return;
+    pendingSwitch.current = true;
+    const targetPath = switchToTab(tabId, pathname);
+    navigate(targetPath);
+  };
+
+  const handleTabClose = (tabId: string) => {
+    const nextPath = closeTab(tabId);
+    if (nextPath != null) navigate(nextPath);
+  };
+
+  const handleTabAdd = () => {
+    if (!activeTab) return;
+    const newPath = addTab(activeTab.basePath, activeTab.label, activeTab.currentPath);
+    navigate(newPath);
+  };
+
+  return (
+    <MultiTab
+      tabs={tabs}
+      activeTabId={activeTabId}
+      onTabClick={handleTabClick}
+      onTabClose={handleTabClose}
+      onTabAdd={handleTabAdd}
+    />
+  );
+}

package/template/src/app/layout/Sidebar.tsx

@@ -1,33 +1,33 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { Sidebar as FzSidebar } from "@farmzone/fz-react-ui";
-
-import { MENU_SECTIONS } from "./menu";
-import UserInfo from "./UserInfo";
-
-function SidebarHeader() {
-  const navigate = useNavigate();
-  return (
-    <div className="flex flex-col gap-4 my-4">
-      <div className="text-center cursor-pointer" onClick={() => navigate("/")}>
-        <div className="inline-flex items-center justify-center">
-          <img src="/favicon.ico" alt="logo" className="w-44 pr-4 object-contain" />
-        </div>
-      </div>
-      <UserInfo />
-    </div>
-  );
-}
-
-export default function Sidebar() {
-  const [isOpen, setIsOpen] = useState(true);
-  return (
-    <FzSidebar
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      menuSections={MENU_SECTIONS}
-      header={<SidebarHeader />}
-      showCollapseButton
-    />
-  );
-}
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { Sidebar as FzSidebar } from "@farmzone/fz-react-ui";
+
+import { MENU_SECTIONS } from "./menu";
+import UserInfo from "./UserInfo";
+
+function SidebarHeader() {
+  const navigate = useNavigate();
+  return (
+    <div className="flex flex-col gap-4 my-4">
+      <div className="text-center cursor-pointer" onClick={() => navigate("/")}>
+        <div className="inline-flex items-center justify-center">
+          <img src="/favicon.ico" alt="logo" className="w-44 pr-4 object-contain" />
+        </div>
+      </div>
+      <UserInfo />
+    </div>
+  );
+}
+
+export default function Sidebar() {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <FzSidebar
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      menuSections={MENU_SECTIONS}
+      header={<SidebarHeader />}
+      showCollapseButton
+    />
+  );
+}