@farmzone/fz-template-react 0.0.1 → 1.0.1

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

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

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

@@ -1,53 +1,33 @@
-import { NavLink, useNavigate } from "react-router";
-import { cn } from "@farmzone/fz-react-ui";
-
-import { MENU_SECTIONS } from "./menu";
-
-export default function Sidebar() {
-  const navigate = useNavigate();
-
-  return (
-    <aside className="flex h-screen w-56 shrink-0 flex-col border-r border-gray-200 bg-white">
-      {/* 로고 영역 */}
-      <div className="flex h-14 items-center border-b border-gray-200 px-5">
-        <button
-          onClick={() => navigate("/")}
-          className="text-base font-bold text-gray-900 transition-colors hover:text-blue-600"
-        >
-          PROJECT
-        </button>
-      </div>
-
-      {/* 메뉴 영역 */}
-      <nav className="flex-1 overflow-y-auto px-3 py-4">
-        {MENU_SECTIONS.map((section, i) => (
-          <div key={i} className="mb-4">
-            {section.title && (
-              <p className="mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-gray-400">
-                {section.title}
-              </p>
-            )}
-            {section.items.map((item) => (
-              <NavLink
-                key={item.path}
-                to={item.path}
-                end={item.path === "/"}
-                className={({ isActive }) =>
-                  cn(
-                    "mb-0.5 flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
-                    isActive
-                      ? "bg-blue-50 text-blue-600"
-                      : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
-                  )
-                }
-              >
-                <item.icon size={18} strokeWidth={1.8} />
-                {item.label}
-              </NavLink>
-            ))}
-          </div>
-        ))}
-      </nav>
-    </aside>
-  );
-}
+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

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

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

@@ -1,27 +1,52 @@
-import { LayoutDashboard } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
+import type { MenuSection } from "@farmzone/fz-react-ui";
+import { FileText, FlaskConical, LayoutDashboard, ScrollText, Users } from "lucide-react";
 
