atomsystem 0.1.34 → 0.1.35

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 등)
+        // :root: 컴포넌트 CSS에서 var(--radius-common) 같이 직접 참조하는 경우 브라우저 보장
+        if (selector === "@theme") {
+          return `@theme {\n${cssVariables}\n\n${semanticCss}\n} \n\n:root {\n${cssVariables}\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/package.json

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