sh-ui-cli 0.75.0 → 0.77.0

package/templates/nextjs-standalone/_arch/mes/src/hooks/useAppMutation.ts

@@ -0,0 +1,59 @@
+import {
+  useMutation,
+  type UseMutationOptions,
+  type DefaultError,
+} from '@tanstack/react-query';
+import { toast } from 'sonner';
+
+import { ApiError } from '@/lib/api/error';
+import { resolveErrorMessage } from '@/lib/api/errorMessages';
+
+type AppMutationOptions<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+> = UseMutationOptions<TData, TError, TVariables, TContext> & {
+  /** ApiError 가 아니거나 mapping 에 없을 때의 fallback 메시지. */
+  errorMessage?: string;
+  /** false 면 toast 띄우지 않음. */
+  showErrorToast?: boolean;
+};
+
+/**
+ * useMutation 래퍼 — 에러 발생 시 `resolveErrorMessage` 를 통해 안전한
+ * 사용자 facing 메시지를 toast 로 띄운다. backend 가 보낸 raw 메시지를 그대로
+ * 띄우지 않고 `errorMessages.ts` 의 mapping 을 우선 사용해 일관된 사용자
+ * 경험과 i18n 친화성을 확보.
+ *
+ * showErrorToast: false 로 자동 toast 끌 수 있고, 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 = resolveErrorMessage(error, errorMessage);
+
+      if (message) {
+        toast.error(message);
+      }
+    },
+  });
+};
+
+// re-export ApiError 타입을 쓰는 사용처 편의용 (선택).
+export type { ApiError };

package/templates/nextjs-standalone/_arch/mes/src/lib/api/apiTypes.ts

@@ -0,0 +1,21 @@
+/** 공통 API 에러 형식 */
+export type ApiErrorBody = {
+  message: string;
+  code: string;
+};
+
+/** 백엔드 공통 응답 래퍼 */
+export type ApiResponse<TData = unknown, TError = ApiErrorBody> = {
+  result: 'SUCCESS' | 'ERROR';
+  data: TData;
+  error: TError | null;
+};
+
+/** 페이지네이션 응답 래퍼 */
+export type PaginatedData<T> = {
+  content: T[];
+  totalItems: number;
+  offset: number;
+  limit: number;
+  hasNext: boolean;
+};

package/templates/nextjs-standalone/_arch/mes/src/lib/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) {
+    // 이미 sign-in 페이지면 redirect 루프 방지.
+    // next-intl 활성 시 path 가 `/ko/sign-in` 형태가 되므로 regex 로 match.
+    if (typeof window !== 'undefined' && !/\/sign-in(\/|$)/.test(window.location.pathname)) {
+      // /sign-in 으로만 보내면 middleware (next-intl 활성 시) 가 default locale 을 prefix 추가.
+      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/_arch/mes/src/lib/api/error.ts

@@ -0,0 +1,12 @@
+import type { ApiErrorBody } from './apiTypes';
+
+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';
+  }
+}

package/templates/nextjs-standalone/_arch/mes/src/lib/api/errorMessages.ts

@@ -0,0 +1,37 @@
+import { ApiError } from './error';
+
+/**
+ * 에러 코드 → 사용자 facing 메시지 mapping.
+ *
+ * 백엔드가 보내는 raw `error.message` 를 그대로 toast 로 띄우면 i18n 어긋나거나
+ * 내부 노출이 될 수 있어, frontend 가 정의한 안전한 메시지로 변환하는 게 권장.
+ * 코드별로 명시 안 된 경우 `error.data.message` (backend 메시지) → fallback.
+ *
+ * 사용자 프로젝트에서 자유롭게 추가/수정. next-intl 활성 시엔 `useTranslations`
+ * 와 결합해 hook 형태로 변환 가능 (이 파일은 RSC/CSR 양쪽 호환을 위해 module).
+ */
+export const ERROR_MESSAGES: Record<string, string> = {
+  UNAUTHORIZED: '로그인이 필요합니다.',
+  FORBIDDEN: '접근 권한이 없습니다.',
+  NOT_FOUND: '요청한 리소스를 찾을 수 없습니다.',
+  NETWORK_ERROR: '서버에 연결할 수 없습니다. 잠시 후 다시 시도해 주세요.',
+  // 사용자 정의 코드를 여기에 추가하세요.
+};
+
+const DEFAULT_FALLBACK = '일시적인 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.';
+
+/**
+ * 에러 → 사용자 facing 메시지 결정.
+ *  1. ApiError + 코드가 ERROR_MESSAGES 에 있으면 그 메시지
+ *  2. ApiError 의 backend `data.message` (있으면)
+ *  3. 호출자의 fallback
+ *  4. 글로벌 DEFAULT_FALLBACK
+ */
+export function resolveErrorMessage(error: unknown, fallback?: string): string {
+  if (error instanceof ApiError) {
+    const mapped = ERROR_MESSAGES[error.code];
+    if (mapped) return mapped;
+    if (error.data?.message) return error.data.message;
+  }
+  return fallback ?? DEFAULT_FALLBACK;
+}

package/templates/nextjs-standalone/_arch/mes/src/lib/api/http.ts

@@ -0,0 +1,13 @@
+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/_arch/mes/src/lib/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/_arch/mes/src/lib/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/_arch/mes/src/lib/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/_arch/mes/src/lib/styles/tokens.css

@@ -0,0 +1,170 @@
+/* Generated by @sh-ui/tokens — do not edit directly */
+/* base=neutral radius=md mode=light-dark */
+
+/* sh-ui:theme-colors-start */
+:root {
+  --background: #FFFFFF;
+  --background-subtle: #FAFAFA;
+  --background-muted: #F5F5F5;
+  --background-inverse: #0A0A0A;
+  --foreground: #0A0A0A;
+  --foreground-muted: #525252;
+  --foreground-subtle: #A3A3A3;
+  --foreground-inverse: #FFFFFF;
+  --border: #E5E5E5;
+  --border-strong: #D4D4D4;
+  --primary: #171717;
+  --primary-foreground: #FAFAFA;
+  --primary-hover: #262626;
+  --ring: color-mix(in srgb, var(--primary) 50%, transparent);
+  --danger: #DC2626;
+  --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+  --danger-foreground: #FFFFFF;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.light):not(.dark) {
+    --background: #0A0A0A;
+    --background-subtle: #171717;
+    --background-muted: #262626;
+    --background-inverse: #FFFFFF;
+    --foreground: #FAFAFA;
+    --foreground-muted: #A3A3A3;
+    --foreground-subtle: #737373;
+    --foreground-inverse: #0A0A0A;
+    --border: #262626;
+    --border-strong: #404040;
+    --primary: #FAFAFA;
+    --primary-foreground: #171717;
+    --primary-hover: #E5E5E5;
+    --danger: #DC2626;
+  --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+    --danger-foreground: #FFFFFF;
+  }
+}
+.dark {
+  --background: #0A0A0A;
+  --background-subtle: #171717;
+  --background-muted: #262626;
+  --background-inverse: #FFFFFF;
+  --foreground: #FAFAFA;
+  --foreground-muted: #A3A3A3;
+  --foreground-subtle: #737373;
+  --foreground-inverse: #0A0A0A;
+  --border: #262626;
+  --border-strong: #404040;
+  --primary: #FAFAFA;
+  --primary-foreground: #171717;
+  --primary-hover: #E5E5E5;
+  --danger: #DC2626;
+  --danger-hover: color-mix(in srgb, var(--danger) 90%, black);
+  --danger-foreground: #FFFFFF;
+}
+/* sh-ui:theme-colors-end */
+
+:root {
+  /* sh-ui:theme-radius-start */
+  --radius: 0.5rem;
+  /* sh-ui:theme-radius-end */
+  /* sh-ui:theme-space-start */
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  /* sh-ui:theme-space-end */
+  /* sh-ui:theme-text-start */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  /* sh-ui:theme-text-end */
+  /* sh-ui:theme-weight-start */
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  /* sh-ui:theme-weight-end */
+  /* sh-ui:theme-shadow-start */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.18);
+  --shadow-menu: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  /* sh-ui:theme-shadow-end */
+  /* sh-ui:theme-duration-start */
+  --duration-fast: 120ms;
+  --duration-base: 160ms;
+  --duration-slow: 200ms;
+  /* sh-ui:theme-duration-end */
+  /* sh-ui:theme-ease-start */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  /* sh-ui:theme-ease-end */
+  /* sh-ui:theme-control-start */
+  --control-sm: 2rem;
+  --control-md: 2.5rem;
+  --control-lg: 3rem;
+  /* sh-ui:theme-control-end */
+  /* sh-ui:theme-border-width-start */
+  --border-width: 1px;
+  --border-width-strong: 2px;
+  /* sh-ui:theme-border-width-end */
+  /* sh-ui:theme-gradient-start */
+  --gradient-primary: linear-gradient(135deg, #171717 0%, #525252 100%);
+  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
+  --gradient-overlay: linear-gradient(180deg, #000000 0%, #1F1F1F 100%);
+  /* sh-ui:theme-gradient-end */
+  --opacity-disabled: 0.5;
+  --z-base: 0;
+  --z-sticky: 100;
+  --z-dropdown: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-popover: 500;
+  --z-toast: 600;
+  --z-tooltip: 700;
+  --bp-sm: 640px;
+  --bp-md: 768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1280px;
+}
+
+/* WCAG 2.5.5 — 터치 타겟 최소 44×44px. 마우스/스타일러스 대신 손가락 입력 시 control 높이를 보정. */
+@media (hover: none) and (pointer: coarse) {
+  :root {
+    --control-sm: 2.75rem;
+    --control-md: 2.75rem;
+  }
+}
+
+/* WCAG AA 보장 — 사용자가 OS/브라우저에서 "고대비" 접근성 옵션 켰을 때.
+ * foreground-subtle, border, border-strong 만 강화 (다른 토큰은 이미 AA 통과). */
+@media (prefers-contrast: high) {
+  :root {
+    --foreground-subtle: #767676;
+    --border: #767676;
+    --border-strong: #595959;
+  }
+  .dark {
+    --foreground-subtle: #B3B3B3;
+    --border: #757575;
+    --border-strong: #999999;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light):not(.dark) {
+      --foreground-subtle: #B3B3B3;
+      --border: #757575;
+      --border-strong: #999999;
+    }
+  }
+}

