atomsystem 0.1.13 → 0.1.15

package/{cli → app}/templates/GlobalNav/GlobalNav.tsx

@@ -66,6 +66,11 @@ const GlobalNav = () => {
               시작하기
             </Link>
           </li>
+          <li>
+            <Link href={"/install"} className="px-4 py-2 block">
+              설치하기
+            </Link>
+          </li>
           <li>
             <Link href={"/component/input"} className="px-4 py-2 block">
               입력창

package/{cli → app}/templates/Input/Input.tsx

@@ -59,7 +59,7 @@ export const Input = ({
       <input
         type="text"
         className={clsx(
-          "transition-all border px-4 py-2 border-input-border-standard text-input-text-value rounded-input-rounded",
+          "transition-all border px-4 py-2 border-input-border-standard text-input-text-value rounded-input-rounded bg-input-background-standard",
           value ? "bg-input-background-value" : "bg-input-background-standard ",
           { "placeholder:text-input-text-placeholder": true },
           { "focus:border-input-border-focus": true },

package/cli/add.js

@@ -11,7 +11,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
 // 컴포넌트 템플릿이 위치한 디렉토리
-const templateDir = path.join(__dirname, "templates");
+const templateDir = path.join(__dirname, "..", "app", "templates");
 
 // 사용할 수 있는 컴포넌트 목록
 const components = [
@@ -55,76 +55,3 @@ if (component == "all") {
   // 특정 컴포넌트 추가
   addComponent(component);
 }
-
-// "all" 이면 모든 컴포넌트를 추가
-
-// 사용자에게 추가할 컴포넌트를 선택하도록 묻습니다.
-// inquirer
-//   .prompt([
-//     {
-//       type: "list",
-//       name: "component",
-//       message: "Which component would you like to add?",
-//       choices: ["all", ...components], // 'all'을 첫 번째로 추가
-//     },
-//   ])
-//   .then((answers) => {
-//     const { component } = answers;
-
-//     // 'all'이 선택되면 모든 컴포넌트를 추가합니다.
-//     if (component === "all") {
-//       console.log("Adding all components...");
-
-//       components.forEach((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`);
-
-//         if (fs.existsSync(componentPath)) {
-//           // 대상 디렉토리가 없으면 생성
-//           if (!fs.existsSync(targetDir)) {
-//             fs.mkdirSync(targetDir, { recursive: true });
-//             console.log(`Created directory: ${targetDir}`);
-//           }
-
-//           copyFileSync(componentPath, targetPath);
-//           console.log(`${comp} component has been added to ${targetPath}`);
-//         } else {
-//           console.log(
-//             `Component ${comp} does not exist in the templates directory.`
-//           );
-//         }
-//       });
-//     } else {
-//       // 개별 컴포넌트 추가
-//       const componentPath = path.join(
-//         templateDir,
-//         `${component}/${component}.tsx`
-//       );
-//       const targetDir = path.join(
-//         process.cwd(),
-//         "app",
-//         "components",
-//         component
-//       );
-//       const targetPath = path.join(targetDir, `${component}.tsx`);
-
-//       if (fs.existsSync(componentPath)) {
-//         // 대상 디렉토리가 없으면 생성
-//         if (!fs.existsSync(targetDir)) {
-//           fs.mkdirSync(targetDir, { recursive: true });
-//           console.log(`Created directory: ${targetDir}`);
-//         }
-
-//         copyFileSync(componentPath, targetPath);
-//         console.log(`${component} component has been added to ${targetPath}`);
-//       } else {
-//         console.log(
-//           `Component ${component} does not exist in the templates directory.`
-//         );
-//       }
-//     }
-//   })
-//   .catch((error) => {
-//     console.error("Error:", error);
-//   });

package/cli/init.js

@@ -1,9 +1,45 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 import inquirer from "inquirer";
 import { exec } from "child_process";
-import fs from "fs"; // 파일 시스템 작업을 위한 모듈
+import fs, { copyFileSync } from "fs"; // 파일 시스템 작업을 위한 모듈
 import path from "path"; // 경로 작업을 위한 모듈
 
+// 현재 실행중인 CLI 파일의 디렉토리 찾기
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// 패키지 내부 경로 설정
+const packageRoot = path.join(__dirname, "..");
+const tokenFile = path.join(packageRoot, "token.json");
+const tokenDir = path.join(packageRoot, "tokens");
+
+// 프로젝트 루트 경로 (사용자가 실행한 곳)
+const projectRoot = process.cwd();
+const targetTokenFile = path.join(projectRoot, "token.json");
+const targetTokensDir = path.join(projectRoot, "toekns");
+
+// token.json 복사
+copyFileSync(tokenFile, targetTokenFile);
+console.log(`✅ Copied: token.json -> ${targetTokenFile}`);
+
+// tokens 디렉토리 복사
+if (!fs.existsSync(targetTokensDir)) {
+  mkdirSync(targetTokensDir, { recursive: true });
+}
+
+// tokens 폴더 내의 모든 .js 파일 복사
+const tokenFiles = readdirSync(tokensDir).filter((file) =>
+  file.endsWith(".js")
+);
+tokenFiles.forEach((file) => {
+  const sourcePath = path.join(tokensDir, file);
+  const targetPath = path.join(targetTokensDir, file);
+  copyFileSync(sourcePath, targetPath);
+  console.log(`✅ Copied: ${file} -> ${targetPath}`);
+});
+
+console.log("🚀 Token setup complete!");
+
 // 사용자에게 질문을 던져서 Next.js와 React를 설치할지 물어봅니다.
 inquirer
   .prompt([
@@ -18,9 +54,10 @@ inquirer
     if (answers.installPackages) {
       console.log("Installing Next.js and React...");
 
-      // 두 패키지를 동시에 설치하는 명령어
+      // 필요 패키지를 설치하는 명령어
+      // React, Next JS, Tailwinds css
       exec(
-        "npm install next@latest react@latest react-dom@latest",
+        "npm install next@latest react@latest react-dom@latest tailwindcss",
         (err, stdout, stderr) => {
           if (err) {
             console.error(`Error: ${stderr}`);
@@ -42,6 +79,8 @@ inquirer
               packageJson.scripts = packageJson.scripts || {};
               packageJson.scripts.dev = "next dev";
               packageJson.scripts.build = "next build";
+              packageJson.scripts.build_toekn =
+                "node tokens/buildTokenSplit.js && node tokens/buildMergeCss.js";
               packageJson.scripts.start = "next start";
               packageJson.scripts.lint = "next lint";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atomsystem",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "bin": {
     "atomsystem-init": "cli/init.js",
@@ -9,9 +9,8 @@
   "files": [
     "token.json",
     "tokens",
-    "build",
     "tailwind.config.ts",
-    "cli/templates"
+    "app/templates"
   ],
   "scripts": {
     "dev": "npm run build:token && next dev",

package/build/dark.variables.css

@@ -1,275 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --black-50: #5a5a5a;
-  --black-100: #555555;
-  --black-200: #4a4a4a;
-  --black-300: #444444;
-  --black-400: #3a3a3a;
-  --black-500: #333333;
-  --black-600: #2a2a2a;
-  --black-700: #222222;
-  --black-800: #1a1a1a;
-  --black-900: #111111;
-  --gray-50: #bbbbbb;
-  --gray-100: #b3b3b3;
-  --gray-200: #9e9e9e;
-  --gray-300: #999999;
-  --gray-400: #8e8e8e;
-  --gray-500: #888888;
-  --gray-600: #7e7e7e;
-  --gray-700: #777777;
-  --gray-800: #6e6e6e;
-  --gray-900: #666666;
-  --white-50: #fafafa;
-  --white-100: #f5f5f5;
-  --white-200: #f0f0f0;
-  --white-300: #ebebeb;
-  --white-400: #e6e6e6;
-  --white-500: #e0e0e0;
-  --white-600: #dbdbdb;
-  --white-700: #d6d6d6;
-  --white-800: #d1d1d1;
-  --white-900: #cccccc;
-  --blue-50: #f6f8fd;
-  --blue-100: #ccd7f5;
-  --blue-200: #a1b6ed;
-  --blue-300: #7795e4;
-  --blue-400: #4c73dc;
-  --blue-500: #2855cc;
-  --blue-600: #2044a2;
-  --blue-700: #183277;
-  --blue-800: #0f204d;
-  --blue-900: #070e22;
-  --green-50: #f7fdf7;
-  --green-100: #cef3ce;
-  --green-200: #a5e8a5;
-  --green-300: #7dde7d;
-  --green-400: #54d454;
-  --green-500: #31c331;
-  --green-600: #279b27;
-  --green-700: #1d721d;
-  --green-800: #124912;
-  --green-900: #08210a;
-  --red-50: #fdf7f7;
-  --red-100: #f6dada;
-  --red-200: #edb0b0;
-  --red-300: #e48787;
-  --red-400: #da5d5d;
-  --red-500: #d13434;
-  --red-600: #af2828;
-  --red-700: #891f1f;
-  --red-800: #641717;
-  --red-900: #3e0e0e;
-  --brand-primary: #2855cc;
-  --brand-secondary: #0f204d;
-  --system-success: #31c331;
-  --system-danger: #d13434;
-  --system-info: #333333;
-  --fill-wrapper: #111111;
-  --fill-card: #222222;
-  --fill-info: #333333;
-  --fill-border: #444444;
-  --button-text: #fafafa;
-  --button-primary-standard-background: #2855cc;
-  --button-secondary-standard-background: #0f204d;
-  --button-success-standard-background: #31c331;
-  --button-danger-standard-background: #d13434;
-  --button-info-standard-background: #333333;
-  --icon-xs: 16px;
-  --icon-sm: 24px;
-  --icon-md: 32px;
-  --icon-lg: 48px;
-  --icon-xl: 80px;
-  --element-xxs: 160px;
-  --element-xs: 240px;
-  --element-sm: 320px;
-  --element-md: 480px;
-  --element-lg: 640px;
-  --element-xl: 960px;
-  --element-2xl: 1280px;
-  --element-3xl: 1920px;
-  --element-4xl: 2560px;
-  --element-5xl: 3840px;
-  --spacing-nogap: 0;
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-  --spacing-xl: 48px;
-  --spacing-2xl: 120px;
-  --spacing-3xl: 240px;
-  --spacing-4xl: 320px;
-  --main-title: 'Spoqa Han Sans Neo';
-  --thin: 100;
-  --extra-light: 200;
-  --light: 300;
-  --normal: 400;
-  --bold: 700;
-  --medium: 500;
-  --semi-bold: 600;
-  --extra-bold: 800;
-  --black: 900;
-  --desktop-h1-font-family: 'Spoqa Han Sans Neo';
-  --desktop-h1-font-weight: 700;
-  --desktop-h1-font-size: 48px;
-  --desktop-h1-line-height: 64;
-  --desktop-h2-font-family: 'Spoqa Han Sans Neo';
-  --desktop-h2-font-weight: 700;
-  --desktop-h2-font-size: 40px;
-  --desktop-h2-line-height: 50;
-  --desktop-h3-font-family: 'Spoqa Han Sans Neo';
-  --desktop-h3-font-weight: 700;
-  --desktop-h3-font-size: 32px;
-  --desktop-h3-line-height: 48;
-  --desktop-h4-font-family: 'Spoqa Han Sans Neo';
-  --desktop-h4-font-weight: 700;
-  --desktop-h4-font-size: 24px;
-  --desktop-h4-line-height: 36;
-  --desktop-h5-font-family: 'Spoqa Han Sans Neo';
-  --desktop-h5-font-weight: 700;
-  --desktop-h5-font-size: 20px;
-  --desktop-h5-line-height: 30;
-  --desktop-h6-font-family: 'Spoqa Han Sans Neo';
-  --desktop-h6-font-weight: 700;
-  --desktop-h6-font-size: 18px;
-  --desktop-h6-line-height: 24;
-  --desktop-body-base-font-family: 'Spoqa Han Sans Neo';
-  --desktop-body-base-font-weight: 400;
-  --desktop-body-base-font-size: 16px;
-  --desktop-body-base-line-height: 24;
-  --desktop-body-lg-font-family: 'Spoqa Han Sans Neo';
-  --desktop-body-lg-font-weight: 400;
-  --desktop-body-lg-font-size: 18px;
-  --desktop-body-lg-line-height: 24;
-  --desktop-body-sm-font-family: 'Spoqa Han Sans Neo';
-  --desktop-body-sm-font-weight: 400;
-  --desktop-body-sm-font-size: 14px;
-  --desktop-body-sm-line-height: 20;
-  --desktop-small-font-family: 'Spoqa Han Sans Neo';
-  --desktop-small-font-weight: 400;
-  --desktop-small-font-size: 12px;
-  --desktop-small-line-height: 18;
-  --desktop-small-extra-font-family: 'Spoqa Han Sans Neo';
-  --desktop-small-extra-font-weight: 400;
-  --desktop-small-extra-font-size: 10px;
-  --desktop-small-extra-line-height: 16;
-  --mobile-h1-font-family: 'Spoqa Han Sans Neo';
-  --mobile-h1-font-weight: 700;
-  --mobile-h1-font-size: 32px;
-  --mobile-h1-line-height: 48;
-  --mobile-h2-font-size: 28px;
-  --mobile-h2-font-family: 'Spoqa Han Sans Neo';
-  --mobile-h2-font-weight: 700;
-  --mobile-h2-line-height: 40;
-  --mobile-h3-font-family: 'Spoqa Han Sans Neo';
-  --mobile-h3-font-weight: 700;
-  --mobile-h3-font-size: 24px;
-  --mobile-h3-line-height: 32;
-  --mobile-h4-font-family: 'Spoqa Han Sans Neo';
-  --mobile-h4-font-weight: 700;
-  --mobile-h4-font-size: 20px;
-  --mobile-h4-line-height: 28;
-  --mobile-h5-font-family: 'Spoqa Han Sans Neo';
-  --mobile-h5-font-weight: 700;
-  --mobile-h5-font-size: 18px;
-  --mobile-h5-line-height: 24;
-  --mobile-h6-font-family: 'Spoqa Han Sans Neo';
-  --mobile-h6-font-weight: 700;
-  --mobile-h6-font-size: 16px;
-  --mobile-h6-line-height: 24;
-  --mobile-body-lg-font-family: 'Spoqa Han Sans Neo';
-  --mobile-body-lg-font-weight: 400;
-  --mobile-body-lg-font-size: 16px;
-  --mobile-body-lg-line-height: 24;
-  --mobile-body-base-font-family: 'Spoqa Han Sans Neo';
-  --mobile-body-base-font-weight: 400;
-  --mobile-body-base-font-size: 14px;
-  --mobile-body-base-line-height: 20;
-  --mobile-body-sm-font-family: 'Spoqa Han Sans Neo';
-  --mobile-body-sm-font-weight: 400;
-  --mobile-body-sm-font-size: 12px;
-  --mobile-body-sm-line-height: 18;
-  --mobile-small-font-family: 'Spoqa Han Sans Neo';
-  --mobile-small-font-weight: 400;
-  --mobile-small-font-size: 10px;
-  --mobile-small-line-height: 16;
-  --mobile-small-extra-font-family: 'Spoqa Han Sans Neo';
-  --mobile-small-extra-font-weight: 400;
-  --mobile-small-extra-font-size: 8px;
-  --mobile-small-extra-line-height: 14;
-  --rounded-common: 4px;
-  --rounded-none: 0;
-  --rounded-xs: 4px;
-  --rounded-sm: 8px;
-  --rounded-md: 16px;
-  --rounded-lg: 24px;
-  --rounded-full: 1000px;
-  --shadow-none-blur: 0;
-  --shadow-none-spread: 0;
-  --shadow-none-color: #000000;
-  --shadow-none-type: dropShadow;
-  --shadow-none-offset-x: 0;
-  --shadow-none-offset-y: 0;
-  --shadow-xs-blur: 8px;
-  --shadow-xs-spread: 0;
-  --shadow-xs-color: rgba(0, 0, 0, 0.16);
-  --shadow-xs-type: dropShadow;
-  --shadow-xs-offset-x: 2px;
-  --shadow-xs-offset-y: 2px;
-  --shadow-sm-blur: 16px;
-  --shadow-sm-spread: 0;
-  --shadow-sm-color: rgba(0, 0, 0, 0.16);
-  --shadow-sm-type: dropShadow;
-  --shadow-sm-offset-x: 4px;
-  --shadow-sm-offset-y: 4px;
-  --shadow-md-blur: 32px;
-  --shadow-md-spread: 0;
-  --shadow-md-color: rgba(0, 0, 0, 0.16);
-  --shadow-md-type: dropShadow;
-  --shadow-md-offset-x: 8px;
-  --shadow-md-offset-y: 8px;
-  --shadow-lg-blur: 64px;
-  --shadow-lg-spread: 0;
-  --shadow-lg-color: rgba(0, 0, 0, 0.16);
-  --shadow-lg-type: dropShadow;
-  --shadow-lg-offset-x: 16px;
-  --shadow-lg-offset-y: 16px;
-  --shadow-xl-blur: 120px;
-  --shadow-xl-spread: 0;
-  --shadow-xl-color: rgba(0, 0, 0, 0.16);
-  --shadow-xl-type: dropShadow;
-  --shadow-xl-offset-x: 24px;
-  --shadow-xl-offset-y: 24px;
-  --visible: 1;
-  --opacity-90: 0.9;
-  --opacity-80: 0.8;
-  --opacity-70: 0.7;
-  --opacity-60: 0.6;
-  --opacity-50: 0.5;
-  --opacity-40: 0.4;
-  --opacity-30: 0.3;
-  --opacity-20: 0.2;
-  --opacity-10: 0.1;
-  --invisible: 0;
-  --text-standard: #999999;
-  --text-sub: #666666;
-  --card-background: #222222;
-  --card-border: #444444;
-  --table-header: #2a2a2a;
-  --input-text-value: #999999;
-  --input-text-placeholder: #5a5a5a;
-  --input-text-success: #2855cc;
-  --input-text-error: #d13434;
-  --input-background-value: #222222;
-  --input-background-standard: #2a2a2a;
-  --input-background-success: #070e22;
-  --input-background-error: #3e0e0e;
-  --input-background-disabled: #3a3a3a;
-  --input-border-standard: #444444;
-  --input-border-focus: #999999;
-  --input-border-success: #2855cc;
-  --input-border-error: #d13434;
-}