sh-ui-cli 0.76.0 → 0.77.0

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 {};

package/templates/nextjs-standalone/_arch/mes/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["es2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "moduleDetection": "force",
+    "declaration": true,
+    "declarationMap": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "allowJs": true,
+    "jsx": "preserve",
+    "noEmit": true,
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}