create-ait-app 0.0.2 → 0.0.3

package/src/sample-configs.js

@@ -0,0 +1,140 @@
+/**
+ * React + TypeScript 샘플 주입 메타데이터 (react-ts)
+ */
+const REACT_SAMPLE_CONFIG = {
+  iap: {
+    displayName: "인앱결제",
+    import: 'import { InAppPurchasePage } from "./pages/InAppPurchasePage";',
+    route:
+      '  if (page === "iap") return <InAppPurchasePage onBack={() => setPage(null)} />;',
+    getButton: () =>
+      '<button type="button" className="app-button app-button-ghost" onClick={() => setPage("iap")}>인앱결제 테스트하기</button>',
+  },
+  iaa: {
+    displayName: "인앱광고",
+    import: 'import { InAppAdsPage } from "./pages/InAppAdsPage";',
+    route:
+      '  if (page === "iaa") return <InAppAdsPage onBack={() => setPage(null)} />;',
+    getButton: () =>
+      '<button type="button" className="app-button app-button-ghost" onClick={() => setPage("iaa")}>인앱광고 테스트하기</button>',
+  },
+};
+
+/**
+ * React + JavaScript 샘플 주입 메타데이터 (react)
+ */
+const REACT_JS_SAMPLE_CONFIG = {
+  iap: {
+    displayName: "인앱결제",
+    import:
+      'import { InAppPurchasePage } from "./pages/InAppPurchasePage.jsx";',
+    route:
+      '  if (page === "iap") return <InAppPurchasePage onBack={() => setPage(null)} />;',
+    getButton: () =>
+      '<button type="button" className="app-button app-button-ghost" onClick={() => setPage("iap")}>인앱결제 테스트하기</button>',
+  },
+  iaa: {
+    displayName: "인앱광고",
+    import: 'import { InAppAdsPage } from "./pages/InAppAdsPage.jsx";',
+    route:
+      '  if (page === "iaa") return <InAppAdsPage onBack={() => setPage(null)} />;',
+    getButton: () =>
+      '<button type="button" className="app-button app-button-ghost" onClick={() => setPage("iaa")}>인앱광고 테스트하기</button>',
+  },
+};
+
+/**
+ * React + TypeScript + TDS 샘플 주입 메타데이터 (react-ts-tds)
+ */
+const REACT_TDS_SAMPLE_CONFIG = {
+  iap: {
+    displayName: "인앱결제",
+    import: 'import { InAppPurchasePage } from "./pages/InAppPurchasePage";',
+    route:
+      '  if (page === "iap") return <InAppPurchasePage onBack={() => setPage(null)} />;',
+    getButton: () =>
+      '<Button color="dark" variant="weak" onClick={() => setPage("iap")}>인앱결제 테스트하기</Button>',
+  },
+  iaa: {
+    displayName: "인앱광고",
+    import: 'import { InAppAdsPage } from "./pages/InAppAdsPage";',
+    route:
+      '  if (page === "iaa") return <InAppAdsPage onBack={() => setPage(null)} />;',
+    getButton: () =>
+      '<Button color="dark" variant="weak" onClick={() => setPage("iaa")}>인앱광고 테스트하기</Button>',
+  },
+};
+
+/**
+ * Vanilla JavaScript 샘플 주입 메타데이터 (js)
+ */
+const JS_SAMPLE_CONFIG = {
+  iap: {
+    displayName: "인앱결제",
+    import:
+      'import { mountInAppPurchasePage } from "./pages/InAppPurchasePage.js";',
+    route: `  if (currentPage === "iap") {
+    mountInAppPurchasePage(() => {
+      currentPage = null;
+      render();
+    });
+    return;
+  }`,
+    getButton: () =>
+      '<button type="button" class="app-button app-button-ghost" data-page="iap">인앱결제 테스트하기</button>',
+  },
+  iaa: {
+    displayName: "인앱광고",
+    import: 'import { mountInAppAdsPage } from "./pages/InAppAdsPage.js";',
+    route: `  if (currentPage === "iaa") {
+    mountInAppAdsPage(() => {
+      currentPage = null;
+      render();
+    });
+    return;
+  }`,
+    getButton: () =>
+      '<button type="button" class="app-button app-button-ghost" data-page="iaa">인앱광고 테스트하기</button>',
+  },
+};
+
+/**
+ * Vanilla TypeScript 샘플 주입 메타데이터 (ts)
+ */
+const TS_SAMPLE_CONFIG = {
+  iap: {
+    displayName: "인앱결제",
+    import:
+      'import { mountInAppPurchasePage } from "./pages/InAppPurchasePage.ts";',
+    route: `  if (currentPage === "iap") {
+    mountInAppPurchasePage(() => {
+      currentPage = null;
+      render();
+    });
+    return;
+  }`,
+    getButton: () =>
+      '<button type="button" class="app-button app-button-ghost" data-page="iap">인앱결제 테스트하기</button>',
+  },
+  iaa: {
+    displayName: "인앱광고",
+    import: 'import { mountInAppAdsPage } from "./pages/InAppAdsPage.ts";',
+    route: `  if (currentPage === "iaa") {
+    mountInAppAdsPage(() => {
+      currentPage = null;
+      render();
+    });
+    return;
+  }`,
+    getButton: () =>
+      '<button type="button" class="app-button app-button-ghost" data-page="iaa">인앱광고 테스트하기</button>',
+  },
+};
+
+module.exports = {
+  REACT_SAMPLE_CONFIG,
+  REACT_JS_SAMPLE_CONFIG,
+  REACT_TDS_SAMPLE_CONFIG,
+  JS_SAMPLE_CONFIG,
+  TS_SAMPLE_CONFIG,
+};

