@farmzone/fz-template-react 1.0.6 → 1.0.8

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

@@ -1,94 +1,95 @@
-import { Edit, EllipsisVertical, LogOut } from "lucide-react";
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { confirmModal, Popover, PopoverContent, PopoverTrigger } from "@farmzone/fz-react-ui";
-
-import { clearUserToken } from "@/app/api/token";
-import { useUserStore } from "@/app/store";
-
-export default function UserInfo() {
-  const navigate = useNavigate();
-  const { user, clearUser } = useUserStore();
-  const [open, setOpen] = useState(false);
-
-  const roleLabel = user?.role === "ADMIN" ? "관리자" : user?.role ? "사용자" : "";
-
-  const handleLogout = () => {
-    setOpen(false);
-    confirmModal({
-      content: "로그아웃 하시겠습니까?",
-      onOk: async () => {
-        clearUserToken();
-        clearUser();
-        navigate("/login");
-      },
-      onCancel: async () => {},
-      okText: "예",
-      cancelText: "아니오",
-      className: "max-w-100",
-    });
-  };
-
-  return (
-    <div className="group flex items-center gap-1 py-3 pl-3 pr-2 transition-all duration-200 border border-[var(--color-basic-gray)]/50 rounded-sm">
-      <div className="flex flex-row items-center min-w-0 flex-1">
-        <span className="w-[60px] text-xs text-gray-400 truncate mt-0.5">
-          {roleLabel && (
-            <span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 mr-1 rounded-full bg-[var(--color-main)]/10 text-[var(--color-main)] leading-none">
-              {roleLabel}
-            </span>
-          )}
-        </span>
-        <p className="w-full text-sm font-normal text-gray-900 leading-4 tracking-tight truncate">
-          {user?.name || ""}
-        </p>
-      </div>
-
-      <Popover open={open} onOpenChange={setOpen}>
-        <PopoverTrigger>
-          <EllipsisVertical className="shrink-0 w-4 h-4 text-gray-300 group-hover:text-gray-500 transition-colors duration-200 cursor-pointer" />
-        </PopoverTrigger>
-        <PopoverContent position="right" sideOffset={15} align="start" className="w-56 p-0">
-          <div className="flex flex-col">
-            {/* 사용자 ID */}
-            <div className="flex items-center px-4 py-3 border-b border-gray-100">
-              <span className="text-sm text-gray-500 font-normal">{user?.userId || ""}</span>
-            </div>
-
-            {/* 버튼 영역 */}
-            <div className="flex flex-col gap-2 p-3">
-              <div className="flex gap-2">
-                <button
-                  type="button"
-                  onClick={handleLogout}
-                  className="w-full flex items-center justify-center gap-1 py-2 px-4 text-xs font-medium text-gray-700 hover:text-red-900 hover:bg-red-50 transition-all duration-150 bg-gray-50 border border-gray-200 rounded-sm cursor-pointer"
-                >
-                  <LogOut size={12} />
-                  <span>로그아웃</span>
-                </button>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setOpen(false);
-                    navigate("/user");
-                  }}
-                  className="w-full flex items-center justify-center gap-1 py-2 px-4 text-xs font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-all duration-150 bg-gray-50 border border-gray-200 rounded-sm cursor-pointer"
-                >
-                  <Edit size={12} />
-                  <span>정보수정</span>
-                </button>
-              </div>
-              <button
-                type="button"
-                onClick={() => setOpen(false)}
-                className="w-full flex items-center justify-center gap-1 py-2 px-4 text-xs font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-all duration-150 bg-gray-50 border border-gray-200 rounded-sm cursor-pointer"
-              >
-                <span>닫기</span>
-              </button>
-            </div>
-          </div>
-        </PopoverContent>
-      </Popover>
-    </div>
-  );
-}
+import { Edit, EllipsisVertical, LogOut } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { confirmModal, Popover, PopoverContent, PopoverTrigger, useMultiTabStore } from "@farmzone/fz-react-ui";
+
+import { clearUserToken } from "@/app/api/token";
+import { useUserStore } from "@/app/store";
+
+export default function UserInfo() {
+  const navigate = useNavigate();
+  const { user, clearUser } = useUserStore();
+  const [open, setOpen] = useState(false);
+
+  const roleLabel = user?.role === "ADMIN" ? "관리자" : user?.role ? "사용자" : "";
+
+  const handleLogout = () => {
+    setOpen(false);
+    confirmModal({
+      content: "로그아웃 하시겠습니까?",
+      onOk: async () => {
+        clearUserToken();
+        clearUser();
+        useMultiTabStore.setState({ tabs: [], activeTabId: null });
+        navigate("/login");
+      },
+      onCancel: async () => {},
+      okText: "예",
+      cancelText: "아니오",
+      className: "max-w-100",
+    });
+  };
+
+  return (
+    <div className="group flex items-center gap-1 py-3 pl-3 pr-2 transition-all duration-200 border border-[var(--color-basic-gray)]/50 rounded-sm">
+      <div className="flex flex-row items-center min-w-0 flex-1">
+        <span className="w-[60px] text-xs text-gray-400 truncate mt-0.5">
+          {roleLabel && (
+            <span className="shrink-0 text-[10px] font-medium px-1.5 py-0.5 mr-1 rounded-full bg-[var(--color-main)]/10 text-[var(--color-main)] leading-none">
+              {roleLabel}
+            </span>
+          )}
+        </span>
+        <p className="w-full text-sm font-normal text-gray-900 leading-4 tracking-tight truncate">
+          {user?.name || ""}
+        </p>
+      </div>
+
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger>
+          <EllipsisVertical className="shrink-0 w-4 h-4 text-gray-300 group-hover:text-gray-500 transition-colors duration-200 cursor-pointer" />
+        </PopoverTrigger>
+        <PopoverContent position="right" sideOffset={15} align="start" className="w-56 p-0">
+          <div className="flex flex-col">
+            {/* 사용자 ID */}
+            <div className="flex items-center px-4 py-3 border-b border-gray-100">
+              <span className="text-sm text-gray-500 font-normal">{user?.userId || ""}</span>
+            </div>
+
+            {/* 버튼 영역 */}
+            <div className="flex flex-col gap-2 p-3">
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  onClick={handleLogout}
+                  className="w-full flex items-center justify-center gap-1 py-2 px-4 text-xs font-medium text-gray-700 hover:text-red-900 hover:bg-red-50 transition-all duration-150 bg-gray-50 border border-gray-200 rounded-sm cursor-pointer"
+                >
+                  <LogOut size={12} />
+                  <span>로그아웃</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setOpen(false);
+                    navigate("/user");
+                  }}
+                  className="w-full flex items-center justify-center gap-1 py-2 px-4 text-xs font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-all duration-150 bg-gray-50 border border-gray-200 rounded-sm cursor-pointer"
+                >
+                  <Edit size={12} />
+                  <span>정보수정</span>
+                </button>
+              </div>
+              <button
+                type="button"
+                onClick={() => setOpen(false)}
+                className="w-full flex items-center justify-center gap-1 py-2 px-4 text-xs font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 transition-all duration-150 bg-gray-50 border border-gray-200 rounded-sm cursor-pointer"
+              >
+                <span>닫기</span>
+              </button>
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/template/src/app/layout/menu.ts

