atomsystem 0.1.40 → 0.1.41

package/app/templates/Sidebar/Sidebar.tsx

@@ -91,7 +91,7 @@ const Sidebar = ({ children, minWidth }: Sidebar) => {
 
 
   return (
-      <aside ref={sidebarRef} className={`nav-side flex-col overflow-hidden h-full`} style={{ width: isOpen ? minWidth : 0, minWidth: isOpen ? minWidth : 0 }}>
+      <aside ref={sidebarRef} className={`nav-side flex flex-col overflow-auto h-full`} style={{ width: isOpen ? minWidth : 0, minWidth: isOpen ? minWidth : 0 }}>
           {children}
       </aside>
     )

package/dist/index.js

@@ -0,0 +1,393 @@
+#!/usr/bin/env node
+
+// node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// src/index.ts
+import { Command as Command3 } from "commander";
+
+// src/commands/add.ts
+import { Command } from "commander";
+import fs from "fs";
+import path2 from "path";
+import prompts from "prompts";
+import { z } from "zod";
+
+// src/utils/logger.ts
+import chalk from "chalk";
+var logger = {
+  error(...args) {
+    console.error(chalk.red(...args));
+  },
+  warn(...args) {
+    console.warn(chalk.yellow(...args));
+  },
+  info(...args) {
+    console.info(chalk.cyan(...args));
+  },
+  success(...args) {
+    console.log(chalk.green(...args));
+  },
+  log(...args) {
+    console.log(...args);
+  },
+  break() {
+    console.log("");
+  }
+};
+
+// src/commands/add.ts
+var templateDir = path2.join(process.cwd(), "app", "templates");
+var components = [
+  "Button",
+  "Badge",
+  "Card",
+  "Collapse",
+  "CodeBlock",
+  "Navigation",
+  "Sidebar",
+  "Input",
+  "Theme",
+  "Tab",
+  "Toast",
+  "Pagination",
+  "Table",
+  "Modal",
+  "TOC",
+  "Dropdown"
+];
+var dependenciesMap = {
+  Theme: ["Button", "Form", "Modal"]
+};
+var addOptionsSchema = z.object({
+  components: z.array(z.string()).optional(),
+  all: z.boolean(),
+  cwd: z.string()
+});
+var add = new Command().name("add").description("\uD504\uB85C\uC81D\uD2B8\uC5D0 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uCD94\uAC00\uD569\uB2C8\uB2E4.").argument("[components...]", "\uCD94\uAC00\uD560 \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984 \uBAA9\uB85D").option("-a, --all", "\uC0AC\uC6A9 \uAC00\uB2A5\uD55C \uBAA8\uB4E0 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uCD94\uAC00\uD569\uB2C8\uB2E4.", false).option("-c, --cwd <cwd>", "\uC791\uC5C5 \uB514\uB809\uD1A0\uB9AC \uACBD\uB85C", process.cwd()).action(async (componentsArg, opts) => {
+  try {
+    const options = addOptionsSchema.parse({
+      components: componentsArg,
+      ...opts,
+      cwd: path2.resolve(opts.cwd)
+    });
+    let selectedComponents = options.components || [];
+    if (options.all) {
+      selectedComponents = components;
+    }
+    if (selectedComponents.length === 0) {
+      const { components: promptedComponents } = await prompts({
+        type: "multiselect",
+        name: "components",
+        message: "\uCD94\uAC00\uD560 \uCEF4\uD3EC\uB10C\uD2B8\uB97C \uC120\uD0DD\uD558\uC138\uC694:",
+        choices: components.map((comp) => ({ title: comp, value: comp }))
+      });
+      selectedComponents = promptedComponents;
+    }
+    if (!selectedComponents || selectedComponents.length === 0) {
+      logger.warn("\uC120\uD0DD\uB41C \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      return;
+    }
+    const addedComponents = /* @__PURE__ */ new Set();
+    for (const comp of selectedComponents) {
+      addComponent(comp, options.cwd, addedComponents);
+    }
+  } catch (error) {
+    logger.error("\uCEF4\uD3EC\uB10C\uD2B8 \uCD94\uAC00 \uC911 \uC624\uB958\uAC00 \uBC1C\uC0DD\uD588\uC2B5\uB2C8\uB2E4.");
+    logger.error(error);
+  }
+});
+function addComponent(comp, cwd, addedComponents) {
+  if (addedComponents.has(comp)) return;
+  addedComponents.add(comp);
+  const componentSourceDir = path2.join(templateDir, comp);
+  const componentPath = path2.join(componentSourceDir, `${comp}.tsx`);
+  const targetDir = path2.join(cwd, "app", "components", comp);
+  const targetPath = path2.join(targetDir, `${comp}.tsx`);
+  const cssFileName = `${comp}.css`.toLowerCase();
+  const sourceCssPath = path2.join(componentSourceDir, cssFileName);
+  const targetCssPath = path2.join(targetDir, cssFileName);
+  if (fs.existsSync(componentPath)) {
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true });
+      logger.info(`\uB514\uB809\uD1A0\uB9AC \uC0DD\uC131: ${targetDir}`);
+    }
+    fs.copyFileSync(componentPath, targetPath);
+    logger.success(`\u2705 ${comp} \uCEF4\uD3EC\uB10C\uD2B8(TSX)\uAC00 \uCD94\uAC00\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${targetPath}`);
+    if (fs.existsSync(sourceCssPath)) {
+      fs.copyFileSync(sourceCssPath, targetCssPath);
+      logger.success(`\u2705 ${comp} \uCEF4\uD3EC\uB10C\uD2B8(CSS)\uAC00 \uCD94\uAC00\uB418\uC5C8\uC2B5\uB2C8\uB2E4: ${targetCssPath}`);
+      updateGlobalsCss(comp, cssFileName, cwd);
+    }
+    if (dependenciesMap[comp]) {
+      logger.info(`\u23F3 ${comp}\uC758 \uC758\uC874\uC131 \uCEF4\uD3EC\uB10C\uD2B8 \uD655\uC778 \uC911...`);
+      for (const dep of dependenciesMap[comp]) {
+        addComponent(dep, cwd, addedComponents);
+      }
+    }
+  } else {
+    logger.error(`\u274C ${comp} \uCEF4\uD3EC\uB10C\uD2B8\uAC00 atomsystem\uC5D0 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.`);
+  }
+}
+function updateGlobalsCss(comp, cssFileName, cwd) {
+  const globalsPath = path2.join(cwd, "app", "globals.css");
+  const importLine = `@import "./components/${comp}/${cssFileName}";`;
+  const componentSectionMarker = "/* Component Styles */";
+  if (fs.existsSync(globalsPath)) {
+    let content = fs.readFileSync(globalsPath, "utf8");
+    if (!content.includes(importLine)) {
+      if (content.includes(componentSectionMarker)) {
+        const markerIndex = content.indexOf(componentSectionMarker);
+        const afterMarker = content.slice(markerIndex);
+        const lastImportIndex = afterMarker.lastIndexOf("@import");
+        if (lastImportIndex !== -1) {
+          const endOfLastImport = markerIndex + lastImportIndex + afterMarker.slice(lastImportIndex).indexOf("\n") + 1;
+          content = content.slice(0, endOfLastImport) + importLine + "\n" + content.slice(endOfLastImport);
+        } else {
+          content = content.slice(0, markerIndex + componentSectionMarker.length) + "\n" + importLine + "\n" + content.slice(markerIndex + componentSectionMarker.length);
+        }
+      } else {
+        content = content.trimEnd() + "\n\n" + componentSectionMarker + "\n" + importLine + "\n";
+      }
+      fs.writeFileSync(globalsPath, content, "utf8");
+      logger.success(`\u2705 globals.css\uC5D0 ${comp} @import\uB97C \uCD94\uAC00\uD588\uC2B5\uB2C8\uB2E4.`);
+    }
+  } else {
+    logger.warn(`\u26A0\uFE0F  globals.css\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. \uC218\uB3D9\uC73C\uB85C \uCD94\uAC00\uD574 \uC8FC\uC138\uC694:
+   ${importLine}`);
+  }
+}
+
+// src/commands/init.ts
+import { Command as Command2 } from "commander";
+import fs2 from "fs";
+import path3 from "path";
+import { exec } from "child_process";
+import { promisify } from "util";
+import ora from "ora";
+import prompts2 from "prompts";
+import { z as z2 } from "zod";
+var execPromise = promisify(exec);
+var initOptionsSchema = z2.object({
+  cwd: z2.string(),
+  yes: z2.boolean()
+});
+var init = new Command2().name("init").description("\uD504\uB85C\uC81D\uD2B8\uB97C \uCD08\uAE30\uD654\uD558\uACE0 atomsystem\uC744 \uC124\uC815\uD569\uB2C8\uB2E4.").option("-y, --yes", "\uBAA8\uB4E0 \uC9C8\uBB38\uC5D0 'yes'\uB85C \uC751\uB2F5\uD569\uB2C8\uB2E4.", false).option("-c, --cwd <cwd>", "\uC791\uC5C5 \uB514\uB809\uD1A0\uB9AC \uACBD\uB85C", process.cwd()).action(async (opts) => {
+  try {
+    const options = initOptionsSchema.parse({
+      ...opts,
+      cwd: path3.resolve(opts.cwd)
+    });
+    const projectRoot = options.cwd;
+    const packageJsonPath = path3.join(projectRoot, "package.json");
+    if (!fs2.existsSync(packageJsonPath)) {
+      logger.error("\u274C \uC624\uB958: \uD604\uC7AC \uB514\uB809\uD1A0\uB9AC\uC5D0\uC11C package.json\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4.");
+      logger.info("'npm init'\uC744 \uBA3C\uC800 \uC2E4\uD589\uD55C \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574 \uC8FC\uC138\uC694.");
+      process.exit(1);
+    }
+    const answers = options.yes ? { installPackages: true } : await prompts2({
+      type: "confirm",
+      name: "installPackages",
+      message: "Next.js\uC640 React\uB97C \uC124\uCE58\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?",
+      initial: true
+    });
+    if (answers.installPackages) {
+      const pkgSpinner = ora("Next.js\uC640 React \uC124\uCE58 \uC911...").start();
+      try {
+        await execPromise(
+          "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",
+          { cwd: projectRoot }
+        );
+        pkgSpinner.succeed("Next.js\uC640 React \uC124\uCE58 \uC644\uB8CC!");
+      } catch (err) {
+        pkgSpinner.fail("\uC124\uCE58 \uC911 \uC624\uB958 \uBC1C\uC0DD");
+        logger.error(err);
+        return;
+      }
+      const sdSpinner = ora("style-dictionary \uC124\uCE58 \uC911...").start();
+      try {
+        await execPromise("npm install style-dictionary -D", { cwd: projectRoot });
+        sdSpinner.succeed("style-dictionary \uC124\uCE58 \uC644\uB8CC!");
+      } catch (err) {
+        sdSpinner.fail("style-dictionary \uC124\uCE58 \uC911 \uC624\uB958 \uBC1C\uC0DD");
+        logger.error(err);
+        return;
+      }
+      try {
+        const packageJson = JSON.parse(fs2.readFileSync(packageJsonPath, "utf8"));
+        packageJson.type = "module";
+        packageJson.scripts = {
+          ...packageJson.scripts,
+          "dev": "node build/build-tokens.js && next dev",
+          "build": "next build",
+          "start": "next start",
+          "lint": "next lint",
+          "token-build": "node build/build-tokens.js"
+        };
+        fs2.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+        logger.success("\u2705 package.json \uC2A4\uD06C\uB9BD\uD2B8 \uC5C5\uB370\uC774\uD2B8 \uC644\uB8CC.");
+      } catch (err) {
+        logger.error("\u274C package.json \uC5C5\uB370\uC774\uD2B8 \uC624\uB958:", err);
+        return;
+      }
+      const appDir = path3.join(projectRoot, "app");
+      if (!fs2.existsSync(appDir)) fs2.mkdirSync(appDir, { recursive: true });
+      const files = [
+        {
+          path: path3.join(appDir, "layout.tsx"),
+          content: `import { ThemeProvider } from "./components/Theme/Theme";
+import "./globals.css";
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <ThemeProvider />
+        {children}
+        <div id="modal-root"></div>
+      </body>
+    </html>
+  )
+}`
+        },
+        {
+          path: path3.join(appDir, "globals.css"),
+          content: `@import "tailwindcss";
+@import "../build/css/_variables.css";
+@import "../css/text.css";`
+        },
+        {
+          path: path3.join(appDir, "page.tsx"),
+          content: `import { ThemeSelector } from "./components/Theme/Theme";
+import { Button } from "./components/Button/Button";
+import { Card, CardHeader, CardContent, CardFooter } from "./components/Card/Card";
+
+export default function Page() {
+  return (
+    <main style={{ padding: "40px", minHeight: "100vh", background: "var(--color-bg-wrapper)", transition: "background 0.3s ease" }}>
+      <div style={{ maxWidth: "800px", margin: "0 auto", display: "flex", flexDirection: "column", gap: "24px" }}>
+        <h1 style={{ fontSize: "var(--font-sizes-h2)", color: "var(--color-text-standard)", margin: 0 }}>Hello, atomsystem!</h1>
+        <p style={{ fontSize: "var(--font-sizes-body)", margin: 0 }}>
+          \uC774 \uD654\uBA74\uC740 \uB514\uC790\uC778 \uD1A0\uD070\uC774 \uC801\uC6A9\uB41C \uC0D8\uD50C \uD654\uBA74\uC785\uB2C8\uB2E4. \uC544\uB798 \uD14C\uB9C8\uB97C \uBCC0\uACBD\uD574\uBCF4\uC138\uC694.
+        </p>
+        
+        <ThemeSelector />
+
+        <Card>
+          <CardHeader>
+            <h2 style={{ fontSize: "var(--font-sizes-h3)", margin: 0 }}>Sample Card Components</h2>
+          </CardHeader>
+          <CardContent>
+            <p style={{ margin: 0, color: "var(--color-text-disabled)" }}>
+              \uC774 \uCE74\uB4DC\uB294 \uD14C\uB9C8 \uBCC0\uACBD \uC2DC \uBC30\uACBD\uC0C9, \uD14D\uC2A4\uD2B8 \uC0C9\uC0C1, \uD14C\uB450\uB9AC \uC0C9\uC0C1\uC774 \uC790\uB3D9\uC73C\uB85C \uBCC0\uACBD\uB429\uB2C8\uB2E4. 
+              \uC5EC\uAE30 \uC788\uB294 \uBC84\uD2BC\uB4E4\uC740 \uC81C\uACF5\uB41C Button \uCEF4\uD3EC\uB10C\uD2B8\uB85C \uAD6C\uC131\uB418\uC5C8\uC2B5\uB2C8\uB2E4.
+            </p>
+          </CardContent>
+          <CardFooter>
+            <div style={{ display: "flex", gap: "12px" }}>
+               <Button type="primary">Primary Button</Button>
+               <Button type="secondary">Secondary Button</Button>
+               <Button type="gray">Gray Button</Button>
+            </div>
+          </CardFooter>
+        </Card>
+      </div>
+    </main>
+  )
+}`
+        },
+        {
+          path: path3.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)
+        },
+        {
+          path: path3.join(projectRoot, "next.config.ts"),
+          content: `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = { reactStrictMode: false };
+export default nextConfig;`
+        },
+        {
+          path: path3.join(projectRoot, "postcss.config.mjs"),
+          content: `/** @type {import('postcss-load-config').Config} */
+const config = { plugins: { "@tailwindcss/postcss": {} } };
+export default config;`
+        }
+      ];
+      for (const file of files) {
+        fs2.writeFileSync(file.path, file.content);
+        logger.info(`\u2705 \uD30C\uC77C \uC0DD\uC131: ${file.path}`);
+      }
+      const buildTokensPath = path3.join(projectRoot, "build", "build-tokens.js");
+      if (fs2.existsSync(buildTokensPath)) {
+        const spin = ora("\uB514\uC790\uC778 \uD1A0\uD070 \uBE4C\uB4DC \uC911...").start();
+        try {
+          await execPromise(`node "${buildTokensPath}"`, { cwd: projectRoot });
+          spin.succeed("\uB514\uC790\uC778 \uD1A0\uD070 \uBE4C\uB4DC \uC644\uB8CC.");
+        } catch (err) {
+          spin.fail("\uD1A0\uD070 \uBE4C\uB4DC \uC2E4\uD328");
+          logger.error(err);
+        }
+      }
+    }
+    const tokenFile = path3.join(__dirname, "..", "..", "tokens", "tokens.json");
+    const buildFile = path3.join(__dirname, "..", "..", "build", "build-tokens.js");
+    const textCssFile = path3.join(__dirname, "..", "..", "css", "text.css");
+    copyFile(tokenFile, path3.join(projectRoot, "tokens", "tokens.json"));
+    copyFile(buildFile, path3.join(projectRoot, "build", "build-tokens.js"));
+    copyFile(textCssFile, path3.join(projectRoot, "css", "text.css"));
+    logger.success("\u{1F680} Atomsystem \uCD08\uAE30 \uC124\uC815 \uC644\uB8CC!");
+  } catch (error) {
+    logger.error("\uCD08\uAE30\uD654 \uC911 \uC624\uB958 \uBC1C\uC0DD:");
+    logger.error(error);
+  }
+});
+function copyFile(src, dest) {
+  const dir = path3.dirname(dest);
+  if (!fs2.existsSync(dir)) fs2.mkdirSync(dir, { recursive: true });
+  if (fs2.existsSync(src)) {
+    fs2.copyFileSync(src, dest);
+    logger.info(`\u2705 \uBCF5\uC0AC \uC644\uB8CC: ${src} -> ${dest}`);
+  } else {
+    logger.warn(`\u26A0\uFE0F  \uD30C\uC77C\uC744 \uCC3E\uC744 \uC218 \uC5C6\uC5B4 \uBCF5\uC0AC\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4: ${src}`);
+  }
+}
+
+// src/index.ts
+import { readFileSync } from "fs";
+import { join } from "path";
+async function main() {
+  const packageJsonPath = join(__dirname, "../package.json");
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+  const program = new Command3().name("atomsystem").description("Atom Ground Design System CLI").version(packageJson.version);
+  program.addCommand(add);
+  program.addCommand(init);
+  program.parse();
+}
+main();

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "atomsystem",
-  "version": "0.1.40",
+  "version": "0.1.41",
   "type": "module",
   "homepage": "https://system.atomground.com",
   "bin": {
-    "atomsystem-init": "cli/init.js",
-    "atomsystem-add": "cli/add.js"
+    "atomsystem": "dist/index.js"
   },
   "files": [
     "tokens",
@@ -19,7 +18,9 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "token-build": "node build/build-tokens.js"
+    "token-build": "node build/build-tokens.js",
+    "cli:build": "tsup src/index.ts --format esm --clean --shims --target node20",
+    "cli:dev": "tsx src/index.ts"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -40,13 +41,16 @@
     "@tailwindcss/postcss": "^4.0.17",
     "@tokens-studio/sd-transforms": "^1.3.0",
     "@types/mdx": "^2.0.13",
+    "chalk": "^5.6.2",
     "clsx": "^2.1.1",
+    "commander": "^14.0.3",
     "gsap": "^3.12.7",
     "highlight.js": "^11.11.1",
     "inquirer": "^12.4.2",
     "lucide-react": "^1.7.0",
     "next": "15.2.8",
     "ora": "^9.3.0",
+    "prompts": "^2.4.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-modal": "^3.16.3",
@@ -54,10 +58,12 @@
     "remark-gfm": "^4.0.1",
     "sd-tailwindcss-transformer": "^2.0.0",
     "style-dictionary": "^4.2.0",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/prompts": "^2.4.9",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/react-modal": "^3.16.3",
@@ -68,6 +74,8 @@
     "playwright": "^1.51.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.0.17",
+    "tsup": "^8.5.1",
+    "tsx": "^4.21.0",
     "typescript": "^5",
     "vitest": "^3.1.1"
   }