package/src/sample-inject.js

@@ -0,0 +1,65 @@
+function injectReactSamples(
+  appContent,
+  sampleChoices,
+  sampleConfig,
+  isTypeScript,
+) {
+  const hasSamples = sampleChoices.length > 0;
+  const sampleImports = hasSamples
+    ? sampleChoices
+        .map((id) => sampleConfig[id]?.import)
+        .filter(Boolean)
+        .join("\n") + '\nimport { useState } from "react";'
+    : "";
+  const pageState = isTypeScript
+    ? "useState<string | null>(null)"
+    : "useState(null)";
+  const pageStateAndRoutes = hasSamples
+    ? `  const [page, setPage] = ${pageState};\n\n` +
+      sampleChoices
+        .map((id) => sampleConfig[id]?.route)
+        .filter(Boolean)
+        .join("\n") +
+      "\n\n"
+    : "";
+  const sampleButtons = hasSamples
+    ? sampleChoices
+        .map((id) => sampleConfig[id]?.getButton())
+        .filter(Boolean)
+        .join("\n\n        ")
+    : "";
+
+  return appContent
+    .replace("{{SAMPLE_IMPORTS}}", sampleImports)
+    .replace("{{PAGE_STATE_AND_ROUTES}}", pageStateAndRoutes)
+    .replace("{{SAMPLE_BUTTONS}}", sampleButtons);
+}
+
+function injectVanillaSamples(appContent, sampleChoices, sampleConfig) {
+  const hasSamples = sampleChoices.length > 0;
+  const sampleImports = hasSamples
+    ? sampleChoices
+        .map((id) => sampleConfig[id]?.import)
+        .filter(Boolean)
+        .join("\n")
+    : "";
+  const sampleRoutes = hasSamples
+    ? sampleChoices
+        .map((id) => sampleConfig[id]?.route)
+        .filter(Boolean)
+        .join("\n")
+    : "";
+  const sampleButtons = hasSamples
+    ? sampleChoices
+        .map((id) => sampleConfig[id]?.getButton())
+        .filter(Boolean)
+        .join("\n\n        ")
+    : "";
+
+  return appContent
+    .replace("{{SAMPLE_IMPORTS}}", sampleImports)
+    .replace("{{SAMPLE_ROUTES}}", sampleRoutes)
+    .replace("{{SAMPLE_BUTTONS}}", sampleButtons);
+}
+
+module.exports = { injectReactSamples, injectVanillaSamples };

package/src/scaffold.js