@@ -1,55 +1,79 @@
-import type { MenuSection } from "@farmzone/fz-react-ui";
-import { FileText, FlaskConical, LayoutDashboard, ScrollText, Users } from "lucide-react";
-
-export function findTabInfoForPath(pathname: string): { basePath: string; label: string } | null {
-  for (const section of MENU_SECTIONS) {
-    for (const item of section.items) {
-      if (item.children?.length) {
-        for (const child of item.children) {
-          if (child.children?.length) {
-            for (const grandchild of child.children) {
-              if (pathname === grandchild.path || pathname.startsWith(`${grandchild.path}/`)) {
-                return { basePath: grandchild.path, label: grandchild.label };
-              }
-            }
-          } else if (child.path && (pathname === child.path || pathname.startsWith(`${child.path}/`))) {
-            return { basePath: child.path, label: child.label };
-          }
-        }
-      } else if (item.path && (pathname === item.path || pathname.startsWith(`${item.path}/`))) {
-        return { basePath: item.path, label: item.label };
-      }
-    }
-  }
-  return null;
-}
-
-export const MENU_SECTIONS: Array<MenuSection> = [
-  {
-    items: [
-      { icon: LayoutDashboard, label: "대시보드", path: "/" },
-      {
-        icon: FlaskConical,
-        label: "샘플 관리",
-        children: [
-          { label: "샘플 관리", path: "/sample" },
-          { label: "샘플 모달", path: "/sample/modal" },
-        ],
-      },
-      {
-        icon: FileText,
-        label: "게시글 관리",
-        children: [{ label: "게시글 관리", path: "/post" }],
-      },
-      {
-        icon: Users,
-        label: "사용자 관리",
-        children: [{ label: "사용자 관리", path: "/user" }],
-      },
-    ],
-  },
-  {
-    title: "시스템",
-    items: [{ icon: ScrollText, label: "로그 관리", path: "/system/log" }],
-  },
-];
+import type { MenuSection } from "@farmzone/fz-react-ui";
+import { FileText, FlaskConical, LayoutDashboard, ScrollText, Users } from "lucide-react";
+
+const DETAIL_ROUTES: Array<{ pattern: RegExp; label: string }> = [
+  { pattern: /^\/sample\/\d+$/, label: "샘플 상세" },
+  { pattern: /^\/post\/\d+$/, label: "게시글 상세" },
+];
+
+export function getDetailTabInfo(pathname: string): { basePath: string; label: string } | null {
+  for (const { pattern, label } of DETAIL_ROUTES) {
+    if (pattern.test(pathname)) {
+      return { basePath: pathname, label };
+    }
+  }
+  return null;
+}
+
+export function findTabInfoForPath(pathname: string): { basePath: string; label: string } | null {
+  const detailInfo = getDetailTabInfo(pathname);
+  if (detailInfo) return detailInfo;
+
+  for (const section of MENU_SECTIONS) {
+    for (const item of section.items) {
+      if (item.children?.length) {
+        // 구체적인 경로(긴 경로)를 먼저 검사해서 /sample이 /sample/modal을 흡수하지 않도록
+        const sortedChildren = [...item.children].sort(
+          (a, b) => (b.path?.length ?? 0) - (a.path?.length ?? 0),
+        );
+        for (const child of sortedChildren) {
+          if (child.children?.length) {
+            const sortedGrandchildren = [...child.children].sort(
+              (a, b) => (b.path?.length ?? 0) - (a.path?.length ?? 0),
+            );
+            for (const grandchild of sortedGrandchildren) {
+              if (pathname === grandchild.path || pathname.startsWith(`${grandchild.path}/`)) {
+                return { basePath: grandchild.path, label: grandchild.label };
+              }
+            }
+          } else if (child.path && (pathname === child.path || pathname.startsWith(`${child.path}/`))) {
+            return { basePath: child.path, label: child.label };
+          }
+        }
+      } else if (item.path && (pathname === item.path || pathname.startsWith(`${item.path}/`))) {
+        return { basePath: item.path, label: item.label };
+      }
+    }
+  }
+  return null;
+}
+
+export const MENU_SECTIONS: Array<MenuSection> = [
+  {
+    items: [
+      { icon: LayoutDashboard, label: "대시보드", path: "/" },
+      {
+        icon: FlaskConical,
+        label: "샘플 관리",
+        children: [
+          { label: "샘플 관리", path: "/sample" },
+          { label: "샘플 모달", path: "/sample/modal" },
+        ],
+      },
+      {
+        icon: FileText,
+        label: "게시글 관리",
+        children: [{ label: "게시글 관리", path: "/post" }],
+      },
+      {
+        icon: Users,
+        label: "사용자 관리",
+        children: [{ label: "사용자 관리", path: "/user" }],
+      },
+    ],
+  },
+  {
+    title: "시스템",
+    items: [{ icon: ScrollText, label: "로그 관리", path: "/system/log" }],
+  },
+];

