sh-ui-cli 0.31.1 → 0.32.1

package/src/create/plugins/sentry.js

@@ -50,6 +50,11 @@ export const sentryPlugin = {
   providerWrappers: [],
 
   // ─── 독립 파일 ───
+  //
+  // Sentry 가 활성화될 때만 깔리는 파일.
+  // HTTP/proxy 인프라(http.ts, apiTypes.ts, error.ts, app/api/proxy 등)는
+  // 베이스 템플릿이 소유한다. Sentry 는 베이스의 observability.ts 를
+  // Sentry-aware 버전으로 덮어써서 캡처/로그를 활성화한다.
 
   files: {
     'sentry.server.config.ts': `import * as Sentry from '@sentry/nextjs';
@@ -64,10 +69,6 @@ Sentry.init({
       return null;
     }
 
-    if (event.exception?.values?.[0]?.type === 'AxiosError') {
-      return null;
-    }
-
     const error = hint?.originalException;
 
     if (error instanceof Error && error.name === 'ApiError') {
@@ -95,11 +96,6 @@ Sentry.init({
     if (event.level === 'warning' || event.level === 'info' || event.level === 'debug' || event.level === 'log') {
       return null;
     }
-
-    if (event.exception?.values?.[0]?.type === 'AxiosError') {
-      return null;
-    }
-
     return event;
   },
 });
@@ -120,7 +116,7 @@ export const register = async () => {
 export const onRequestError = (
   ...[error, request, context]: Parameters<typeof Sentry.captureRequestError>
 ) => {
-  if (error instanceof Error && (error.name === 'ApiError' || error.name === 'AxiosError')) {
+  if (error instanceof Error && error.name === 'ApiError') {
     return;
   }
 
@@ -290,9 +286,10 @@ export default function Error({
   Suspense,
 } from 'react';
 import * as Sentry from '@sentry/nextjs';
-import { ApiError } from '../../api/error';
 import { QueryErrorResetBoundary } from '@tanstack/react-query';
 
+import { ApiError } from '../../api/error';
+
 interface ErrorFallbackProps {
   error: Error | null;
   resetErrorBoundary: () => void;
@@ -381,75 +378,35 @@ export function FallbackBoundary({
 }
 `,
 
-    'src/shared/api/apiTypes.ts': `export interface ApiErrorBody {
-  code: string;
-  message: string;
-}
-
-export interface ApiResponse<T = unknown> {
-  result: 'SUCCESS' | 'ERROR';
-  data: T | null;
-  error: ApiErrorBody | null;
-}
-`,
+    // ─── observability 브릿지 ───
+    //
+    // 베이스의 no-op observability 를 Sentry-aware 버전으로 덮어쓴다.
+    // http.ts / serverFetch.ts / proxy/route.ts 가 이 모듈을 import 하므로,
+    // Sentry 플러그인이 켜지면 자동으로 캡처가 활성화된다.
 
-    'src/shared/api/error.ts': `import type { ApiErrorBody } from './apiTypes';
+    'src/shared/api/observability.ts': `import * as Sentry from '@sentry/nextjs';
 
-export class ApiError extends Error {
-  constructor(
-    public readonly status: number,
-    public readonly code: string,
-    public readonly data: ApiErrorBody | null,
-  ) {
-    super(data?.message ?? \`API 요청 실패 (\${status})\`);
-    this.name = 'ApiError';
-  }
-}
-`,
-
-    'src/shared/api/apiCore.ts': `import * as Sentry from '@sentry/nextjs';
-
-type ApiErrorLogParams = {
+type ApiCaptureParams = {
   url: string;
+  apiPath: string;
   method: string;
   status: number | undefined;
-  requestHeaders?: Record<string, string | undefined>;
-  requestBody?: unknown;
   responseBody?: unknown;
 };
 
-export const logApiError = (prefix: string, params: ApiErrorLogParams): void => {
-  const { url, method, status, requestHeaders, requestBody, responseBody } = params;
-
-  console.error(\`❌ [\${prefix} ERROR REPORT]\`);
-  console.error(\`- URL: \${method} \${url}\`);
-  console.error(\`- Status: \${status ?? 'N/A'}\`);
-
-  if (requestHeaders) {
-    const { Authorization: _, ...safeHeaders } = requestHeaders;
-    console.error('- Request Headers:', safeHeaders);
-  }
-
-  if (requestBody) {
-    console.error('- Request Body:', requestBody);
-  }
-
-  if (responseBody) {
-    console.error('- Response Body:', responseBody);
-  }
-};
-
-type ApiSentryCapture = {
+type ApiLogParams = {
   url: string;
-  apiPath: string;
   method: string;
   status: number | undefined;
+  requestHeaders?: Record<string, string | undefined>;
+  requestBody?: unknown;
   responseBody?: unknown;
 };
 
-export const captureApiError = (params: ApiSentryCapture): void => {
+export const captureApiError = (params: ApiCaptureParams): void => {
   const { url, apiPath, method, status, responseBody } = params;
 
+  // 5xx 서버 에러만 Sentry 로 보고 (4xx 비즈니스 에러는 UI 에서 처리)
   if (!status || status < 500) return;
 
   Sentry.withScope((scope) => {
@@ -461,228 +418,23 @@ export const captureApiError = (params: ApiSentryCapture): void => {
     });
     scope.setFingerprint([method, apiPath, String(status)]);
 
-    Sentry.captureException(
-      new Error(\`[API] \${method} \${apiPath} \${status}\`),
-    );
+    Sentry.captureException(new Error(\`[API] \${method} \${apiPath} \${status}\`));
   });
 };
-`,
-
-    'src/shared/api/http.ts': `import axios from 'axios';
-import { ApiError } from './error';
-import type { ApiResponse } from './apiTypes';
-import { captureApiError, logApiError } from './apiCore';
-
-const IS_SERVER = typeof window === 'undefined';
-const API_URL = process.env.API_URL || 'http://localhost:8080/api';
-const HTTP_TIMEOUT = 10_000;
-
-const http = axios.create({
-  baseURL: IS_SERVER ? API_URL : '/api/proxy',
-  timeout: HTTP_TIMEOUT,
-});
-
-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 { config, response } = error;
-
-      const fullUrl = \`\${config?.baseURL ?? ''}\${config?.url ?? ''}\`;
-      const apiPath = config?.url ?? '';
-
-      const body = response?.data as ApiResponse | undefined;
-      const errorBody = body?.error ?? null;
-
-      if (process.env.NODE_ENV === 'development') {
-        logApiError('API', {
-          url: fullUrl,
-          method: config?.method?.toUpperCase() ?? 'UNKNOWN',
-          status: response?.status,
-          requestBody: config?.data,
-          responseBody: response?.data,
-        });
-      }
-
-      if (IS_SERVER) {
-        captureApiError({
-          url: fullUrl,
-          apiPath,
-          method: config?.method?.toUpperCase() ?? 'UNKNOWN',
-          status: response?.status,
-          responseBody: response?.data,
-        });
-      }
-
-      return Promise.reject(
-        new ApiError(
-          response?.status ?? 0,
-          errorBody?.code ?? '',
-          errorBody,
-        ),
-      );
-    }
-
-    return Promise.reject(error);
-  },
-);
-
-export { http };
-`,
-
-    'src/shared/api/index.ts': `export { http } from './http';
-export { ApiError } from './error';
-export type { ApiErrorBody, ApiResponse } from './apiTypes';
-export { captureApiError, logApiError } from './apiCore';
-`,
-
-    'app/api/proxy/[...path]/route.ts': `import { NextResponse, type NextRequest } from 'next/server';
-import {
-  logApiError,
-  captureApiError,
-} from '@/src/shared/api/apiCore';
 
-const API_URL = process.env.API_URL || 'http://localhost:8080/api';
-
-const proxyRequest = async (
-  request: NextRequest,
-  { params }: { params: Promise<{ path: string[] }> },
-  method: string,
-) => {
-  const { path } = await params;
-  const apiPath = path.join('/');
-  const url = new URL(\`\${API_URL}/\${apiPath}\`);
-
-  request.nextUrl.searchParams.forEach((value, key) => {
-    url.searchParams.set(key, value);
-  });
-
-  const headers: HeadersInit = {
-    'Accept-Language': request.headers.get('Accept-Language') || 'ko',
-  };
-
-  const contentType = request.headers.get('Content-Type');
-  let body: BodyInit | undefined;
-
-  if (method !== 'GET') {
-    if (contentType?.includes('multipart/form-data')) {
-      body = await request.formData();
-    } else {
-      headers['Content-Type'] = 'application/json';
-      body = await request.text();
-    }
-  }
-
-  let response: Response;
-  try {
-    response = await fetch(url.toString(), { method, headers, body });
-  } catch (error) {
-    console.error(\`❌ [PROXY] \${method} \${url.toString()} — Network Error:\`, error);
-    return NextResponse.json(
-      { result: 'ERROR', data: null, error: { code: 'NETWORK_ERROR', message: '서버에 연결할 수 없습니다.' } },
-      { status: 502 },
-    );
-  }
-
-  const data = await response.json();
+export const logApiError = (prefix: string, params: ApiLogParams): void => {
+  const { url, method, status, requestHeaders, requestBody, responseBody } = params;
 
-  if (!response.ok) {
-    logApiError('PROXY', {
-      url: url.toString(),
-      method,
-      status: response.status,
-      requestHeaders: headers as Record<string, string>,
-      requestBody: typeof body === 'string' ? body : undefined,
-      responseBody: data,
-    });
+  console.error(\`❌ [\${prefix} ERROR REPORT]\`);
+  console.error(\`- URL: \${method} \${url}\`);
+  console.error(\`- Status: \${status ?? 'N/A'}\`);
 
-    captureApiError({
-      url: url.toString(),
-      apiPath,
-      method,
-      status: response.status,
-      responseBody: data,
-    });
+  if (requestHeaders) {
+    const { Authorization: _, ...safeHeaders } = requestHeaders;
+    console.error('- Request Headers:', safeHeaders);
   }
-
-  return NextResponse.json(data, { status: response.status });
-};
-
-export const GET = (req: NextRequest, ctx: { params: Promise<{ path: string[] }> }) =>
-  proxyRequest(req, ctx, 'GET');
-
-export const POST = (req: NextRequest, ctx: { params: Promise<{ path: string[] }> }) =>
-  proxyRequest(req, ctx, 'POST');
-
-export const PUT = (req: NextRequest, ctx: { params: Promise<{ path: string[] }> }) =>
-  proxyRequest(req, ctx, 'PUT');
-
-export const PATCH = (req: NextRequest, ctx: { params: Promise<{ path: string[] }> }) =>
-  proxyRequest(req, ctx, 'PATCH');
-
-export const DELETE = (req: NextRequest, ctx: { params: Promise<{ path: string[] }> }) =>
-  proxyRequest(req, ctx, 'DELETE');
-`,
-
-    'src/shared/hooks/useAppMutation.ts': `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;
-};
-
-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);
-      }
-    },
-  });
+  if (requestBody) console.error('- Request Body:', requestBody);
+  if (responseBody) console.error('- Response Body:', responseBody);
 };
 `,
   },

package/src/mcp.mjs

@@ -165,7 +165,7 @@ export async function startMcpServer() {
           .describe("타겟 플랫폼"),
         structure: z.enum(["standalone", "monorepo"]).optional()
           .describe("Next.js 구조 — platform=next 일 때 필수. standalone(단독) | monorepo(Turborepo)"),
-        plugins: z.array(z.enum(["sentry", "next-intl"])).optional()
+        plugins: z.array(z.enum(["sentry", "next-intl", "auth-jwt"])).optional()
           .describe("Next.js 플러그인. 미지정시 빈 배열"),
         theme: z.string().optional()
           .describe("base64 인코딩된 테마 JSON (선택)"),

package/templates/nextjs-app/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-app/package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@tanstack/react-query": "^5.90.21",
     "@workspace/ui-app-name": "workspace:*",
-    "axios": "^1.13.6",
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "next-themes": "^0.4.6",

package/templates/nextjs-app/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-app/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-app/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-app/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-app/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());
+}