package/templates/nextjs-standalone/_arch/mes/src/lib/test/createTestQueryClient.ts

@@ -0,0 +1,18 @@
+import { QueryClient } from '@tanstack/react-query';
+
+/**
+ * 테스트 전용 QueryClient — retry/refetch 끄고 gcTime 0 으로 격리.
+ */
+export const createTestQueryClient = (): QueryClient =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+        refetchOnWindowFocus: false,
+        gcTime: 0,
+      },
+      mutations: {
+        retry: false,
+      },
+    },
+  });

package/templates/nextjs-standalone/_arch/mes/src/lib/test/index.ts

@@ -0,0 +1,2 @@
+export { createTestQueryClient } from './createTestQueryClient';
+export { renderWithProviders } from './renderWithProviders';

package/templates/nextjs-standalone/_arch/mes/src/lib/test/renderWithProviders.tsx

@@ -0,0 +1,65 @@
+import type { ComponentType, ReactElement, ReactNode } from 'react';
+
+import {
+  render,
+  type RenderOptions,
+  type RenderResult,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider } from 'next-themes';
+
+import { createTestQueryClient } from './createTestQueryClient';
+
+type Options = Omit<RenderOptions, 'wrapper'> & {
+  queryClient?: QueryClient;
+  /**
+   * 외부 Provider 가 필요할 때 (예: next-intl 활성 프로젝트에서
+   * `NextIntlClientProvider`) 사용. ThemeProvider 안쪽 / QueryClientProvider 바깥에 wrap.
+   */
+  extraWrapper?: ComponentType<{ children: ReactNode }>;
+};
+
+type Result = RenderResult & {
+  user: ReturnType<typeof userEvent.setup>;
+  queryClient: QueryClient;
+};
+
+/**
+ * RTL render + ThemeProvider + QueryClientProvider + userEvent setup 한 번에.
+ *
+ * next-intl 프로젝트에서 `useTranslations` 사용 컴포넌트 테스트 시:
+ *
+ *   const Intl = ({ children }) => (
+ *     <NextIntlClientProvider locale='ko' messages={ko}>
+ *       {children}
+ *     </NextIntlClientProvider>
+ *   );
+ *   renderWithProviders(<MyComponent />, { extraWrapper: Intl });
+ */
+export const renderWithProviders = (
+  ui: ReactElement,
+  options: Options = {},
+): Result => {
+  const {
+    queryClient = createTestQueryClient(),
+    extraWrapper: Extra,
+    ...rtlOptions
+  } = options;
+
+  const Wrapper = ({ children }: { children: ReactNode }) => {
+    const inner = (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+    return (
+      <ThemeProvider attribute='class' defaultTheme='light' enableSystem={false}>
+        {Extra ? <Extra>{inner}</Extra> : inner}
+      </ThemeProvider>
+    );
+  };
+
+  const result = render(ui, { wrapper: Wrapper, ...rtlOptions });
+  const user = userEvent.setup();
+
+  return { ...result, user, queryClient };
+};

package/templates/nextjs-standalone/_arch/mes/src/lib/utils/formatDate.ts

@@ -0,0 +1,26 @@
+/**
+ * Date → 로케일 기반 날짜 포맷 (시간 없음).
+ *
+ * 비-i18n 프로젝트면 default 'ko-KR' 사용. next-intl 활성 시엔 이 util 을 직접
+ * 부르지 말고 같은 모듈의 hook (`useFormatDate`) 을 사용하세요 — 현재 locale 을
+ * 자동으로 따릅니다 (next-intl 플러그인이 emit).
+ */
+export const formatDate = (date: Date, locale = 'ko-KR'): string =>
+  new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(date);
+
+/**
+ * Date → 로케일 기반 날짜 + 시간 포맷 (24h).
+ */
+export const formatDateTime = (date: Date, locale = 'ko-KR'): string =>
+  new Intl.DateTimeFormat(locale, {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  }).format(date);

package/templates/nextjs-standalone/_arch/mes/src/lib/utils/formatPrice.ts

@@ -0,0 +1,18 @@
+/**
+ * 숫자 → 통화 포맷. default ko-KR + KRW 이지만 두 인자 모두 override 가능.
+ * 예: formatPrice(12000)            → "₩12,000"
+ *     formatPrice(99.5, 'en-US', 'USD') → "$99.50"
+ *
+ * next-intl 활성 시엔 같은 모듈의 hook (`useFormatPrice`) 을 사용하면 현재
+ * locale 을 자동으로 따릅니다 (next-intl 플러그인이 emit).
+ */
+export const formatPrice = (
+  amount: number,
+  locale = 'ko-KR',
+  currency = 'KRW',
+): string =>
+  new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: currency === 'KRW' ? 0 : 2,
+  }).format(amount);

