atomsystem 0.1.35 → 0.1.37

package/build/build-tokens.js

@@ -181,9 +181,9 @@ myStyleDictionary.registerFormat({
 
         // global(@theme)인 경우에만 수집해둔 시멘틱 변수(semanticCss)를 추가
         // @theme: Tailwind 유틸리티 클래스 생성에 필요 (bg-primary, text-secondary 등)
-        // :root: 컴포넌트 CSS에서 var(--radius-common) 같이 직접 참조하는 경우 브라우저 보장
+        // Tailwind CSS v4의 @theme은 빌드 시 자동으로 :root에도 등록되므로 별도 :root 선언 불필요
         if (selector === "@theme") {
-          return `@theme {\n${cssVariables}\n\n${semanticCss}\n} \n\n:root {\n${cssVariables}\n} `;
+          return `@theme {\n${cssVariables}\n\n${semanticCss}\n}`;
         }
         return `${selector} {\n${cssVariables}\n} `;
       })

package/cli/init.js

@@ -17,6 +17,7 @@ const __dirname = path.dirname(__filename);
 const packageRoot = path.join(__dirname, "..");
 const tokenFile = path.join(packageRoot, "tokens", "tokens.json");
 const buildFile = path.join(packageRoot, "build", "build-tokens.js");
+const textCssFile = path.join(packageRoot, "css", "text.css");
 
 // 프로젝트 루트 경로 (사용자가 실행한 곳)
 const projectRoot = process.cwd();
@@ -24,6 +25,16 @@ const targetTokenDir = path.join(projectRoot, "tokens");
 const targetTokenFile = path.join(targetTokenDir, "tokens.json");
 const targetBuildDir = path.join(projectRoot, "build");
 const targetBuildFile = path.join(targetBuildDir, "build-tokens.js");
+const targetCssDir = path.join(projectRoot, "css");
+const targetTextCssFile = path.join(targetCssDir, "text.css");
+
+// 파일 복사 헬퍼: 대상 디렉토리 생성 → 파일 복사 → 로그 출력
+function copyTo(src, dest, label) {
+  const dir = path.dirname(dest);
+  if (!fs.existsSync(dir)) mkdirSync(dir, { recursive: true });
+  copyFileSync(src, dest);
+  console.log(`✅ Copied: ${label} -> ${dest}`);
+}
 
 // 사용자 프로젝트에 package.json이 존재하는지 먼저 확인 (안전장치)
 const packageJsonPath = path.join(projectRoot, "package.json");
@@ -49,7 +60,7 @@ inquirer
 
       try {
         await execPromise(
-          "npm install next@latest react@latest react-dom@latest tailwindcss clsx react-modal typescript @types/react @types/node @types/react-dom @types/react-modal"
+          "npm install next@latest react@latest react-dom@latest tailwindcss @tailwindcss/postcss postcss clsx react-modal typescript @types/react @types/node @types/react-dom @types/react-modal"
         );
         pkgSpinner.succeed("Next.js and React installation complete!");
       } catch (err) {
@@ -118,7 +129,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         {
           path: path.join(appDir, "globals.css"),
           content: `@import "tailwindcss";
-@import "../build/css/_variables.css";`,
+@import "../build/css/_variables.css";
+@import "../css/text.css";`,
         },
         {
           path: path.join(appDir, "page.tsx"),
@@ -160,6 +172,56 @@ export default function Page() {
   )
 }`,
         },
+        // ✅ tsconfig.json: "@/*" 경로 별칭 설정 (예: @/build/typescript/theme)
+        {
+          path: path.join(projectRoot, "tsconfig.json"),
+          content: JSON.stringify({
+            compilerOptions: {
+              target: "ES2017",
+              lib: ["dom", "dom.iterable", "esnext"],
+              allowJs: true,
+              skipLibCheck: true,
+              strict: true,
+              noEmit: true,
+              esModuleInterop: true,
+              module: "esnext",
+              moduleResolution: "bundler",
+              resolveJsonModule: true,
+              isolatedModules: true,
+              jsx: "preserve",
+              incremental: true,
+              plugins: [{ name: "next" }],
+              paths: {
+                "@/*": ["./*"]
+              }
+            },
+            include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+            exclude: ["node_modules"]
+          }, null, 2),
+        },
+        // ✅ next.config.ts: Next.js 기본 설정
+        {
+          path: path.join(projectRoot, "next.config.ts"),
+          content: `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  reactStrictMode: false,
+};
+
+export default nextConfig;`,
+        },
+        // ✅ postcss.config.mjs: Tailwind CSS v4 PostCSS 플러그인 등록 (@theme, @import "tailwindcss" 인식)
+        {
+          path: path.join(projectRoot, "postcss.config.mjs"),
+          content: `/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;`,
+        },
       ];
 
       files.forEach(({ path, content }) => {
@@ -167,6 +229,23 @@ export default function Page() {
         console.log(`✅ Created ${path}`);
       });
 
+      // ✅ 토큰 빌드 먼저 실행: Theme.tsx가 @/build/typescript/theme를 import하므로
+      // 컴포넌트 복사 전에 build-tokens.js를 실행해 theme.ts를 미리 생성해야 합니다.
+      const buildTokensPath = path.join(projectRoot, "build", "build-tokens.js");
+      if (fs.existsSync(buildTokensPath)) {
+        const tokenBuildSpinner = ora("Building design tokens (generating build/typescript/theme.ts)...").start();
+        try {
+          await execPromise(`node "${buildTokensPath}"`, { cwd: projectRoot });
+          tokenBuildSpinner.succeed("Design tokens built successfully!");
+        } catch (err) {
+          tokenBuildSpinner.fail("Error during token build");
+          console.error(err);
+          return;
+        }
+      } else {
+        console.warn("⚠️  build-tokens.js not found, skipping token build.");
+      }
+
       // add.js를 실행하여 Theme, Card 컴포넌트 및 하위 의존성을 복사합니다.
       const addScriptPath = path.join(__dirname, "add.js");
       if (fs.existsSync(addScriptPath)) {
@@ -185,14 +264,10 @@ export default function Page() {
       console.log("🚀 Installation skipped.");
     }
 
-    // ✅ 토큰 파일과 빌드 파일 복사 (Next.js 설치 여부와 관계없이 실행)
-    if (!fs.existsSync(targetTokenDir)) mkdirSync(targetTokenDir, { recursive: true });
-    copyFileSync(tokenFile, targetTokenFile);
-    console.log(`✅ Copied: tokens/tokens.json -> ${targetTokenFile}`);
-
-    if (!fs.existsSync(targetBuildDir)) mkdirSync(targetBuildDir, { recursive: true });
-    copyFileSync(buildFile, targetBuildFile);
-    console.log(`✅ Copied: build-tokens.js -> ${targetBuildFile}`);
+    // ✅ 필수 파일 복사 (Next.js 설치 여부와 관계없이 실행)
+    copyTo(tokenFile,   targetTokenFile,   "tokens/tokens.json");
+    copyTo(buildFile,   targetBuildFile,   "build/build-tokens.js");
+    copyTo(textCssFile, targetTextCssFile, "css/text.css");
 
     console.log("🚀 Token setup complete!");
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {