create-ait-app 0.0.1 → 0.0.3

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"
+  }
+}

package/templates/js/samples/iaa/src/lib/inAppAds.js

@@ -0,0 +1,119 @@
+import {
+  loadFullScreenAd,
+  showFullScreenAd,
+} from "@apps-in-toss/web-framework";
+
+// 참고문서: https://developers-apps-in-toss.toss.im/ads/intro.html
+export function createInAppAds(adGroupId) {
+  const state = {
+    isAdLoaded: false,
+    isSupported: false,
+    lastReward: null,
+  };
+
+  let onUpdate = () => {};
+  let unregister = null;
+
+  function notify() {
+    onUpdate();
+  }
+
+  function load() {
+    state.isAdLoaded = false;
+    notify();
+
+    try {
+      unregister = loadFullScreenAd({
+        options: { adGroupId },
+        onEvent: (event) => {
+          if (event.type === "loaded") {
+            state.isAdLoaded = true;
+            notify();
+          }
+        },
+        onError: (error) => {
+          console.error("광고 로드 실패:", error);
+        },
+      });
+    } catch (error) {
+      alert(
+        "광고 로드 실패: \n\n- 인앱광고 기능은 브라우저가 아닌 샌드박스앱/토스앱에서 실행해주세요\n\n" +
+          error,
+      );
+    }
+  }
+
+  function showAd() {
+    if (!state.isSupported) {
+      console.info("현재 환경에서는 인앱 광고가 지원되지 않습니다.");
+      return;
+    }
+
+    if (!state.isAdLoaded) {
+      console.info("아직 광고가 로드되지 않았습니다.");
+      return;
+    }
+
+    try {
+      showFullScreenAd({
+        options: { adGroupId },
+        onEvent: (event) => {
+          switch (event.type) {
+            case "userEarnedReward":
+              state.lastReward = event.data;
+              notify();
+              break;
+            case "dismissed":
+              state.isAdLoaded = false;
+              notify();
+              load();
+              break;
+            case "failedToShow":
+              console.error("광고 표시 실패");
+              state.isAdLoaded = false;
+              notify();
+              load();
+              break;
+          }
+        },
+        onError: (error) => {
+          console.error("광고 표시 실패:", error);
+          state.isAdLoaded = false;
+          notify();
+          load();
+        },
+      });
+    } catch (error) {
+      console.error("광고 표시 실패:", error);
+      state.isAdLoaded = false;
+      notify();
+      load();
+    }
+  }
+
+  try {
+    state.isSupported = loadFullScreenAd.isSupported();
+    if (state.isSupported) {
+      load();
+    }
+  } catch (error) {
+    console.error("광고 지원 여부 확인 실패:", error);
+    state.isSupported = false;
+  }
+
+  return {
+    getState: () => state,
+    showAd,
+    subscribe: (listener) => {
+      onUpdate = listener;
+      return () => {
+        onUpdate = () => {};
+        try {
+          unregister?.();
+        } catch (error) {
+          console.error("광고 정리(cleanup) 중 에러:", error);
+        }
+      };
+    },
+  };
+}

package/templates/js/samples/iaa/src/pages/InAppAdsPage.js

@@ -0,0 +1,83 @@
+import { createInAppAds } from "../lib/inAppAds.js";
+import "./InAppAdsPage.css";
+
+// TODO: 서비스를 출시하기 전에 앱인토스 콘솔에서 발급한 광고그룹ID로 변경해주세요.
+const TEST_INTERSTITIAL_ID = "ait-ad-test-interstitial-id";
+const TEST_REWARDED_ID = "ait-ad-test-rewarded-id";
+
+export function mountInAppAdsPage(onBack) {
+  const root = document.getElementById("root");
+  const interstitial = createInAppAds(TEST_INTERSTITIAL_ID);
+  const rewarded = createInAppAds(TEST_REWARDED_ID);
+
+  function render() {
+    const interstitialState = interstitial.getState();
+    const rewardedState = rewarded.getState();
+
+    root.innerHTML = `
+      <div class="app-header">
+        <h1 class="page-title">인앱광고</h1>
+        ${
+          !interstitialState.isSupported
+            ? '<p class="page-subtitle">이 환경에서는 인앱 광고를 사용할 수 없어요.</p>'
+            : ""
+        }
+      </div>
+
+      <div class="iaa-section-list">
+        <div class="iaa-section">
+          <div class="iaa-section-row">
+            <div class="iaa-section-info">
+              <h2 class="iaa-section-title">전면형 광고</h2>
+              <p class="iaa-section-desc">화면 전체에 표시되는 광고</p>
+            </div>
+            <button
+              type="button"
+              class="iaa-section-button"
+              data-action="show-interstitial"
+              ${interstitialState.isAdLoaded ? "" : "disabled"}
+            >
+              ${interstitialState.isAdLoaded ? "보기" : "로딩 중"}
+            </button>
+          </div>
+        </div>
+
+        <div class="iaa-section">
+          <div class="iaa-section-row">
+            <div class="iaa-section-info">
+              <h2 class="iaa-section-title">보상형 광고</h2>
+              <p class="iaa-section-desc">시청 완료 시 보상을 받는 광고</p>
+            </div>
+            <button
+              type="button"
+              class="iaa-section-button"
+              data-action="show-rewarded"
+              ${rewardedState.isAdLoaded ? "" : "disabled"}
+            >
+              ${rewardedState.isAdLoaded ? "보기" : "로딩 중"}
+            </button>
+          </div>
+          ${
+            rewardedState.lastReward
+              ? `<p class="iaa-reward-message">보상 획득: ${rewardedState.lastReward.unitType} ${rewardedState.lastReward.unitAmount}개</p>`
+              : ""
+          }
+        </div>
+      </div>
+
+      <button type="button" class="text-button iaa-back-btn" data-action="back">← 홈으로</button>
+    `;
+
+    root
+      .querySelector('[data-action="show-interstitial"]')
+      ?.addEventListener("click", () => interstitial.showAd());
+    root
+      .querySelector('[data-action="show-rewarded"]')
+      ?.addEventListener("click", () => rewarded.showAd());
+    root.querySelector('[data-action="back"]')?.addEventListener("click", onBack);
+  }
+
+  interstitial.subscribe(render);
+  rewarded.subscribe(render);
+  render();
+}