sh-ui-cli 0.91.0 → 0.93.0

package/data/changelog/versions.json

@@ -2,6 +2,35 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.93.0",
+      "date": "2026-05-14",
+      "title": "vite 프리셋 Sentry observability opt-in (--observability sentry)",
+      "type": "minor",
+      "highlights": [
+        "**`--observability sentry` 옵션** — vite preset 에 opt-in Sentry 셋업 추가. `@sentry/react` (deps) + `@sentry/vite-plugin` (devDeps) + `Sentry.init({...})` (DSN 가드, browserTracing + replay PII 보호 디폴트) + `SentryProvider` (ErrorBoundary wrap) + `.env.example` 자동 emit. DSN 빈 값이면 init 자동 skip — dev/CI 안전. ai-org 처럼 error tracking 부터 들어가는 워크로드 5분 boilerplate 제거.",
+        "**enum 디자인** — `observability: z.enum(['none', 'sentry'])` future-extensible. GlitchTip 등 Sentry-protocol 호환 서비스는 같은 SDK + DSN 만 변경하면 동작 (라이브러리 lock-in 아님). 추후 `glitchtip` / `bugsnag` 등 enum 확장 자연스럽게.",
+        "**Source map upload 자동 셋업** — `vite.config.ts` 에 `sentryVitePlugin({ org, project, authToken, disable: !SENTRY_AUTH_TOKEN })` 자동 추가 + `build.sourcemap: true`. SENTRY_AUTH_TOKEN 이 env 에 있으면 빌드 시 source map 자동 업로드, 없으면 plugin disable. CI 친화.",
+        "**i18n + Sentry 동시 시 wrapper 순서 보장** — SentryProvider 가 OUTERMOST (모든 children error 캐치) → I18nProvider → ThemeProvider → QueryClientProvider. Smoke V20 가 wrapper index 순서 단언으로 회귀 가드.",
+        "**Vite types 자동 reference** — emit 된 `sentry.ts` 가 `/// <reference types=\"vite/client\" />` triple-slash 로 `import.meta.env.VITE_SENTRY_DSN` 타입 정확. 사용자 tsconfig 손댈 필요 X.",
+        "**guards + 회귀** — `observability + platform !== 'vite'` 조합은 CLI + MCP 양쪽에서 명시적 Korean 에러. Smoke V18 (positive), V19 (default opt-out 회귀), V20 (i18n + sentry combo wrapper 순서). docs `/create` 페이지도 observability 토글 노출."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.93.0"
+    },
+    {
+      "version": "0.92.0",
+      "date": "2026-05-14",
+      "title": "vite 프리셋 react-i18next i18n opt-in (--i18n + --locales)",
+      "type": "minor",
+      "highlights": [
+        "**`--i18n react-i18next` 옵션** — vite preset 에 opt-in i18n 셋업 추가. `sh-ui-cli create --platform vite --i18n react-i18next --locales ko,en` 한 줄로 i18next + react-i18next + browser-languagedetector + http-backend 셋업 + `I18nProvider` + locale JSON 자동 emit. 디폴트 `'none'` 이라 기존 사용자 영향 X. ai-org 처럼 i18n 부터 들어가는 워크로드의 30 초 boilerplate 제거.",
+        "**Arch-aware 파일 위치** — fsd 일 때 `src/shared/i18n/` + `src/app/providers/I18nProvider.tsx`, flat 일 때 `src/lib/i18n/` + `src/components/providers/I18nProvider.tsx`. `emitI18n` 헬퍼가 arch descriptor 의 `paths`/`aliases` 기반 경로 자동 결정. 사용자가 `import i18n from '@/shared/i18n'` 또는 `'@/lib/i18n'` 즉시 가능.",
+        "**Monorepo + Tauri + i18n 조합 모두 동작** — `--structure monorepo --tauri --i18n react-i18next` 한 번에 OK. `apps/{appName}/` 안에 `src-tauri/` 와 `src/shared/i18n/` 가 같이 emit, 각 의존성이 app 의 `package.json` 에 정확히. `sh-ui-cli add-app` 도 `--i18n` 받음.",
+        "**Locale 시드 정책** — 첫 locale (fallbackLng) 만 `{ greeting: 'Hello World', app_title: 'sh-ui app' }` 시드, 나머지는 `{}` 빈 객체로 시작. 사용자가 키 채우는 흐름 자연스럽게. backend (`i18next-http-backend`) 가 `/locales/{lng}/{ns}.json` lazy-load 하므로 dev 부터 namespace 분리 + lazy 동작.",
+        "**가드 + 회귀** — `i18n + platform !== 'vite'` 조합은 CLI + MCP 양쪽에서 명시적 Korean 에러. Smoke V15 (fsd + ko,en happy path), V16 (i18n=none 디폴트 회귀 가드 — 어떤 i18n 파일도 안 들어감), V17 (flat + ko,en,ja — 3개 locale 중 첫 locale 만 시드, ja 는 빈 객체). docs `/create` 페이지도 i18n 토글 + locales 인풋 노출."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.92.0"
+    },
     {
       "version": "0.91.0",
       "date": "2026-05-14",

package/package.json

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

package/src/api.d.ts

@@ -141,6 +141,12 @@ export interface DescribeTemplateOptions {
   appName?: string;
   /** platform=vite + structure=standalone 일 때 Tauri 2.x 셸(`src-tauri/`) 동시 emit. */
   tauri?: boolean;
+  /** vite 전용 — react-i18next opt-in. v0.92.0+ */
+  i18n?: 'none' | 'react-i18next';
+  /** i18n 활성화 시 생성할 locale 코드 (comma-separated). 기본 'ko,en' */
+  locales?: string;
+  /** vite 전용 — Sentry observability opt-in. v0.93.0+ */
+  observability?: 'none' | 'sentry';
 }
 
 export interface DescribeTemplateGroup {

package/src/constants.js

@@ -54,3 +54,14 @@ export const INIT_DEFAULTS = {
   mode: 'light-dark',
   cssFramework: CSS_FRAMEWORK_DEFAULT,
 };
+
+// ─── i18n (vite preset 전용 — v0.92.0+) ───
+// 'none' 디폴트 — opt-in 으로 react-i18next 설치 + 셋업. 향후 lingui / react-intl 등 추가 시 enum 확장.
+export const I18N_LIBRARIES = ['none', 'react-i18next'];
+export const I18N_DEFAULT = 'none';
+export const I18N_DEFAULT_LOCALES = 'ko,en';
+
+// ─── observability (vite preset 전용 — v0.93.0+) ───
+// 'none' 디폴트 — opt-in 으로 @sentry/react + @sentry/vite-plugin 설치 + 셋업.
+// GlitchTip self-hosted 도 같은 SDK — DSN 만 변경. 향후 bugsnag 등 추가 시 enum 확장.
+export const OBSERVABILITY_PROVIDERS = ['none', 'sentry'];

package/src/create/cli-args.js

@@ -3,6 +3,8 @@ import {
   CREATE_STRUCTURES,
   CSS_FRAMEWORKS_SUPPORTED,
   CSS_FRAMEWORKS_PLANNED,
+  I18N_LIBRARIES,
+  OBSERVABILITY_PROVIDERS,
 } from '../constants.js';
 import { allPlugins } from './plugins/index.js';
 import { allArchitectures } from './architectures/index.js';
@@ -12,7 +14,7 @@ const VALID_STRUCTURES = CREATE_STRUCTURES;
 const VALID_PLUGINS = allPlugins.map((p) => p.name);
 const VALID_ARCHES = allArchitectures.map((a) => a.name);
 
-const VALUE_FLAGS = ['platform', 'structure', 'plugins', 'theme', 'app', 'css', 'arch', 'port'];
+const VALUE_FLAGS = ['platform', 'structure', 'plugins', 'theme', 'app', 'css', 'arch', 'port', 'i18n', 'locales', 'observability'];
 const BOOL_FLAGS = ['yes', 'help', 'dry-run', 'tauri'];
 
 const SUBCOMMANDS = ['add-app', 'add-component'];
@@ -75,6 +77,12 @@ export const parseArgs = (argv) => {
         `--arch 는 ${VALID_ARCHES.join('/')} 중 하나여야 함 (받은 값: ${value})`,
       );
     }
+    if (name === 'i18n' && !I18N_LIBRARIES.includes(value)) {
+      throw new Error(`--i18n 은 ${I18N_LIBRARIES.join('/')} 중 하나여야 함 (받은 값: ${value})`);
+    }
+    if (name === 'observability' && !OBSERVABILITY_PROVIDERS.includes(value)) {
+      throw new Error(`--observability 는 ${OBSERVABILITY_PROVIDERS.join('/')} 중 하나여야 함 (받은 값: ${value})`);
+    }
     if (name === 'css' && !CSS_FRAMEWORKS_SUPPORTED.includes(value)) {
       // planned 값은 '곧 옵니다' 신호로 분기 — 사용자 의도가 더 명확히 전달.
       if (CSS_FRAMEWORKS_PLANNED.includes(value)) {

package/src/create/describeTemplate.js

@@ -36,6 +36,9 @@ import { CSS_FRAMEWORK_DEFAULT } from '../constants.js';
  * @property {string} [projectName]
  * @property {string} [appName]                       monorepo 첫 앱 이름. 기본 'web'
  * @property {boolean} [tauri]                        platform=vite (standalone/monorepo 둘 다) 일 때 Tauri 2.x 셸 같이 emit
+ * @property {'none'|'react-i18next'} [i18n]          vite 전용 — react-i18next 셋업
+ * @property {string} [locales]                       i18n 활성화 시 생성할 locale 코드 (comma-separated, default 'ko,en')
+ * @property {'none'|'sentry'} [observability]        vite 전용 — Sentry 셋업 (v0.93.0+)
  */
 
 /**
@@ -64,6 +67,9 @@ export function describeTemplate(opts = {}) {
     cssFramework = CSS_FRAMEWORK_DEFAULT,
     appName: rawAppName = 'web',
     tauri = false,
+    i18n = 'none',
+    locales = 'ko,en',
+    observability = 'none',
   } = opts;
 
   if (platform === 'flutter') {
@@ -99,6 +105,30 @@ export function describeTemplate(opts = {}) {
         const tauriFiles = tauriTpl.base.map((p) => `src-tauri/${p}`);
         groups.push(makeGroup('tauri', 'Tauri 셸 (src-tauri/)', tauriFiles));
       }
+      if (i18n === 'react-i18next') {
+        const isFsd = safeArchName === 'fsd';
+        const i18nBase = isFsd ? 'src/shared/i18n' : 'src/lib/i18n';
+        const providersBase = isFsd ? 'src/app/providers' : 'src/components/providers';
+        const localesArr = parseLocalesString(locales);
+        const i18nFiles = [
+          `${i18nBase}/config.ts`,
+          `${i18nBase}/index.ts`,
+          ...localesArr.map((lng) => `${i18nBase}/locales/${lng}/common.json`),
+          `${providersBase}/I18nProvider.tsx`,
+        ];
+        groups.push(makeGroup('i18n', `i18n (${i18n})`, i18nFiles));
+      }
+      if (observability === 'sentry') {
+        const isFsd = safeArchName === 'fsd';
+        const obsBase = isFsd ? 'src/shared/observability' : 'src/lib/observability';
+        const providersBase = isFsd ? 'src/app/providers' : 'src/components/providers';
+        groups.push(makeGroup('sentry', `Sentry observability`, [
+          `${obsBase}/sentry.ts`,
+          `${obsBase}/index.ts`,
+          `${providersBase}/SentryProvider.tsx`,
+          '.env.example',
+        ]));
+      }
       return finalize(groups);
     }
 
@@ -149,6 +179,32 @@ export function describeTemplate(opts = {}) {
       groups.push(makeGroup('tauri', `Tauri 셸 (apps/${appName}/src-tauri/)`, tauriFiles));
     }
 
+    if (i18n === 'react-i18next') {
+      const isFsd = safeArchName === 'fsd';
+      const i18nBase = isFsd ? 'src/shared/i18n' : 'src/lib/i18n';
+      const providersBase = isFsd ? 'src/app/providers' : 'src/components/providers';
+      const localesArr = parseLocalesString(locales);
+      const i18nFiles = [
+        `apps/${appName}/${i18nBase}/config.ts`,
+        `apps/${appName}/${i18nBase}/index.ts`,
+        ...localesArr.map((lng) => `apps/${appName}/${i18nBase}/locales/${lng}/common.json`),
+        `apps/${appName}/${providersBase}/I18nProvider.tsx`,
+      ];
+      groups.push(makeGroup('i18n', `i18n (${i18n}, apps/${appName}/)`, i18nFiles));
+    }
+
+    if (observability === 'sentry') {
+      const isFsd = safeArchName === 'fsd';
+      const obsBase = isFsd ? 'src/shared/observability' : 'src/lib/observability';
+      const providersBase = isFsd ? 'src/app/providers' : 'src/components/providers';
+      groups.push(makeGroup('sentry', `Sentry observability (apps/${appName}/)`, [
+        `apps/${appName}/${obsBase}/sentry.ts`,
+        `apps/${appName}/${obsBase}/index.ts`,
+        `apps/${appName}/${providersBase}/SentryProvider.tsx`,
+        `apps/${appName}/.env.example`,
+      ]));
+    }
+
     return finalize(groups);
   }
 
@@ -326,6 +382,14 @@ function makeGroup(id, label, paths) {
   return { id, label, paths: paths.slice() };
 }
 
+/** locales (string or string[]) 를 정규화 — generator.js 의 parseLocales 와 동일 규칙. */
+function parseLocalesString(s) {
+  if (Array.isArray(s)) return s;
+  if (typeof s !== 'string') return ['ko', 'en'];
+  const arr = s.split(',').map((x) => x.trim().toLowerCase()).filter((x) => /^[a-z]{2}(-[a-z]{2})?$/i.test(x));
+  return arr.length > 0 ? arr : ['ko', 'en'];
+}
+
 /**
  * 후처리: 그룹 간 dedupe (같은 path 가 여러 그룹에 있으면 마지막 그룹이 소유),
  * 그룹 안에서 path 정렬, 빈 그룹 제거, 전체 파일 목록 계산.

package/src/create/generator.js

@@ -224,6 +224,20 @@ export async function createProject(options = {}) {
     }
   }
 
+  // i18n 옵션도 vite preset 전용. v0.92.0+.
+  if (options.i18n && options.i18n !== 'none' && platform !== 'vite') {
+    throw new Error(
+      `i18n='${options.i18n}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${platform}). --i18n none 또는 --platform vite 사용.`,
+    );
+  }
+
+  // observability 옵션도 vite preset 전용. v0.93.0+.
+  if (options.observability && options.observability !== 'none' && platform !== 'vite') {
+    throw new Error(
+      `observability='${options.observability}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${platform}). --observability none 또는 --platform vite 사용.`,
+    );
+  }
+
   // arch 결정 — platform 확정 후. 사용자가 --arch 미지정 시:
   //   - next  → DEFAULT_ARCH ('fsd')
   //   - flutter → 현재 Flutter arch 디스크립터 없음 → null. 미래에 flutter arch 추가되면
@@ -344,9 +358,21 @@ export async function createProject(options = {}) {
     });
 
     if (projectType === 'standalone') {
-      await generateViteStandalone(targetDir, projectName, theme, cssFramework, arch, themeBase, { tauri: !!options.tauri });
+      await generateViteStandalone(targetDir, projectName, theme, cssFramework, arch, themeBase, {
+        tauri: !!options.tauri,
+        i18n: options.i18n ?? 'none',
+        locales: options.locales ?? 'ko,en',
+        observability: options.observability ?? 'none',
+      });
     } else {
-      await generateMonorepo(targetDir, projectName, [], { yes: options.yes, theme, css: cssFramework, arch, themeBase, platform: 'vite', tauri: options.tauri });
+      await generateMonorepo(targetDir, projectName, [], {
+        yes: options.yes, theme, css: cssFramework, arch, themeBase,
+        platform: 'vite',
+        tauri: options.tauri,
+        i18n: options.i18n ?? 'none',
+        locales: options.locales ?? 'ko,en',
+        observability: options.observability ?? 'none',
+      });
     }
 
     await finalizeProject(targetDir, { dryRun: options.dryRun });
@@ -507,6 +533,16 @@ export async function addApp(options = {}) {
       `tauri 는 platform=vite 일 때만 지원합니다 (현재 platform=${platform}). --platform vite 사용 또는 tauri 옵션 제거.`,
     );
   }
+  if (options.i18n && options.i18n !== 'none' && platform !== 'vite') {
+    throw new Error(
+      `i18n='${options.i18n}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${platform}).`,
+    );
+  }
+  if (options.observability && options.observability !== 'none' && platform !== 'vite') {
+    throw new Error(
+      `observability='${options.observability}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${platform}). --observability none 또는 --platform vite 사용.`,
+    );
+  }
 
   const appName = validateProjectName(
     options.name ?? await input({
@@ -557,7 +593,12 @@ export async function addApp(options = {}) {
   const arch = assertArchPlatformCompat(DEFAULT_ARCH, platform);
 
   if (platform === 'vite') {
-    await generateViteApp(appsDir, appName, port, arch, css, { tauri: !!options.tauri });
+    await generateViteApp(appsDir, appName, port, arch, css, {
+      tauri: !!options.tauri,
+      i18n: options.i18n ?? 'none',
+      locales: options.locales ?? 'ko,en',
+      observability: options.observability ?? 'none',
+    });
   } else {
     await generateApp(appsDir, appName, port, plugins, arch, css);
   }
@@ -820,7 +861,7 @@ async function generateStandalone(targetDir, projectName, plugins, theme, css, a
   await patchShUiConfig(path.join(targetDir, 'sh-ui.config.json'), css, themeBase);
 }
 
-async function generateViteStandalone(targetDir, projectName, theme, css, arch, themeBase, { tauri = false } = {}) {
+async function generateViteStandalone(targetDir, projectName, theme, css, arch, themeBase, { tauri = false, i18n = 'none', locales = 'ko,en', observability = 'none' } = {}) {
   // 베이스 (arch-neutral) + arch 오버레이 — generateStandalone 과 같은 패턴.
   await fs.copy(path.join(TEMPLATES_DIR, 'vite-standalone'), targetDir, {
     filter: (src) => !src.includes(`${path.sep}_arch${path.sep}`) && !src.endsWith(`${path.sep}_arch`),
@@ -861,6 +902,15 @@ async function generateViteStandalone(targetDir, projectName, theme, css, arch,
     await emitTauri(targetDir, projectName, { devPort: 5173 });
     await patchViteForTauri(targetDir, { port: 5173 });
   }
+
+  if (i18n === 'react-i18next') {
+    const localesArr = parseLocales(locales);
+    await emitI18n(targetDir, { arch, locales: localesArr });
+  }
+
+  if (observability === 'sentry') {
+    await emitSentry(targetDir, { arch, i18nActive: i18n === 'react-i18next' });
+  }
 }
 
 /**
@@ -958,7 +1008,321 @@ export default defineConfig({
   }
 }
 
-async function generateMonorepo(targetDir, projectName, plugins, { yes = false, theme, css, arch, themeBase, platform = 'next', tauri = false } = {}) {
+/**
+ * react-i18next 셋업을 emit. arch 에 따라 경로가 달라짐:
+ *  - fsd: src/shared/i18n/* + src/app/providers/I18nProvider.tsx
+ *  - flat: src/lib/i18n/* + src/components/providers/I18nProvider.tsx
+ *
+ * 1. i18n/config.ts + i18n/index.ts + locales/{locale}/common.json 생성
+ * 2. providers/I18nProvider.tsx 생성 (<I18nextProvider> wrapper)
+ * 3. GlobalProvider/index.tsx 를 I18nProvider 로 wrapping 하도록 rewrite
+ * 4. package.json 에 i18next 패키지 deps 추가
+ *
+ * @param {string} targetDir — 앱 디렉토리 (standalone 이면 프로젝트 루트, monorepo 이면 apps/{name}/)
+ * @param {object} opts
+ * @param {object} opts.arch — arch descriptor (name + paths/aliases)
+ * @param {string[]} opts.locales — 생성할 locale 코드 배열 (예: ['ko', 'en'])
+ */
+async function emitI18n(targetDir, { arch, locales }) {
+  if (!locales || locales.length === 0) {
+    throw new Error('emitI18n: locales 배열이 비어 있습니다.');
+  }
+
+  const isFsd = arch.name === 'fsd';
+  const i18nDirRel = isFsd ? 'src/shared/i18n' : 'src/lib/i18n';
+  const i18nAlias = isFsd ? '@/shared/i18n' : '@/lib/i18n';
+  const providersDirRel = isFsd ? 'src/app/providers' : 'src/components/providers';
+  const apiAlias = isFsd ? '@/shared/api/queryClient' : '@/lib/api/queryClient';
+
+  const i18nDir = path.join(targetDir, i18nDirRel);
+  await fs.ensureDir(i18nDir);
+  await fs.ensureDir(path.join(i18nDir, 'locales'));
+
+  const localesArr = JSON.stringify(locales);
+  const fallbackLng = locales[0];
+  const configTs = `import i18n from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import HttpBackend from 'i18next-http-backend';
+import { initReactI18next } from 'react-i18next';
+
+// 클라이언트 측 lazy-load — 빌드 산출물에서 public/locales/{lng}/{ns}.json 경로로 fetch.
+// dev 에선 vite 가 ${i18nDirRel}/locales/* 를 /locales 로 serve (vite.config 의 publicDir 기본 'public').
+// 프로덕션 빌드 시 사용자가 vite-plugin-static-copy 등으로 public/locales 로 카피하거나
+// 처음부터 public/locales 에 두면 됨. 디폴트 경로 ${i18nDirRel}/locales 는 dev 편의용.
+
+i18n
+  .use(HttpBackend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: '${fallbackLng}',
+    supportedLngs: ${localesArr},
+    ns: ['common'],
+    defaultNS: 'common',
+    interpolation: { escapeValue: false },
+    backend: {
+      loadPath: '/locales/{{lng}}/{{ns}}.json',
+    },
+    detection: {
+      order: ['localStorage', 'navigator', 'htmlTag'],
+      caches: ['localStorage'],
+    },
+  });
+
+export default i18n;
+`;
+  await fs.writeFile(path.join(i18nDir, 'config.ts'), configTs);
+
+  await fs.writeFile(
+    path.join(i18nDir, 'index.ts'),
+    `export { default } from './config';\n`,
+  );
+
+  for (const lng of locales) {
+    const localeDir = path.join(i18nDir, 'locales', lng);
+    await fs.ensureDir(localeDir);
+    const seed = lng === fallbackLng
+      ? { greeting: 'Hello World', app_title: 'sh-ui app' }
+      : {};
+    await fs.writeFile(
+      path.join(localeDir, 'common.json'),
+      JSON.stringify(seed, null, 2) + '\n',
+    );
+  }
+
+  const providersDir = path.join(targetDir, providersDirRel);
+  await fs.ensureDir(providersDir);
+  const i18nProvider = `import { type ReactNode } from 'react';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '${i18nAlias}';
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}
+`;
+  await fs.writeFile(path.join(providersDir, 'I18nProvider.tsx'), i18nProvider);
+
+  const globalProviderPath = path.join(targetDir, providersDirRel, 'GlobalProvider', 'index.tsx');
+  const globalProvider = `import { QueryClientProvider } from '@tanstack/react-query';
+import { type ReactNode, useState } from 'react';
+import { createQueryClient } from '${apiAlias}';
+import { ThemeProvider } from '../theme/ThemeProvider';
+import { I18nProvider } from '../I18nProvider';
+
+export function GlobalProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => createQueryClient());
+  return (
+    <I18nProvider>
+      <ThemeProvider>
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      </ThemeProvider>
+    </I18nProvider>
+  );
+}
+`;
+  await fs.writeFile(globalProviderPath, globalProvider);
+
+  const pkgPath = path.join(targetDir, 'package.json');
+  const pkg = await fs.readJson(pkgPath);
+  pkg.dependencies = pkg.dependencies ?? {};
+  pkg.dependencies['i18next'] = '^23.15.1';
+  pkg.dependencies['i18next-browser-languagedetector'] = '^8.0.0';
+  pkg.dependencies['i18next-http-backend'] = '^2.7.1';
+  pkg.dependencies['react-i18next'] = '^15.1.0';
+  pkg.dependencies = sortObjectKeys(pkg.dependencies);
+  await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+}
+
+/**
+ * locales 인자 (string or string[]) 를 정규화. comma-separated 또는 array 모두 받음.
+ * 빈 값 / 잘못된 형식이면 디폴트 ['ko', 'en'] fallback.
+ */
+function parseLocales(input) {
+  let arr;
+  if (Array.isArray(input)) arr = input;
+  else if (typeof input === 'string') arr = input.split(',');
+  else arr = ['ko', 'en'];
+  const cleaned = arr.map((s) => s.trim().toLowerCase()).filter((s) => /^[a-z]{2}(-[a-z]{2})?$/i.test(s));
+  return cleaned.length > 0 ? cleaned : ['ko', 'en'];
+}
+
+/**
+ * Sentry observability 셋업 emit (v0.93.0+). vite preset 전용 opt-in.
+ *
+ * - shared/observability/sentry.ts — Sentry.init (DSN 있을 때만)
+ * - shared/observability/index.ts  — Sentry + ErrorBoundary re-export
+ * - app/providers/SentryProvider.tsx — ErrorBoundary wrapper
+ * - GlobalProvider 재작성 — Sentry > [I18n?] > Theme > Query 순서
+ * - package.json — @sentry/react + @sentry/vite-plugin 추가
+ * - vite.config.ts — sentryVitePlugin 삽입 + sourcemap: true
+ * - .env.example — Sentry 변수 안내 블록 추가
+ *
+ * @param {string} targetDir — 앱 디렉토리
+ * @param {object} opts
+ * @param {object} opts.arch — arch descriptor
+ * @param {boolean} [opts.i18nActive] — i18n 도 같이 켜져 있는지 (GlobalProvider wrapping 순서)
+ */
+async function emitSentry(targetDir, { arch, i18nActive = false }) {
+  const isFsd = arch.name === 'fsd';
+  const obsDirRel = isFsd ? 'src/shared/observability' : 'src/lib/observability';
+  const obsAlias = isFsd ? '@/shared/observability' : '@/lib/observability';
+  const providersDirRel = isFsd ? 'src/app/providers' : 'src/components/providers';
+  const apiAlias = isFsd ? '@/shared/api/queryClient' : '@/lib/api/queryClient';
+
+  const obsDir = path.join(targetDir, obsDirRel);
+  await fs.ensureDir(obsDir);
+
+  const sentryTs = `/// <reference types="vite/client" />
+import * as Sentry from '@sentry/react';
+
+// VITE_SENTRY_DSN 이 있을 때만 init — 로컬 dev 에선 자동 skip.
+// GlitchTip self-hosted 도 같은 SDK — DSN 만 변경.
+if (import.meta.env.VITE_SENTRY_DSN) {
+  Sentry.init({
+    dsn: import.meta.env.VITE_SENTRY_DSN,
+    release: import.meta.env.VITE_APP_VERSION,
+    environment: import.meta.env.MODE,
+    tracesSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
+    replaysSessionSampleRate: 0,
+    integrations: [
+      Sentry.browserTracingIntegration(),
+      Sentry.replayIntegration({ maskAllText: true, blockAllMedia: true }),
+    ],
+  });
+}
+
+export { Sentry };
+`;
+  await fs.writeFile(path.join(obsDir, 'sentry.ts'), sentryTs);
+
+  await fs.writeFile(
+    path.join(obsDir, 'index.ts'),
+    `export { Sentry } from './sentry';\nexport { ErrorBoundary } from '@sentry/react';\n`,
+  );
+
+  const providersDir = path.join(targetDir, providersDirRel);
+  await fs.ensureDir(providersDir);
+  const sentryProvider = `import { type ReactNode } from 'react';
+import { ErrorBoundary } from '${obsAlias}';
+
+function Fallback({ error }: { error: unknown }) {
+  return (
+    <div style={{ padding: '2rem', textAlign: 'center' }}>
+      <h1 style={{ fontSize: '1.5rem', fontWeight: 600 }}>오류가 발생했습니다</h1>
+      <p style={{ marginTop: '0.5rem', color: 'var(--foreground-muted)' }}>
+        {error instanceof Error ? error.message : '알 수 없는 오류'}
+      </p>
+    </div>
+  );
+}
+
+export function SentryProvider({ children }: { children: ReactNode }) {
+  return (
+    <ErrorBoundary fallback={({ error }) => <Fallback error={error} />}>
+      {children}
+    </ErrorBoundary>
+  );
+}
+`;
+  await fs.writeFile(path.join(providersDir, 'SentryProvider.tsx'), sentryProvider);
+
+  // GlobalProvider rewrite — Sentry outermost, then optional I18n, then Theme + Query.
+  const globalProviderPath = path.join(targetDir, providersDirRel, 'GlobalProvider', 'index.tsx');
+  const i18nImport = i18nActive ? `import { I18nProvider } from '../I18nProvider';\n` : '';
+  const innerOpen = i18nActive ? '      <I18nProvider>\n        ' : '      ';
+  const innerClose = i18nActive ? '\n      </I18nProvider>' : '';
+  const globalProvider = `import { QueryClientProvider } from '@tanstack/react-query';
+import { type ReactNode, useState } from 'react';
+import { createQueryClient } from '${apiAlias}';
+import { ThemeProvider } from '../theme/ThemeProvider';
+${i18nImport}import { SentryProvider } from '../SentryProvider';
+
+export function GlobalProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => createQueryClient());
+  return (
+    <SentryProvider>
+${innerOpen}<ThemeProvider>
+          <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+        </ThemeProvider>${innerClose}
+    </SentryProvider>
+  );
+}
+`;
+  await fs.writeFile(globalProviderPath, globalProvider);
+
+  // package.json deps
+  const pkgPath = path.join(targetDir, 'package.json');
+  const pkg = await fs.readJson(pkgPath);
+  pkg.dependencies = pkg.dependencies ?? {};
+  pkg.devDependencies = pkg.devDependencies ?? {};
+  pkg.dependencies['@sentry/react'] = '^8.45.0';
+  pkg.devDependencies['@sentry/vite-plugin'] = '^2.22.7';
+  pkg.dependencies = sortObjectKeys(pkg.dependencies);
+  pkg.devDependencies = sortObjectKeys(pkg.devDependencies);
+  await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+
+  await patchViteConfigForSentry(targetDir);
+
+  // .env.example
+  const envExamplePath = path.join(targetDir, '.env.example');
+  const envBlock = `# Sentry observability (v0.93.0+) — 비워두면 init 자동 skip.
+VITE_SENTRY_DSN=
+VITE_APP_VERSION=
+# Source map upload (vite build 시).
+SENTRY_AUTH_TOKEN=
+SENTRY_ORG=
+SENTRY_PROJECT=
+`;
+  if (await fs.pathExists(envExamplePath)) {
+    const existing = await fs.readFile(envExamplePath, 'utf-8');
+    if (!existing.includes('VITE_SENTRY_DSN')) {
+      await fs.writeFile(envExamplePath, existing + '\n' + envBlock);
+    }
+  } else {
+    await fs.writeFile(envExamplePath, envBlock);
+  }
+}
+
+async function patchViteConfigForSentry(targetDir) {
+  const viteCfgPath = path.join(targetDir, 'vite.config.ts');
+  if (!(await fs.pathExists(viteCfgPath))) {
+    throw new Error(`vite.config.ts 가 ${targetDir} 에 없습니다.`);
+  }
+  let cfg = await fs.readFile(viteCfgPath, 'utf-8');
+
+  if (!cfg.includes("@sentry/vite-plugin")) {
+    cfg = cfg.replace(
+      /import { defineConfig } from 'vite';/,
+      `import { defineConfig } from 'vite';\nimport { sentryVitePlugin } from '@sentry/vite-plugin';`,
+    );
+  }
+
+  if (!cfg.includes("sentryVitePlugin(")) {
+    cfg = cfg.replace(
+      /(plugins:\s*\[[^\]]*?)(\s*\])/s,
+      (_, before, close) => {
+        const sep = /,\s*$/.test(before) ? ' ' : ', ';
+        return `${before}${sep}sentryVitePlugin({\n      org: process.env.SENTRY_ORG,\n      project: process.env.SENTRY_PROJECT,\n      authToken: process.env.SENTRY_AUTH_TOKEN,\n      disable: !process.env.SENTRY_AUTH_TOKEN,\n    })${close}`;
+      },
+    );
+  }
+
+  if (!cfg.includes("sourcemap:")) {
+    if (cfg.includes("server: {")) {
+      cfg = cfg.replace(/(\n\s*server:\s*\{)/, `\n  build: { sourcemap: true },$1`);
+    } else if (cfg.includes("plugins: [")) {
+      cfg = cfg.replace(
+        /(plugins:\s*\[[^\]]*?\][^,\n]*[,;]?\n)/s,
+        `$1  build: { sourcemap: true },\n`,
+      );
+    }
+  }
+
+  await fs.writeFile(viteCfgPath, cfg);
+}
+
+async function generateMonorepo(targetDir, projectName, plugins, { yes = false, theme, css, arch, themeBase, platform = 'next', tauri = false, i18n = 'none', locales = 'ko,en', observability = 'none' } = {}) {
   await fs.copy(path.join(TEMPLATES_DIR, 'monorepo'), targetDir);
 
   // Update root package.json
@@ -990,7 +1354,7 @@ async function generateMonorepo(targetDir, projectName, plugins, { yes = false,
 
   const appsDir = path.join(targetDir, 'apps', appName);
   if (platform === 'vite') {
-    await generateViteApp(appsDir, appName, port, arch, css, { tauri });
+    await generateViteApp(appsDir, appName, port, arch, css, { tauri, i18n, locales, observability });
   } else {
     await generateApp(appsDir, appName, port, plugins, arch, css);
   }
@@ -1091,7 +1455,7 @@ async function generateApp(targetDir, appName, port, plugins, arch, css = 'tailw
   }
 }
 
-async function generateViteApp(targetDir, appName, port, arch, css = 'tailwind', { tauri = false } = {}) {
+async function generateViteApp(targetDir, appName, port, arch, css = 'tailwind', { tauri = false, i18n = 'none', locales = 'ko,en', observability = 'none' } = {}) {
   // 베이스 (arch-neutral) + arch 오버레이 — generateApp 과 동일 패턴.
   await fs.copy(path.join(TEMPLATES_DIR, 'vite-app'), targetDir, {
     filter: (src) => !src.includes(`${path.sep}_arch${path.sep}`) && !src.endsWith(`${path.sep}_arch`),
@@ -1159,6 +1523,15 @@ async function generateViteApp(targetDir, appName, port, arch, css = 'tailwind',
     await emitTauri(targetDir, appName, { devPort });
     await patchViteForTauri(targetDir, { port: devPort });
   }
+
+  if (i18n === 'react-i18next') {
+    const localesArr = parseLocales(locales);
+    await emitI18n(targetDir, { arch, locales: localesArr });
+  }
+
+  if (observability === 'sentry') {
+    await emitSentry(targetDir, { arch, i18nActive: i18n === 'react-i18next' });
+  }
 }
 
 /**

package/src/create/index.mjs

@@ -17,8 +17,8 @@ const THEME_PRESETS_LIST = THEME_PRESET_NAMES.join('|');
 export const HELP_TEXT = `sh-ui create — sh-ui 프로젝트 스캐폴드 (Next.js / Flutter)
 
 사용법:
-  sh-ui create [name] [options]
-  sh-ui create add-app [name] [--port <n>] [--platform <next|vite>] [--plugins ..] [--theme ..] [--css ..] [--tauri]
+  sh-ui create [name] [options] [--observability <none|sentry>]
+  sh-ui create add-app [name] [--port <n>] [--platform <next|vite>] [--plugins ..] [--theme ..] [--css ..] [--tauri] [--i18n <react-i18next|none>] [--locales ko,en] [--observability <none|sentry>]
   sh-ui create add-component <name> [--app <name>]
 
 옵션:
@@ -28,6 +28,9 @@ export const HELP_TEXT = `sh-ui create — sh-ui 프로젝트 스캐폴드 (Next
   --plugins <a,b>                    플러그인 (${PLUGINS_LIST}). 미지정/"" → 없음
   --theme <preset|base64>            프리셋 이름(${THEME_PRESETS_LIST}) 또는 playground base64. 선택
   --css <${CSS_FRAMEWORKS_SUPPORTED.join('|')}>                        CSS 프레임워크. base 파일까지 분기 emit (tailwind/plain/css-modules)
+  --i18n <react-i18next|none>        vite 전용 — react-i18next 셋업 emit (i18n config + I18nProvider). 기본 none (v0.92.0+)
+  --locales <ko,en>                  i18n 활성화 시 생성할 locale 코드 (comma-separated). 기본 'ko,en'
+  --observability <none|sentry>      vite 전용 — Sentry 셋업 emit (@sentry/react + vite-plugin + SentryProvider). 기본 none (v0.93.0+)
   --yes                              디렉토리 덮어쓰기 + 모노레포 기본값 자동 채택
   --dry-run                          파일을 쓰지 않고 작성될 파일 목록만 출력
   -h, --help                         이 도움말
@@ -75,6 +78,9 @@ export async function runCreate(rest) {
       css: flags.css,
       platform: flags.platform,
       tauri: flags.tauri,
+      i18n: flags.i18n,
+      locales: flags.locales,
+      observability: flags.observability,
     });
   } else if (command === 'add-component') {
     // 호환 별칭 — 신규 진입점은 `sh-ui add <name>` (bin/sh-ui.mjs 가 walk-up 으로 라우팅).
@@ -92,6 +98,9 @@ export async function runCreate(rest) {
       theme: flags.theme,
       css: flags.css,
       tauri: flags.tauri,
+      i18n: flags.i18n,
+      locales: flags.locales,
+      observability: flags.observability,
       yes: flags.yes,
       dryRun: flags.dryRun,
     });

package/src/mcp.mjs

@@ -46,6 +46,9 @@ import {
   THEME_RADII,
   THEME_MODES,
   CSS_FRAMEWORKS_SUPPORTED,
+  I18N_LIBRARIES,
+  I18N_DEFAULT_LOCALES,
+  OBSERVABILITY_PROVIDERS,
 } from "./constants.js";
 import { allPlugins } from "./create/plugins/index.js";
 import { allArchitectures } from "./create/architectures/index.js";
@@ -402,6 +405,21 @@ export async function startMcpServer() {
             "Rust toolchain (`cargo`/`rustc`) 가 시스템에 설치되어 있어야 첫 `pnpm tauri dev` 가 동작. " +
             "기본 false.",
           ),
+        i18n: z.enum(I18N_LIBRARIES).optional()
+          .describe(
+            "i18n 라이브러리 — platform=vite 일 때만 의미. 'react-i18next' 로 설정 시 i18next + react-i18next + browser-languagedetector + http-backend 셋업 + " +
+            "providers/I18nProvider.tsx + locales/{lng}/common.json 자동 emit. 기본 'none'. v0.92.0+ 신규.",
+          ),
+        locales: z.string().optional()
+          .describe(
+            `i18n 활성화 시 생성할 locale 코드 (comma-separated, 2글자 또는 'ko-KR' 류). 기본 '${I18N_DEFAULT_LOCALES}'. 첫 locale 이 fallbackLng. ` +
+            "i18n='none' 이면 무시.",
+          ),
+        observability: z.enum(OBSERVABILITY_PROVIDERS).optional()
+          .describe(
+            "observability provider — platform=vite 일 때만 의미. 'sentry' 로 설정 시 @sentry/react + " +
+            "@sentry/vite-plugin 셋업 + SentryProvider + .env.example 자동 emit. GlitchTip self-hosted 도 같은 SDK — DSN 만 변경. 기본 'none'.",
+          ),
       },
     },
     async (input) => {
@@ -432,6 +450,24 @@ export async function startMcpServer() {
           }],
         };
       }
+      if (input.i18n && input.i18n !== "none" && input.platform !== "vite") {
+        return {
+          isError: true,
+          content: [{
+            type: "text",
+            text: `i18n='${input.i18n}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${input.platform}).`,
+          }],
+        };
+      }
+      if (input.observability && input.observability !== "none" && input.platform !== "vite") {
+        return {
+          isError: true,
+          content: [{
+            type: "text",
+            text: `observability='${input.observability}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${input.platform}).`,
+          }],
+        };
+      }
       const targetParent = resolveCwd(input);
       const targetDir = resolve(targetParent, input.name);
       if (existsSync(targetDir) && !input.force) {
@@ -458,6 +494,9 @@ export async function startMcpServer() {
             theme: input.theme,
             css: input.cssFramework,
             tauri: input.tauri,
+            i18n: input.i18n,
+            locales: input.locales,
+            observability: input.observability,
             yes: true, // 사전 검사를 마쳤으니 generator 의 confirm 프롬프트 우회
           }),
         );
@@ -492,6 +531,20 @@ export async function startMcpServer() {
           .describe("플랫폼 — next | vite. 미지정 시 기존 apps/* 의 deps 로 추론 (모든 앱이 같은 플랫폼이면 그것으로, 혼재면 명시 필요)."),
         tauri: z.boolean().optional()
           .describe("Tauri 2.x 데스크탑 셸 — platform=vite 일 때만 의미. apps/{name}/src-tauri/ 에 emit. 기본 false."),
+        i18n: z.enum(I18N_LIBRARIES).optional()
+          .describe(
+            "i18n 라이브러리 — platform=vite 일 때만 의미. 'react-i18next' 로 설정 시 i18next + react-i18next + " +
+            "browser-languagedetector + http-backend 셋업 + providers/I18nProvider.tsx 자동 emit. 기본 'none'. v0.92.0+ 신규.",
+          ),
+        locales: z.string().optional()
+          .describe(
+            `i18n 활성화 시 생성할 locale 코드 (comma-separated). 기본 '${I18N_DEFAULT_LOCALES}'. 첫 locale 이 fallbackLng. i18n='none' 이면 무시.`,
+          ),
+        observability: z.enum(OBSERVABILITY_PROVIDERS).optional()
+          .describe(
+            "observability provider — platform=vite 일 때만 의미. 'sentry' 로 설정 시 @sentry/react + " +
+            "@sentry/vite-plugin 셋업 + SentryProvider + .env.example 자동 emit. GlitchTip self-hosted 도 같은 SDK — DSN 만 변경. 기본 'none'.",
+          ),
         cwd: z.string().optional()
           .describe("모노레포 루트 (pnpm-workspace.yaml 있는 곳). 기본 process.cwd()"),
       },
@@ -511,6 +564,24 @@ export async function startMcpServer() {
           }],
         };
       }
+      if (input.i18n && input.i18n !== "none" && input.platform && input.platform !== "vite") {
+        return {
+          isError: true,
+          content: [{
+            type: "text",
+            text: `i18n='${input.i18n}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${input.platform}).`,
+          }],
+        };
+      }
+      if (input.observability && input.observability !== "none" && input.platform && input.platform !== "vite") {
+        return {
+          isError: true,
+          content: [{
+            type: "text",
+            text: `observability='${input.observability}' 은 platform=vite 일 때만 지원합니다 (현재 platform=${input.platform}).`,
+          }],
+        };
+      }
       const text = await captureConsole(() =>
         addApp({
           name: input.name,
@@ -520,6 +591,9 @@ export async function startMcpServer() {
           css: input.cssFramework,
           platform: input.platform,
           tauri: input.tauri,
+          i18n: input.i18n,
+          locales: input.locales,
+          observability: input.observability,
           cwd: resolveCwd(input),
         }),
       );