@farmzone/fz-template-react 1.0.2 → 1.0.4

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

package/template/src/mocks/handlers.ts

@@ -1,43 +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),
-];
+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

@@ -1,57 +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')
-`);
-};
+// 브라우저 콘솔에서 에러 시나리오 변경:
+//   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')
+`);
+};