package/template/src/app/layout/tabSwitchStore.ts

@@ -1,11 +1,11 @@
-import { create } from "zustand";
-
-interface TabSwitchState {
-  tabSwitchKey: number;
-  commitTabSwitch: () => void;
-}
-
-export const useTabSwitchStore = create<TabSwitchState>((set) => ({
-  tabSwitchKey: 0,
-  commitTabSwitch: () => set((s) => ({ tabSwitchKey: s.tabSwitchKey + 1 })),
-}));
+import { create } from "zustand";
+
+interface TabSwitchState {
+  tabSwitchKey: number;
+  commitTabSwitch: () => void;
+}
+
+export const useTabSwitchStore = create<TabSwitchState>((set) => ({
+  tabSwitchKey: 0,
+  commitTabSwitch: () => set((s) => ({ tabSwitchKey: s.tabSwitchKey + 1 })),
+}));

package/template/src/app/router/Router.tsx

@@ -1,56 +1,56 @@
-import Cookies from "js-cookie";
-import { useMemo } from "react";
-import { createBrowserRouter, redirect, RouterProvider } from "react-router";
-
-import Layout from "@/app/layout/Layout";
-import DashboardPage from "@/pages/dashboard";
-import ErrorPage from "@/pages/error/Error";
-import NotFoundPage from "@/pages/error/NotFound";
-import LoginPage from "@/pages/login";
-import SamplePage from "@/pages/sample";
-import SampleDetailPage from "@/pages/sample/detail";
-import SampleModalPage from "@/pages/sample/modal";
-import PostPage from "@/pages/post";
-import PostDetailPage from "@/pages/post/detail";
-import UserPage from "@/pages/user";
-import LogPage from "@/pages/system/log";
-
-const authLoader = () => {
-  const accessToken = Cookies.get("AccessToken");
-  if (!accessToken) {
-    return redirect("/login");
-  }
-  return null;
-};
-
-export default function Router() {
-  const router = useMemo(
-    () =>
-      createBrowserRouter([
-        {
-          path: "/login",
-          element: <LoginPage />,
-        },
-        {
-          path: "/",
-          element: <Layout />,
-          errorElement: <ErrorPage />,
-          loader: authLoader,
-          children: [
-            { index: true, element: <DashboardPage /> },
-            { path: "sample", element: <SamplePage /> },
-            { path: "sample/modal", element: <SampleModalPage /> },
-            { path: "sample/:id", element: <SampleDetailPage /> },
-            { path: "post", element: <PostPage /> },
-            { path: "post/:id", element: <PostDetailPage /> },
-            { path: "user", element: <UserPage /> },
-            { path: "system/log", element: <LogPage /> },
-          ],
-        },
-        { path: "*", element: <NotFoundPage /> },
-      ]),
-    [],
-  );
-
-  return <RouterProvider router={router} />;
-}
+import Cookies from "js-cookie";
+import { useMemo } from "react";
+import { createBrowserRouter, redirect, RouterProvider } from "react-router";
+
+import Layout from "@/app/layout/Layout";
+import DashboardPage from "@/pages/dashboard";
+import ErrorPage from "@/pages/error/Error";
+import NotFoundPage from "@/pages/error/NotFound";
+import LoginPage from "@/pages/login";
+import SamplePage from "@/pages/sample";
+import SampleDetailPage from "@/pages/sample/detail";
+import SampleModalPage from "@/pages/sample/modal";
+import PostPage from "@/pages/post";
+import PostDetailPage from "@/pages/post/detail";
+import UserPage from "@/pages/user";
+import LogPage from "@/pages/system/log";
+
+const authLoader = () => {
+  const accessToken = Cookies.get("AccessToken");
+  if (!accessToken) {
+    return redirect("/login");
+  }
+  return null;
+};
+
+export default function Router() {
+  const router = useMemo(
+    () =>
+      createBrowserRouter([
+        {
+          path: "/login",
+          element: <LoginPage />,
+        },
+        {
+          path: "/",
+          element: <Layout />,
+          errorElement: <ErrorPage />,
+          loader: authLoader,
+          children: [
+            { index: true, element: <DashboardPage /> },
+            { path: "sample", element: <SamplePage /> },
+            { path: "sample/modal", element: <SampleModalPage /> },
+            { path: "sample/:id", element: <SampleDetailPage /> },
+            { path: "post", element: <PostPage /> },
+            { path: "post/:id", element: <PostDetailPage /> },
+            { path: "user", element: <UserPage /> },
+            { path: "system/log", element: <LogPage /> },
+          ],
+        },
+        { path: "*", element: <NotFoundPage /> },
+      ]),
+    [],
+  );
+
+  return <RouterProvider router={router} />;
+}

