sh-ui-cli 0.76.0 → 0.78.0

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/src/create/generator.js

@@ -152,6 +152,41 @@ function assertNoTtyFlag(value, flagLabel) {
   }
 }
 
+// 프로젝트/앱 이름을 디렉토리명으로 안전하게 쓸 수 있는지 검증.
+// MCP (sh_ui_create_project / sh_ui_add_app) 는 LLM/외부 호출자가 임의의 문자열을 넘길 수
+// 있는데, 그 값이 그대로 `path.resolve(parent, name)` 에 들어간다. 검증이 없으면 '../'
+// 시퀀스로 부모 디렉토리를 벗어나 임의 위치에 파일 쓰기 / 기존 디렉토리 삭제(force+yes 경로)
+// 까지 가능. 진입부에서 한 번 막아 두면 CLI 와 MCP 양쪽 모두 자동 차단.
+export function validateProjectName(name, label = 'name') {
+  if (typeof name !== 'string' || name.length === 0) {
+    throw new Error(`${label} 가 비어있습니다.`);
+  }
+  if (name.length > 214) {
+    throw new Error(`${label} 가 너무 깁니다 (최대 214자).`);
+  }
+  // 선행 '.' 차단 → '..', '.ssh', '.git' 등 숨김/특수 디렉토리 봉쇄.
+  // 영숫자 + '.' + '_' + '-' 만 허용 → 경로 구분자('/', '\\'), NUL, 셸 메타문자 일괄 차단.
+  if (name.startsWith('.') || !/^[a-zA-Z0-9._-]+$/.test(name)) {
+    throw new Error(
+      `${label} '${name}' 가 유효하지 않습니다 — ` +
+      `영숫자, '_', '-', '.' 만 허용하며 '.' 로 시작할 수 없습니다 (디렉토리 이름만 허용, 경로 불가).`,
+    );
+  }
+  return name;
+}
+
+// 방어 가드 — validateProjectName 이 이미 traversal 을 차단하지만, 파괴적 작업(`fs.remove`)
+// 직전에 한 번 더 봉쇄해 향후 다른 진입점이 추가되거나 검증을 우회하는 코드 패스가 생겨도
+// 부모 디렉토리 밖을 건드리지 않도록 보장. parent 의 진짜 하위가 아니면 throw.
+function assertWithin(parent, child) {
+  const rel = path.relative(parent, child);
+  if (rel === '' || rel.startsWith('..') || path.isAbsolute(rel)) {
+    throw new Error(
+      `safety: 대상 경로 '${child}' 가 부모 '${parent}' 외부 또는 부모 그 자체입니다 — 처리 거부.`,
+    );
+  }
+}
+
 export async function createProject(options = {}) {
   if (!process.stdin.isTTY) {
     assertNoTtyFlag(options.name, '<project-name> (positional)');
@@ -161,10 +196,13 @@ export async function createProject(options = {}) {
     }
   }
 
-  const projectName = options.name ?? await input({
-    message: '프로젝트 이름:',
-    default: 'my-app',
-  });
+  const projectName = validateProjectName(
+    options.name ?? await input({
+      message: '프로젝트 이름:',
+      default: 'my-app',
+    }),
+    '프로젝트 이름',
+  );
 
   const platform = options.platform ?? await select({
     message: '플랫폼:',
@@ -247,6 +285,12 @@ export async function createProject(options = {}) {
     ? await fs.mkdtemp(path.join(os.tmpdir(), 'sh-ui-dry-'))
     : path.resolve(process.cwd(), projectName);
 
+  // 방어 가드 — projectName 검증을 이미 통과했어도 `fs.remove` 직전에 한 번 더 확인.
+  // dry-run 은 tmpdir 이라 parent 가 cwd 가 아니므로 스킵.
+  if (!options.dryRun) {
+    assertWithin(process.cwd(), targetDir);
+  }
+
   if (!options.dryRun && await fs.pathExists(targetDir)) {
     if (options.yes) {
       await fs.remove(targetDir);
@@ -361,10 +405,13 @@ export async function addApp(options = {}) {
     throw new Error('비대화형 환경(TTY 없음)에서는 name 이 필요합니다.');
   }
 
-  const appName = options.name ?? await input({
-    message: '앱 이름:',
-    default: 'web',
-  });
+  const appName = validateProjectName(
+    options.name ?? await input({
+      message: '앱 이름:',
+      default: 'web',
+    }),
+    '앱 이름',
+  );
 
   const port = options.port ?? (process.stdin.isTTY
     ? await input({ message: '포트 번호:', default: '3000' })
@@ -1504,8 +1551,13 @@ const stripLocalePrefix = (pathname: string): string => {
  * - \`/\` + HOME_REDIRECT 설정 → 해당 경로로 리다이렉트 (인증 가드보다 먼저)
  * - intl 이 로케일 prefix 처리 + NEXT_LOCALE 쿠키 set
  * - 그 위에 인증 가드 — 토큰 없고 인증 라우트도 아니면 /sign-in 으로 redirect
+ * - dev + \`NEXT_PUBLIC_DEV_AUTH_BYPASS=true\` → 가드 전체 우회 (개발용)
  * - AT 만료 검사나 refresh 는 하지 않는다 (BFF 가 처리)
  */
+const DEV_BYPASS =
+  process.env.NODE_ENV !== 'production' &&
+  process.env.NEXT_PUBLIC_DEV_AUTH_BYPASS === 'true';
+
 export default function proxy(req: NextRequest) {
   const intlRes = intl(req);
   const pathname = stripLocalePrefix(req.nextUrl.pathname);
@@ -1516,6 +1568,7 @@ export default function proxy(req: NextRequest) {
     return NextResponse.redirect(new URL(HOME_REDIRECT, req.url));
   }
 
+  if (DEV_BYPASS) return intlRes;
   if (isAuthRoute) return intlRes;
   if (!hasToken) return NextResponse.redirect(new URL('/sign-in', req.url));
 

package/src/create/plugins/authJwt.js

@@ -16,10 +16,14 @@ export const authJwtPlugin = {
   envVars: [
     '# Auth (auth-jwt)',
     'COOKIE_SECURE=false',
+    '# Dev 시 인증 가드 우회 — proxy.ts 가 이 flag 를 보면 /sign-in 으로 redirect 안 함.',
+    '# 실제 백엔드 연동 후엔 반드시 비워야 함 (또는 NODE_ENV 가 production 이면 무시).',
+    'NEXT_PUBLIC_DEV_AUTH_BYPASS=false',
   ],
 
   turboEnvVars: [
     'COOKIE_SECURE',
+    'NEXT_PUBLIC_DEV_AUTH_BYPASS',
   ],
 
   providerImports: [],
@@ -101,10 +105,15 @@ const HOME_REDIRECT = '';
  * - \`/\` + HOME_REDIRECT 설정 → 해당 경로로 리다이렉트
  * - AT 쿠키 없음 + 인증 라우트 아님 → /sign-in 으로 리다이렉트
  * - AT 쿠키 있음 또는 인증 라우트 → 통과
+ * - dev + \`NEXT_PUBLIC_DEV_AUTH_BYPASS=true\` → 가드 전체 우회 (개발용)
  *
  * AT 가 만료된 채 통과한 요청은 BFF (/api/proxy) 가 401 을 받아
  * refreshSession 으로 갱신을 시도한다.
  */
+const DEV_BYPASS =
+  process.env.NODE_ENV !== 'production' &&
+  process.env.NEXT_PUBLIC_DEV_AUTH_BYPASS === 'true';
+
 export default function proxy(req: NextRequest) {
   const { pathname } = req.nextUrl;
   const hasToken = !!req.cookies.get('accessToken')?.value;
@@ -114,6 +123,7 @@ export default function proxy(req: NextRequest) {
     return NextResponse.redirect(new URL(HOME_REDIRECT, req.url));
   }
 
+  if (DEV_BYPASS) return NextResponse.next();
   if (isAuthRoute) return NextResponse.next();
   if (!hasToken) return NextResponse.redirect(new URL('/sign-in', req.url));
 

package/src/create/plugins/nextIntl.js

@@ -271,8 +271,25 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
     "save": "저장",
     "delete": "삭제",
     "edit": "수정",
+    "create": "만들기",
     "search": "검색",
-    "back": "뒤로"
+    "back": "뒤로",
+    "name": "이름",
+    "description": "설명",
+    "empty": "아직 항목이 없습니다."
+  },
+  "nav": {
+    "home": "홈",
+    "settings": "설정"
+  },
+  "app": {
+    "title": "App"
+  },
+  "form": {
+    "required": "필수 항목입니다.",
+    "invalid": "올바른 값을 입력하세요.",
+    "submit": "제출",
+    "reset": "초기화"
   },
   "error": {
     "title": "오류가 발생했습니다",
@@ -302,8 +319,25 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
     "save": "Save",
     "delete": "Delete",
     "edit": "Edit",
+    "create": "Create",
     "search": "Search",
-    "back": "Back"
+    "back": "Back",
+    "name": "Name",
+    "description": "Description",
+    "empty": "No items yet."
+  },
+  "nav": {
+    "home": "Home",
+    "settings": "Settings"
+  },
+  "app": {
+    "title": "App"
+  },
+  "form": {
+    "required": "This field is required.",
+    "invalid": "Please enter a valid value.",
+    "submit": "Submit",
+    "reset": "Reset"
   },
   "error": {
     "title": "Something went wrong",

package/src/mcp.mjs

@@ -32,7 +32,7 @@ import { list } from "./list.mjs";
 import { remove } from "./remove.mjs";
 import { renameApp } from "./rename-app.mjs";
 import { migrateToV065 } from "./migrate-v065.mjs";
-import { createProject, addApp } from "./create/generator.js";
+import { createProject, addApp, validateProjectName } from "./create/generator.js";
 import {
   getRegistryRoot,
   getSummariesPath,
@@ -263,6 +263,59 @@ CLI \`sh-ui add <name>\` 은 monorepo 의 어느 디렉토리에서든 (apps/web
 - 다이얼로그 cancel 버튼을 \`<Button onClick={() => setOpen(false)}>\` 로 우회 → 정석은 \`<DialogClose render={<Button>취소</Button>} />\` (Base UI render prop)
 - table 외관의 카드 그리드를 raw \`<div>\` 로 → \`Card\` / \`CardHeader\` / \`CardContent\` / \`CardFooter\` 사용
 
+## Base UI 합성 함정 (Next.js App Router)
+
+Base UI 위에 빌드된 sh-ui 컴포넌트 (\`DropdownMenu\` / \`Select\` / \`Dialog\` / \`Popover\` / \`Tooltip\` / \`Combobox\`) 두 가지 알려진 패턴:
+
+### 1. SSR hydration warning (auto-id)
+
+Base UI 의 \`useId()\` 가 서버/클라이언트 ID 가 다를 수 있어 hydration mismatch 경고. 동작은 무해하지만 콘솔 노이즈.
+
+**회피 패턴 — mounted gate** (sidebar header 등 항상 보이는 trigger 에 적용):
+
+\`\`\`tsx
+const [mounted, setMounted] = useState(false);
+useEffect(() => setMounted(true), []);
+
+if (!mounted) {
+  // trigger 외형만 그대로, dropdown wrapping 없이 placeholder 렌더
+  return <div className={TRIGGER_CLS}>…</div>;
+}
+return (
+  <DropdownMenu>
+    <DropdownMenuTrigger className={TRIGGER_CLS}>…</DropdownMenuTrigger>
+    <DropdownMenuContent>…</DropdownMenuContent>
+  </DropdownMenu>
+);
+\`\`\`
+
+### 2. \`DropdownMenuItem\` 안에 \`DialogTrigger\` render 시 dialog 안 열림
+
+두 Base UI primitive 의 render-prop 체인이 onClick / onSelect 충돌.
+
+**잘못된 패턴**:
+\`\`\`tsx
+<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+  <DialogTrigger render={<Button>…</Button>} />   // 안 열림
+</DropdownMenuItem>
+\`\`\`
+
+**정석 패턴 — controlled dialog 를 sibling 으로**:
+\`\`\`tsx
+const [open, setOpen] = useState(false);
+return (
+  <>
+    <DropdownMenu>
+      …
+      <DropdownMenuItem onClick={() => setOpen(true)}>…</DropdownMenuItem>
+    </DropdownMenu>
+    <MyDialog open={open} onOpenChange={setOpen} />
+  </>
+);
+\`\`\`
+
+다이얼로그 컴포넌트는 controlled (\`open\`/\`onOpenChange\`) 모드를 지원하도록 작성해 둘 것.
+
 ## 앱 이름 변경 (monorepo)
 
 사용자가 "apps/web 을 apps/dashboard 로 바꿔줘" 같이 모노레포 앱 이름 변경을 요청하면 \`sh_ui_rename_app\` 사용 — 손으로 6~10 군데 (디렉토리, package.json name, tsconfig paths, Dockerfile WORKDIR, next.config transpilePackages, sh-ui.config aliases, README, .github/workflows) 갈아엎지 않도록 자동화. \`dryRun: true\` 로 먼저 변경 매트릭스 보여주고 사용자 확인 후 실행 권장.
@@ -354,6 +407,13 @@ export async function startMcpServer() {
           ],
         };
       }
+      // path traversal 차단 — existsSync probe / fs.remove 흐름이 임의 경로로
+      // 흘러가지 않도록 입력 검증을 가장 먼저.
+      try {
+        validateProjectName(input.name, "name");
+      } catch (e) {
+        return { isError: true, content: [{ type: "text", text: e.message }] };
+      }
       const targetParent = resolveCwd(input);
       const targetDir = resolve(targetParent, input.name);
       if (existsSync(targetDir) && !input.force) {
@@ -413,6 +473,11 @@ export async function startMcpServer() {
       },
     },
     async (input) => {
+      try {
+        validateProjectName(input.name, "name");
+      } catch (e) {
+        return { isError: true, content: [{ type: "text", text: e.message }] };
+      }
       const text = await captureConsole(() =>
         addApp({
           name: input.name,

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/monorepo/packages/ui/ui-core/package.json

@@ -28,7 +28,7 @@
     "typescript": "^5.9.3"
   },
   "exports": {
-    "./components/*": "./src/components/*.tsx",
+    "./components/*": "./src/components/*/index.tsx",
     "./hooks/*": "./src/hooks/*.ts",
     "./lib/*": "./src/lib/*.ts"
   }

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

@@ -1,10 +1,16 @@
 import { GlobalProvider } from '@/components/providers';
 
+/** FOUC 차단 — next-themes mount 전에 첫 paint 에 dark/light class 박기. */
+const themeInitScript = `try{var t=localStorage.getItem('theme');var c=document.documentElement.classList;if(t==='dark'||(!t&&matchMedia('(prefers-color-scheme:dark)').matches)){c.add('dark');}else if(t==='light'){c.add('light');}}catch(e){}`;
+
 export function RootLayout({ children }: { children: React.ReactNode }) {
   // `lang` 은 앱의 주 언어. 영어 등 다른 언어 우선이면 'en' 으로 바꾸거나
   // next-intl 플러그인을 활성화해 라우트 기반 자동 분기로 전환하세요.
   return (
     <html lang='ko' suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
       <body>
         <GlobalProvider>{children}</GlobalProvider>
       </body>

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

@@ -1,10 +1,21 @@
 import { GlobalProvider } from '@/src/app/providers';
 
+/**
+ * 첫 paint 전에 localStorage 의 theme 값을 읽어 <html> 에 class 를 박는
+ * FOUC 차단 inline script. next-themes 의 ThemeProvider 가 client mount 후
+ * 동일 작업을 하지만, mount 전 한 frame 동안 light/dark 깜빡임이 생긴다.
+ * 이걸 막으려고 SSR 응답 head 안쪽에 동기 실행 script 박음.
+ */
+const themeInitScript = `try{var t=localStorage.getItem('theme');var c=document.documentElement.classList;if(t==='dark'||(!t&&matchMedia('(prefers-color-scheme:dark)').matches)){c.add('dark');}else if(t==='light'){c.add('light');}}catch(e){}`;
+
 export function RootLayout({ children }: { children: React.ReactNode }) {
   // `lang` 은 앱의 주 언어. 영어 등 다른 언어 우선이면 'en' 으로 바꾸거나
   // next-intl 플러그인을 활성화해 라우트 기반 자동 분기로 전환하세요.
   return (
     <html lang='ko' suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
       <body>
         <GlobalProvider>{children}</GlobalProvider>
       </body>

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,
+]