package/templates/nextjs-standalone/_arch/mes/src/lib/utils/getQueryClient.ts

@@ -0,0 +1,14 @@
+import { isServer } from '@tanstack/react-query';
+
+import {
+  getBrowserQueryClient,
+  getServerQueryClient,
+} from '@/lib/api/queryClient';
+
+/**
+ * RSC 와 클라이언트 양쪽에서 안전하게 호출 가능한 QueryClient 핸들.
+ * 서버에서는 React `cache()` 로 요청 단위 싱글턴, 브라우저에서는 모듈 싱글턴.
+ */
+export function getQueryClient() {
+  return isServer ? getServerQueryClient() : getBrowserQueryClient();
+}

package/templates/nextjs-standalone/_arch/mes/src/lib/utils/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/nextjs-standalone/_arch/mes/src/pages/sign-in/api.ts

@@ -0,0 +1,3 @@
+// 순수 fetch 레이어 — React 모름. hooks.ts 가 useQuery/useMutation 으로 감싼다.
+// 공용 fetcher 는 `@/lib/api/clientFetch` 등 src/lib/api/ 에서 import.
+export {};

package/templates/nextjs-standalone/_arch/mes/src/pages/sign-in/hooks.ts

@@ -0,0 +1,3 @@
+// 페이지 전용 React 어댑터 — TanStack Query useQuery/useMutation 래퍼.
+// query key 와 invalidation 을 이 파일에 모아 다른 mutation 추가 시 빠뜨리지 않게.
+export {};

package/templates/nextjs-standalone/_arch/mes/src/pages/sign-in/index.tsx

@@ -0,0 +1,14 @@
+// MES 프리셋의 페이지 본체 슬롯 예시.
+//
+// 페이지 폴더 구조 (관용):
+//   index.tsx        ─ 페이지 컴포넌트 (이 파일)
+//   components/      ─ 페이지 전용 UI (폼, 다이얼로그, 테이블 등)
+//   api.ts           ─ 순수 fetch 레이어
+//   hooks.ts         ─ TanStack Query 어댑터 (useQuery / useMutation)
+//   schema.ts        ─ zod 스키마
+//   columns.ts       ─ (옵션) 리스트 페이지의 테이블 컬럼 정의
+//
+// 새 페이지를 추가할 때 이 폴더를 복사해 이름만 바꾸세요.
+export default function SignInPage() {
+  return null;
+}

package/templates/nextjs-standalone/_arch/mes/src/pages/sign-in/schema.ts

@@ -0,0 +1,2 @@
+// zod 스키마 — entity 와 form 이 다르면 두 개 (예: createXxxSchema 는 id/createdAt 제외).
+export {};