package/template/src/app/store/index.ts

@@ -1,26 +1,26 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
-export interface User {
-  id: string;
-  userId: string;
-  name: string;
-  role: string;
-}
-
-interface UserStore {
-  user: User | null;
-  setUser: (user: User) => void;
-  clearUser: () => void;
-}
-
-export const useUserStore = create<UserStore>()(
-  persist(
-    (set) => ({
-      user: null,
-      setUser: (user) => set({ user }),
-      clearUser: () => set({ user: null }),
-    }),
-    { name: "user-store" },
-  ),
-);
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+export interface User {
+  id: string;
+  userId: string;
+  name: string;
+  role: string;
+}
+
+interface UserStore {
+  user: User | null;
+  setUser: (user: User) => void;
+  clearUser: () => void;
+}
+
+export const useUserStore = create<UserStore>()(
+  persist(
+    (set) => ({
+      user: null,
+      setUser: (user) => set({ user }),
+      clearUser: () => set({ user: null }),
+    }),
+    { name: "user-store" },
+  ),
+);

package/template/src/index.tsx

@@ -1,21 +1,21 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-import App from "@/app/App";
-
-import "../index.css";
-
-const prepare = async () => {
-  if (import.meta.env.DEV) {
-    const { worker } = await import("./mocks/browser");
-    await worker.start({ onUnhandledRequest: "bypass" });
-  }
-};
-
-prepare().then(() => {
-  createRoot(document.getElementById("root")!).render(
-    <StrictMode>
-      <App />
-    </StrictMode>,
-  );
-});
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "@/app/App";
+
+import "../index.css";
+
+const prepare = async () => {
+  if (import.meta.env.DEV) {
+    const { worker } = await import("./mocks/browser");
+    await worker.start({ onUnhandledRequest: "bypass" });
+  }
+};
+
+prepare().then(() => {
+  createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  );
+});

