@farmzone/fz-template-react 1.0.5 → 1.0.7

package/template/src/app/App.tsx

@@ -1,26 +1,26 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ToastProvider } from "@farmzone/fz-react-ui";
-
-import Router from "@/app/router/Router";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 0,
-      gcTime: 5 * 60 * 1000,
-      refetchOnMount: true,
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      retry: 1,
-    },
-  },
-});
-
-export default function App() {
-  return (
-    <QueryClientProvider client={queryClient}>
-      <ToastProvider />
-      <Router />
-    </QueryClientProvider>
-  );
-}
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ToastProvider } from "@farmzone/fz-react-ui";
+
+import Router from "@/app/router/Router";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 0,
+      gcTime: 5 * 60 * 1000,
+      refetchOnMount: true,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ToastProvider />
+      <Router />
+    </QueryClientProvider>
+  );
+}

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

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