sh-ui-cli 0.76.0 → 0.77.0

package/data/changelog/versions.json

@@ -2,6 +2,32 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.77.0",
+      "date": "2026-05-11",
+      "title": "minor — `--arch mes` 프리셋 — 백오피스용 페이지 격리 구조",
+      "type": "minor",
+      "highlights": [
+        "**`sh-ui-cli create ... --arch mes` 신규 지원** — 스마트팩토리 MES·ERP·관리자 도구처럼 페이지 간 상호작용이 적은 CRUD-heavy 앱을 위한 페이지 격리 프리셋. FSD 의 6 레이어가 과한 백오피스 시나리오 전용.",
+        "**페이지 격리 구조** — 각 `src/pages/<name>/` 가 자기완결 슬롯 (index.tsx + components/ + api.ts + hooks.ts + schema.ts + columns.ts). `app/<route>/page.tsx` 는 `export { default } from '@/pages/<name>'` 한 줄 위임. 페이지 끼리는 import 금지 (eslint boundaries 강제).",
+        "**`src/pages/sign-in/` 스텁 동봉** — 슬롯 레이아웃을 보여주는 빈 페이지 (동작 X, 폴더 모양만). 새 페이지 추가 = 이 폴더 복사 → 이름 교체.",
+        "**tsconfig** — catch-all `@/*` → `./src/*`. 모든 import 가 `@/pages/...`, `@/components/...`, `@/lib/...` 처럼 짧고 일관.",
+        "monorepo (`apps/<name>` + `packages/ui/...`) 에서도 `--arch mes` 동작. nextjs-standalone / nextjs-app 두 템플릿 모두 mes overlay 포함."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.77.0"
+    },
+    {
+      "version": "0.76.1",
+      "date": "2026-05-11",
+      "title": "patch — Switch ON 상태 thumb 가시성 (다크모드)",
+      "type": "patch",
+      "highlights": [
+        "**Switch — checked thumb 가 `--primary-foreground` 로 전환** — 다크모드는 `--primary` 가 거의 흰색(`#FAFAFA`)인데 thumb 가 하드코딩 `white` 라 ON 상태에서 thumb 와 트랙이 같은 색으로 묻혀 위치를 알 수 없던 문제 수정.",
+        "변종 4종 동기화 — `styles.css` / `styles.module.css` / `index.tailwind.tsx` / docs 복사본.",
+        "라이트/다크 양쪽 모두 트랙과 thumb 가 항상 반전 대비를 유지."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.76.1"
+    },
     {
       "version": "0.76.0",
       "date": "2026-05-11",

package/data/registry/react/components/switch/index.tailwind.tsx

@@ -18,7 +18,7 @@ const switchRoot = cva(
 );
 
 const switchThumb = cva(
-  "block rounded-full bg-white shadow-[var(--shadow-sm)] transition-transform duration-150 ease-out motion-reduce:transition-none forced-colors:[background:ButtonText] forced-colors:data-[checked]:[background:HighlightText] forced-colors:data-[disabled]:[background:GrayText]",
+  "block rounded-full bg-white data-[checked]:bg-primary-foreground shadow-[var(--shadow-sm)] transition-transform duration-150 ease-out motion-reduce:transition-none forced-colors:[background:ButtonText] forced-colors:data-[checked]:[background:HighlightText] forced-colors:data-[disabled]:[background:GrayText]",
   {
     variants: {
       size: {

package/data/registry/react/components/switch/styles.css

@@ -74,6 +74,12 @@
   transform: translateX(1.125rem);
 }
 
+/* checked 상태에서 thumb 와 트랙(--primary)이 같은 색으로 보이지 않도록
+   --primary-foreground 로 전환 (다크모드: primary=near-white → thumb=dark). */
+.sh-ui-switch[data-checked] .sh-ui-switch__thumb {
+  background: var(--primary-foreground);
+}
+
 /* reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .sh-ui-switch,

package/data/registry/react/components/switch/styles.module.css

@@ -74,6 +74,12 @@
   transform: translateX(1.125rem);
 }
 
+/* checked 상태에서 thumb 와 트랙(--primary)이 같은 색으로 보이지 않도록
+   --primary-foreground 로 전환 (다크모드: primary=near-white → thumb=dark). */
+.switch[data-checked] .switch__thumb {
+  background: var(--primary-foreground);
+}
+
 /* reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .switch,

package/data/registry/react/tokens-used.json

@@ -1,6 +1,6 @@
 {
   "$description": "컴포넌트별 토큰 의존성 (var(--*) 추출). build-registry-tokens.mjs 가 자동 생성.",
-  "$generated": "2026-05-09T05:12:23.351Z",
+  "$generated": "2026-05-11T07:02:18.245Z",
   "components": {
     "button": {
       "plain": [
@@ -1556,6 +1556,7 @@
         "--border-width-strong",
         "--opacity-disabled",
         "--primary",
+        "--primary-foreground",
         "--primary-hover",
         "--ring",
         "--shadow-sm"
@@ -1571,6 +1572,7 @@
         "--border-width-strong",
         "--opacity-disabled",
         "--primary",
+        "--primary-foreground",
         "--primary-hover",
         "--ring",
         "--shadow-sm"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {

package/src/create/architectures/index.js

@@ -1,8 +1,9 @@
 import { fsdArch } from './fsd.js';
 import { flatArch } from './flat.js';
+import { mesArch } from './mes.js';
 import { validateArchitectures } from './archSchema.js';
 
-export const allArchitectures = [fsdArch, flatArch];
+export const allArchitectures = [fsdArch, flatArch, mesArch];
 
 // 모듈 로드 시점에 모든 arch 디스크립터를 schema 로 검증.
 // 누락된 키, 잘못된 형태가 있으면 즉시 에러.

package/src/create/architectures/mes.js

@@ -0,0 +1,53 @@
+/**
+ * MES (Backoffice) 아키텍처 디스크립터.
+ *
+ * 스마트팩토리 MES·ERP·관리자 도구처럼 **페이지 간 상호작용이 거의 없고**
+ * 페이지마다 자기 컬럼/스키마/다이얼로그를 다시 정의하는 CRUD-heavy 앱을 위한
+ * 페이지 격리 구조.
+ *
+ * 핵심 컨벤션:
+ *   - `app/<route>/page.tsx` 는 한 줄짜리 위임 (`export { default } from "@/pages/<name>"`)
+ *   - 페이지 본체는 `src/pages/<name>/` 에 자기완결로 거주 — index.tsx, components/,
+ *     api.ts, hooks.ts, schema.ts, columns.ts.
+ *   - 두 페이지 이상에서 같은 코드가 보이기 시작하면 그때 `src/components/` `src/hooks/`
+ *     `src/lib/` 로 승격. **두 번째 쓰임이 나타나기 전엔 공용 만들지 않기.**
+ *
+ * tsconfig 의 `paths` 는 FSD 처럼 catch-all `@/*` 를 쓰되 매핑 대상이 `./src/*` —
+ * 즉 모든 import 가 `@/pages/...`, `@/components/...`, `@/lib/...` 처럼 `src/` 루트
+ * 기준으로 짧게 정리된다.
+ */
+export const mesArch = {
+  name: 'mes',
+  label: 'MES (Backoffice)',
+  description:
+    '페이지 격리 구조 (src/pages/<name>/ 자기완결). 페이지 간 상호작용이 적은 CRUD-heavy 관리자 도구·MES 류에 적합.',
+  platforms: ['next'],
+
+  paths: {
+    layouts:    'src/components/layouts',
+    providers:  'src/components/providers',
+    api:        'src/lib/api',
+    config:     'src/lib/config',
+    hooks:      'src/hooks',
+    utils:      'src/lib/utils',
+    ui:         'src/components/common',
+    test:       'src/lib/test',
+  },
+
+  aliases: {
+    layouts:    '@/components/layouts',
+    providers:  '@/components/providers',
+    api:        '@/lib/api',
+    config:     '@/lib/config',
+    hooks:      '@/hooks',
+    utils:      '@/lib/utils',
+    ui:         '@/components/common',
+    test:       '@/lib/test',
+  },
+
+  // Catch-all `@/*` → `./src/*`. FSD 와 같은 결의 명명이지만 src/ 루트가 바뀜.
+  // `@/pages/customers`, `@/components/...`, `@/lib/api/...` 모두 자연스럽게 풀린다.
+  tsconfigPaths: {
+    '@/*': ['./src/*'],
+  },
+};

package/templates/monorepo/packages/eslint-config/mes.js

@@ -0,0 +1,82 @@
+import boundaries from "eslint-plugin-boundaries"
+import checkFile from "eslint-plugin-check-file"
+
+/**
+ * MES (Backoffice) ESLint configuration.
+ *
+ * 페이지 격리 + 단방향 의존을 강제:
+ *
+ *   - `src/lib/*` — lib 끼리만 (UI/페이지 모름)
+ *   - `src/hooks/*` — hooks / lib 만
+ *   - `src/components/*` — components / hooks / lib 만
+ *   - `src/pages/*` — components / hooks / lib 만. **다른 페이지 import 금지** (격리)
+ *   - `app/` — pages / components / hooks / lib 모두 OK (한 줄 위임)
+ *
+ * @type {import("eslint").Linter.Config[]}
+ */
+export const mesConfig = [
+  // ── boundaries ──
+  {
+    plugins: { boundaries },
+    settings: {
+      "import/resolver": {
+        typescript: { alwaysTryTypes: true },
+      },
+      "boundaries/elements": [
+        { type: "lib", pattern: ["src/lib/*"], mode: "folder" },
+        { type: "hooks", pattern: ["src/hooks"], mode: "folder" },
+        { type: "components", pattern: ["src/components/*"], mode: "folder" },
+        { type: "pages", pattern: ["src/pages/*"], mode: "folder" },
+        { type: "app", pattern: ["app"], mode: "folder" },
+      ],
+      "boundaries/ignore": ["**/*.test.*", "**/*.spec.*"],
+    },
+    rules: {
+      "boundaries/element-types": [
+        "warn",
+        {
+          default: "disallow",
+          rules: [
+            { from: "app", allow: ["pages", "components", "hooks", "lib"] },
+            // pages 끼리는 import 금지 — 페이지 격리 원칙
+            { from: "pages", allow: ["components", "hooks", "lib"] },
+            { from: "components", allow: ["components", "hooks", "lib"] },
+            { from: "hooks", allow: ["hooks", "lib"] },
+            { from: "lib", allow: ["lib"] },
+          ],
+        },
+      ],
+    },
+  },
+
+  // ── check-file (MES 는 .tsx PASCAL, .ts CAMEL) ──
+  {
+    plugins: { "check-file": checkFile },
+    rules: {
+      "check-file/filename-naming-convention": [
+        "error",
+        {
+          "**/components/**/*.tsx": "PASCAL_CASE",
+          "**/pages/**/components/**/*.tsx": "PASCAL_CASE",
+          "**/lib/**/*.ts": "CAMEL_CASE",
+          "**/hooks/**/*.ts": "CAMEL_CASE",
+        },
+        { ignoreMiddleExtensions: true },
+      ],
+    },
+  },
+  {
+    files: [
+      "**/index.tsx", "**/index.ts",
+      "**/layout.tsx", "**/page.tsx",
+      "**/error.tsx", "**/not-found.tsx",
+      "**/routing.ts", "**/navigation.ts", "**/request.ts",
+      // MES 페이지 concern 파일들
+      "**/pages/**/api.ts", "**/pages/**/schema.ts",
+      "**/pages/**/columns.ts", "**/pages/**/hooks.ts",
+    ],
+    rules: {
+      "check-file/filename-naming-convention": "off",
+    },
+  },
+]

package/templates/monorepo/packages/eslint-config/package.json

@@ -8,7 +8,8 @@
     "./next-js": "./next.js",
     "./react-internal": "./react-internal.js",
     "./fsd": "./fsd.js",
-    "./flat": "./flat.js"
+    "./flat": "./flat.js",
+    "./mes": "./mes.js"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

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

@@ -0,0 +1,112 @@
+import { cookies } from 'next/headers';
+import { NextResponse, type NextRequest } from 'next/server';
+
+import {
+  captureApiError,
+  logApiError,
+} from '@/lib/api/observability';
+
+const API_URL = process.env.API_URL ?? 'http://localhost:8080/api';
+const ACCESS_TOKEN_COOKIE = 'accessToken';
+const LOCALE_COOKIE = 'NEXT_LOCALE';
+
+const proxyRequest = async (
+  request: NextRequest,
+  ctx: { params: Promise<{ path: string[] }> },
+  method: string,
+) => {
+  const { path } = await ctx.params;
+  const apiPath = path.join('/');
+  const url = new URL(`${API_URL}/${apiPath}`);
+
+  request.nextUrl.searchParams.forEach((value, key) => {
+    url.searchParams.set(key, value);
+  });
+
+  const cookieStore = await cookies();
+  const accessToken = cookieStore.get(ACCESS_TOKEN_COOKIE)?.value;
+  const locale =
+    cookieStore.get(LOCALE_COOKIE)?.value ??
+    request.headers.get('Accept-Language') ??
+    undefined;
+
+  const headers: Record<string, string> = {};
+  if (accessToken) headers.Authorization = `Bearer ${accessToken}`;
+  if (locale) headers['Accept-Language'] = locale;
+
+  let body: BodyInit | undefined;
+  if (method !== 'GET' && method !== 'HEAD') {
+    const contentType = request.headers.get('Content-Type');
+    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()} —`, error);
+    return NextResponse.json(
+      {
+        result: 'ERROR',
+        data: null,
+        error: {
+          code: 'NETWORK_ERROR',
+          message: 'Failed to reach upstream server.',
+        },
+      },
+      { 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 = (
+  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');

package/templates/nextjs-app/_arch/mes/app/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+import '@workspace/ui-app-name/globals.css';
+import { RootLayout } from '@/components/layouts/RootLayout';
+
+export const metadata: Metadata = {
+  title: 'sh-ui app',
+  description: 'sh-ui 기반 앱 — metadata 를 변경하세요.',
+};
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <RootLayout>{children}</RootLayout>;
+}

package/templates/nextjs-app/_arch/mes/app/sign-in/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/pages/sign-in';

package/templates/nextjs-app/_arch/mes/eslint.config.js

@@ -0,0 +1,10 @@
+import { nextJsConfig } from "@workspace/eslint-config/next-js"
+import { mesConfig } from "@workspace/eslint-config/mes"
+
+export default [
+  {
+    ignores: [".next/**", "dist/**", "node_modules/**"],
+  },
+  ...nextJsConfig,
+  ...mesConfig,
+]

package/templates/nextjs-app/_arch/mes/src/components/common/FallbackBoundary/index.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import {
+  Component,
+  type ComponentType,
+  type ErrorInfo,
+  type ReactNode,
+  Suspense,
+} from 'react';
+import { QueryErrorResetBoundary } from '@tanstack/react-query';
+
+export type ErrorFallbackProps = {
+  error: Error | null;
+  resetErrorBoundary: () => void;
+};
+
+type ErrorBoundaryProps = {
+  children: ReactNode;
+  fallback?: ComponentType<ErrorFallbackProps>;
+  onReset: () => void;
+  onError?: (error: Error, info: ErrorInfo) => void;
+};
+
+type ErrorBoundaryState = {
+  hasError: boolean;
+  error: Error | null;
+};
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState = { hasError: false, error: null };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    this.props.onError?.(error, info);
+  }
+
+  resetErrorBoundary = () => {
+    this.props.onReset();
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    const { hasError, error } = this.state;
+    const { children, fallback: Fallback } = this.props;
+
+    if (hasError && Fallback) {
+      return (
+        <Fallback error={error} resetErrorBoundary={this.resetErrorBoundary} />
+      );
+    }
+
+    return children;
+  }
+}
+
+type FallbackBoundaryProps = {
+  children: ReactNode;
+  errorFallback?: ComponentType<ErrorFallbackProps>;
+  suspenseFallback?: ReactNode;
+  onError?: (error: Error, info: ErrorInfo) => void;
+};
+
+/**
+ * Suspense + ErrorBoundary 합성. React Query 의 reset 신호에 맞춰
+ * `errorFallback` 의 `resetErrorBoundary` 가 쿼리까지 함께 리셋한다.
+ */
+export function FallbackBoundary({
+  children,
+  errorFallback,
+  suspenseFallback,
+  onError,
+}: FallbackBoundaryProps) {
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ErrorBoundary
+          onReset={reset}
+          fallback={errorFallback}
+          onError={onError}
+        >
+          <Suspense fallback={suspenseFallback}>{children}</Suspense>
+        </ErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  );
+}

package/templates/nextjs-app/_arch/mes/src/components/common/PrefetchBoundary/index.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+
+import {
+  dehydrate,
+  type FetchQueryOptions,
+  HydrationBoundary,
+} from '@tanstack/react-query';
+
+import { getQueryClient } from '@/lib/utils/getQueryClient';
+
+export type FetchOptions = Pick<FetchQueryOptions, 'queryKey' | 'queryFn'>;
+
+type Props = {
+  fetchOptions?: FetchOptions[] | FetchOptions | null;
+  children: ReactNode;
+};
+
+/**
+ * RSC 에서 prefetch 를 끝낸 뒤 dehydrated state 로 클라이언트에 hydrate.
+ * 단일/배열 둘 다 받는다.
+ */
+export async function PrefetchBoundary({ fetchOptions, children }: Props) {
+  const queryClient = getQueryClient();
+
+  if (fetchOptions) {
+    const list = Array.isArray(fetchOptions) ? fetchOptions : [fetchOptions];
+    await Promise.all(list.map((opt) => queryClient.prefetchQuery(opt)));
+  }
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      {children}
+    </HydrationBoundary>
+  );
+}

package/templates/nextjs-app/_arch/mes/src/components/layouts/RootLayout.tsx

@@ -0,0 +1,13 @@
+import { GlobalProvider } from '@/components/providers';
+
+export function RootLayout({ children }: { children: React.ReactNode }) {
+  // `lang` 은 앱의 주 언어. 영어 등 다른 언어 우선이면 'en' 으로 바꾸거나
+  // next-intl 플러그인을 활성화해 라우트 기반 자동 분기로 전환하세요.
+  return (
+    <html lang='ko' suppressHydrationWarning>
+      <body>
+        <GlobalProvider>{children}</GlobalProvider>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs-app/_arch/mes/src/components/providers/GlobalProvider/index.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Toaster } from 'sonner';
+
+import { QueryClientProvider } from '../tanstack/QueryClientProvider';
+import { TanstackDevtoolsProvider } from '../tanstack/TanstackDevtoolsProvider';
+import { ThemeProvider } from '../theme/ThemeProvider';
+
+interface GlobalProviderProps {
+  children: ReactNode;
+}
+
+export function GlobalProvider({ children }: GlobalProviderProps) {
+  return (
+    <ThemeProvider>
+      <QueryClientProvider>
+        <TanstackDevtoolsProvider>
+          <Toaster />
+          {children}
+        </TanstackDevtoolsProvider>
+      </QueryClientProvider>
+    </ThemeProvider>
+  );
+}

package/templates/nextjs-app/_arch/mes/src/components/providers/index.tsx

@@ -0,0 +1 @@
+export { GlobalProvider } from './GlobalProvider';

package/templates/nextjs-app/_arch/mes/src/components/providers/tanstack/QueryClientProvider.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { QueryClientProvider as TanstackQueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+
+import { getBrowserQueryClient } from '@/lib/api/queryClient';
+
+export function QueryClientProvider({ children }: { children: ReactNode }) {
+  return (
+    <TanstackQueryClientProvider client={getBrowserQueryClient()}>
+      {children}
+    </TanstackQueryClientProvider>
+  );
+}

package/templates/nextjs-app/_arch/mes/src/components/providers/tanstack/TanstackDevtoolsProvider.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { ReactNode } from 'react';
+
+export function TanstackDevtoolsProvider({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </>
+  );
+}

package/templates/nextjs-app/_arch/mes/src/components/providers/theme/ThemeProvider.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import type { ReactNode } from 'react';
+
+/**
+ * 다크/라이트 테마 — next-themes ThemeProvider 를 wrap.
+ *
+ * - `attribute='class'` — `<html class="dark">` 토글 (Tailwind dark variant 와 호환)
+ * - `defaultTheme='system'` + `enableSystem` — OS 설정에 자동 동기화. light/dark 만
+ *   노출하려면 `enableSystem` 을 false 로
+ * - `disableTransitionOnChange` — 토글 순간 transition 깜빡임 차단
+ *
+ * useTheme 는 next-themes 에서 직접 import: `import { useTheme } from 'next-themes'`
+ */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute='class'
+      defaultTheme='system'
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}