package/cli/add.js

@@ -1,143 +0,0 @@
-#!/usr/bin/env node
-import inquirer from "inquirer";
-import fs from "fs";
-import path from "path";
-import { copyFileSync } from "fs";
-import { fileURLToPath } from "url";
-
-// 현재 실행중인 CLI 파일의 디렉토리 찾기
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-// 컴포넌트 템플릿이 위치한 디렉토리
-const templateDir = path.join(__dirname, "..", "app", "templates");
-
-// 사용할 수 있는 컴포넌트 목록
-const components = [
-  "Button",
-  "Badge",
-  "Card",
-  "Collapse",
-  "CodeBlock",
-  "Navigation",
-  "Sidebar",
-  "Input",
-  "Theme",
-  "Tab",
-  "Toast",
-  "Pagination",
-  "Table",
-  "Modal",
-  "TOC",
-  "Dropdown",
-]; // 여기 추가할 컴포넌트 목록
-
-
-// 명령어에서 컴포넌트 이름 가져오기
-const args = process.argv.slice(2); // 'npx atomsystem-add Button -> [Button]'
-const component = args[0] || "all"; // '사용자가 입력하지 않으면 기본적으로 'all''
-
-// 일부 컴포넌트의 의존성 구조 (Theme 설치시 내부적으로 Button, Form, Modal 등이 필요함)
-const dependenciesMap = {
-  Theme: ["Button", "Form", "Modal"], // Form 안에는 Radio가 들어있음
-};
-
-// 재귀 방지를 위한 Set
-const addedComponents = new Set();
-
-function addComponent(comp) {
-  if (addedComponents.has(comp)) return;
-  addedComponents.add(comp);
-  const componentPath = path.join(templateDir, comp, `${comp}.tsx`);
-  const targetDir = path.join(process.cwd(), "app", "components", comp);
-  const targetPath = path.join(targetDir, `${comp}.tsx`);
-
-  // 컴포넌트의 CSS 파일 복제 지원
-  const cssFileName = `${comp}.css`.toLowerCase();
-  const sourceCssPath = path.join(templateDir, comp, cssFileName);
-  const targetCssPath = path.join(targetDir, cssFileName);
-
-  if (fs.existsSync(componentPath)) {
-    // 대상 디렉토리가 없으면 생성
-    if (!fs.existsSync(targetDir)) {
-      fs.mkdirSync(targetDir, { recursive: true });
-      console.log(`Created directory: ${targetDir}`);
-    }
-    
-    // 1) TSX 복사
-    copyFileSync(componentPath, targetPath);
-    console.log(`✅ ${comp} component typescript has been added to ${targetPath}`);
-
-    // 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]) {
-      console.log(`\n⏳ Checking dependencies for ${comp}...`);
-      dependenciesMap[comp].forEach((dep) => {
-        addComponent(dep);
-      });
-      console.log(`✅ Finished adding dependencies for ${comp}.\n`);
-    }
-
-  } else {
-    console.log(`❌ Component ${comp} does not exist in the atomsystem.`);
-  }
-}
-
-if (component == "all") {
-  console.log("Adding all components...");
-
-  components.forEach((comp) => {
-    addComponent(comp);
-  });
-} else {
-  // 특정 컴포넌트 추가
-  addComponent(component);
-}

