atomsystem 0.1.34 → 0.1.36

package/app/templates/Modal/Modal.tsx

@@ -21,13 +21,7 @@ export const ModalContent = ({
   size = "normal",
 }: ModalProps) => {
   useEffect(() => {
-    let rootElement = document.getElementById("modal-root");
-    if (!rootElement) {
-      rootElement = document.createElement("div");
-      rootElement.id = "modal-root";
-      document.body.appendChild(rootElement);
-    }
-    ReactModal.setAppElement(rootElement); // 접근성 설정
+    ReactModal.setAppElement("#modal-root"); // 접근성 설정
   }, []);
 
   return (

package/app/templates/Theme/Theme.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { Radio } from "../Form/Form";
-import { themes } from "../../../build/typescript/theme";
+import { themes } from "@/build/typescript/theme";
 import { Button } from "../Button/Button";
 import { ModalContent } from "../Modal/Modal";
 

package/build/build-tokens.js

@@ -180,7 +180,12 @@ myStyleDictionary.registerFormat({
           .join("\n");
 
         // global(@theme)인 경우에만 수집해둔 시멘틱 변수(semanticCss)를 추가
-        return `${selector} {\n${cssVariables}\n${selector === "@theme" ? `\n${semanticCss}\n` : ""}} `;
+        // @theme: Tailwind 유틸리티 클래스 생성에 필요 (bg-primary, text-secondary 등)
+        // Tailwind CSS v4의 @theme은 빌드 시 자동으로 :root에도 등록되므로 별도 :root 선언 불필요
+        if (selector === "@theme") {
+          return `@theme {\n${cssVariables}\n\n${semanticCss}\n}`;
+        }
+        return `${selector} {\n${cssVariables}\n} `;
       })
       .join("\n\n");
   },

package/build/css/_variables.css

@@ -144,6 +144,104 @@
   --color-border-sidenav: var(--border-sidenav);
 } 
 
