sh-ui-cli 0.31.1 → 0.32.1

package/templates/nextjs-app/src/shared/api/serverFetch.ts

@@ -0,0 +1,59 @@
+import { cookies } from 'next/headers';
+
+import type { ApiResponse } from './apiTypes';
+import { ApiError } from './error';
+import { captureApiError, logApiError } from './observability';
+
+const API_URL = process.env.API_URL ?? 'http://localhost:8080/api';
+
+const ACCESS_TOKEN_COOKIE = 'accessToken';
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+export async function serverFetch<T>(
+  path: string,
+  init: RequestInit = {},
+): Promise<T> {
+  const jar = await cookies();
+  const accessToken = jar.get(ACCESS_TOKEN_COOKIE)?.value;
+  const locale = jar.get(LOCALE_COOKIE)?.value;
+
+  const url = `${API_URL}${path.startsWith('/') ? path : `/${path}`}`;
+  const method = (init.method ?? 'GET').toUpperCase();
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+    ...(locale && { 'Accept-Language': locale }),
+    ...(init.headers as Record<string, string> | undefined),
+  };
+
+  const res = await fetch(url, {
+    ...init,
+    headers,
+    cache: init.cache ?? 'no-store',
+  });
+
+  const body = (await res.json()) as ApiResponse<T>;
+
+  if (!res.ok || body.result === 'ERROR') {
+    logApiError('SERVER_FETCH', {
+      url,
+      method,
+      status: res.status,
+      requestBody: typeof init.body === 'string' ? init.body : undefined,
+      responseBody: body,
+    });
+
+    captureApiError({
+      url,
+      apiPath: path,
+      method,
+      status: res.status,
+      responseBody: body,
+    });
+
+    throw new ApiError(res.status, body.error?.code ?? '', body.error);
+  }
+
+  return body.data;
+}

package/templates/nextjs-app/src/shared/hooks/useAppMutation.ts

@@ -0,0 +1,52 @@
+import {
+  useMutation,
+  type UseMutationOptions,
+  type DefaultError,
+} from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import { ApiError } from '../api/error';
+
+type AppMutationOptions<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+> = UseMutationOptions<TData, TError, TVariables, TContext> & {
+  errorMessage?: string;
+  showErrorToast?: boolean;
+};
+
+/**
+ * useMutation 래퍼 — 에러 발생 시 ApiError.message 를 toast 로 띄운다.
+ * showErrorToast: false 로 끌 수 있고, errorMessage 로 fallback 메시지 지정.
+ */
+export const useAppMutation = <
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: AppMutationOptions<TData, TError, TVariables, TContext>,
+) => {
+  const { errorMessage, showErrorToast = true, onError, ...rest } = options;
+
+  return useMutation({
+    ...rest,
+    onError: (...args) => {
+      onError?.(...args);
+
+      if (!showErrorToast) return;
+
+      const [error] = args;
+      const message =
+        error instanceof ApiError
+          ? (error.data?.message ?? errorMessage)
+          : errorMessage;
+
+      if (message) {
+        toast.error(message);
+      }
+    },
+  });
+};

package/templates/nextjs-standalone/app/api/proxy/[...path]/route.ts

@@ -1,6 +1,11 @@
 import { cookies } from 'next/headers';
 import { NextResponse, type NextRequest } from 'next/server';
 
+import {
+  captureApiError,
+  logApiError,
+} from '@/src/shared/api/observability';
+
 const API_URL = process.env.API_URL ?? 'http://localhost:8080/api';
 const ACCESS_TOKEN_COOKIE = 'accessToken';
 const LOCALE_COOKIE = 'NEXT_LOCALE';
