sh-ui-cli 0.59.8 → 0.61.0

package/src/create/index.mjs

@@ -27,7 +27,7 @@ export const HELP_TEXT = `sh-ui create — sh-ui 프로젝트 스캐폴드 (Next
   --arch <${ARCHES_LIST}>                  프로젝트 아키텍처 — 폴더 구조/import alias 컨벤션. next 에서 사용 가능: ${NEXT_ARCHES}. 기본 fsd
   --plugins <a,b>                    플러그인 (${PLUGINS_LIST}). 미지정/"" → 없음
   --theme <preset|base64>            프리셋 이름(${THEME_PRESETS_LIST}) 또는 playground base64. 선택
-  --css <${CSS_FRAMEWORKS_SUPPORTED.join('|')}>                        CSS 프레임워크 (현재 plain만 지원, 향후 tailwind 등 추가 예정)
+  --css <${CSS_FRAMEWORKS_SUPPORTED.join('|')}>                        CSS 프레임워크. base 파일까지 분기 emit (tailwind/plain/css-modules)
   --yes                              디렉토리 덮어쓰기 + 모노레포 기본값 자동 채택
   --dry-run                          파일을 쓰지 않고 작성될 파일 목록만 출력
   -h, --help                         이 도움말

package/src/create/plugins/authJwt.js

@@ -33,6 +33,56 @@ export const authJwtPlugin = {
   // BFF 와 withAuthRetry 가 자동 활용한다.
 
   files: (arch) => ({
+    // placeholder sign-in page — proxy.ts 가 미인증 요청을 /sign-in 으로 redirect
+    // 하므로, 페이지가 없으면 사용자가 dev 띄우자마자 무한 404 루프에 빠진다.
+    // 템플릿 단계에선 dev 우회용 "fake 토큰 set" 버튼 + 안내 문구로 최소화.
+    // next-intl 활성 시 nextIntl 플러그인의 transforms 가 [locale]/sign-in 으로 옮긴다.
+    'app/sign-in/page.tsx': `'use client';
+
+/**
+ * auth-jwt 플러그인의 placeholder sign-in 페이지.
+ *
+ * 실제 프로덕션에선 백엔드 sign-in API 와 연동하는 폼으로 교체해야 한다.
+ * 지금은 dev 시 미인증 redirect 루프를 끊기 위한 최소 페이지.
+ */
+export default function SignInPage() {
+  const setDevToken = () => {
+    document.cookie = 'accessToken=dev-placeholder; path=/; max-age=86400';
+    document.cookie = 'refreshToken=dev-placeholder; path=/; max-age=86400';
+    window.location.href = '/';
+  };
+
+  // 토큰 기반 색상 — 다크/라이트 자동 적응. inline hex 사용 시 다크에서 시인성 깨짐.
+  return (
+    <main style={{ display: 'flex', minHeight: '100vh', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
+      <div style={{ maxWidth: 420, width: '100%', display: 'flex', flexDirection: 'column', gap: 16 }}>
+        <h1 style={{ fontSize: 24, margin: 0, color: 'var(--foreground)' }}>Sign in</h1>
+        <p style={{ color: 'var(--foreground-muted)', fontSize: 14, lineHeight: 1.6, margin: 0 }}>
+          auth-jwt 플러그인 placeholder 페이지입니다. 실제 인증 연동 전까지는
+          아래 버튼으로 dev 용 가짜 토큰을 설정해 가드를 우회할 수 있습니다.
+        </p>
+        <button
+          type="button"
+          onClick={setDevToken}
+          style={{
+            padding: '10px 16px',
+            borderRadius: 8,
+            border: '1px solid var(--border-strong)',
+            background: 'var(--primary)',
+            color: 'var(--primary-foreground)',
+            cursor: 'pointer',
+            fontSize: 14,
+            fontWeight: 500,
+          }}
+        >
+          Continue (dev — set fake token)
+        </button>
+      </div>
+    </main>
+  );
+}
+`,
+
     'proxy.ts': `import { NextRequest, NextResponse } from 'next/server';
 
 const AUTH_ROUTES = ['/sign-in', '/sign-up'];
@@ -245,7 +295,7 @@ const proxyRequest = async (
         data: null,
         error: {
           code: 'NETWORK_ERROR',
-          message: '서버에 연결할 수 없습니다.',
+          message: 'Failed to reach upstream server.',
         },
       },
       { status: 502 },

package/src/create/plugins/nextIntl.js

@@ -37,18 +37,103 @@ export const nextIntlPlugin = {
 
   turboEnvVars: [],
 
-  // ─── 공유 파일 조각 (providers 합성용) ───
-
-  providerImports: [
-    `import { NextIntlClientProvider } from 'next-intl';`,
-  ],
-  providerWrappers: ['NextIntlClientProvider'],
+  // ─── providers 합성 ───
+  //
+  // NextIntlClientProvider 는 GlobalProvider 가 아니라 RootLayout 에서 직접 wrap 한다.
+  // 이유: RootLayout 만이 검증된 `locale: string` 을 가지므로 `<NextIntlClientProvider
+  // locale={locale}>` 처럼 prop 을 명시할 수 있다. GlobalProvider 단에서 wrap 하면
+  // locale 을 prop drilling 해야 해서 깔끔하지 않다. 대신 RootLayout 의 content
+  // (아래 transforms 의 replace) 가 NextIntlClientProvider 를 직접 import + wrap.
 
   // ─── 라우트 구조 변환 ───
 
   transforms: (arch) => [
     { type: 'move', from: 'app/page.tsx', to: 'app/[locale]/page.tsx' },
     { type: 'move', from: 'app/error.tsx', to: 'app/[locale]/error.tsx' },
+    // sentry 가 emit 한 error.tsx 를 i18n-aware 버전으로 교체.
+    // sentry 비활성이면 위 move 가 no-op 이라 [locale]/error.tsx 가 없고 이 replace 도 no-op.
+    {
+      type: 'replace',
+      path: 'app/[locale]/error.tsx',
+      contentFn: () => `'use client';
+
+import * as Sentry from '@sentry/nextjs';
+import { AlertTriangle, Home, RefreshCw } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect } from 'react';
+
+import { Link } from '${arch.aliases.config}/i18n/navigation';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const t = useTranslations('error');
+
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <div className='flex min-h-screen items-center justify-center px-4'>
+      <div className='border-border bg-background w-full max-w-md rounded-lg border p-6 shadow-lg'>
+        <div className='mb-4 flex justify-center'>
+          <div className='bg-danger/10 flex h-16 w-16 items-center justify-center rounded-full'>
+            <AlertTriangle className='text-danger h-8 w-8' />
+          </div>
+        </div>
+
+        <h2 className='text-foreground mb-2 text-center text-2xl font-bold'>
+          {t('title')}
+        </h2>
+        <p className='text-foreground-muted mb-6 text-center text-sm'>
+          {t('description')}
+        </p>
+
+        <div className='border-danger/30 bg-danger/5 rounded-md border p-3'>
+          <p className='text-danger text-sm'>
+            {error.message || t('unexpectedError')}
+          </p>
+        </div>
+
+        <div className='mt-6 space-y-3'>
+          <button
+            onClick={reset}
+            className='bg-primary text-primary-foreground hover:bg-primary-hover flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium'
+          >
+            <RefreshCw className='h-4 w-4' />
+            {t('button.tryAgain')}
+          </button>
+
+          <Link
+            href='/'
+            className='border-border text-foreground hover:bg-background-muted flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium'
+          >
+            <Home className='h-4 w-4' />
+            {t('button.goHome')}
+          </Link>
+        </div>
+
+        {process.env.NODE_ENV === 'development' && error.digest && (
+          <div className='bg-background-subtle mt-4 rounded-md p-3'>
+            <p className='text-foreground-subtle text-xs'>
+              Error ID: {error.digest}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+`,
+    },
+    // auth-jwt 플러그인이 함께 활성화돼 있으면 sign-in 도 locale prefix 안으로 이동.
+    // auth-jwt 단독일 때 (= 이 transform 이 없을 때) 는 app/sign-in 이 그대로 root 에 남는다.
+    // `move` 트랜스폼은 from 파일이 없으면 silently skip 이라 auth-jwt 미활성 시 안전한 no-op.
+    { type: 'move', from: 'app/sign-in/page.tsx', to: 'app/[locale]/sign-in/page.tsx' },
     {
       // Next 16 부터 root layout (app/layout.tsx) 은 반드시 <html>/<body> 를 가져야 한다.
       // next-intl 적용 시에는 [locale] 가 root 역할을 맡으므로, 기본 app/layout.tsx 를 그대로
@@ -64,29 +149,38 @@ export const nextIntlPlugin = {
       // side-effect import (`import 'x';` 형태, binding 없음) 만 보존하고 나머지는 통째 교체.
       // 이름 있는 import (예: `import { RootLayout } from ...`) 는 새 본체와 식별자 충돌 가능성이
       // 있어 제외.
+      //
+      // 경로 보정: 파일이 `app/layout.tsx` → `app/[locale]/layout.tsx` 로 1단계 깊어졌으므로
+      // 보존된 side-effect import 의 상대 경로(`./x` / `../x`)는 `../` 한 번만큼 더 위로 끌어올린다.
+      // 절대 경로(`/x`)나 모듈명(`polyfills`)은 그대로. v0.59.8 까지는 보정이 빠져 standalone+next-intl
+      // 조합에서 `./globals.css` 가 깨졌고 prod 빌드가 실패했다.
       type: 'replace',
       path: 'app/[locale]/layout.tsx',
       contentFn: (existing) => {
+        const adjustRelative = (line) =>
+          line.replace(/(['"])(\.\.?\/)/g, (_m, q, prefix) => `${q}../${prefix === './' ? '' : prefix}`);
         const sideEffectImports = existing
           .split('\n')
           .filter((line) => /^\s*import\s+['"][^'"]+['"];?\s*$/.test(line))
+          .map(adjustRelative)
           .join('\n');
         const body = `import type { Metadata } from 'next';
 import { RootLayout } from '${arch.aliases.layouts}/RootLayout';
 
 export const metadata: Metadata = {
-  title: 'My App',
-  description: 'My App Description',
+  title: 'sh-ui app',
+  description: 'sh-ui 기반 앱 — metadata 를 변경하세요.',
 };
 
-export default function Layout({
+export default async function Layout({
   children,
   params,
 }: Readonly<{
   children: React.ReactNode;
   params: Promise<{ locale: string }>;
 }>) {
-  return <RootLayout params={params}>{children}</RootLayout>;
+  const { locale } = await params;
+  return <RootLayout locale={locale}>{children}</RootLayout>;
 }
 `;
         return sideEffectImports ? `${sideEffectImports}\n\n${body}` : body;
@@ -95,20 +189,26 @@ export default function Layout({
     {
       type: 'replace',
       path: `${arch.paths.layouts}/RootLayout.tsx`,
-      content: `import { hasLocale } from 'next-intl';
+      content: `import { hasLocale, NextIntlClientProvider } from 'next-intl';
 import { notFound } from 'next/navigation';
 import { GlobalProvider } from '${arch.aliases.providers}';
 import { routing } from '${arch.aliases.config}/i18n/routing';
 
-export async function RootLayout({
+/**
+ * 루트 셸 — html/body + 전역 Provider. 로케일 검증은 여기서 한 번만.
+ * 호출자([locale]/layout.tsx) 가 이미 \`await params\` 로 string 을 풀어 넘긴다.
+ *
+ * NextIntlClientProvider 는 GlobalProvider 바깥(html 안쪽) 에서 \`locale\` prop 과
+ * 함께 직접 wrap. 자동 detect 로 두면 client 컴포넌트에서 useLocale() 결과가
+ * RSC 컨텍스트와 어긋날 수 있어 명시적으로 전달한다.
+ */
+export function RootLayout({
   children,
-  params,
+  locale,
 }: {
   children: React.ReactNode;
-  params: Promise<{ locale: string }>;
+  locale: string;
 }) {
-  const { locale } = await params;
-
   if (!hasLocale(routing.locales, locale)) {
     notFound();
   }
@@ -116,7 +216,9 @@ export async function RootLayout({
   return (
     <html lang={locale} suppressHydrationWarning>
       <body>
-        <GlobalProvider>{children}</GlobalProvider>
+        <NextIntlClientProvider locale={locale}>
+          <GlobalProvider>{children}</GlobalProvider>
+        </NextIntlClientProvider>
       </body>
     </html>
   );
@@ -232,6 +334,58 @@ export default intl;
 export const config = {
   matcher: '/((?!api|trpc|_next|_vercel|monitoring|.*\\\\..*).*)',
 };
+`,
+
+    // ─── i18n-aware formatter hooks ───
+    //
+    // base 템플릿의 \`formatDate\` / \`formatPrice\` util 은 default 'ko-KR' / 'KRW'.
+    // next-intl 활성 시엔 hook 으로 현재 locale 자동 추적.
+
+    [`${arch.paths.hooks}/useFormatDate.ts`]: `'use client';
+
+import { useCallback } from 'react';
+import { useLocale } from 'next-intl';
+
+import {
+  formatDate as formatDateUtil,
+  formatDateTime as formatDateTimeUtil,
+} from '${arch.aliases.utils}/formatDate';
+
+/**
+ * 현재 locale 을 자동으로 따르는 날짜 포맷 hook.
+ * 'use client' 필요 — RSC 에선 \`getLocale()\` 로 직접 util 호출.
+ */
+export function useFormatDate() {
+  const locale = useLocale();
+  return useCallback((date: Date) => formatDateUtil(date, locale), [locale]);
+}
+
+export function useFormatDateTime() {
+  const locale = useLocale();
+  return useCallback((date: Date) => formatDateTimeUtil(date, locale), [locale]);
+}
+`,
+
+    [`${arch.paths.hooks}/useFormatPrice.ts`]: `'use client';
+
+import { useCallback } from 'react';
+import { useLocale } from 'next-intl';
+
+import { formatPrice as formatPriceUtil } from '${arch.aliases.utils}/formatPrice';
+
+/**
+ * 현재 locale 을 자동으로 따르는 통화 포맷 hook.
+ * currency 는 비즈니스 의존이라 인자로 받음 — 사용처에서 명시.
+ *
+ * 예: const fp = useFormatPrice('USD'); fp(99.5) → "$99.50" (locale 'en-US' 시)
+ */
+export function useFormatPrice(currency = 'KRW') {
+  const locale = useLocale();
+  return useCallback(
+    (amount: number) => formatPriceUtil(amount, locale, currency),
+    [locale, currency],
+  );
+}
 `,
   }),
 };

package/src/create/plugins/sentry.js

@@ -65,6 +65,8 @@ export const sentryPlugin = {
   files: (arch) => ({
     'sentry.server.config.ts': `import * as Sentry from '@sentry/nextjs';
 
+import { ApiError } from '${arch.aliases.api}/error';
+
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT ?? 'dev',
@@ -77,10 +79,8 @@ Sentry.init({
 
     const error = hint?.originalException;
 
-    if (error instanceof Error && error.name === 'ApiError') {
-      const status = (error as { status?: number }).status;
-      if (status === 401) return null;
-    }
+    // 401 (인증 실패) 은 비즈니스 흐름 — Sentry 로 안 보냄.
+    if (error instanceof ApiError && error.status === 401) return null;
 
     if (event.exception?.values?.[0]?.value?.includes('An error occurred in the Server Components render')) {
       return null;
@@ -186,6 +186,8 @@ Sentry.init({
 export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;
 `,
 
+    // global-error.tsx — root layout 자체가 깨졌을 때의 fallback. Tailwind/CSS 가 로드 안 될 수
+    // 있어 inline style 위주. 한국어로 통일 ([locale]/error.tsx 와 동일 메시지 톤).
     'app/global-error.tsx': `'use client';
 
 import * as Sentry from '@sentry/nextjs';
@@ -201,13 +203,23 @@ export default function GlobalError({
   }, [error]);
 
   return (
-    <html>
-      <body>
-        <div className='flex min-h-screen items-center justify-center'>
-          <div className='text-center'>
-            <h1 className='text-2xl font-bold'>Something went wrong!</h1>
-            <p className='mt-2 text-gray-600'>{error.message}</p>
-          </div>
+    <html lang='ko'>
+      <body
+        style={{
+          margin: 0,
+          minHeight: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          fontFamily:
+            'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        }}
+      >
+        <div style={{ textAlign: 'center', padding: 24 }}>
+          <h1 style={{ fontSize: 24, fontWeight: 700, margin: 0 }}>
+            오류가 발생했습니다
+          </h1>
+          <p style={{ marginTop: 8, color: '#6b7280' }}>{error.message}</p>
         </div>
       </body>
     </html>
@@ -215,6 +227,10 @@ export default function GlobalError({
 }
 `,
 
+    // [locale] 안으로 이동 시 next-intl 플러그인이 i18n-aware 버전으로 replace 함.
+    // 여기 emit 되는 버전은 next-intl 미활성 케이스용 — 한국어 + 토큰 기반 색상.
+    // \`bg-accent\` 같은 미정의 토큰은 사용하지 않고 \`--background-muted\` / \`--danger\`
+    // 등 tokens.css 에 실재하는 변수만 사용.
     'app/error.tsx': `'use client';
 
 import * as Sentry from '@sentry/nextjs';
@@ -235,20 +251,22 @@ export default function Error({
 
   return (
     <div className='flex min-h-screen items-center justify-center px-4'>
-      <div className='w-full max-w-md rounded-lg border p-6 shadow-lg'>
+      <div className='border-border bg-background w-full max-w-md rounded-lg border p-6 shadow-lg'>
         <div className='mb-4 flex justify-center'>
-          <div className='flex h-16 w-16 items-center justify-center rounded-full bg-red-50 dark:bg-red-950'>
-            <AlertTriangle className='h-8 w-8 text-red-600 dark:text-red-400' />
+          <div className='bg-danger/10 flex h-16 w-16 items-center justify-center rounded-full'>
+            <AlertTriangle className='text-danger h-8 w-8' />
           </div>
         </div>
 
-        <h2 className='mb-2 text-center text-2xl font-bold'>오류가 발생했습니다</h2>
-        <p className='mb-6 text-center text-sm text-gray-500'>
+        <h2 className='text-foreground mb-2 text-center text-2xl font-bold'>
+          오류가 발생했습니다
+        </h2>
+        <p className='text-foreground-muted mb-6 text-center text-sm'>
           예상치 못한 오류가 발생했습니다. 다시 시도해주세요.
         </p>
 
-        <div className='rounded-md border border-red-200 bg-red-50 p-3 dark:border-red-800 dark:bg-red-950'>
-          <p className='text-sm text-red-600 dark:text-red-400'>
+        <div className='border-danger/30 bg-danger/5 rounded-md border p-3'>
+          <p className='text-danger text-sm'>
             {error.message || '알 수 없는 오류'}
           </p>
         </div>
@@ -256,7 +274,7 @@ export default function Error({
         <div className='mt-6 space-y-3'>
           <button
             onClick={reset}
-            className='flex w-full items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90'
+            className='bg-primary text-primary-foreground hover:bg-primary-hover flex w-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium'
           >
             <RefreshCw className='h-4 w-4' />
             다시 시도
@@ -264,7 +282,7 @@ export default function Error({
 
           <Link
             href='/'
-            className='flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium hover:bg-accent'
+            className='border-border text-foreground hover:bg-background-muted flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium'
           >
             <Home className='h-4 w-4' />
             홈으로 이동
@@ -272,8 +290,8 @@ export default function Error({
         </div>
 
         {process.env.NODE_ENV === 'development' && error.digest && (
-          <div className='mt-4 rounded-md bg-gray-50 p-3 dark:bg-gray-900'>
-            <p className='text-xs text-gray-600 dark:text-gray-400'>
+          <div className='bg-background-subtle mt-4 rounded-md p-3'>
+            <p className='text-foreground-subtle text-xs'>
               Error ID: {error.digest}
             </p>
           </div>
@@ -436,7 +454,9 @@ export const logApiError = (prefix: string, params: ApiLogParams): void => {
   console.error(\`- Status: \${status ?? 'N/A'}\`);
 
   if (requestHeaders) {
-    const { Authorization: _, ...safeHeaders } = requestHeaders;
+    // Authorization 토큰은 로그에서 가린다.
+    const { Authorization: _authorization, ...safeHeaders } = requestHeaders;
+    void _authorization;
     console.error('- Request Headers:', safeHeaders);
   }
   if (requestBody) console.error('- Request Body:', requestBody);

package/src/mcp.mjs

@@ -239,7 +239,7 @@ export async function startMcpServer() {
         theme: z.string().optional()
           .describe(`프리셋 이름 (${THEME_PRESETS_LIST}) 또는 base64 테마 코드. 사용자가 톤을 직접 손본 결과를 영구 보관하려면 sh_ui_encode_theme 으로 base64 를 만들어 여기에 넘긴다.`),
         cssFramework: z.enum(CSS_FRAMEWORKS).optional()
-          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 — 변종 미보유 컴포넌트는 add 시 plain 으로 자동 fallback`),
+          .describe(`CSS 프레임워크. 기본 plain. base 파일까지 분기 emit (plain/tailwind/css-modules) + 컴포넌트 변종까지 결정. 변종 미보유 시 add 는 plain fallback`),
         cwd: z.string().optional()
           .describe("부모 디렉토리. 기본 process.cwd()"),
         force: z.boolean().optional()
@@ -311,7 +311,7 @@ export async function startMcpServer() {
         mode: z.enum(MODES).optional()
           .describe("색 모드. 기본 light-dark"),
         cssFramework: z.enum(CSS_FRAMEWORKS).optional()
-          .describe(`CSS 프레임워크. 기본 plain. 현재 ${CSS_FRAMEWORKS.join('/')} 지원 — 변종 미보유 컴포넌트는 add 시 plain 으로 자동 fallback`),
+          .describe(`CSS 프레임워크. 기본 plain. base 파일까지 분기 emit (plain/tailwind/css-modules) + 컴포넌트 변종까지 결정. 변종 미보유 시 add 는 plain fallback`),
         cwd: z.string().optional()
           .describe("작업 디렉토리. 기본 process.cwd()"),
         force: z.boolean().optional()

package/templates/flutter-standalone/sh-ui.config.json

@@ -1,6 +1,5 @@
 {
   "platform": "flutter",
-  "cssFramework": "plain",
   "theme": {
     "base": "neutral",
     "radius": "md",

package/templates/monorepo/README.md

@@ -8,8 +8,17 @@ Turborepo + pnpm workspace 기반 모노레포 템플릿 (sh-ui 기반).
 - **pnpm 10** (워크스페이스 패키지 매니저)
 - **TypeScript 5.9**
 - **sh-ui** (앱별 독립 테마 — 각 `ui-{app}/` 패키지가 자체 `sh-ui.config.json` 보유)
-- **ESLint 9** (flat config)
-- **Prettier** (tailwind 플러그인)
+- **ESLint 9** (flat config — fsd / flat arch 별 boundaries 규칙)
+- **Prettier** (tailwind 사용 시에만 prettier-plugin-tailwindcss 활성)
+
+## CSS 프레임워크 선택
+
+`sh-ui-cli create --css <plain | tailwind | css-modules>` 옵션이 **base 파일까지** 분기합니다.
+- `tailwind` (기본): Tailwind v4 + utility class 기반 페이지/스타일
+- `plain`: Tailwind 의존 없음, inline style + 토큰 변수 사용
+- `css-modules`: `.module.css` 파일 + 클래스 import 패턴
+
+같은 옵션이 `npx sh-ui-cli add <component>` 로 추가되는 컴포넌트의 styling 변종도 결정합니다.
 
 ## 프로젝트 구조
 
@@ -37,7 +46,8 @@ Turborepo + pnpm workspace 기반 모노레포 템플릿 (sh-ui 기반).
 │   │   ├── base.js                   # 기본 (TS + Turbo + Prettier)
 │   │   ├── next.js                   # Next.js 앱용
 │   │   ├── react-internal.js         # React 라이브러리용
-│   │   └── fsd.js                    # FSD 레이어 규칙 (boundaries, 파일 네이밍)
+│   │   ├── fsd.js                    # FSD 레이어 규칙 (boundaries, 파일 네이밍)
+│   │   └── flat.js                   # flat arch 규칙 (lib/components/app boundaries)
 │   │
 │   └── typescript-config/            # 공유 TypeScript 설정
 │       ├── base.json                 # 기본 (strict, ES2022)
@@ -45,9 +55,8 @@ Turborepo + pnpm workspace 기반 모노레포 템플릿 (sh-ui 기반).
 │       └── react-library.json        # React 라이브러리용 (react-jsx)
 │
 ├── turbo.json                        # Turbo 태스크 파이프라인
-├── pnpm-workspace.yaml               # apps/* + packages/*
+├── pnpm-workspace.yaml               # apps/* + packages 명시 매핑
 ├── .prettierrc
-├── .eslintrc.js
 ├── .gitignore
 └── .dockerignore
 ```

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

@@ -0,0 +1,71 @@
+import boundaries from "eslint-plugin-boundaries"
+import checkFile from "eslint-plugin-check-file"
+
+/**
+ * Flat arch ESLint configuration.
+ *
+ * FSD 의 슬라이스 boundaries 대신 flat 구조 (`lib/`, `components/`, `app/`) 의
+ * 단순한 의존 방향을 강제한다:
+ *
+ *   - `lib/` — 다른 lib 만 import (UI 모름)
+ *   - `components/` — components / lib 만
+ *   - `app/` — components / lib 만 (Next.js routes)
+ *
+ * @type {import("eslint").Linter.Config[]}
+ */
+export const flatConfig = [
+  // ── boundaries ──
+  {
+    plugins: { boundaries },
+    settings: {
+      "import/resolver": {
+        typescript: { alwaysTryTypes: true },
+      },
+      "boundaries/elements": [
+        { type: "lib", pattern: ["lib/*"], mode: "folder" },
+        { type: "components", pattern: ["components/*"], mode: "folder" },
+        { type: "app", pattern: ["app"], mode: "folder" },
+      ],
+      "boundaries/ignore": ["**/*.test.*", "**/*.spec.*"],
+    },
+    rules: {
+      "boundaries/element-types": [
+        "warn",
+        {
+          default: "disallow",
+          rules: [
+            { from: "app", allow: ["components", "lib"] },
+            { from: "components", allow: ["components", "lib"] },
+            { from: "lib", allow: ["lib"] },
+          ],
+        },
+      ],
+    },
+  },
+
+  // ── check-file (flat 의 lib 는 CAMEL_CASE, components 는 PASCAL_CASE) ──
+  {
+    plugins: { "check-file": checkFile },
+    rules: {
+      "check-file/filename-naming-convention": [
+        "error",
+        {
+          "**/components/**/*.tsx": "PASCAL_CASE",
+          "**/lib/**/*.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",
+    ],
+    rules: {
+      "check-file/filename-naming-convention": "off",
+    },
+  },
+]

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

@@ -1,12 +1,9 @@
 import boundaries from "eslint-plugin-boundaries"
-import importX from "eslint-plugin-import-x"
 import checkFile from "eslint-plugin-check-file"
-import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript"
 
 /**
  * FSD (Feature-Sliced Design) ESLint configuration.
  * boundaries: layer import direction + public API enforcement
- * import-x: import group ordering
  * check-file: file/folder naming convention enforcement
  *
  * @type {import("eslint").Linter.Config[]}
@@ -98,22 +95,4 @@ export const fsdConfig = [
       "check-file/filename-naming-convention": "off",
     },
   },
-
-  // ── import-x plugin ──
-  {
-    plugins: {
-      "import-x": importX,
-    },
-    settings: {
-      "import-x/resolver-next": [
-        createTypeScriptImportResolver({
-          alwaysTryTypes: true,
-        }),
-      ],
-    },
-    rules: {
-      "import-x/order": "off",
-      "import-x/no-unresolved": "off",
-    },
-  },
 ]