@@ -0,0 +1,111 @@
+const { execSync } = require("child_process");
+const fs = require("fs");
+const path = require("path");
+const { copyDir } = require("./utils/copy-dir");
+const { injectReactSamples, injectVanillaSamples } = require("./sample-inject");
+const { SAMPLE_PRIMARY_COLOR } = require("./templates");
+
+function scaffoldProject({
+  templateDir,
+  targetDir,
+  template,
+  sampleConfig,
+  sampleChoices,
+  projectName,
+  packageName,
+  packageManager,
+}) {
+  copyDir(templateDir, targetDir, { exclude: ["samples"] });
+
+  const pkgPath = path.join(targetDir, "package.json");
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+  pkg.name = packageName;
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + "\n");
+
+  const configPath = path.join(targetDir, "granite.config.ts");
+  const configContent = fs.readFileSync(configPath, "utf-8");
+  fs.writeFileSync(
+    configPath,
+    configContent
+      .replace("{{APP_NAME}}", projectName)
+      .replace(
+        "{{PRIMARY_COLOR}}",
+        SAMPLE_PRIMARY_COLOR[
+          Math.floor(Math.random() * SAMPLE_PRIMARY_COLOR.length)
+        ],
+      ),
+  );
+
+  const readmePath = path.join(targetDir, "README.md");
+  const pmDev =
+    packageManager === "npm" ? "npm run dev" : `${packageManager} dev`;
+  const pmBuild =
+    packageManager === "npm" ? "npm run build" : `${packageManager} build`;
+  const pmDeploy =
+    packageManager === "npm" ? "npm run deploy" : `${packageManager} deploy`;
+
+  let readmeContent = fs.readFileSync(readmePath, "utf-8");
+  readmeContent = readmeContent
+    .replace(/\{\{APP_NAME\}\}/g, projectName)
+    .replace(/\{\{PM_DEV\}\}/g, pmDev)
+    .replace(/\{\{PM_BUILD\}\}/g, pmBuild)
+    .replace(/\{\{PM_DEPLOY\}\}/g, pmDeploy);
+  fs.writeFileSync(readmePath, readmeContent);
+
+  const samplesDir = path.join(templateDir, "samples");
+  for (const id of sampleChoices) {
+    const sampleRoot = path.join(samplesDir, id);
+    if (fs.existsSync(sampleRoot)) {
+      copyDir(sampleRoot, targetDir);
+    }
+  }
+
+  const appPath = path.join(targetDir, template.appFile);
+  if (fs.existsSync(appPath)) {
+    let appContent = fs.readFileSync(appPath, "utf-8");
+    appContent = template.isVanilla
+      ? injectVanillaSamples(appContent, sampleChoices, sampleConfig)
+      : injectReactSamples(
+          appContent,
+          sampleChoices,
+          sampleConfig,
+          template.isTypeScript,
+        );
+    fs.writeFileSync(appPath, appContent);
+  }
+}
+
+function installDependencies(targetDir, packageManager) {
+  console.log(`📦 의존성을 설치합니다...\n`);
+
+  const installCommands = {
+    npm: "npm install",
+    yarn: "yarn",
+    pnpm: "pnpm install",
+  };
+  execSync(installCommands[packageManager], {
+    stdio: "inherit",
+    cwd: targetDir,
+  });
+
+  console.log(`\n📦 @apps-in-toss/web-framework 최신 버전을 설치합니다...\n`);
+
+  const addCmd = { npm: "npm install", yarn: "yarn add", pnpm: "pnpm add" };
+  execSync(`${addCmd[packageManager]} @apps-in-toss/web-framework@latest`, {
+    stdio: "inherit",
+    cwd: targetDir,
+  });
+}
+
+function formatProject(targetDir, packageManager) {
+  console.log(`\n📐 코드 포맷팅을 실행합니다...\n`);
+  const formatCmd =
+    packageManager === "npm" ? "npm run format" : `${packageManager} format`;
+  execSync(formatCmd, { stdio: "inherit", cwd: targetDir });
+}
+
+module.exports = {
+  scaffoldProject,
+  installDependencies,
+  formatProject,
+};

package/src/skills.js