@@ -11,7 +16,8 @@ const proxyRequest = async (
   method: string,
 ) => {
   const { path } = await ctx.params;
-  const url = new URL(`${API_URL}/${path.join('/')}`);
+  const apiPath = path.join('/');
+  const url = new URL(`${API_URL}/${apiPath}`);
 
   request.nextUrl.searchParams.forEach((value, key) => {
     url.searchParams.set(key, value);
@@ -39,10 +45,9 @@ const proxyRequest = async (
     }
   }
 
+  let response: Response;
   try {
-    const response = await fetch(url.toString(), { method, headers, body });
-    const data = await response.json();
-    return NextResponse.json(data, { status: response.status });
+    response = await fetch(url.toString(), { method, headers, body });
   } catch (error) {
     console.error(`[PROXY] ${method} ${url.toString()} —`, error);
     return NextResponse.json(
@@ -57,6 +62,28 @@ const proxyRequest = async (
       { status: 502 },
     );
   }
+
+  const data = await response.json();
+
+  if (!response.ok) {
+    logApiError('PROXY', {
+      url: url.toString(),
+      method,
+      status: response.status,
+      requestBody: typeof body === 'string' ? body : undefined,
+      responseBody: data,
+    });
+
+    captureApiError({
+      url: url.toString(),
+      apiPath,
+      method,
+      status: response.status,
+      responseBody: data,
+    });
+  }
+
+  return NextResponse.json(data, { status: response.status });
 };
 
 export const GET = (

package/templates/nextjs-standalone/package.json

@@ -17,7 +17,6 @@
   "dependencies": {
     "@base-ui-components/react": "latest",
     "@tanstack/react-query": "^5.90.21",
-    "axios": "^1.13.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",

package/templates/nextjs-standalone/src/app/providers/tanstack/QueryClientProvider.tsx

@@ -1,26 +1,13 @@
 'use client';
 
-import {
-  QueryClient,
-  QueryClientProvider as TanstackQueryClientProvider,
-} from '@tanstack/react-query';
-import { useState, type ReactNode } from 'react';
+import { QueryClientProvider as TanstackQueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
 
-export function QueryClientProvider({ children }: { children: ReactNode }) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 60 * 1000,
-            retry: 1,
-          },
-        },
-      }),
-  );
+import { getBrowserQueryClient } from '@/src/shared/api/queryClient';
 
+export function QueryClientProvider({ children }: { children: ReactNode }) {
   return (
-    <TanstackQueryClientProvider client={queryClient}>
+    <TanstackQueryClientProvider client={getBrowserQueryClient()}>
       {children}
     </TanstackQueryClientProvider>
   );

package/templates/nextjs-standalone/src/shared/api/clientFetch.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import type { ApiResponse } from './apiTypes';
+import { ApiError } from './error';
+
+const PROXY_BASE = '/api/proxy';
+
+export async function clientFetch<T>(
+  path: string,
+  init: RequestInit = {},
+): Promise<T> {
+  const url = `${PROXY_BASE}${path.startsWith('/') ? path : `/${path}`}`;
+
+  const res = await fetch(url, {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(init.headers as Record<string, string> | undefined),
+    },
+    credentials: 'include',
+  });
+
+  const body = (await res.json()) as ApiResponse<T>;
+
+  if (res.status === 401) {
+    if (
+      typeof window !== 'undefined' &&
+      !window.location.pathname.startsWith('/sign-in')
+    ) {
+      window.location.href = '/sign-in';
+    }
+    throw new ApiError(401, body.error?.code ?? 'UNAUTHORIZED', body.error);
+  }
+
+  if (!res.ok || body.result === 'ERROR') {
+    throw new ApiError(res.status, body.error?.code ?? '', body.error);
+  }
+
+  return body.data;
+}

package/templates/nextjs-standalone/src/shared/api/http.ts

@@ -1,56 +1,13 @@
-import axios from 'axios';
-
-import { ApiError } from './error';
-import type { ApiResponse } from './apiTypes';
-
-const HTTP_TIMEOUT = 10_000;
-
-const http = axios.create({
-  baseURL: '/api/proxy',
-  timeout: HTTP_TIMEOUT,
-});
-
-// 서버 컴포넌트에서 호출 시 axios 는 절대 URL 이 필요하다.
-// 호스트만 프리픽스하고 그 외 분기는 두지 않는다.
-http.interceptors.request.use(async (config) => {
-  if (typeof window !== 'undefined') return config;
-
-  const { headers: getHeaders } = await import('next/headers');
-  const hdrs = await getHeaders();
-  const host = hdrs.get('host') ?? 'localhost:3000';
-  const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http';
-  config.baseURL = `${protocol}://${host}/api/proxy`;
-  return config;
-});
-
-http.interceptors.response.use(
-  (response) => {
-    const body = response.data as ApiResponse;
-    if (body && typeof body === 'object' && 'result' in body) {
-      if (body.result === 'ERROR') {
-        return Promise.reject(
-          new ApiError(response.status, body.error?.code ?? '', body.error),
-        );
-      }
-      response.data = body.data;
-    }
-    return response;
-  },
-  (error) => {
-    if (axios.isAxiosError(error)) {
-      const { response } = error;
-      const body = response?.data as ApiResponse | undefined;
-      const errorBody = body?.error ?? null;
-      return Promise.reject(
-        new ApiError(
-          response?.status ?? 0,
-          errorBody?.code ?? '',
-          errorBody,
-        ),
-      );
-    }
-    return Promise.reject(error);
-  },
-);
-
-export { http };
+import { clientFetch } from './clientFetch';
+import { serverFetch } from './serverFetch';
+
+/**
+ * isomorphic 진입점.
+ * RSC/서버에서는 백엔드로 직통, 브라우저에서는 /api/proxy 경유.
+ * API 함수는 한 번만 작성하고 환경 분기는 여기서 처리한다.
+ */
+export function http<T>(path: string, init?: RequestInit): Promise<T> {
+  return typeof window === 'undefined'
+    ? serverFetch<T>(path, init)
+    : clientFetch<T>(path, init);
+}