-export interface MenuItem {
-  icon: LucideIcon;
-  label: string;
-  path: string;
+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 interface MenuSection {
-  title?: string;
-  items: MenuItem[];
-}
-
-export const MENU_SECTIONS: MenuSection[] = [
+export const MENU_SECTIONS: Array<MenuSection> = [
+  {
+    items: [
+      { icon: LayoutDashboard, label: "대시보드", path: "/" },
+      {
+        icon: FlaskConical,
+        label: "샘플 관리",
+        children: [{ label: "샘플 관리", path: "/sample" }],
+      },
+      {
+        icon: FileText,
+        label: "게시글 관리",
+        children: [{ label: "게시글 관리", path: "/post" }],
+      },
+      {
+        icon: Users,
+        label: "사용자 관리",
+        children: [{ label: "사용자 관리", path: "/user" }],
+      },
+    ],
+  },
   {
-    items: [{ icon: LayoutDashboard, label: "대시보드", path: "/" }],
+    title: "시스템",
+    items: [{ icon: ScrollText, label: "로그 관리", path: "/system/log" }],
   },
-  // 메뉴 섹션 추가 예시:
-  // {
-  //   title: "관리",
-  //   items: [
-  //     { icon: Users, label: "사용자 관리", path: "/user" },
-  //     { icon: ScrollText, label: "로그", path: "/log" },
-  //   ],
-  // },
 ];

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

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

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

@@ -1,28 +1,54 @@
-import { useMemo } from "react";
-import { createBrowserRouter, 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";
-
-export default function Router() {
-  const router = useMemo(
-    () =>
-      createBrowserRouter([
-        {
-          path: "/",
-          element: <Layout />,
-          errorElement: <ErrorPage />,
-          children: [
-            { index: true, element: <DashboardPage /> },
-            // 여기에 라우트를 추가하세요
-          ],
-        },
-        { 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 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/: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

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

package/template/src/index.tsx

@@ -1,12 +1,21 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-
-import App from "@/app/App";
-
-import "../index.css";
-
-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

@@ -0,0 +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;

package/template/src/mocks/handlers.ts

@@ -0,0 +1,43 @@
+import { HttpResponse, delay, http, passthrough } from "msw";
+
+import { getScenario, getTargetPath } from "./scenarios";
+
+const BASE_URL = `${import.meta.env.VITE_APP_API_HOST}/api/${import.meta.env.VITE_APP_API_VERSION}`;
+
+const ERROR_RESPONSES: Record<string, () => Response> = {
+  "500": () => HttpResponse.json({ message: "Internal Server Error" }, { status: 500 }),
+  "503": () => HttpResponse.json({ message: "Service Unavailable" }, { status: 503 }),
+  "408": () => HttpResponse.json({ message: "Request Timeout" }, { status: 408 }),
+  "401": () => HttpResponse.json({ message: "Unauthorized" }, { status: 401 }),
+  "403": () => HttpResponse.json({ message: "Forbidden" }, { status: 403 }),
+  "404": () => HttpResponse.json({ message: "Not Found" }, { status: 404 }),
+  "400": () => HttpResponse.json({ message: "Bad Request" }, { status: 400 }),
+  network: () => HttpResponse.error(),
+};
+
+const timeoutInterceptor = async () => {
+  await delay(3_000); // 3초 지연 후 408 반환 (타임아웃 시뮬레이션)
+  return HttpResponse.json({ message: "Request Timeout" }, { status: 408 });
+};
+
+const errorInterceptor = async ({ request }: { request: Request }) => {
+  const scenario = getScenario();
+
+  if (scenario === "none") return passthrough();
+
+  const targetPath = getTargetPath();
+  if (targetPath && !request.url.includes(targetPath)) return passthrough();
+
+  if (scenario === "timeout") return timeoutInterceptor();
+
+  const handler = ERROR_RESPONSES[scenario];
+  return handler ? handler() : passthrough();
+};
+
+export const handlers = [
+  http.get(`${BASE_URL}/*`, errorInterceptor),
+  http.post(`${BASE_URL}/*`, errorInterceptor),
+  http.put(`${BASE_URL}/*`, errorInterceptor),
+  http.patch(`${BASE_URL}/*`, errorInterceptor),
+  http.delete(`${BASE_URL}/*`, errorInterceptor),
+];

package/template/src/mocks/scenarios.ts

@@ -0,0 +1,57 @@
+// 브라우저 콘솔에서 에러 시나리오 변경:
+//   window.__setMswErrorScenario('500')          → 모든 API 서버 내부 오류
+//   window.__setMswErrorScenario('500', 'users') → /users 포함 URL만 500, 나머지 정상
+//   window.__setMswErrorScenario('503')          → 서비스 일시 불능 (1회 재시도)
+//   window.__setMswErrorScenario('408')          → 타임아웃 (1회 재시도)
+//   window.__setMswErrorScenario('401')          → 인증 오류
+//   window.__setMswErrorScenario('403')          → 권한 오류
+//   window.__setMswErrorScenario('404')          → 존재하지 않는 리소스
+//   window.__setMswErrorScenario('400')          → 잘못된 요청
+//   window.__setMswErrorScenario('timeout')      → 타임아웃 (3초 지연 후 408 반환 → 1회 재시도)
+//   window.__setMswErrorScenario('network')      → 네트워크 장애 (1회 재시도)
+//   window.__setMswErrorScenario('none')         → 모킹 해제
+
+export type MswScenario =
+  | "500"
+  | "503"
+  | "408"
+  | "401"
+  | "403"
+  | "404"
+  | "400"
+  | "network"
+  | "timeout"
+  | "none";
+
+const SCENARIO_KEY = "msw-scenario";
+const TARGET_KEY = "msw-target-path";
+
+export const getScenario = (): MswScenario => (localStorage.getItem(SCENARIO_KEY) as MswScenario) ?? "none";
+
+export const getTargetPath = (): string | null => localStorage.getItem(TARGET_KEY);
+
+export const setErrorScenario = (scenario: MswScenario, targetPath?: string) => {
+  localStorage.setItem(SCENARIO_KEY, scenario);
+
+  if (targetPath) {
+    localStorage.setItem(TARGET_KEY, targetPath);
+  } else {
+    localStorage.removeItem(TARGET_KEY);
+  }
+
+  const flags = [targetPath ? `대상: *${targetPath}*` : null].filter(Boolean).join(", ");
+
+  console.log(`[MSW] 시나리오 변경: ${scenario}${flags ? ` (${flags})` : ""} (새로고침 후 적용)`);
+};
+
+export const getScenarioGuide = () => {
+  console.log(`
+[브라우저 콘솔에서 에러 시나리오 변경 Guide]
+
+(1) API 500 에러
+window.__setMswErrorScenario('500')
+
+(2) users API만 500 에러
+window.__setMswErrorScenario('500', 'users')
+`);
+};