@@ -0,0 +1,66 @@
+const fs = require("fs");
+const path = require("path");
+const { fetchText } = require("./utils/fetch-text");
+
+async function writeAiSkills({ targetDir, aiTool, useTds }) {
+  console.log(`\n📄 AI skills 파일을 추가합니다... (${aiTool})\n`);
+
+  const aitDocs = await fetchText(
+    "https://developers-apps-in-toss.toss.im/llms.txt",
+  );
+  let tdsDocs;
+  if (useTds) {
+    tdsDocs = await fetchText(
+      "https://tossmini-docs.toss.im/tds-mobile/llms-full.txt",
+    );
+  }
+
+  if (aiTool === "cursor") {
+    const skillsDir = path.join(targetDir, ".cursor", "skills");
+    fs.mkdirSync(skillsDir, { recursive: true });
+    fs.writeFileSync(path.join(skillsDir, "apps-in-toss.md"), aitDocs);
+    console.log("  ✓ .cursor/skills/apps-in-toss.md 추가 완료");
+    if (tdsDocs) {
+      fs.writeFileSync(path.join(skillsDir, "tds-mobile.md"), tdsDocs);
+      console.log("  ✓ .cursor/skills/tds-mobile.md 추가 완료");
+    }
+  } else if (aiTool === "claude") {
+    const docsDir = path.join(targetDir, "docs", "skills");
+    fs.mkdirSync(docsDir, { recursive: true });
+
+    fs.writeFileSync(path.join(docsDir, "apps-in-toss.md"), aitDocs);
+    console.log("  ✓ docs/skills/apps-in-toss.md 추가 완료");
+
+    if (tdsDocs) {
+      fs.writeFileSync(path.join(docsDir, "tds-mobile.md"), tdsDocs);
+      console.log("  ✓ docs/skills/tds-mobile.md 추가 완료");
+    }
+
+    let claudeMd = "@docs/skills/apps-in-toss.md\n";
+    if (tdsDocs) {
+      claudeMd += "@docs/skills/tds-mobile.md\n";
+    }
+    fs.writeFileSync(path.join(targetDir, "CLAUDE.md"), claudeMd);
+    console.log("  ✓ CLAUDE.md 추가 완료");
+  } else if (aiTool === "codex") {
+    const docsDir = path.join(targetDir, "docs", "skills");
+    fs.mkdirSync(docsDir, { recursive: true });
+
+    fs.writeFileSync(path.join(docsDir, "apps-in-toss.md"), aitDocs);
+    console.log("  ✓ docs/skills/apps-in-toss.md 추가 완료");
+
+    if (tdsDocs) {
+      fs.writeFileSync(path.join(docsDir, "tds-mobile.md"), tdsDocs);
+      console.log("  ✓ docs/skills/tds-mobile.md 추가 완료");
+    }
+
+    let agentsMd = "docs/skills/apps-in-toss.md 파일을 참고하세요.\n";
+    if (tdsDocs) {
+      agentsMd += "docs/skills/tds-mobile.md 파일을 참고하세요.\n";
+    }
+    fs.writeFileSync(path.join(targetDir, "AGENTS.md"), agentsMd);
+    console.log("  ✓ AGENTS.md 추가 완료");
+  }
+}
+
+module.exports = { writeAiSkills };

package/src/templates.js

@@ -0,0 +1,88 @@
+const path = require("path");
+const {
+  REACT_SAMPLE_CONFIG,
+  REACT_JS_SAMPLE_CONFIG,
+  REACT_TDS_SAMPLE_CONFIG,
+  JS_SAMPLE_CONFIG,
+  TS_SAMPLE_CONFIG,
+} = require("./sample-configs");
+
+const TEMPLATES_DIR = path.resolve(__dirname, "..", "templates");
+
+const TEMPLATE_IDS = ["react-ts", "react", "js", "ts"];
+
+const TEMPLATE_REGISTRY = {
+  "react-ts": {
+    appFile: "src/App.tsx",
+    isVanilla: false,
+    isTypeScript: true,
+    useTds: false,
+    sampleConfig: REACT_SAMPLE_CONFIG,
+  },
+  react: {
+    appFile: "src/App.jsx",
+    isVanilla: false,
+    isTypeScript: false,
+    useTds: false,
+    sampleConfig: REACT_JS_SAMPLE_CONFIG,
+  },
+  "react-ts-tds": {
+    appFile: "src/App.tsx",
+    isVanilla: false,
+    isTypeScript: true,
+    useTds: true,
+    sampleConfig: REACT_TDS_SAMPLE_CONFIG,
+  },
+  js: {
+    appFile: "src/app.js",
+    isVanilla: true,
+    isTypeScript: false,
+    useTds: false,
+    sampleConfig: JS_SAMPLE_CONFIG,
+  },
+  ts: {
+    appFile: "src/app.ts",
+    isVanilla: true,
+    isTypeScript: true,
+    useTds: false,
+    sampleConfig: TS_SAMPLE_CONFIG,
+  },
+};
+
+const SAMPLE_PRIMARY_COLOR = [
+  "#FF8A65",
+  "#FD9B3C",
+  "#E0B20C",
+  "#3FD599",
+  "#81C784",
+  "#4DB6AC",
+  "#4DD0E1",
+  "#64B5F6",
+  "#655DFF",
+  "#9575CD",
+  "#BA68C8",
+  "#FF91D5",
+  "#F06292",
+  "#D7B59E",
+];
+
+const TEMPLATE_CHOICES = [
+  { name: "react-ts — React + TypeScript (기본)", value: "react-ts" },
+  { name: "react — React + JavaScript", value: "react" },
+  { name: "js — Vanilla JavaScript", value: "js" },
+  { name: "ts — Vanilla TypeScript", value: "ts" },
+];
+
+function resolveTemplateFolder(baseTemplateId, useTds) {
+  if (baseTemplateId === "react-ts" && useTds) return "react-ts-tds";
+  return baseTemplateId;
+}
+
+module.exports = {
+  TEMPLATES_DIR,
+  TEMPLATE_IDS,
+  TEMPLATE_REGISTRY,
+  TEMPLATE_CHOICES,
+  SAMPLE_PRIMARY_COLOR,
+  resolveTemplateFolder,
+};

