@farmzone/fz-template-react 1.0.3 → 1.0.5

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

@@ -1,7 +1,7 @@
-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");
+};

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,101 @@
-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();
+
+    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}
+    />
+  );
+}

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
+    />
+  );
+}

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

@@ -1,94 +1,94 @@
-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 } 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>
+  );
+}