package/cli/init.js

@@ -1,276 +0,0 @@
-#!/usr/bin/env node
-import inquirer from "inquirer";
-import ora from "ora";
-import { exec } from "child_process";
-import fs, { copyFileSync, mkdirSync, readdirSync } from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import { promisify } from "util";
-
-const execPromise = promisify(exec);
-
-// 현재 실행중인 CLI 파일의 디렉토리 찾기
-const __filename = fileURLToPath(import.meta.url);
-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();
-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");
-if (!fs.existsSync(packageJsonPath)) {
-  console.error("❌ Error: package.json not found in the current directory.");
-  console.error("Please run 'npm init' or 'npm init -y' before running atomsystem-init.");
-  process.exit(1);
-}
-
-// 사용자에게 Next.js 설치 여부 질문
-inquirer
-  .prompt([
-    {
-      type: "confirm",
-      name: "installPackages",
-      message: "Do you want to install Next.js and React?",
-      default: true,
-    },
-  ])
-  .then(async (answers) => {
-    if (answers.installPackages) {
-      const pkgSpinner = ora("Installing Next.js and React...").start();
-
-      try {
-        await execPromise(
-          "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) {
-        pkgSpinner.fail("Error during Next.js/React installation");
-        console.error(err);
-        return;
-      }
-
-      const sdSpinner = ora("Installing style-dictionary for atom design tokens...").start();
-      try {
-        await execPromise("npm install style-dictionary -D");
-        sdSpinner.succeed("style-dictionary installation complete!");
-      } catch (err) {
-        sdSpinner.fail("Error during style-dictionary installation");
-        console.error(err);
-        return;
-      }
-
-      // package.json 업데이트
-      const packageJsonPath = path.join(projectRoot, "package.json");
-      try {
-        const packageJson = JSON.parse(
-          fs.readFileSync(packageJsonPath, "utf8")
-        );
-
-        packageJson.type = "module";
-        packageJson.scripts = {
-          ...packageJson.scripts,
-          "dev": "node build/build-tokens.js && next dev",
-          "build": "next build",
-          "start": "next start",
-          "lint": "next lint",
-          "token-build": "node build/build-tokens.js",
-        };
-
-        fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
-        console.log("✅ Updated package.json with scripts.");
-      } catch (err) {
-        console.error("❌ Error updating package.json:", err);
-        return;
-      }
-
-      // app 디렉토리 생성 및 파일 추가
-      const appDir = path.join(projectRoot, "app");
-      if (!fs.existsSync(appDir)) mkdirSync(appDir);
-
-      // components 및 Theme 디렉토리 생성은 add.js 가 알아서 처리하므로 여기서는 page.tsx 와 layout.tsx, globals.css 만 생성합니다.
-      const files = [
-        {
-          path: path.join(appDir, "layout.tsx"),
-          content: `import { ThemeProvider } from "./components/Theme/Theme";
-import "./globals.css";
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body>
-        <ThemeProvider />
-        {children}
-        <div id="modal-root"></div>
-      </body>
-    </html>
-  )
-}`,
-        },
-        {
-          path: path.join(appDir, "globals.css"),
-          content: `@import "tailwindcss";
-@import "../build/css/_variables.css";
-@import "../css/text.css";`,
-        },
-        {
-          path: path.join(appDir, "page.tsx"),
-          content: `import { ThemeSelector } from "./components/Theme/Theme";
-import { Button } from "./components/Button/Button";
-import { Card, CardHeader, CardContent, CardFooter } from "./components/Card/Card";
-
-export default function Page() {
-  return (
-    <main style={{ padding: "40px", minHeight: "100vh", background: "var(--color-bg-wrapper)", transition: "background 0.3s ease" }}>
-      <div style={{ maxWidth: "800px", margin: "0 auto", display: "flex", flexDirection: "column", gap: "24px" }}>
-        <h1 style={{ fontSize: "var(--font-sizes-h2)", color: "var(--color-text-standard)", margin: 0 }}>Hello, atomsystem!</h1>
-        <p style={{ fontSize: "var(--font-sizes-body)", margin: 0 }}>
-          이 화면은 디자인 토큰이 적용된 샘플 화면입니다. 아래 테마를 변경해보세요.
-        </p>
-        
-        <ThemeSelector />
-
-        <Card>
-          <CardHeader>
-            <h2 style={{ fontSize: "var(--font-sizes-h3)", margin: 0 }}>Sample Card Components</h2>
-          </CardHeader>
-          <CardContent>
-            <p style={{ margin: 0, color: "var(--color-text-disabled)" }}>
-              이 카드는 테마 변경 시 배경색, 텍스트 색상, 테두리 색상이 자동으로 변경됩니다. 
-              여기 있는 버튼들은 제공된 Button 컴포넌트로 구성되었습니다.
-            </p>
-          </CardContent>
-          <CardFooter>
-            <div style={{ display: "flex", gap: "12px" }}>
-               <Button type="primary">Primary Button</Button>
-               <Button type="secondary">Secondary Button</Button>
-               <Button type="gray">Gray Button</Button>
-            </div>
-          </CardFooter>
-        </Card>
-      </div>
-    </main>
-  )
-}`,
-        },
-        // ✅ 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 }) => {
-        fs.writeFileSync(path, content);
-        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)) {
-        console.log("⏳ Adding default components via add.js...");
-        try {
-          // Theme 설치 (Theme 내부에 Button 등이 포함되어 있음)
-          await execPromise(`node "${addScriptPath}" Theme`, { cwd: projectRoot });
-          // Card 설치
-          await execPromise(`node "${addScriptPath}" Card`, { cwd: projectRoot });
-          console.log("✅ Default components (Theme, Card, Button 등) added successfully.");
-        } catch (err) {
-          console.error("❌ Failed to add components:", err);
-        }
-      }
-    } else {
-      console.log("🚀 Installation skipped.");
-    }
-
-    // ✅ 필수 파일 복사 (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!");
-  })
-  .catch((error) => {
-    console.error("❌ Error:", error);
-  });