package/src/utils/copy-dir.js

@@ -0,0 +1,19 @@
+const fs = require("fs");
+const path = require("path");
+
+function copyDir(src, dest, { exclude = [] } = {}) {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    if (exclude.includes(entry.name)) continue;
+
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, { exclude });
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+module.exports = { copyDir };

package/src/utils/fetch-text.js

@@ -0,0 +1,47 @@
+const https = require("https");
+const http = require("http");
+const zlib = require("zlib");
+
+function fetchText(url) {
+  return new Promise((resolve, reject) => {
+    const get = (targetUrl) => {
+      const client = targetUrl.startsWith("https") ? https : http;
+      const req = client.get(
+        targetUrl,
+        { headers: { "Accept-Encoding": "gzip, deflate" } },
+        (res) => {
+          if (
+            res.statusCode >= 300 &&
+            res.statusCode < 400 &&
+            res.headers.location
+          ) {
+            get(res.headers.location);
+            return;
+          }
+          if (res.statusCode !== 200) {
+            reject(new Error(`HTTP ${res.statusCode} for ${targetUrl}`));
+            return;
+          }
+
+          let stream = res;
+          const encoding = res.headers["content-encoding"];
+          if (encoding === "gzip") {
+            stream = res.pipe(zlib.createGunzip());
+          } else if (encoding === "deflate") {
+            stream = res.pipe(zlib.createInflate());
+          }
+
+          let data = "";
+          stream.setEncoding("utf-8");
+          stream.on("data", (chunk) => (data += chunk));
+          stream.on("end", () => resolve(data));
+          stream.on("error", reject);
+        },
+      );
+      req.on("error", reject);
+    };
+    get(url);
+  });
+}
+
+module.exports = { fetchText };

package/src/utils/package-name.js

@@ -0,0 +1,26 @@
+function toNpmPackageName(input) {
+  const raw = String(input || "").trim();
+  if (!raw) return "my-app";
+
+  if (raw.startsWith("@")) {
+    const slash = raw.indexOf("/");
+    if (slash > 1) {
+      const scope = raw.slice(0, slash).toLowerCase();
+      const name = raw.slice(slash + 1);
+      const normalizedName = toNpmPackageName(name);
+      return `${scope}/${normalizedName}`;
+    }
+  }
+
+  return (
+    raw
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^a-z0-9._-]/g, "-")
+      .replace(/-+/g, "-")
+      .replace(/^[._-]+/, "")
+      .replace(/[._-]+$/, "") || "my-app"
+  );
+}
+
+module.exports = { toNpmPackageName };

package/templates/js/eslint.config.js

@@ -0,0 +1,14 @@
+import js from "@eslint/js";
+import globals from "globals";
+
+export default [
+  { ignores: ["dist"] },
+  {
+    files: ["**/*.{js,mjs}"],
+    ...js.configs.recommended,
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+];

package/templates/js/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AIT App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/js/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{APP_NAME}}",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "granite dev",
+    "build": "ait build",
+    "deploy": "ait deploy",
+    "lint": "eslint .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "eslint": "^9.21.0",
+    "globals": "^15.15.0",
+    "prettier": "^3.4.2",
+    "vite": "^6.2.0"
+  }
+}