+:root {
+--color-gray-100: #f5f5f5;
+--color-gray-200: #e6e6e6;
+--color-gray-300: #dbdbdb;
+--color-gray-400: #d4d4d4;
+--color-gray-500: #cccccc;
+--color-gray-600: #bfbfbf;
+--color-gray-700: #b3b3b3;
+--color-gray-800: #a6a6a6;
+--color-gray-900: #999999;
+--color-gray-950: #707070;
+--color-dark-100: #111111;
+--color-dark-200: #222222;
+--color-dark-300: #333333;
+--color-dark-400: #444444;
+--color-dark-500: #555555;
+--color-dark-600: #666666;
+--color-dark-700: #777777;
+--color-dark-800: #888888;
+--color-dark-900: #999999;
+--color-dark-950: #b2b2b2;
+--color-blue-100: #e3f2fd;
+--color-blue-200: #bbdefb;
+--color-blue-300: #90caf9;
+--color-blue-400: #64b5f6;
+--color-blue-500: #2196f3;
+--color-blue-600: #1e88e5;
+--color-blue-700: #1976d2;
+--color-blue-800: #1565c0;
+--color-blue-900: #0d47a1;
+--color-blue-950: #0a2f6b;
+--color-indigo-100: #e8eaf6;
+--color-indigo-200: #c5cae9;
+--color-indigo-300: #7986cb;
+--color-indigo-400: #3f51b5;
+--color-indigo-500: #162c4e;
+--color-indigo-600: #122542;
+--color-indigo-700: #0e1d35;
+--color-indigo-800: #0a1628;
+--color-indigo-900: #070f1b;
+--color-indigo-950: #04080e;
+--color-red-100: #ffebee;
+--color-red-200: #ffcdd2;
+--color-red-300: #ef9a9a;
+--color-red-400: #e57373;
+--color-red-500: #f44336;
+--color-red-600: #e53935;
+--color-red-700: #d32f2f;
+--color-red-800: #c62828;
+--color-red-900: #b71c1c;
+--color-red-950: #7f1212;
+--color-yellow-100: #fff8e1;
+--color-yellow-200: #ffecb3;
+--color-yellow-300: #ffe082;
+--color-yellow-400: #ffd54f;
+--color-yellow-500: #ffb300;
+--color-yellow-600: #ffa000;
+--color-yellow-700: #ff8f00;
+--color-yellow-800: #ff6f00;
+--color-yellow-900: #e65100;
+--color-yellow-950: #9e3600;
+--color-green-100: #e8f5e9;
+--color-green-200: #c8e6c9;
+--color-green-300: #a5d6a7;
+--color-green-400: #81c784;
+--color-green-500: #4caf50;
+--color-green-600: #43a047;
+--color-green-700: #388e3c;
+--color-green-800: #2e7d32;
+--color-green-900: #1b5e20;
+--color-green-950: #104015;
+--color-black: #111111;
+--color-white: #fafafa;
+--color-primary: var(--color-blue-500);
+--color-secondary: var(--color-indigo-500);
+--color-danger: var(--color-red-500);
+--color-warning: var(--color-yellow-500);
+--color-info: var(--color-gray-900);
+--color-success: var(--color-green-500);
+--text-h1: 40px;
+--text-h2: 36px;
+--text-h3: 28px;
+--text-h4: 24px;
+--text-h5: 20px;
+--text-h6: 16px;
+--text-body: 16px;
+--text-sm: 12px;
+--font-weight-header: 700;
+--radius-common: 4px;
+--radius-circle: 10000000px;
+--font-spoqaNeo: Spoqa Han Sans Neo;
+--spacing-common-y: 12px;
+--spacing-common-x: 16px;
+--spacing-gap-small: 4px;
+--spacing-sm-y: 8px;
+--spacing-small: 20px;
+} 
+
 .white {
 --bg-card: var(--color-white);
 --bg-wrapper: var(--color-gray-200);

package/cli/add.js

@@ -51,7 +51,7 @@ function addComponent(comp) {
 
   // 컴포넌트의 CSS 파일 복제 지원
   const cssFileName = `${comp}.css`.toLowerCase();
-  const sourceCssPath = path.join(__dirname, "..", "css", cssFileName);
+  const sourceCssPath = path.join(templateDir, comp, cssFileName);
   const targetCssPath = path.join(targetDir, cssFileName);
 
   if (fs.existsSync(componentPath)) {
@@ -65,10 +65,54 @@ function addComponent(comp) {
     copyFileSync(componentPath, targetPath);
     console.log(`✅ ${comp} component typescript has been added to ${targetPath}`);
 
-    // 2) CSS 복사
+    // 2) CSS 복사 + globals.css에 @import 자동 추가
     if (fs.existsSync(sourceCssPath)) {
       copyFileSync(sourceCssPath, targetCssPath);
       console.log(`✅ ${comp} component stylesheet has been added to ${targetCssPath}`);
+
+      // globals.css에 @import 추가
+      const globalsPath = path.join(process.cwd(), "app", "globals.css");
+      const importLine = `@import "./components/${comp}/${cssFileName}";`;
+
+      if (fs.existsSync(globalsPath)) {
+        const globalsContent = fs.readFileSync(globalsPath, "utf8");
+
+        if (!globalsContent.includes(importLine)) {
+          // "/* Component Styles */" 섹션 이후에 추가, 없으면 파일 끝에 추가
+          let updatedContent;
+          const componentSectionMarker = "/* Component Styles */";
+
+          if (globalsContent.includes(componentSectionMarker)) {
+            // 마커 이후의 마지막 @import 뒤에 추가
+            const markerIndex = globalsContent.indexOf(componentSectionMarker);
+            const afterMarker = globalsContent.slice(markerIndex);
+            const lastImportInSection = afterMarker.lastIndexOf("@import");
+            
+            if (lastImportInSection !== -1) {
+              const endOfLastImport = markerIndex + lastImportInSection + afterMarker.slice(lastImportInSection).indexOf("\n") + 1;
+              updatedContent =
+                globalsContent.slice(0, endOfLastImport) +
+                importLine + "\n" +
+                globalsContent.slice(endOfLastImport);
+            } else {
+              updatedContent =
+                globalsContent.slice(0, markerIndex + componentSectionMarker.length) +
+                "\n" + importLine + "\n" +
+                globalsContent.slice(markerIndex + componentSectionMarker.length);
+            }
+          } else {
+            // 마커가 없으면 "/* Component Styles */" 섹션과 함께 파일 끝에 추가
+            updatedContent = globalsContent.trimEnd() + "\n\n/* Component Styles */\n" + importLine + "\n";
+          }
+
+          fs.writeFileSync(globalsPath, updatedContent, "utf8");
+          console.log(`✅ Added @import for ${comp} to globals.css`);
+        } else {
+          console.log(`ℹ️  ${comp} is already imported in globals.css`);
+        }
+      } else {
+        console.log(`⚠️  globals.css not found at ${globalsPath}. Please add manually:\n   ${importLine}`);
+      }
     }
     // 3) 의존성 컴포넌트 자동 복사 (Recursive Copy)
     if (dependenciesMap[comp]) {

package/cli/init.js

@@ -49,7 +49,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) {
@@ -160,6 +160,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 +217,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)) {

package/package.json

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