package/template/src/mocks/browser.ts

@@ -1,17 +1,17 @@
-import { setupWorker } from "msw/browser";
-
-import { handlers } from "./handlers";
-import { setErrorScenario, type MswScenario, getScenarioGuide } from "./scenarios";
-
-export const worker = setupWorker(...handlers);
-
-// 콘솔에서 시나리오 가이드 출력: window.__getMswGuide()
-declare global {
-  interface Window {
-    __setMswErrorScenario: (scenario: MswScenario, targetPath?: string) => void;
-    __getMswGuide: (scenario: MswScenario) => void;
-  }
-}
-
-window.__setMswErrorScenario = setErrorScenario;
-window.__getMswGuide = getScenarioGuide;
+import { setupWorker } from "msw/browser";
+
+import { handlers } from "./handlers";
+import { setErrorScenario, type MswScenario, getScenarioGuide } from "./scenarios";
+
+export const worker = setupWorker(...handlers);
+
+// 콘솔에서 시나리오 가이드 출력: window.__getMswGuide()
+declare global {
+  interface Window {
+    __setMswErrorScenario: (scenario: MswScenario, targetPath?: string) => void;
+    __getMswGuide: (scenario: MswScenario) => void;
+  }
+}
+
+window.__setMswErrorScenario = setErrorScenario;
+window.__getMswGuide = getScenarioGuide;