package/templates/nextjs-standalone/src/shared/api/observability.ts

@@ -0,0 +1,20 @@
+type ApiCaptureParams = {
+  url: string;
+  apiPath: string;
+  method: string;
+  status: number | undefined;
+  responseBody?: unknown;
+};
+
+type ApiLogParams = {
+  url: string;
+  method: string;
+  status: number | undefined;
+  requestHeaders?: Record<string, string | undefined>;
+  requestBody?: unknown;
+  responseBody?: unknown;
+};
+
+export const captureApiError = (_params: ApiCaptureParams): void => {};
+
+export const logApiError = (_prefix: string, _params: ApiLogParams): void => {};

package/templates/nextjs-standalone/src/shared/api/queryClient.ts

@@ -0,0 +1,30 @@
+import {
+  QueryClient,
+  defaultShouldDehydrateQuery,
+  isServer,
+} from '@tanstack/react-query';
+import { cache } from 'react';
+
+function makeQueryClient(): QueryClient {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        retry: 1,
+      },
+      dehydrate: {
+        shouldDehydrateQuery: (q) =>
+          defaultShouldDehydrateQuery(q) || q.state.status === 'pending',
+      },
+    },
+  });
+}
+
+export const getServerQueryClient = cache(makeQueryClient);
+
+let browserQueryClient: QueryClient | undefined;
+
+export function getBrowserQueryClient(): QueryClient {
+  if (isServer) return makeQueryClient();
+  return (browserQueryClient ??= makeQueryClient());
+}

package/templates/nextjs-standalone/src/shared/api/serverFetch.ts

@@ -0,0 +1,59 @@
+import { cookies } from 'next/headers';
+
+import type { ApiResponse } from './apiTypes';
+import { ApiError } from './error';
+import { captureApiError, logApiError } from './observability';
+
+const API_URL = process.env.API_URL ?? 'http://localhost:8080/api';
+
+const ACCESS_TOKEN_COOKIE = 'accessToken';
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+export async function serverFetch<T>(
+  path: string,
+  init: RequestInit = {},
+): Promise<T> {
+  const jar = await cookies();
+  const accessToken = jar.get(ACCESS_TOKEN_COOKIE)?.value;
+  const locale = jar.get(LOCALE_COOKIE)?.value;
+
+  const url = `${API_URL}${path.startsWith('/') ? path : `/${path}`}`;
+  const method = (init.method ?? 'GET').toUpperCase();
+
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+    ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+    ...(locale && { 'Accept-Language': locale }),
+    ...(init.headers as Record<string, string> | undefined),
+  };
+
+  const res = await fetch(url, {
+    ...init,
+    headers,
+    cache: init.cache ?? 'no-store',
+  });
+
+  const body = (await res.json()) as ApiResponse<T>;
+
+  if (!res.ok || body.result === 'ERROR') {
+    logApiError('SERVER_FETCH', {
+      url,
+      method,
+      status: res.status,
+      requestBody: typeof init.body === 'string' ? init.body : undefined,
+      responseBody: body,
+    });
+
+    captureApiError({
+      url,
+      apiPath: path,
+      method,
+      status: res.status,
+      responseBody: body,
+    });
+
+    throw new ApiError(res.status, body.error?.code ?? '', body.error);
+  }
+
+  return body.data;
+}

package/templates/nextjs-standalone/src/shared/hooks/useAppMutation.ts

@@ -0,0 +1,52 @@
+import {
+  useMutation,
+  type UseMutationOptions,
+  type DefaultError,
+} from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import { ApiError } from '../api/error';
+
+type AppMutationOptions<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+> = UseMutationOptions<TData, TError, TVariables, TContext> & {
+  errorMessage?: string;
+  showErrorToast?: boolean;
+};
+
+/**
+ * useMutation 래퍼 — 에러 발생 시 ApiError.message 를 toast 로 띄운다.
+ * showErrorToast: false 로 끌 수 있고, errorMessage 로 fallback 메시지 지정.
+ */
+export const useAppMutation = <
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: AppMutationOptions<TData, TError, TVariables, TContext>,
+) => {
+  const { errorMessage, showErrorToast = true, onError, ...rest } = options;
+
+  return useMutation({
+    ...rest,
+    onError: (...args) => {
+      onError?.(...args);
+
+      if (!showErrorToast) return;
+
+      const [error] = args;
+      const message =
+        error instanceof ApiError
+          ? (error.data?.message ?? errorMessage)
+          : errorMessage;
+
+      if (message) {
+        toast.error(message);
+      }
+    },
+  });
+};