@farmzone/fz-template-react 0.0.1 → 1.0.1

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

@@ -0,0 +1,178 @@
+import axios, { type AxiosError, type AxiosInstance, type InternalAxiosRequestConfig } from "axios";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import Cookies from "js-cookie";
+import { v4 as uuidv4 } from "uuid";
+
+import { clearUserToken } from "@/app/api/token";
+import { COMMON_API_MSG_TO_KR, SERVER_ERROR_MESSAGES } from "@/shared/config/text";
+import { toast } from "@farmzone/fz-react-ui";
+
+dayjs.extend(utc);
+
+declare module "axios" {
+  interface InternalAxiosRequestConfig {
+    _retried?: boolean;
+  }
+}
+
+const RETRYABLE_STATUSES = new Set([408, 503]);
+const RETRY_DELAY_MS = 1_000;
+
+export const isRetryable = (error: AxiosError): boolean => {
+  if (!error.response) return true;
+  return RETRYABLE_STATUSES.has(error.response.status);
+};
+
+interface RefreshTokenResponse {
+  accessToken: string;
+  refreshToken: string;
+  accessTokenExpiresAt: string;
+  refreshTokenExpiresAt: string;
+}
+
+export const basePath = `${import.meta.env.VITE_APP_API_HOST}/api/${import.meta.env.VITE_APP_API_VERSION}`;
+
+export const apiInstance = axios.create({
+  baseURL: `${import.meta.env.VITE_APP_API_HOST}/api/${import.meta.env.VITE_APP_API_VERSION}`,
+});
+
+export const refreshTokenInstance = axios.create({
+  baseURL: `${import.meta.env.VITE_APP_API_HOST}/api/${import.meta.env.VITE_APP_API_VERSION}`,
+});
+
+export const apiFormDataInstance = axios.create({
+  headers: {
+    Accept: "application/json",
+    "Content-Type": "multipart/form-data",
+  },
+  transformRequest: (formData) => formData,
+  baseURL: `${import.meta.env.VITE_APP_API_HOST}/api/${import.meta.env.VITE_APP_API_VERSION}`,
+});
+
+export const apiFileInstance = axios.create({
+  baseURL: `${import.meta.env.VITE_APP_API_HOST}`,
+});
+
+// --- Request interceptors ---
+
+const attachAccessToken = (config: InternalAxiosRequestConfig) => {
+  const token = Cookies.get("AccessToken");
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+};
+
+const attachTraceId = (config: InternalAxiosRequestConfig) => {
+  config.headers["X-Trace-Id"] = uuidv4();
+  return config;
+};
+
+apiInstance.interceptors.request.use(attachAccessToken);
+apiInstance.interceptors.request.use(attachTraceId);
+apiFormDataInstance.interceptors.request.use(attachAccessToken);
+apiFormDataInstance.interceptors.request.use(attachTraceId);
+apiFileInstance.interceptors.request.use(attachAccessToken);
+apiFileInstance.interceptors.request.use(attachTraceId);
+refreshTokenInstance.interceptors.request.use(attachTraceId);
+
+refreshTokenInstance.interceptors.request.use((config) => {
+  const token = Cookies.get("RefreshToken");
+
+  if (!token) {
+    clearUserToken();
+    window.location.href = "/login";
+    return Promise.reject(new Error("No refresh token"));
+  }
+
+  config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
+
+// --- 401 token refresh ---
+
+let refreshPromise: Promise<RefreshTokenResponse> | null = null;
+
+const handleTokenRefresh = async (instance: AxiosInstance, error: AxiosError) => {
+  if (refreshPromise) {
+    await refreshPromise;
+    return instance(error.config!);
+  }
+
+  refreshPromise = refreshTokenInstance
+    .post<RefreshTokenResponse>("/auth/refresh")
+    .then((res) => {
+      const accessExpiry = dayjs.utc(res.data.accessTokenExpiresAt, "YYYY-MM-DD HH:mm:ss");
+      const refreshExpiry = dayjs.utc(res.data.refreshTokenExpiresAt, "YYYY-MM-DD HH:mm:ss");
+
+      Cookies.set("AccessToken", res.data.accessToken, { expires: accessExpiry.toDate() });
+      Cookies.set("RefreshToken", res.data.refreshToken, { expires: refreshExpiry.toDate() });
+
+      return res.data;
+    })
+    .catch((err) => {
+      console.error("ERROR:: refresh token 갱신 실패", err);
+      clearUserToken();
+      window.location.href = "/login";
+      throw err;
+    })
+    .finally(() => {
+      refreshPromise = null;
+    });
+
+  await refreshPromise;
+  return instance(error.config!);
+};
+
+// --- Response error handler ---
+
+const createErrorHandler = (instance: AxiosInstance) => async (err: AxiosError) => {
+  const code = (err.response?.data as { code?: string } | undefined)?.code;
+  const status = err.response?.status;
+  const rawMessage = (err.response?.data as { message?: string } | undefined)?.message ?? err?.message;
+  const message = (rawMessage && COMMON_API_MSG_TO_KR[rawMessage]) ?? rawMessage;
+
+  const isAuthEndpoint = err.config?.url?.includes("/auth/login");
+  if (status === 401 && code !== "INVALID_LOGIN_CREDENTIAL" && !isAuthEndpoint) {
+    return handleTokenRefresh(instance, err);
+  }
+
+  if (isRetryable(err) && !err.config?._retried) {
+    err.config!._retried = true;
+    await new Promise<void>((resolve) => setTimeout(resolve, RETRY_DELAY_MS));
+    return instance(err.config!);
+  }
+
+  if (isRetryable(err)) {
+    toast.error(
+      status === 408
+        ? (message ?? SERVER_ERROR_MESSAGES.SERVER_ERROR_NETWORK.replace("\n", " "))
+        : SERVER_ERROR_MESSAGES.SERVER_ERROR_NETWORK.replace("\n", " "),
+      { id: "server-error" },
+    );
+  } else if (status === 500) {
+    toast.error(SERVER_ERROR_MESSAGES.SERVER_ERROR_TEMP.replace("\n", " "), {
+      id: "server-error",
+    });
+  } else if (status === 400) {
+    toast.error(message ?? SERVER_ERROR_MESSAGES.SERVER_ERROR_INVALID, { id: "server-error" });
+  } else if (
+    (status === 401 && code === "INVALID_LOGIN_CREDENTIAL") ||
+    (status === 403 && code === "ACCOUNT_DISABLED")
+  ) {
+    toast.error(message ?? SERVER_ERROR_MESSAGES.SERVER_ERROR_INVALID, { id: "server-error" });
+  } else if (status === 403 || status === 404) {
+    // window.location.href = "/error";
+  } else if (status === 409 || status === 422) {
+    toast.error(message ?? SERVER_ERROR_MESSAGES.SERVER_ERROR_INVALID, { id: "server-error" });
+  }
+
+  return Promise.reject(err);
+};
+
+// --- Response interceptors ---
+
+apiInstance.interceptors.response.use((res) => res, createErrorHandler(apiInstance));
+apiFormDataInstance.interceptors.response.use((res) => res, createErrorHandler(apiFormDataInstance));
+apiFileInstance.interceptors.response.use((res) => res, createErrorHandler(apiFileInstance));

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

@@ -0,0 +1,321 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { toast } from "@farmzone/fz-react-ui";
+
+import { apiInstance, apiFormDataInstance } from "@/app/api/api";
+import {
+  COMMENT_QUERY_KEY,
+  DASHBOARD_QUERY_KEY,
+  LOG_QUERY_KEY,
+  POST_QUERY_KEY,
+  SAMPLE_QUERY_KEY,
+  USER_QUERY_KEY,
+} from "@/app/api/queryKey";
+import { COMMON_MESSAGES } from "@/shared/config/text";
+import type {
+  LoginResponse,
+  PageResponse,
+  Sample,
+  GetSamplesParams,
+  SampleForm,
+  Post,
+  GetPostsParams,
+  PostForm,
+  Comment,
+  CommentForm,
+  CommentTargetType,
+  CommentEditForm,
+  User,
+  GetUsersParams,
+  UserForm,
+  UserEditForm,
+  ActionLog,
+  GetLogsParams,
+  UserDashboardResponse,
+} from "@/types";
+
+// --- Auth ---
+
+export const usePostLogin = () => {
+  return useMutation({
+    mutationFn: (params: { userId: string; password: string }) =>
+      apiInstance.post<LoginResponse>("/auth/login", params).then((res) => res.data),
+    onSuccess: () => {
+      toast.success("로그인 성공", { duration: 1500 });
+    },
+  });
+};
+
+// --- Sample ---
+
+export const useGetSamples = (params: GetSamplesParams) => {
+  return useQuery({
+    queryKey: [SAMPLE_QUERY_KEY, "list", params],
+    queryFn: () => apiInstance.get<PageResponse<Sample>>("/samples", { params }).then((r) => r.data),
+  });
+};
+
+export const useGetSample = (id: number | null) => {
+  return useQuery({
+    queryKey: [SAMPLE_QUERY_KEY, "detail", id],
+    queryFn: () => apiInstance.get<Sample>(`/samples/${id}`).then((r) => r.data),
+    enabled: id !== null,
+  });
+};
+
+export const usePostSample = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: SampleForm) => apiInstance.post<Sample>("/samples", data).then((r) => r.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [SAMPLE_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.SAVE_SUCCESS);
+    },
+  });
+};
+
+export const usePutSample = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: number; data: SampleForm }) =>
+      apiInstance.put<Sample>(`/samples/${id}`, data).then((r) => r.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [SAMPLE_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.UPDATE_SUCCESS);
+    },
+  });
+};
+
+export const useDeleteSample = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => apiInstance.delete(`/samples/${id}`),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [SAMPLE_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.DELETE_SUCCESS);
+    },
+  });
+};
+
+export const useDeleteSamples = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (ids: Array<number>) =>
+      apiInstance.delete("/samples", {
+        params: { ids },
+        paramsSerializer: { indexes: null },
+      }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [SAMPLE_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.DELETE_SUCCESS);
+    },
+  });
+};
+
+// --- Post ---
+
+export const useGetPosts = (params: GetPostsParams) => {
+  return useQuery({
+    queryKey: [POST_QUERY_KEY, "list", params],
+    queryFn: () => apiInstance.get<PageResponse<Post>>("/posts", { params }).then((r) => r.data),
+  });
+};
+
+export const useGetPost = (id: number | null) => {
+  return useQuery({
+    queryKey: [POST_QUERY_KEY, "detail", id],
+    queryFn: () => apiInstance.get<Post>(`/posts/${id}`).then((r) => r.data),
+    enabled: id !== null,
+  });
+};
+
+export const usePostPost = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: PostForm) => apiInstance.post<Post>("/posts", data).then((r) => r.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.SAVE_SUCCESS);
+    },
+  });
+};
+
+export const usePutPost = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: number; data: PostForm }) =>
+      apiInstance.put<Post>(`/posts/${id}`, data).then((r) => r.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.UPDATE_SUCCESS);
+    },
+  });
+};
+
+export const useDeletePost = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => apiInstance.delete(`/posts/${id}`),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.DELETE_SUCCESS);
+    },
+  });
+};
+
+export const useDeletePosts = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (ids: Array<number>) =>
+      apiInstance.delete("/posts", {
+        params: { ids },
+        paramsSerializer: { indexes: null },
+      }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [POST_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.DELETE_SUCCESS);
+    },
+  });
+};
+
+// --- Comment ---
+
+export const useGetComments = (targetType: CommentTargetType, targetId: number) => {
+  return useQuery({
+    queryKey: [COMMENT_QUERY_KEY, targetType, targetId],
+    queryFn: () =>
+      apiInstance.get<Array<Comment>>("/comments", { params: { targetType, targetId } }).then((r) => r.data),
+  });
+};
+
+export const usePostComment = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: CommentForm) => apiInstance.post<Comment>("/comments", data).then((r) => r.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [COMMENT_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.SAVE_SUCCESS);
+    },
+  });
+};
+
+export const usePutComment = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ commentId, data }: { commentId: number; data: CommentEditForm }) =>
+      apiInstance.put<Comment>(`/comments/${commentId}`, data).then((r) => r.data),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [COMMENT_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.UPDATE_SUCCESS);
+    },
+  });
+};
+
+export const useDeleteComment = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (commentId: number) => apiInstance.delete(`/comments/${commentId}`),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [COMMENT_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.DELETE_SUCCESS);
+    },
+  });
+};
+
+// --- User ---
+
+export const checkUserIdAvailable = (userId: string): Promise<boolean> =>
+  apiInstance.get<boolean>("/users/check/id", { params: { userId } }).then((r) => r.data);
+
+export const useGetUsers = (params: GetUsersParams) => {
+  return useQuery({
+    queryKey: [USER_QUERY_KEY, "list", params],
+    queryFn: () => apiInstance.get<PageResponse<User>>("/users", { params }).then((r) => r.data),
+  });
+};
+
+export const useGetUser = (id: number | null) => {
+  return useQuery({
+    queryKey: [USER_QUERY_KEY, "detail", id],
+    queryFn: () => apiInstance.get<User>(`/users/${id}`).then((r) => r.data),
+    enabled: id !== null,
+  });
+};
+
+export const usePostUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ data, file }: { data: UserForm; file?: File }) => {
+      const formData = new FormData();
+      formData.append("request", JSON.stringify(data));
+      if (file) formData.append("files", file);
+      return (await apiFormDataInstance.post<User>("/users", formData)).data;
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [USER_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.SAVE_SUCCESS);
+    },
+  });
+};
+
+export const usePutUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ id, data, file }: { id: number; data: UserEditForm; file?: File }) => {
+      const formData = new FormData();
+      formData.append("request", JSON.stringify(data));
+      if (file) formData.append("files", file);
+      return (await apiFormDataInstance.put<User>(`/users/${id}`, formData)).data;
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [USER_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.UPDATE_SUCCESS);
+    },
+  });
+};
+
+export const useDeleteUser = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (id: number) => apiInstance.delete(`/users/${id}`),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [USER_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.DELETE_SUCCESS);
+    },
+  });
+};
+
+export const useDeleteUsers = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (ids: Array<number>) =>
+      apiInstance.delete("/users", {
+        params: { ids },
+        paramsSerializer: { indexes: null },
+      }),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: [USER_QUERY_KEY] });
+      toast.success(COMMON_MESSAGES.DELETE_SUCCESS);
+    },
+  });
+};
+
+// --- Action Log ---
+
+export const useGetLogs = (params: GetLogsParams) => {
+  return useQuery({
+    queryKey: [LOG_QUERY_KEY, "list", params],
+    queryFn: () => apiInstance.get<PageResponse<ActionLog>>("/action-logs", { params }).then((r) => r.data),
+  });
+};
+
+// --- Dashboard ---
+
+export const useGetUserDashboard = (period = "30d") => {
+  return useQuery({
+    queryKey: [DASHBOARD_QUERY_KEY, period],
+    queryFn: () =>
+      apiInstance
+        .get<UserDashboardResponse>("/users/dashboard", { params: { period } })
+        .then((r) => r.data),
+  });
+};

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

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

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

@@ -0,0 +1,7 @@
+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,16 +1,33 @@
-import { Outlet } from "react-router";
-import { ToastProvider } from "@farmzone/fz-react-ui";
-
-import Sidebar from "./Sidebar";
-
-export default function Layout() {
-  return (
-    <div className="flex h-screen bg-gray-50">
-      <ToastProvider />
-      <Sidebar />
-      <main className="flex-1 overflow-y-auto">
-        <Outlet />
-      </main>
-    </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

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

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

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